Fix live games
[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 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 // oninput listener, required for smartphones:
63 setCurPrefix: function(e) {
64 this.curPrefix = e.target.value;
65 },
66 getLink: function(variant) {
67 return "/#/variants/" + variant.name;
68 },
69 getVclasses: function(varray, idx) {
70 const idxMod2 = idx % 2;
71 return {
72 'col-md-offset-1': idxMod2 == 0,
73 'col-lg-offset-2': idxMod2 == 0,
74 'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
75 };
76 },
77 }
78 };
79 </script>
80
81 <style lang="sass" scoped>
82 a.leftLink
83 margin-right: 15px
84
85 a#mainLink
86 display: block
87 margin: 10px auto
88 text-align: center
89 font-size: 1.3em
90 </style>