Adjustments
[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
19 li(v-for="v of variantGroup.get(g)")
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: {
9e3f662f
BA
62 // oninput listener, required for smartphones:
63 setCurPrefix: function(e) {
64 this.curPrefix = e.target.value;
65 },
eaa5ad3e
BA
66 getLink: function(variant) {
67 return "/#/variants/" + variant.name;
09d37571
BA
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 },
6808d7a1 77 }
5b020e73
BA
78};
79</script>
80
41c80bb6 81<style lang="sass" scoped>
eaa5ad3e
BA
82a.leftLink
83 margin-right: 15px
84
737a5daf 85a#mainLink
bd76b456 86 display: block
737a5daf
BA
87 margin: 10px auto
88 text-align: center
89 font-size: 1.3em
5b020e73 90</style>