Several small improvements + integrate options + first working draft of Cwda
[vchess.git] / 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>