Fix promotion bug on smartphones
[vchess.git] / public / javascripts / index.js
CommitLineData
92342261 1// Javascript for index page: mostly counters updating
772d7245 2new Vue({
1d184b4c
BA
3 el: "#indexPage",
4 data: {
5 counts: {},
6 curPrefix: "",
772d7245 7 conn: null,
1d184b4c
BA
8 },
9 computed: {
10 sortedCounts: function () {
11 const variantsCounts = variantArray.map( v => {
12 return {
13 name: v.name,
14 desc: v.description,
15 count: this.counts[v.name] || 0,
16 };
17 });
18 return variantsCounts.sort((a,b) => {
19 if (a.count != b.count)
20 return b.count - a.count;
21 // Else, alphabetic ordering
22 return a.name.localeCompare(b.name);
23 });
24 },
25 },
772d7245
BA
26 created: function() {
27 const url = socketUrl;
b019d603 28 const sid = getRandString();
772d7245
BA
29 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
30 const socketMessageListener = msg => {
31 const data = JSON.parse(msg.data);
32 if (data.code == "counts")
33 this.counts = data.counts;
34 else if (data.code == "increase")
35 this.counts[data.vname]++;
36 else if (data.code == "decrease")
37 this.counts[data.vname]--;
38 };
39 const socketCloseListener = () => {
772d7245
BA
40 this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
41 this.conn.addEventListener('message', socketMessageListener);
42 this.conn.addEventListener('close', socketCloseListener);
43 };
44 this.conn.onmessage = socketMessageListener;
45 this.conn.onclose = socketCloseListener;
46 },
1d184b4c
BA
47 mounted: function() {
48 // Handle key stroke
49 document.onkeydown = event => {
50 // Is it Back or Esc? If yes, apply action on current word
51 if (event.keyCode == 8) //Back
52 {
53 event.preventDefault();
54 this.curPrefix = this.curPrefix.slice(0,-1);
55 }
56 else if (event.keyCode == 27) //Esc
57 {
58 event.preventDefault();
59 this.curPrefix = "";
60 }
61 // Is it alphanumeric? If yes, stack it
62 else if (_.range(48,58).includes(event.keyCode)
63 || _.range(65,91).includes(event.keyCode)
64 || _.range(97,123).includes(event.keyCode))
65 {
66 let newChar = String.fromCharCode(event.keyCode);
67 this.curPrefix += this.curPrefix.length==0
68 ? newChar.toUpperCase()
69 : newChar.toLowerCase();
70 }
71 // ...ignore everything else
72 };
b019d603
BA
73 // Show welcome dialog box if "first visit"
74 const visited = getCookie("visited");
75 if (!visited || visited !== "1")
2c99dab4
BA
76 document.getElementById("modal-b4welcome").checked = true;
77 },
78 methods: {
79 showWelcomeMsg: function() {
80 document.getElementById("modal-b4welcome").checked = false;
b019d603 81 document.getElementById("modal-welcome").checked = true;
2c99dab4 82 },
92342261
BA
83 markAsVisited: function() {
84 setCookie('visited', '1');
85 document.getElementById('modal-welcome').checked = false;
86 },
1d184b4c
BA
87 },
88});