From: Benjamin Auder Date: Fri, 16 Nov 2018 14:54:11 +0000 (+0100) Subject: Add state indicators for game seek/playing X-Git-Url: https://git.auder.net/doc/html/css/img/assets/current/git-logo.png?a=commitdiff_plain;h=186516b8eb00e193102ba43cff95de0a55c60dcb;p=vchess.git Add state indicators for game seek/playing --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 34b3633a..f5db3378 100644 --- 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 7e99fa38..786d54e3 100644 --- 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