Generalize pawn movements: cleaner and smaller code
[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
910d631b
BA
5 input#prefixFilter(
6 v-model="curPrefix"
9e3f662f 7 @input="setCurPrefix($event)"
910d631b
BA
8 :placeholder="st.tr['Prefix?']"
9 )
7aa548e7
BA
10 .variant.col-sm-12.col-md-5.col-lg-4(
11 v-for="(v,idx) in filteredVariants"
09d37571 12 :class="getVclasses(filteredVariants, idx)"
7aa548e7
BA
13 )
14 router-link(:to="getLink(v.name)")
15 h4.boxtitle.text-center {{ v.name }}
16 p.description.text-center {{ st.tr[v.desc] }}
5b020e73
BA
17</template>
18
19<script>
20import { store } from "@/store";
21export default {
cf2343ce 22 name: "my-variants",
5b020e73
BA
23 data: function() {
24 return {
85e5b5c1 25 curPrefix: "",
6808d7a1 26 st: store.state
5b020e73 27 };
85e5b5c1
BA
28 },
29 computed: {
6808d7a1
BA
30 filteredVariants: function() {
31 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
32 c.toUpperCase()
33 );
85e5b5c1 34 const variants = this.st.variants
6808d7a1
BA
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 });
5b020e73 47 return variants;
6808d7a1 48 }
85e5b5c1 49 },
5b020e73 50 methods: {
9e3f662f
BA
51 // oninput listener, required for smartphones:
52 setCurPrefix: function(e) {
53 this.curPrefix = e.target.value;
54 },
5b020e73
BA
55 getLink: function(vname) {
56 return "/variants/" + vname;
09d37571
BA
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 },
6808d7a1 66 }
5b020e73
BA
67};
68</script>
69
41c80bb6 70<style lang="sass" scoped>
bd76b456
BA
71input#prefixFilter
72 display: block
73 margin: 0 auto
910d631b 74
fb54f098
BA
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
09d37571
BA
90
91.last-noneighb
92 margin: 0 auto
5b020e73 93</style>