Improve buttons styles on game page

diff --git a/TODO b/TODO
index 2bdf677..bcda2e8 100644 (file)
--- a/TODO
+++ b/TODO
@@ -2,4 +2,3 @@ For animation, moves should contains "moving" and "fading" maybe...
 (But it's really just for Magnetic chess)
 setInterval "CRON" task in sockets.js to check connected clients
 (every 1hour maybe, or more)
 (But it's really just for Magnetic chess)
 setInterval "CRON" task in sockets.js to check connected clients
 (every 1hour maybe, or more)

-Button to show all pieces that can move (next to expert mode; change icons)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index a78f323..1178b64 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -249,20 +249,12 @@ Vue.component('my-game', {
                                                        style: { "margin-left": "30px" },
                                                        on: { click: e => this.undo() },
                                                        attrs: { "aria-label": 'Undo' },
                                                        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' },
                                                },
                                                [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")]),
                                        ]
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
                                        ]


@@ -349,7 +341,7 @@ Vue.component('my-game', {
                                        }),
                                h('div',
                                        {
                                        }),
                                h('div',
                                        {

-                                               attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+                                               attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },

                                        },
                                        [
                                                h('div',
                                        },
                                        [
                                                h('div',


@@ -384,7 +376,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
                                }),
                        h('div',
                                {

-                                       attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },

                                },
                                [
                                        h('div',
                                },
                                [
                                        h('div',


@@ -516,7 +508,6 @@ Vue.component('my-game', {
                        else if (localStorage.getItem("newgame") === variant)
                        {
                                // New game request has been cancelled on disconnect
                        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");
                        }
                };
                                this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
                        }
                };


@@ -643,21 +634,6 @@ Vue.component('my-game', {
                        }
                        return eogMessage;
                },
                        }
                        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);
                setStorage: function() {
                        localStorage.setItem("myid", this.myid);
                        localStorage.setItem("variant", variant);


@@ -680,7 +656,13 @@ Vue.component('my-game', {
                        delete localStorage["fen"];
                        delete localStorage["moves"];
                },
                        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)
                        if (this.mode == "human")
                                return; //no newgame while playing
                        if (this.seek)


@@ -691,15 +673,31 @@ Vue.component('my-game', {
                        else
                                this.newGame("human");
                },
                        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");
                },
                        if (this.mode == "human")
                                return; //no newgame while playing
                        this.newGame("computer");
                },

+               toggleExpertMode: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       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");
+               },

                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
                        const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                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");
                        if (mode=="human" && !oppId)
                        {
                                const storageVariant = localStorage.getItem("variant");


@@ -728,6 +726,7 @@ Vue.component('my-game', {
                        // random enough (TODO: function)
                        this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
                        this.vr = new VariantRules(fen, moves || []);
                        // random enough (TODO: function)
                        this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
                        this.vr = new VariantRules(fen, moves || []);

+                       this.score = "*";

                        this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
                        this.incheck = []; //in case of
                        this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
                        this.incheck = []; //in case of