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, |
1d184b4c BA |
8 | }, |
9 | computed: { | |
10 | sortedCounts: function () { | |
b6487fb9 | 11 | // TODO: priorité aux parties corr où c'est à nous de jouer ! |
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 BA |
32 | created: function() { |
33 | const url = socketUrl; | |
b019d603 | 34 | const sid = getRandString(); |
772d7245 BA |
35 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
36 | const socketMessageListener = msg => { | |
37 | const data = JSON.parse(msg.data); | |
38 | if (data.code == "counts") | |
39 | this.counts = data.counts; | |
40 | else if (data.code == "increase") | |
41 | this.counts[data.vname]++; | |
42 | else if (data.code == "decrease") | |
43 | this.counts[data.vname]--; | |
44 | }; | |
45 | const socketCloseListener = () => { | |
772d7245 BA |
46 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
47 | this.conn.addEventListener('message', socketMessageListener); | |
48 | this.conn.addEventListener('close', socketCloseListener); | |
49 | }; | |
50 | this.conn.onmessage = socketMessageListener; | |
51 | this.conn.onclose = socketCloseListener; | |
26b8e4f7 BA |
52 | |
53 | // TODO: | |
54 | // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange | |
55 | // ==> background orange si à moi de jouer par corr (sur main index) | |
56 | // (helper: static fonction "GetNextCol()" dans base_rules.js) | |
772d7245 | 57 | }, |
1d184b4c | 58 | }); |