Index page almost OK. Now work on variant page (main hall...)

[vchess.git] / public / javascripts / index.js

diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index a05ad47..6859e8b 100644 (file)
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -1,28 +1,19 @@
-const url = socketUrl;
-// random enough (TODO: function)
-const sid = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
-const conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
-
-conn.onmessage = msg => {
-       const data = JSON.parse(msg.data);
-       if (data.code == "counts")
-               //V.counts = data.counts;
-               Vue.set(V, "counts", data.counts);
-       else if (data.code == "increase")
-               V.counts[data.vname]++;
-       else if (data.code == "decrease")
-               V.counts[data.vname]--;
-}
-
-let V = new Vue({
+// Javascript for index page: mostly counters updating
+new Vue({
        el: "#indexPage",
        data: {
                counts: {},
                curPrefix: "",
+               conn: null,
        },
        computed: {
                sortedCounts: function () {
-                       const variantsCounts = variantArray.map( v => {
+                       // TODO: priorité aux parties corr où c'est à nous de jouer !
+                       const variantsCounts = variantArray
+                       .filter( v => {
+                               return v.name.startsWith(this.curPrefix);
+                       })
+                       .map( v => {
                                return {
                                        name: v.name,
                                        desc: v.description,
@@ -37,31 +28,57 @@ let V = new Vue({
                        });
                },
        },
-       mounted: function() {
-               // Handle key stroke
-               document.onkeydown = event => {
-                       // Is it Back or Esc? If yes, apply action on current word
-                       if (event.keyCode == 8) //Back
-                       {
-                               event.preventDefault();
-                               this.curPrefix = this.curPrefix.slice(0,-1);
-                       }
-                       else if (event.keyCode == 27) //Esc
-                       {
-                               event.preventDefault();
-                               this.curPrefix = "";
-                       }
-                       // Is it alphanumeric? If yes, stack it
-                       else if (_.range(48,58).includes(event.keyCode)
-                               || _.range(65,91).includes(event.keyCode)
-                               || _.range(97,123).includes(event.keyCode))
-                       {
-                               let newChar = String.fromCharCode(event.keyCode);
-                               this.curPrefix += this.curPrefix.length==0
-                                       ? newChar.toUpperCase()
-                                       : newChar.toLowerCase();
-                       }
-                       // ...ignore everything else
+       created: function() {
+               const url = socketUrl;
+               const sid = getRandString();
+               this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
+               const socketMessageListener = msg => {
+                       const data = JSON.parse(msg.data);
+                       if (data.code == "counts")
+                               this.counts = data.counts;
+                       else if (data.code == "increase")
+                               this.counts[data.vname]++;
+                       else if (data.code == "decrease")
+                               this.counts[data.vname]--;
                };
+               const socketCloseListener = () => {
+                       this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
+                       this.conn.addEventListener('message', socketMessageListener);
+                       this.conn.addEventListener('close', socketCloseListener);
+               };
+               this.conn.onmessage = socketMessageListener;
+               this.conn.onclose = socketCloseListener;
        },
+//     mounted: function() {
+//             // Handle key stroke
+//             document.onkeydown = event => {
+//                     // Is it Back or Esc? If yes, apply action on current word
+//                     if (event.keyCode == 8) //Back
+//                     {
+//                             event.preventDefault();
+//                             this.curPrefix = this.curPrefix.slice(0,-1);
+//                     }
+//                     else if (event.keyCode == 27) //Esc
+//                     {
+//                             event.preventDefault();
+//                             this.curPrefix = "";
+//                     }
+//                     // Is it alphanumeric? If yes, stack it
+//                     else if (_.range(48,58).includes(event.keyCode)
+//                             || _.range(65,91).includes(event.keyCode)
+//                             || _.range(97,123).includes(event.keyCode))
+//                     {
+//                             let newChar = String.fromCharCode(event.keyCode);
+//                             this.curPrefix += this.curPrefix.length==0
+//                                     ? newChar.toUpperCase()
+//                                     : newChar.toLowerCase();
+//                     }
+//                     // ...ignore everything else
+//             };
+//     },
 });
+
+// TODO:
+// si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange
+// ==> background orange si à moi de jouer par corr (sur main index)
+// (fonction "getNextCol()" dans base_rules.js ?)