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