From: Benjamin Auder Date: Mon, 19 Nov 2018 15:28:40 +0000 (+0100) Subject: Add expert mode X-Git-Url: https://git.auder.net/doc/%3C?a=commitdiff_plain;h=3ed62725fe47e395793cf952403d61fc9f347eee;p=vchess.git Add expert mode --- diff --git a/TODO b/TODO index ebfc70e5..314c0c72 100644 --- a/TODO +++ b/TODO @@ -1,2 +1 @@ PGN text is not selectable on desktop computer (understand why?!) -Mode expert: game.js, button on top (with online indicator) diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 829beaad..40035a5f 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -16,6 +16,7 @@ Vue.component('my-game', { seek: false, fenStart: "", incheck: [], + expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false, }; }, render(h) { @@ -96,6 +97,22 @@ Vue.component('my-game', { } ); elementArray.push(turnIndic); + let expertSwitch = h( + 'button', + { + on: { click: this.toggleExpertMode }, + attrs: { "aria-label": 'Toggle expert mode' }, + 'class': { + "tooltip":true, + "topindicator": true, + "indic-right": true, + "expert-switch": true, + "expert-mode": this.expert, + }, + }, + [h('i', { 'class': { "material-icons": true } }, "remove_red_eye")] + ); + elementArray.push(expertSwitch); let choices = h('div', { attrs: { "id": "choices" }, @@ -161,7 +178,7 @@ Vue.component('my-game', { ) ); } - if (hintSquares[ci][cj]) + if (!this.expert && hintSquares[ci][cj]) { elems.push( h( @@ -184,10 +201,10 @@ Vue.component('my-game', { { 'class': { 'board': true, - 'light-square': !highlight && (i+j)%2==0, - 'dark-square': !highlight && (i+j)%2==1, - 'highlight': highlight, - 'incheck': incheckSq[ci][cj], + 'light-square': (i+j)%2==0 && (this.expert || !highlight), + 'dark-square': (i+j)%2==1 && (this.expert || !highlight), + 'highlight': !this.expert && highlight, + 'incheck': !this.expert && incheckSq[ci][cj], }, attrs: { id: this.getSquareId({x:ci,y:cj}), @@ -479,6 +496,10 @@ 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) { diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 495f4cab..39fb80bf 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -53,6 +53,12 @@ figure.diagram-container > .diagram .disconnected background-color: red +.expert-switch + padding: 5px 10px + +.expert-mode, button.expert-mode:hover + background-color: #ffcc99 + .white-turn background-color: white