Add state indicators for game seek/playing

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 34b3633..f5db337 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -14,6 +14,7 @@ Vue.component('my-game', {
                        mode: "idle", //human, computer or idle (when not playing)
                        oppid: "", //opponent ID in case of HH game
                        oppConnected: false,
+                       seek: false,
                };
        },
        render(h) {
@@ -26,29 +27,39 @@ Vue.component('my-game', {
                let squareWidth = !!square00
                        ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
                        : 0;
+               const playingHuman = (this.mode == "human");
+               const playingComp = (this.mode == "computer");
                let actionArray = [
                        h('button',
                                {
                                        on: {
                                                click: () => {
-                                                       if (localStorage.getItem("newgame") === variant)
+                                                       if (this.seek)
                                                                delete localStorage["newgame"]; //cancel game seek
                                                        else
                                                        {
                                                                localStorage["newgame"] = variant;
                                                                this.newGame("human");
                                                        }
+                                                       this.seek = !this.seek;
                                                }
                                        },
                                        attrs: { "aria-label": 'New game VS human' },
-                                       'class': { "tooltip":true },
+                                       'class': {
+                                               "tooltip": true,
+                                               "seek": this.seek,
+                                               "playing": playingHuman,
+                                       },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "accessibility")]),
                        h('button',
                                {
                                        on: { click: () => this.newGame("computer") },
                                        attrs: { "aria-label": 'New game VS computer' },
-                                       'class': { "tooltip":true },
+                                       'class': {
+                                               "tooltip":true,
+                                               "playing": playingComp,
+                                       },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "computer")])
                ];
@@ -329,6 +340,7 @@ Vue.component('my-game', {
                        else if (localStorage.getItem("newgame") === variant)
                        {
                                // New game request has been cancelled on disconnect
+                               this.seek = true;
                                this.newGame("human");
                        }
                };
@@ -370,7 +382,9 @@ Vue.component('my-game', {
        methods: {
                endGame: function(message) {
                        this.endofgame = message;
-                       document.getElementById("modal-control").checked = true;
+                       let modalBox = document.getElementById("modal-control");
+                       modalBox.checked = true;
+                       setTimeout(() => { modalBox.checked = false; }, 2000);
                        if (this.mode == "human")
                                this.clearStorage();
                        this.mode = "idle";
@@ -416,7 +430,9 @@ Vue.component('my-game', {
                                } catch (INVALID_STATE_ERR) {
                                        return; //nothing achieved
                                }
-                               document.getElementById("modal-control2").checked = true;
+                               let modalBox = document.getElementById("modal-control2");
+                               modalBox.checked = true;
+                               setTimeout(() => { modalBox.checked = false; }, 2000);
                                return;
                        }
                        this.vr = new VariantRules(fen);
@@ -433,7 +449,8 @@ Vue.component('my-game', {
                                this.oppid = oppId;
                                this.oppConnected = true;
                                this.mycolor = color;
-                               delete localStorage["newgame"]; //in case of
+                               this.seek = false;
+                               delete localStorage["newgame"];
                        }
                        else //against computer
                        {

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 7e99fa3..786d54e 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -7,6 +7,12 @@
   background-color: lightgrey
   font-weight: bold
 
+.playing
+  background-color: #ffcc99
+
+.seek
+  background-color: #cc99ff
+
 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
 figure.diagram-container > .diagram
   display: block