Generalize pawn movements: cleaner and smaller code
[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 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.name }}
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 computed: {
30 filteredVariants: function() {
31 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
32 c.toUpperCase()
33 );
34 const variants = this.st.variants
35 .filter(v => {
36 return v.name.startsWith(capitalizedPrefix);
37 })
38 .map(v => {
39 return {
40 name: v.name,
41 desc: v.description
42 };
43 })
44 .sort((a, b) => {
45 return a.name.localeCompare(b.name);
46 });
47 return variants;
48 }
49 },
50 methods: {
51 // oninput listener, required for smartphones:
52 setCurPrefix: function(e) {
53 this.curPrefix = e.target.value;
54 },
55 getLink: function(vname) {
56 return "/variants/" + vname;
57 },
58 getVclasses: function(varray, idx) {
59 const idxMod2 = idx % 2;
60 return {
61 'col-md-offset-1': idxMod2 == 0,
62 'col-lg-offset-2': idxMod2 == 0,
63 'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
64 };
65 },
66 }
67 };
68 </script>
69
70 <style lang="sass" scoped>
71 input#prefixFilter
72 display: block
73 margin: 0 auto
74
75 .variant
76 box-sizing: border-box
77 border: 1px solid brown
78 background-color: lightyellow
79 &:hover
80 background-color: yellow
81 a
82 color: #663300
83 text-decoration: none
84 .boxtitle
85 font-weight: bold
86 margin-bottom: 0
87 .description
88 @media screen and (max-width: 767px)
89 margin-top: 0
90
91 .last-noneighb
92 margin: 0 auto
93 </style>