Commit | Line | Data |
---|---|---|
92342261 | 1 | // Javascript for index page: mostly counters updating |
772d7245 | 2 | new Vue({ |
1d184b4c BA |
3 | el: "#indexPage", |
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 ! |
d5973790 BA |
12 | const variantsCounts = variantArray |
13 | .filter( v => { | |
14 | return v.name.startsWith(this.curPrefix); | |
15 | }) | |
16 | .map( v => { | |
1d184b4c BA |
17 | return { |
18 | name: v.name, | |
19 | desc: v.description, | |
20 | count: this.counts[v.name] || 0, | |
21 | }; | |
22 | }); | |
23 | return variantsCounts.sort((a,b) => { | |
24 | if (a.count != b.count) | |
25 | return b.count - a.count; | |
26 | // Else, alphabetic ordering | |
27 | return a.name.localeCompare(b.name); | |
28 | }); | |
29 | }, | |
30 | }, | |
772d7245 BA |
31 | created: function() { |
32 | const url = socketUrl; | |
b019d603 | 33 | const sid = getRandString(); |
772d7245 BA |
34 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
35 | const socketMessageListener = msg => { | |
36 | const data = JSON.parse(msg.data); | |
37 | if (data.code == "counts") | |
38 | this.counts = data.counts; | |
39 | else if (data.code == "increase") | |
40 | this.counts[data.vname]++; | |
41 | else if (data.code == "decrease") | |
42 | this.counts[data.vname]--; | |
43 | }; | |
44 | const socketCloseListener = () => { | |
772d7245 BA |
45 | this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); |
46 | this.conn.addEventListener('message', socketMessageListener); | |
47 | this.conn.addEventListener('close', socketCloseListener); | |
48 | }; | |
49 | this.conn.onmessage = socketMessageListener; | |
50 | this.conn.onclose = socketCloseListener; | |
51 | }, | |
1d184b4c BA |
52 | mounted: function() { |
53 | // Handle key stroke | |
54 | document.onkeydown = event => { | |
55 | // Is it Back or Esc? If yes, apply action on current word | |
56 | if (event.keyCode == 8) //Back | |
57 | { | |
58 | event.preventDefault(); | |
59 | this.curPrefix = this.curPrefix.slice(0,-1); | |
60 | } | |
61 | else if (event.keyCode == 27) //Esc | |
62 | { | |
63 | event.preventDefault(); | |
64 | this.curPrefix = ""; | |
65 | } | |
66 | // Is it alphanumeric? If yes, stack it | |
67 | else if (_.range(48,58).includes(event.keyCode) | |
68 | || _.range(65,91).includes(event.keyCode) | |
69 | || _.range(97,123).includes(event.keyCode)) | |
70 | { | |
71 | let newChar = String.fromCharCode(event.keyCode); | |
72 | this.curPrefix += this.curPrefix.length==0 | |
73 | ? newChar.toUpperCase() | |
74 | : newChar.toLowerCase(); | |
75 | } | |
76 | // ...ignore everything else | |
77 | }; | |
78 | }, | |
79 | }); | |
b6487fb9 BA |
80 | |
81 | // TODO: | |
82 | // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange | |
83 | // ==> background orange si à moi de jouer par corr (sur main index) | |
84 | // (fonction "getNextCol()" dans base_rules.js ?) |