dfd3939103a9d22d67e2dfcd09364864c5709f87
[vchess.git] / client / src / views / Home.vue
1 <template lang="pug">
2 div
3 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
4 label(for="prefixFilter") Type first letters...
5 input#prefixFilter(v-model="curPrefix")
6 .variant.col-sm-12.col-md-5.col-lg-4(
7 v-for="(v,idx) in sortedCounts"
8 :class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}"
9 )
10 a(:href="v.name")
11 h4.boxtitle.text-center {{ v.name }}
12 span.count-players / {{ v.count }}
13 p.description.text-center {{ $tr(v.desc) }}
14 </template>
15
16 <script>
17 export default {
18 name: "home",
19 data: function() {
20 return {
21 counts: {},
22 curPrefix: "",
23 };
24 },
25 computed: {
26 sortedCounts: function () {
27 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
28 const variantsCounts = this.$variants
29 .filter( v => {
30 return v.name.startsWith(capitalizedPrefix);
31 })
32 .map( v => {
33 return {
34 name: v.name,
35 desc: v.description,
36 count: this.counts[v.name] || 0,
37 };
38 });
39 return variantsCounts.sort((a,b) => {
40 if (a.count != b.count)
41 return b.count - a.count;
42 // Else, alphabetic ordering
43 return a.name.localeCompare(b.name);
44 });
45 },
46 },
47 created: function() {
48 const socketMessageListener = msg => {
49 const data = JSON.parse(msg.data);
50 if (data.code == "counts")
51 this.counts = data.counts;
52 else if (data.code == "increase")
53 this.counts[data.vid]++;
54 else if (data.code == "decrease")
55 this.counts[data.vid]--;
56 };
57 const socketCloseListener = () => {
58 this.$conn.addEventListener('message', socketMessageListener);
59 this.$conn.addEventListener('close', socketCloseListener);
60 };
61 this.$conn.onmessage = socketMessageListener;
62 this.$conn.onclose = socketCloseListener;
63 // TODO: AJAX call get corr games (all variants)
64 // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
65 // ==> background orange si à moi de jouer par corr (sur main index)
66 // (helper: static fonction "GetNextCol()" dans base_rules.js)
67 },
68 };
69 </script>
70
71 <!-- Add "scoped" attribute to limit CSS to this component only -->
72 <style scoped lang="scss">
73 h3 {
74 margin: 40px 0 0;
75 }
76 ul {
77 list-style-type: none;
78 padding: 0;
79 }
80 li {
81 display: inline-block;
82 margin: 0 10px;
83 }
84 a {
85 color: #42b983;
86 }
87 </style>