Add expert mode

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index e412525..40035a5 100644 (file)
--- 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) {
@@ -27,10 +28,6 @@ Vue.component('my-game', {
                let incheckSq = doubleArray(sizeX, sizeY, false);
                this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
                let elementArray = [];
-               let square00 = document.getElementById("sq-0-0");
-               let squareWidth = !!square00
-                       ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
-                       : 0;
                const playingHuman = (this.mode == "human");
                const playingComp = (this.mode == "computer");
                let actionArray = [
@@ -40,6 +37,7 @@ Vue.component('my-game', {
                                        attrs: { "aria-label": 'New game VS human' },
                                        'class': {
                                                "tooltip": true,
+                                               "bottom": true, //display below
                                                "seek": this.seek,
                                                "playing": playingHuman,
                                        },
@@ -51,6 +49,7 @@ Vue.component('my-game', {
                                        attrs: { "aria-label": 'New game VS computer' },
                                        'class': {
                                                "tooltip":true,
+                                               "bottom": true,
                                                "playing": playingComp,
                                        },
                                },
@@ -58,25 +57,67 @@ Vue.component('my-game', {
                ];
                if (!!this.vr)
                {
+                       const square00 = document.getElementById("sq-0-0");
+                       const squareWidth = !!square00
+                               ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
+                               : 0;
+                       const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
                                        'div',
                                        {
                                                "class": {
+                                                       "topindicator": true,
+                                                       "indic-left": true,
                                                        "connected": this.oppConnected,
                                                        "disconnected": !this.oppConnected,
                                                },
+                                               style: {
+                                                       "width": indicWidth + "px",
+                                                       "height": indicWidth + "px",
+                                               },
                                        }
                                );
                                elementArray.push(connectedIndic);
                        }
+                       let turnIndic = h(
+                               'div',
+                               {
+                                       "class": {
+                                               "topindicator": true,
+                                               "indic-right": true,
+                                               "white-turn": this.vr.turn=="w",
+                                               "black-turn": this.vr.turn=="b",
+                                       },
+                                       style: {
+                                               "width": indicWidth + "px",
+                                               "height": indicWidth + "px",
+                                       },
+                               }
+                       );
+                       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" },
                                        'class': { 'row': true },
                                        style: {
-                                               //"position": "relative",
                                                "display": this.choices.length>0?"block":"none",
                                                "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
                                                "width": (this.choices.length * squareWidth) + "px",
@@ -137,7 +178,7 @@ Vue.component('my-game', {
                                                                        )
                                                                );
                                                        }
-                                                       if (hintSquares[ci][cj])
+                                                       if (!this.expert && hintSquares[ci][cj])
                                                        {
                                                                elems.push(
                                                                        h(
@@ -160,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}),
@@ -180,7 +221,10 @@ Vue.component('my-game', {
                                        {
                                                on: { click: this.resign },
                                                attrs: { "aria-label": 'Resign' },
-                                               'class': { "tooltip":true },
+                                               'class': {
+                                                       "tooltip":true,
+                                                       "bottom": true,
+                                               },
                                        },
                                        [h('i', { 'class': { "material-icons": true } }, "flag")])
                        );
@@ -452,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)
                        {