Fix Football
[vchess.git] / client / src / views / VariantList.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 input#prefixFilter(
6 v-model="curPrefix"
7 @input="setCurPrefix($event)"
8 :placeholder="st.tr['Prefix?']"
9 )
10 .variant.col-sm-12.col-md-5.col-lg-4(
11 v-for="(v,idx) in filteredVariants"
12 :class="getVclasses(filteredVariants, idx)"
13 )
14 router-link(:to="getLink(v.name)")
15 h4.boxtitle.text-center {{ v.display }}
16 p.description.text-center {{ st.tr[v.desc] }}
17 </template>
18
19 <script>
20 import { store } from "@/store";
21 export default {
22 name: "my-variants",
23 data: function() {
24 return {
25 curPrefix: "",
26 st: store.state
27 };
28 },
29 mounted: function() {
30 document.getElementById("prefixFilter").focus();
31 },
32 computed: {
33 filteredVariants: function() {
34 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
35 c.toUpperCase()
36 );
37 const variants = this.st.variants
38 .filter(v => {
39 return v.display.startsWith(capitalizedPrefix);
40 })
41 .map(v => {
42 return {
43 name: v.name,
44 desc: v.description,
45 display: v.display
46 };
47 })
48 .sort((a, b) => {
49 return a.display.localeCompare(b.display);
50 });
51 return variants;
52 }
53 },
54 methods: {
55 // oninput listener, required for smartphones:
56 setCurPrefix: function(e) {
57 this.curPrefix = e.target.value;
58 },
59 getLink: function(vname) {
60 return "/variants/" + vname;
61 },
62 getVclasses: function(varray, idx) {
63 const idxMod2 = idx % 2;
64 return {
65 'col-md-offset-1': idxMod2 == 0,
66 'col-lg-offset-2': idxMod2 == 0,
67 'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
68 };
69 },
70 }
71 };
72 </script>
73
74 <style lang="sass" scoped>
75 input#prefixFilter
76 display: block
77 margin: 0 auto
78
79 .variant
80 box-sizing: border-box
81 border: 1px solid brown
82 background-color: lightyellow
83 &:hover
84 background-color: yellow
85 a
86 color: #663300
87 text-decoration: none
88 .boxtitle
89 font-weight: bold
90 margin-bottom: 0
91 .description
92 @media screen and (max-width: 767px)
93 margin-top: 0
94
95 .last-noneighb
96 margin: 0 auto
97 </style>