Saving state (draft, not working)

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 7b238f5..021fa97 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -17,8 +17,10 @@ Vue.component('my-game', {
                        fenStart: "",
                        incheck: [],
                        pgnTxt: "",
-                       expert: (getCookie("expert") === "1" ? true : false),
-                       gameId: "", //used to limit computer moves' time
+                       hints: (getCookie("hints") === "1" ? true : false),
+                       color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+                       // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+                       sound: getCookie("sound", "2"),
                };
        },
        render(h) {
@@ -87,7 +89,10 @@ Vue.component('my-game', {
                        const squareWidth = !!square00
                                ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
                                : 0;
-                       const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
+                       const settingsBtnElt = document.getElementById("settingsBtn");
+                       const indicWidth = !!settingsBtnElt //-2 for border:
+                               ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
+                               : 37; //TODO: always 37?
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
@@ -123,23 +128,24 @@ Vue.component('my-game', {
                                }
                        );
                        elementArray.push(turnIndic);
-                       let expertSwitch = h(
+                       let settingsBtn = h(
                                'button',
                                {
-                                       on: { click: this.toggleExpertMode },
-                                       attrs: { "aria-label": 'Toggle expert mode' },
+                                       on: { click: this.showSettings },
+                                       attrs: {
+                                               "aria-label": 'Settings',
+                                               "id": "settingsBtn",
+                                       },
                                        'class': {
-                                               "tooltip":true,
+                                               "tooltip": true,
                                                "topindicator": true,
                                                "indic-right": true,
-                                               "expert-switch": true,
-                                               "expert-mode": this.expert,
-                                               "small": smallScreen,
+                                               "settings-btn": true,
                                        },
                                },
-                               [h('i', { 'class': { "material-icons": true } }, "visibility_off")]
+                               [h('i', { 'class': { "material-icons": true } }, "settings")]
                        );
-                       elementArray.push(expertSwitch);
+                       elementArray.push(settingsBtn);
                        let choices = h('div',
                                {
                                        attrs: { "id": "choices" },
@@ -211,7 +217,7 @@ Vue.component('my-game', {
                                                                        )
                                                                );
                                                        }
-                                                       if (!this.expert && hintSquares[ci][cj])
+                                                       if (this.hints && hintSquares[ci][cj])
                                                        {
                                                                elems.push(
                                                                        h(
@@ -228,7 +234,7 @@ Vue.component('my-game', {
                                                                );
                                                        }
                                                        const lm = this.vr.lastMove;
-                                                       const showLight = !this.expert &&
+                                                       const showLight = this.hints &&
                                                                (this.mode!="idle" || this.cursor==this.vr.moves.length);
                                                        return h(
                                                                'div',
@@ -238,6 +244,7 @@ Vue.component('my-game', {
                                                                                ['board'+sizeY]: true,
                                                                                'light-square': (i+j)%2==0,
                                                                                'dark-square': (i+j)%2==1,
+                                                                               [this.color]: true,
                                                                                'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
                                                                                'incheck': showLight && incheckSq[ci][cj],
                                                                        },
@@ -428,6 +435,7 @@ Vue.component('my-game', {
                        ];
                        elementArray = elementArray.concat(modalEog);
                }
+               // TODO: next 3 modals in (pug) view directly?!
                const modalNewgame = [
                        h('input',
                                {
@@ -534,6 +542,60 @@ Vue.component('my-game', {
                        )
                ];
                elementArray = elementArray.concat(modalFenEdit);
+               const modalSettings = [
+                       h('input',
+                               {
+                                       attrs: { "id": "modal-settings", type: "checkbox" },
+                                       "class": { "modal": true },
+                               }),
+                       h('div',
+                               {
+                                       attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+                               },
+                               [
+                                       h('div',
+                                               {
+                                                       "class": { "card": true, "smallpad": true },
+                                               },
+                                               [
+                                                       h('label',
+                                                               {
+                                                                       attrs: { "id": "close-settings", "for": "modal-settings" },
+                                                                       "class": { "modal-close": true },
+                                                               }
+                                                       ),
+                                                       h('h3',
+                                                               {
+                                                                       "class": { "section": true },
+                                                                       domProps: { innerHTML: "Preferences" },
+                                                               }
+                                                       ),
+                                                       // https://minicss.org/docs#forms-and-input
+                                                       h('input',
+                                                               {
+                                                                       attrs: {
+                                                                               "id": "setHints",
+                                                                               type: "checkbox",
+                                                                               checked: this.hints,
+                                                                       },
+                                                               }
+                                                       ),
+                                                       h('label',
+                                                               {
+                                                                       attrs: {
+                                                                               for: "setHints",
+                                                                       },
+                                                                       domProps: { innerHTML: "Show hints?" },
+                                                               },
+                                                       ),
+                                                       h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
+                                                       h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+                                               ]
+                                       )
+                               ]
+                       )
+               ];
+               elementArray = elementArray.concat(modalSettings);
                const actions = h('div',
                        {
                                attrs: { "id": "actions" },
@@ -787,6 +849,14 @@ Vue.component('my-game', {
                        elt.style.visibility = "hidden";
                        setTimeout(() => { elt.style.visibility="visible"; }, 100);
                },
+               showSettings: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-settings").checked = true;
+               },
+               toggleHints: function() {
+                       this.hints = !this.hints;
+                       setCookie("hints", this.hints ? "1" : "0");
+               },
                clickGameSeek: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human")
@@ -810,11 +880,6 @@ Vue.component('my-game', {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-fenedit").checked = true;
                },
-               toggleExpertMode: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       this.expert = !this.expert;
-                       setCookie("expert", this.expert ? "1" : "0");
-               },
                resign: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human" && this.oppConnected)
@@ -855,7 +920,6 @@ Vue.component('my-game', {
                                }
                                return;
                        }
-                       this.gameId = getRandString();
                        this.vr = new VariantRules(fen, moves || []);
                        this.score = "*";
                        this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
@@ -895,17 +959,6 @@ Vue.component('my-game', {
                },
                playComputerMove: function() {
                        const timeStart = Date.now();
-                       // We use moves' count to know if search finished:
-                       const nbMoves = this.vr.moves.length;
-                       const gameId = this.gameId; //to know if game was reset before timer end
-                       setTimeout(
-                               () => {
-                                       if (gameId != this.gameId)
-                                               return; //game stopped
-                                       const L = this.vr.moves.length;
-                                       if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
-                                               this.vr.shouldReturn = true;
-                               }, 5000);
                        const compMove = this.vr.getComputerMove();
                        // (first move) HACK: avoid selecting elements before they appear on page:
                        const delay = Math.max(500-(Date.now()-timeStart), 0);