Simplified underCheck / getCheckSquares logic. Debugging Berolina
[vchess.git] / public / javascripts / components / game.js
index e4b9674..c14130b 100644 (file)
@@ -24,7 +24,7 @@ Vue.component('my-game', {
                        incheck: [],
                        pgnTxt: "",
                        hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
-                       color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo
+                       bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
                        // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
                        sound: parseInt(localStorage["sound"] || "2"),
                        // Web worker to play computer moves without freezing interface:
@@ -52,7 +52,7 @@ Vue.component('my-game', {
                        h('button',
                        {
                                on: { click: this.clickGameSeek },
-                               attrs: { "aria-label": translations['New online game'] },
+                               attrs: { "aria-label": translations['New live game'] },
                                'class': {
                                        "tooltip": true,
                                        "play": true,
@@ -63,7 +63,7 @@ Vue.component('my-game', {
                        },
                        [h('i', { 'class': { "material-icons": true } }, "accessibility")])
                );
-               if (["idle","chat","computer"].includes(this.mode))
+               if (variant!="Dark" && ["idle","chat","computer"].includes(this.mode))
                {
                        actionArray.push(
                                h('button',
@@ -80,7 +80,7 @@ Vue.component('my-game', {
                                [h('i', { 'class': { "material-icons": true } }, "computer")])
                        );
                }
-               if (["idle","chat","friend"].includes(this.mode))
+               if (variant!="Dark" && ["idle","chat","friend"].includes(this.mode))
                {
                        actionArray.push(
                                h('button',
@@ -276,7 +276,7 @@ Vue.component('my-game', {
                        );
                        // Create board element (+ reserves if needed by variant or mode)
                        const lm = this.vr.lastMove;
-                       const showLight = this.hints &&
+                       const showLight = this.hints && variant!="Dark" &&
                                (!["idle","chat"].includes(this.mode) || this.cursor==this.vr.moves.length);
                        const gameDiv = h('div',
                                {
@@ -298,7 +298,8 @@ Vue.component('my-game', {
                                                _.range(sizeY).map(j => {
                                                        let cj = (this.mycolor=='w' ? j : sizeY-j-1);
                                                        let elems = [];
-                                                       if (this.vr.board[ci][cj] != VariantRules.EMPTY)
+                                                       if (this.vr.board[ci][cj] != VariantRules.EMPTY && (variant!="Dark"
+                                                               || this.score!="*" || this.vr.enlightened[this.mycolor][ci][cj]))
                                                        {
                                                                elems.push(
                                                                        h(
@@ -341,7 +342,9 @@ Vue.component('my-game', {
                                                                                ['board'+sizeY]: true,
                                                                                'light-square': (i+j)%2==0,
                                                                                'dark-square': (i+j)%2==1,
-                                                                               [this.color]: true,
+                                                                               [this.bcolor]: true,
+                                                                               'in-shadow': variant=="Dark" && this.score=="*"
+                                                                                       && !this.vr.enlightened[this.mycolor][ci][cj],
                                                                                'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
                                                                                'incheck': showLight && incheckSq[ci][cj],
                                                                        },
@@ -415,7 +418,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
-                                                       attrs: { "aria-label": translations['Flip'] },
+                                                       attrs: { "aria-label": translations['Flip board'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -568,7 +571,7 @@ Vue.component('my-game', {
                                                                {
                                                                        attrs: { "id": "titleFenedit" },
                                                                        "class": { "section": true },
-                                                                       domProps: { innerHTML: translations["Position + flags (FEN):"] },
+                                                                       domProps: { innerHTML: translations["Game state (FEN):"] },
                                                                }
                                                        ),
                                                        h('input',
@@ -692,7 +695,7 @@ Vue.component('my-game', {
                                                                        h("select",
                                                                                {
                                                                                        attrs: { "id": "selectColor" },
-                                                                                       on: { "change": this.setColor },
+                                                                                       on: { "change": this.setBoardColor },
                                                                                },
                                                                                [
                                                                                        h("option",
@@ -919,24 +922,27 @@ Vue.component('my-game', {
                                        )
                                );
                        }
-                       // Show current FEN
-                       elementArray.push(
-                               h('div',
-                                       {
-                                               attrs: { id: "fen-div" },
-                                               "class": { "section-content": true },
-                                       },
-                                       [
-                                               h('p',
-                                                       {
-                                                               attrs: { id: "fen-string" },
-                                                               domProps: { innerHTML: this.vr.getBaseFen() },
-                                                               "class": { "text-center": true },
-                                                       }
-                                               )
-                                       ]
-                               )
-                       );
+                       if (variant != "Dark" || this.score!="*")
+                       {
+                               // Show current FEN
+                               elementArray.push(
+                                       h('div',
+                                               {
+                                                       attrs: { id: "fen-div" },
+                                                       "class": { "section-content": true },
+                                               },
+                                               [
+                                                       h('p',
+                                                               {
+                                                                       attrs: { id: "fen-string" },
+                                                                       domProps: { innerHTML: this.vr.getBaseFen() },
+                                                                       "class": { "text-center": true },
+                                                               }
+                                                       )
+                                               ]
+                                       )
+                               );
+                       }
                }
                return h(
                        'div',
@@ -1008,14 +1014,15 @@ Vue.component('my-game', {
                                        // We opened another tab on the same game
                                        this.mode = "idle";
                                        this.vr = null;
-                                       alert("Already playing a game in this variant on another tab!");
+                                       alert(translations[
+                                               "Already playing a game in this variant on another tab!"]);
                                        break;
                                case "newgame": //opponent found
                                        // oppid: opponent socket ID
                                        this.newGame("human", data.fen, data.color, data.oppid);
                                        break;
                                case "newmove": //..he played!
-                                       this.play(data.move, "animate");
+                                       this.play(data.move, (variant!="Dark" ? "animate" : null));
                                        break;
                                case "pong": //received if we sent a ping (game still alive on our side)
                                        if (this.gameId != data.gameId)
@@ -1210,6 +1217,7 @@ Vue.component('my-game', {
                        delete localStorage[prefix+"score"];
                },
                // HACK because mini-css tooltips are persistent after click...
+               // NOTE: seems to work only in chrome/chromium. TODO...
                getRidOfTooltip: function(elt) {
                        elt.style.visibility = "hidden";
                        setTimeout(() => { elt.style.visibility="visible"; }, 100);
@@ -1231,9 +1239,9 @@ Vue.component('my-game', {
                        this.hints = !this.hints;
                        localStorage["hints"] = (this.hints ? "1" : "0");
                },
-               setColor: function(e) {
-                       this.color = e.target.options[e.target.selectedIndex].value;
-                       localStorage["color"] = this.color;
+               setBoardColor: function(e) {
+                       this.bcolor = e.target.options[e.target.selectedIndex].value;
+                       localStorage["bcolor"] = this.bcolor;
                },
                setSound: function(e) {
                        this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
@@ -1272,13 +1280,16 @@ Vue.component('my-game', {
                        this.endGame(this.mycolor=="w"?"0-1":"1-0");
                },
                newGame: function(mode, fenInit, color, oppId) {
-                       let fen = fenInit || VariantRules.GenRandInitFen();
+                       const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        if (mode=="human" && !oppId)
                        {
                                const storageVariant = localStorage.getItem("variant");
                                if (!!storageVariant && storageVariant !== variant)
-                                       return alert("Finish your " + storageVariant + " game first!");
+                               {
+                                       return alert(translations["Finish your "] +
+                                                       storageVariant + translations[" game first!"]);
+                               }
                                // Send game request and wait..
                                try {
                                        this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
@@ -1304,8 +1315,8 @@ Vue.component('my-game', {
                                        const score = localStorage.getItem("comp-score");
                                        if (storageVariant !== variant && score == "*")
                                        {
-                                               if (!confirm("Unfinished " + storageVariant +
-                                                       " computer game will be erased"))
+                                               if (!confirm(storageVariant +
+                                                       translations[": unfinished computer game will be erased"]))
                                                {
                                                        return;
                                                }
@@ -1341,7 +1352,9 @@ Vue.component('my-game', {
                                if (this.mycolor != this.vr.turn)
                                        this.playComputerMove();
                        }
-                       //else: against a (IRL) friend or problem solving: nothing more to do
+                       else if (mode == "friend")
+                               this.mycolor = "w"; //convention...
+                       //else: problem solving: nothing more to do
                },
                continueGame: function(mode) {
                        this.mode = mode;
@@ -1352,6 +1365,8 @@ Vue.component('my-game', {
                        const fen = localStorage.getItem(prefix+"fen");
                        const score = localStorage.getItem(prefix+"score"); //set in "endGame()"
                        this.fenStart = localStorage.getItem(prefix+"fenStart");
+                       this.vr = new VariantRules(fen, moves);
+                       this.incheck = this.vr.getCheckSquares(this.vr.turn);
                        if (mode == "human")
                        {
                                this.gameId = localStorage.getItem("gameId");
@@ -1360,14 +1375,10 @@ Vue.component('my-game', {
                                        code:"ping",oppid:this.oppid,gameId:this.gameId}));
                        }
                        else
-                               this.compWorker.postMessage(["init",fen]);
-                       this.vr = new VariantRules(fen, moves);
-                       if (moves.length > 0)
                        {
-                               const lastMove = moves[moves.length-1];
-                               this.vr.undo(lastMove);
-                               this.incheck = this.vr.getCheckSquares(lastMove);
-                               this.vr.play(lastMove, "ingame");
+                               this.compWorker.postMessage(["init",fen]);
+                               if (this.mycolor != this.vr.turn)
+                                       this.playComputerMove();
                        }
                        if (score != "*")
                        {
@@ -1429,6 +1440,7 @@ Vue.component('my-game', {
                                        if (this.vr.canIplay(color,startSquare))
                                                this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
                                }
+                               console.log(this.possibleMoves);
                                // Next line add moving piece just after current image
                                // (required for Crazyhouse reserve)
                                e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
@@ -1539,8 +1551,9 @@ Vue.component('my-game', {
                                // TODO: robustify this...
                                if (this.mode == "human" && !!move.computer)
                                        return;
-                               this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
                                this.vr.play(move, "ingame");
+                               // Is opponent in check?
+                               this.incheck = this.vr.getCheckSquares(this.vr.turn);
                                if (this.sound == 2)
                                        new Audio("/sounds/move.mp3").play().catch(err => {});
                                if (this.mode == "computer")
@@ -1591,15 +1604,7 @@ Vue.component('my-game', {
                                this.vr.undo(lm);
                                if (this.sound == 2)
                                        new Audio("/sounds/undo.mp3").play().catch(err => {});
-                               const lmBefore = this.vr.lastMove;
-                               if (!!lmBefore)
-                               {
-                                       this.vr.undo(lmBefore);
-                                       this.incheck = this.vr.getCheckSquares(lmBefore);
-                                       this.vr.play(lmBefore, "ingame");
-                               }
-                               else
-                                       this.incheck = [];
+                               this.incheck = this.vr.getCheckSquares(this.vr.turn);
                        }
                },
        },