User-friendly vchess presentation on index + some code cleaning

[vchess.git] / public / javascripts / components / game.js

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index a78f323..0720255 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -16,7 +16,7 @@ Vue.component('my-game', {
                        fenStart: "",
                        incheck: [],
                        pgnTxt: "",
-                       expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
+                       expert: getCookie("expert") === "1" ? true : false,
                        gameId: "", //used to limit computer moves' time
                };
        },
@@ -249,20 +249,12 @@ Vue.component('my-game', {
                                                        style: { "margin-left": "30px" },
                                                        on: { click: e => this.undo() },
                                                        attrs: { "aria-label": 'Undo' },
-                                                       'class': {
-                                                               "tooltip":true,
-                                                               "bottom": true,
-                                                       },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
                                        h('button',
                                                {
                                                        on: { click: e => this.play() },
                                                        attrs: { "aria-label": 'Play' },
-                                                       'class': {
-                                                               "tooltip":true,
-                                                               "bottom": true,
-                                                       },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
                                        ]
@@ -349,7 +341,7 @@ Vue.component('my-game', {
                                        }),
                                h('div',
                                        {
-                                               attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+                                               attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
                                        },
                                        [
                                                h('div',
@@ -384,7 +376,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
                                },
                                [
                                        h('div',
@@ -492,10 +484,7 @@ Vue.component('my-game', {
        created: function() {
                const url = socketUrl;
                const continuation = (localStorage.getItem("variant") === variant);
-               this.myid = continuation
-                       ? localStorage.getItem("myid")
-                       // random enough (TODO: function)
-                       : (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+               this.myid = continuation ? localStorage.getItem("myid") : getRandString();
                if (!continuation)
                {
                        // HACK: play a small silent sound to allow "new game" sound later if tab not focused
@@ -516,7 +505,6 @@ Vue.component('my-game', {
                        else if (localStorage.getItem("newgame") === variant)
                        {
                                // New game request has been cancelled on disconnect
-                               this.seek = true;
                                this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
                        }
                };
@@ -643,21 +631,6 @@ Vue.component('my-game', {
                        }
                        return eogMessage;
                },
-               toggleExpertMode: function() {
-                       this.expert = !this.expert;
-                       document.cookie = "expert=" + (this.expert ? "1" : "0");
-               },
-               resign: function() {
-                       if (this.mode == "human" && this.oppConnected)
-                       {
-                               try {
-                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
-                               } catch (INVALID_STATE_ERR) {
-                                       return; //socket is not ready (and not yet reconnected)
-                               }
-                       }
-                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
-               },
                setStorage: function() {
                        localStorage.setItem("myid", this.myid);
                        localStorage.setItem("variant", variant);
@@ -680,26 +653,49 @@ Vue.component('my-game', {
                        delete localStorage["fen"];
                        delete localStorage["moves"];
                },
-               clickGameSeek: function() {
+               // HACK because mini-css tooltips are persistent after click...
+               getRidOfTooltip: function(elt) {
+                       elt.style.visibility = "hidden";
+                       setTimeout(() => { elt.style.visibility="visible"; }, 100);
+               },
+               clickGameSeek: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human")
                                return; //no newgame while playing
                        if (this.seek)
                        {
+                               this.conn.send(JSON.stringify({code:"cancelnewgame"}));
                                delete localStorage["newgame"]; //cancel game seek
                                this.seek = false;
                        }
                        else
                                this.newGame("human");
                },
-               clickComputerGame: function() {
+               clickComputerGame: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human")
                                return; //no newgame while playing
                        this.newGame("computer");
                },
+               toggleExpertMode: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       this.expert = !this.expert;
+                       setCookie("expert", this.expert ? "1" : "0");
+               },
+               resign: function() {
+                       if (this.mode == "human" && this.oppConnected)
+                       {
+                               try {
+                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+                               } catch (INVALID_STATE_ERR) {
+                                       return; //socket is not ready (and not yet reconnected)
+                               }
+                       }
+                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
+               },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
                        const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
-                       this.score = "*";
                        if (mode=="human" && !oppId)
                        {
                                const storageVariant = localStorage.getItem("variant");
@@ -725,9 +721,9 @@ Vue.component('my-game', {
                                }
                                return;
                        }
-                       // random enough (TODO: function)
-                       this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+                       this.gameId = getRandString();
                        this.vr = new VariantRules(fen, moves || []);
+                       this.score = "*";
                        this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
                        this.incheck = []; //in case of