8213a86a9a66ba7236a5f4ec89554a884632b1c9
[vchess.git] / client / src / components / Home.vue
1 <template>
2 <div class="hello">
3
4
5
6
7 //Index: rename into Home
8 .row(v-show="display=='variants'")
9 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 label(for="prefixFilter") Type first letters...
11 input#prefixFilter(v-model="curPrefix")
12 my-variant-summary(v-for="(v,idx) in sortedCounts"
13
14
15
16
17
18 <h1>{{ msg }}</h1>
19 <p>
20 For a guide and recipes on how to configure / customize this project,<br>
21 check out the
22 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
23 </p>
24 <h3>Installed CLI Plugins</h3>
25 <ul>
26 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
27 </ul>
28 <h3>Essential Links</h3>
29 <ul>
30 <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
31 <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
32 <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
33 <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
34 <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
35 </ul>
36 <h3>Ecosystem</h3>
37 <ul>
38 <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
39 <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
40 <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
41 <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
42 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
43 </ul>
44 </div>
45 </template>
46
47 <script>
48 export default {
49 name: "HelloWorld",
50 props: {
51 msg: String
52 },
53 // created: function() {
54 // alert("test");
55 // },
56 methods: {
57
58 },
59 };
60 </script>
61
62
63
64
65
66
67
68
69 // Javascript for index page: mostly counters updating
70 new Vue({
71 el: "#VueElement",
72 data: {
73 counts: {},
74 curPrefix: "",
75 conn: null,
76 display: "variants",
77 },
78 computed: {
79 sortedCounts: function () {
80 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
81 const variantsCounts = variantArray
82 .filter( v => {
83 return v.name.startsWith(capitalizedPrefix);
84 })
85 .map( v => {
86 return {
87 name: v.name,
88 desc: v.description,
89 count: this.counts[v.name] || 0,
90 };
91 });
92 return variantsCounts.sort((a,b) => {
93 if (a.count != b.count)
94 return b.count - a.count;
95 // Else, alphabetic ordering
96 return a.name.localeCompare(b.name);
97 });
98 },
99 },
100 created: function() {
101 this.setDisplay();
102 window.onhashchange = this.setDisplay;
103
104 const url = socketUrl;
105 const sid = getRandString();
106 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
107 const socketMessageListener = msg => {
108 const data = JSON.parse(msg.data);
109 if (data.code == "counts")
110 this.counts = data.counts;
111 else if (data.code == "increase")
112 this.counts[data.vid]++;
113 else if (data.code == "decrease")
114 this.counts[data.vid]--;
115 };
116 const socketCloseListener = () => {
117 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
118 this.conn.addEventListener('message', socketMessageListener);
119 this.conn.addEventListener('close', socketCloseListener);
120 };
121 this.conn.onmessage = socketMessageListener;
122 this.conn.onclose = socketCloseListener;
123
124 // TODO: AJAX call get corr games (all variants)
125 // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
126 // ==> background orange si à moi de jouer par corr (sur main index)
127 // (helper: static fonction "GetNextCol()" dans base_rules.js)
128
129 },
130 methods: {
131 setDisplay: function() {
132 if (!location.hash)
133 location.hash = "#variants"; //default
134 this.display = location.hash.substr(1);
135 },
136
137 },
138 });
139
140
141
142
143
144
145
146
147 <!-- Add "scoped" attribute to limit CSS to this component only -->
148 <style scoped lang="scss">
149 h3 {
150 margin: 40px 0 0;
151 }
152 ul {
153 list-style-type: none;
154 padding: 0;
155 }
156 li {
157 display: inline-block;
158 margin: 0 10px;
159 }
160 a {
161 color: #42b983;
162 }
163 </style>