0e2a2631dde814d5b701ac4c3620de49ed81895b
[vchess.git] / public / javascripts / index.js
1 // Javascript for index page: mostly counters updating
2 new Vue({
3 el: "#VueElement",
4 data: {
5 counts: {},
6 curPrefix: "",
7 conn: null,
8 display: "variants",
9 },
10 computed: {
11 sortedCounts: function () {
12 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase());
13 const variantsCounts = variantArray
14 .filter( v => {
15 return v.name.startsWith(capitalizedPrefix);
16 })
17 .map( v => {
18 return {
19 name: v.name,
20 desc: v.description,
21 count: this.counts[v.name] || 0,
22 };
23 });
24 return variantsCounts.sort((a,b) => {
25 if (a.count != b.count)
26 return b.count - a.count;
27 // Else, alphabetic ordering
28 return a.name.localeCompare(b.name);
29 });
30 },
31 },
32 created: function() {
33 this.setDisplay();
34 window.onhashchange = this.setDisplay;
35
36 const url = socketUrl;
37 const sid = getRandString();
38 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
39 const socketMessageListener = msg => {
40 const data = JSON.parse(msg.data);
41 if (data.code == "counts")
42 this.counts = data.counts;
43 else if (data.code == "increase")
44 this.counts[data.vid]++;
45 else if (data.code == "decrease")
46 this.counts[data.vid]--;
47 };
48 const socketCloseListener = () => {
49 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
50 this.conn.addEventListener('message', socketMessageListener);
51 this.conn.addEventListener('close', socketCloseListener);
52 };
53 this.conn.onmessage = socketMessageListener;
54 this.conn.onclose = socketCloseListener;
55
56 // TODO: AJAX call get corr games (all variants)
57 // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
58 // ==> background orange si à moi de jouer par corr (sur main index)
59 // (helper: static fonction "GetNextCol()" dans base_rules.js)
60
61 },
62 methods: {
63 setDisplay: function() {
64 if (!location.hash)
65 location.hash = "#variants"; //default
66 this.display = location.hash.substr(1);
67 },
68
69 },
70 });