Commit | Line | Data |
---|---|---|
92342261 | 1 | // Javascript for index page: mostly counters updating |
772d7245 | 2 | new Vue({ |
b57dbd12 | 3 | el: "#VueElement", |
1d184b4c BA |
4 | data: { |
5 | counts: {}, | |
6 | curPrefix: "", | |
772d7245 | 7 | conn: null, |
fd08ab2c | 8 | display: "variants", |
1d184b4c BA |
9 | }, |
10 | computed: { | |
11 | sortedCounts: function () { | |
26b8e4f7 | 12 | const capitalizedPrefix = this.curPrefix.replace(/^\w/, c => c.toUpperCase()); |
d5973790 BA |
13 | const variantsCounts = variantArray |
14 | .filter( v => { | |
26b8e4f7 | 15 | return v.name.startsWith(capitalizedPrefix); |
d5973790 BA |
16 | }) |
17 | .map( v => { | |
1d184b4c BA |
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 | }, | |
772d7245 | 32 | created: function() { |
4608eed9 BA |
33 | this.setDisplay(); |
34 | window.onhashchange = this.setDisplay; | |
35 | ||
772d7245 | 36 | const url = socketUrl; |
b019d603 | 37 | const sid = getRandString(); |
772d7245 BA |
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") | |
d44df0b0 | 44 | this.counts[data.vid]++; |
772d7245 | 45 | else if (data.code == "decrease") |
d44df0b0 | 46 | this.counts[data.vid]--; |
772d7245 BA |
47 | }; |
48 | const socketCloseListener = () => { | |
772d7245 BA |
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; | |
26b8e4f7 | 55 | |
fd08ab2c | 56 | // TODO: AJAX call get corr games (all variants) |
26b8e4f7 BA |
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) | |
4608eed9 BA |
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 | ||
772d7245 | 69 | }, |
1d184b4c | 70 | }); |