Attempt to fix preset challenges in main Hall
[vchess.git] / client / src / views / Variants.vue
CommitLineData
5b020e73 1<template lang="pug">
7aa548e7
BA
2main
3 .row
9a3049f3 4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
737a5daf
BA
5 a#mainLink(href="/#/variants/list")
6 | {{ st.tr["View alphabetical variants list"] }}
eaa5ad3e
BA
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
eb2d61de
BA
13 a(href="/#/variants/Chess960") Chess960
14 | {{ st.tr["chess960_v"] }}
eaa5ad3e
BA
15 div(v-for="g of sortedGroups")
16 h3 {{ st.tr["vt" + g] }}
17 p {{ st.tr["vg" + g] }}
18 ul
4313762d 19 li(v-for="v of sortVariants(variantGroup.get(g))")
eaa5ad3e
BA
20 a(:href="getLink(v)") {{ v.display }}
21 | &nbsp&ndash;&nbsp;
a57faf48 22 | {{ st.tr[v.description] }}
5b020e73
BA
23</template>
24
25<script>
26import { store } from "@/store";
eaa5ad3e 27import { ajax } from "@/utils/ajax";
5b020e73 28export default {
cf2343ce 29 name: "my-variants",
5b020e73
BA
30 data: function() {
31 return {
eaa5ad3e
BA
32 st: store.state,
33 variantGroup: []
5b020e73 34 };
85e5b5c1 35 },
eaa5ad3e
BA
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 },
85e5b5c1 54 computed: {
eaa5ad3e 55 sortedGroups: function() {
737a5daf 56 return (
eaa5ad3e 57 Array.from(this.variantGroup.keys()).sort((a, b) => (a < b ? -1 : 1))
6808d7a1 58 );
6808d7a1 59 }
85e5b5c1 60 },
5b020e73 61 methods: {
4313762d
BA
62 sortVariants: function(group) {
63 return group.sort( (v1, v2) => v1.name.localeCompare(v2.name) );
64 },
9e3f662f
BA
65 // oninput listener, required for smartphones:
66 setCurPrefix: function(e) {
67 this.curPrefix = e.target.value;
68 },
eaa5ad3e
BA
69 getLink: function(variant) {
70 return "/#/variants/" + variant.name;
09d37571
BA
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 },
6808d7a1 80 }
5b020e73
BA
81};
82</script>
83
41c80bb6 84<style lang="sass" scoped>
eaa5ad3e
BA
85a.leftLink
86 margin-right: 15px
87
737a5daf 88a#mainLink
bd76b456 89 display: block
737a5daf
BA
90 margin: 10px auto
91 text-align: center
92 font-size: 1.3em
5b020e73 93</style>