client/src/views/Variants.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   5       a#mainLink(href="/#/variants/list")
   6         | {{ st.tr["View alphabetical variants list"] }}
   7       p.text-center
   8         a.leftLink(href="https://www.chessvariants.com/what.html")
   9           | {{ st.tr["What is a chess variant?"] }}
  10         a(href="https://www.chessvariants.com/why.html")
  11           | {{ st.tr["Why play chess variants?"] }}
  12       p
  13         a(href="/#/variants/Chess960") Chess960
  14         | {{ st.tr["chess960_v"] }}
  15       div(v-for="g of sortedGroups")
  16         h3 {{ st.tr["vt" + g] }}
  17         p {{ st.tr["vg" + g] }}
  18         ul
  19           li(v-for="v of sortVariants(variantGroup.get(g))")
  20             a(:href="getLink(v)") {{ v.display }}
  21             | &nbsp&ndash;&nbsp;
  22             | {{ st.tr[v.description] }}
  23 </template>
  24
  25 <script>
  26 import { store } from "@/store";
  27 import { ajax } from "@/utils/ajax";
  28 export default {
  29   name: "my-variants",
  30   data: function() {
  31     return {
  32       st: store.state,
  33       variantGroup: []
  34     };
  35   },
  36   created: function() {
  37     ajax(
  38       "/variants",
  39       "GET",
  40       {
  41         success: (res) => {
  42           this.variantGroup = new Map();
  43           res.variantArray.forEach((v) => {
  44             if (v.groupe >= 0) {
  45               let collection = this.variantGroup.get(v.groupe);
  46               if (!collection) this.variantGroup.set(v.groupe, [v]);
  47               else collection.push(v);
  48             }
  49           });
  50         }
  51       }
  52     );
  53   },
  54   computed: {
  55     sortedGroups: function() {
  56       return (
  57         Array.from(this.variantGroup.keys()).sort((a, b) => (a < b ? -1 : 1))
  58       );
  59     }
  60   },
  61   methods: {
  62     sortVariants: function(group) {
  63       return group.sort( (v1, v2) => v1.name.localeCompare(v2.name) );
  64     },
  65     // oninput listener, required for smartphones:
  66     setCurPrefix: function(e) {
  67       this.curPrefix = e.target.value;
  68     },
  69     getLink: function(variant) {
  70       return "/#/variants/" + variant.name;
  71     },
  72     getVclasses: function(varray, idx) {
  73       const idxMod2 = idx % 2;
  74       return {
  75         'col-md-offset-1': idxMod2 == 0,
  76         'col-lg-offset-2': idxMod2 == 0,
  77         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  78       };
  79     },
  80   }
  81 };
  82 </script>
  83
  84 <style lang="sass" scoped>
  85 a.leftLink
  86   margin-right: 15px
  87
  88 a#mainLink
  89   display: block
  90   margin: 10px auto
  91   text-align: center
  92   font-size: 1.3em
  93 </style>