Prepare some more variants (unfinished)
[vchess.git] / public / javascripts / components / game.js
index e2e908a..b308aa8 100644 (file)
@@ -52,11 +52,10 @@ Vue.component('my-game', {
                        h('button',
                        {
                                on: { click: this.clickGameSeek },
-                               attrs: { "aria-label": 'New online game' },
+                               attrs: { "aria-label": translations['New live game'] },
                                'class': {
                                        "tooltip": true,
                                        "play": true,
-                                       "bottom": true, //display below
                                        "seek": this.seek,
                                        "playing": this.mode == "human",
                                        "spaceright": true,
@@ -64,17 +63,16 @@ 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',
                                {
                                        on: { click: this.clickComputerGame },
-                                       attrs: { "aria-label": 'New game VS computer' },
+                                       attrs: { "aria-label": translations['New game versus computer'] },
                                        'class': {
                                                "tooltip":true,
                                                "play": true,
-                                               "bottom": true,
                                                "playing": this.mode == "computer",
                                                "spaceright": true,
                                        },
@@ -82,17 +80,16 @@ 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',
                                {
                                        on: { click: this.clickFriendGame },
-                                       attrs: { "aria-label": 'New IRL game' },
+                                       attrs: { "aria-label": translations['Analysis mode'] },
                                        'class': {
                                                "tooltip":true,
                                                "play": true,
-                                               "bottom": true,
                                                "playing": this.mode == "friend",
                                                "spaceright": true,
                                        },
@@ -142,7 +139,7 @@ Vue.component('my-game', {
                                        {
                                                on: { click: this.startChat },
                                                attrs: {
-                                                       "aria-label": 'Start chat',
+                                                       "aria-label": translations['Start chat'],
                                                        "id": "chatBtn",
                                                },
                                                'class': {
@@ -163,7 +160,7 @@ Vue.component('my-game', {
                                        {
                                                on: { click: this.clearComputerGame },
                                                attrs: {
-                                                       "aria-label": 'Clear computer game',
+                                                       "aria-label": translations['Clear game versus computer'],
                                                        "id": "clearBtn",
                                                },
                                                'class': {
@@ -197,7 +194,7 @@ Vue.component('my-game', {
                                {
                                        on: { click: this.showSettings },
                                        attrs: {
-                                               "aria-label": 'Settings',
+                                               "aria-label": translations['Settings'],
                                                "id": "settingsBtn",
                                        },
                                        'class': {
@@ -301,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.isEnlightened(ci,cj,this.mycolor)))
                                                        {
                                                                elems.push(
                                                                        h(
@@ -345,6 +343,8 @@ Vue.component('my-game', {
                                                                                'light-square': (i+j)%2==0,
                                                                                'dark-square': (i+j)%2==1,
                                                                                [this.color]: true,
+                                                                               'in-shadow': variant=="Dark" && this.score=="*"
+                                                                                       && !this.vr.isEnlightened(ci,cj,this.mycolor),
                                                                                'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
                                                                                'incheck': showLight && incheckSq[ci][cj],
                                                                        },
@@ -364,11 +364,10 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: this.resign },
-                                                       attrs: { "aria-label": 'Resign' },
+                                                       attrs: { "aria-label": translations['Resign'] },
                                                        'class': {
                                                                "tooltip":true,
                                                                "play": true,
-                                                               "bottom": true,
                                                        },
                                                },
                                                [h('i', { 'class': { "material-icons": true } }, "flag")])
@@ -381,7 +380,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: e => this.undo() },
-                                                       attrs: { "aria-label": 'Undo' },
+                                                       attrs: { "aria-label": translations['Undo'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -391,7 +390,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: e => this.play() },
-                                                       attrs: { "aria-label": 'Play' },
+                                                       attrs: { "aria-label": translations['Play'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -408,7 +407,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: this.undoInGame },
-                                                       attrs: { "aria-label": 'Undo' },
+                                                       attrs: { "aria-label": translations['Undo'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -419,7 +418,7 @@ Vue.component('my-game', {
                                        h('button',
                                                {
                                                        on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
-                                                       attrs: { "aria-label": 'Flip' },
+                                                       attrs: { "aria-label": translations['Flip board'] },
                                                        "class": {
                                                                "play": true,
                                                                "spaceleft": true,
@@ -518,7 +517,12 @@ Vue.component('my-game', {
                                        [
                                                h('div',
                                                        {
-                                                               "class": { "card": true, "smallpad": true },
+                                                               "class": {
+                                                                       "card": true,
+                                                                       "smallpad": true,
+                                                                       "small-modal": true,
+                                                                       "text-center": true,
+                                                               },
                                                        },
                                                        [
                                                                h('label',
@@ -567,7 +571,7 @@ Vue.component('my-game', {
                                                                {
                                                                        attrs: { "id": "titleFenedit" },
                                                                        "class": { "section": true },
-                                                                       domProps: { innerHTML: "Position + flags (FEN):" },
+                                                                       domProps: { innerHTML: translations["Game state (FEN):"] },
                                                                }
                                                        ),
                                                        h('input',
@@ -588,7 +592,7 @@ Vue.component('my-game', {
                                                                                        this.newGame("friend", fen);
                                                                                }
                                                                        },
-                                                                       domProps: { innerHTML: "Ok" },
+                                                                       domProps: { innerHTML: translations["Ok"] },
                                                                }
                                                        ),
                                                        h('button',
@@ -599,7 +603,7 @@ Vue.component('my-game', {
                                                                                                VariantRules.GenRandInitFen();
                                                                                }
                                                                        },
-                                                                       domProps: { innerHTML: "Random" },
+                                                                       domProps: { innerHTML: translations["Random"] },
                                                                }
                                                        ),
                                                ]
@@ -634,7 +638,7 @@ Vue.component('my-game', {
                                                                {
                                                                        attrs: { "id": "settingsTitle" },
                                                                        "class": { "section": true },
-                                                                       domProps: { innerHTML: "Preferences" },
+                                                                       domProps: { innerHTML: translations["Preferences"] },
                                                                }
                                                        ),
                                                        h('fieldset',
@@ -643,7 +647,7 @@ Vue.component('my-game', {
                                                                        h('label',
                                                                                {
                                                                                        attrs: { for: "nameSetter" },
-                                                                                       domProps: { innerHTML: "My name is..." },
+                                                                                       domProps: { innerHTML: translations["My name is..."] },
                                                                                },
                                                                        ),
                                                                        h('input',
@@ -664,7 +668,7 @@ Vue.component('my-game', {
                                                                        h('label',
                                                                                {
                                                                                        attrs: { for: "setHints" },
-                                                                                       domProps: { innerHTML: "Show hints?" },
+                                                                                       domProps: { innerHTML: translations["Show hints?"] },
                                                                                },
                                                                        ),
                                                                        h('input',
@@ -685,7 +689,7 @@ Vue.component('my-game', {
                                                                        h('label',
                                                                                {
                                                                                        attrs: { for: "selectColor" },
-                                                                                       domProps: { innerHTML: "Board colors" },
+                                                                                       domProps: { innerHTML: translations["Board colors"] },
                                                                                },
                                                                        ),
                                                                        h("select",
@@ -698,7 +702,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "lichess",
-                                                                                                               innerHTML: "brown"
+                                                                                                               innerHTML: translations["brown"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="lichess" },
                                                                                                }
@@ -707,7 +711,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "chesscom",
-                                                                                                               innerHTML: "green"
+                                                                                                               innerHTML: translations["green"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="chesscom" },
                                                                                                }
@@ -716,7 +720,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "chesstempo",
-                                                                                                               innerHTML: "blue"
+                                                                                                               innerHTML: translations["blue"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.color=="chesstempo" },
                                                                                                }
@@ -731,7 +735,7 @@ Vue.component('my-game', {
                                                                        h('label',
                                                                                {
                                                                                        attrs: { for: "selectSound" },
-                                                                                       domProps: { innerHTML: "Play sounds?" },
+                                                                                       domProps: { innerHTML: translations["Play sounds?"] },
                                                                                },
                                                                        ),
                                                                        h("select",
@@ -744,7 +748,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "0",
-                                                                                                               innerHTML: "None"
+                                                                                                               innerHTML: translations["None"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.sound==0 },
                                                                                                }
@@ -753,7 +757,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "1",
-                                                                                                               innerHTML: "Newgame"
+                                                                                                               innerHTML: translations["New game"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.sound==1 },
                                                                                                }
@@ -762,7 +766,7 @@ Vue.component('my-game', {
                                                                                                {
                                                                                                        domProps: {
                                                                                                                "value": "2",
-                                                                                                               innerHTML: "All"
+                                                                                                               innerHTML: translations["All"]
                                                                                                        },
                                                                                                        attrs: { "selected": this.sound==2 },
                                                                                                }
@@ -789,7 +793,7 @@ Vue.component('my-game', {
                                {
                                        attrs: { "id": "titleChat" },
                                        "class": { "section": true },
-                                       domProps: { innerHTML: "Chat with " + this.oppName },
+                                       domProps: { innerHTML: translations["Chat with "] + this.oppName },
                                }
                        )
                ];
@@ -813,7 +817,7 @@ Vue.component('my-game', {
                                        attrs: {
                                                "id": "input-chat",
                                                type: "text",
-                                               placeholder: "Type here",
+                                               placeholder: translations["Type here"],
                                        },
                                        on: { keyup: this.trySendChat }, //if key is 'enter'
                                }
@@ -822,7 +826,7 @@ Vue.component('my-game', {
                                {
                                        attrs: { id: "sendChatBtn"},
                                        on: { click: this.sendChat },
-                                       domProps: { innerHTML: "Send" },
+                                       domProps: { innerHTML: translations["Send"] },
                                }
                        )
                ]);
@@ -882,7 +886,7 @@ Vue.component('my-game', {
                                                        {
                                                                attrs: { "id": "downloadBtn" },
                                                                on: { click: this.download },
-                                                               domProps: { innerHTML: "Download game" },
+                                                               domProps: { innerHTML: translations["Download game"] },
                                                        }
                                                ),
                                        ]
@@ -904,7 +908,7 @@ Vue.component('my-game', {
                                                        h('h3',
                                                                {
                                                                        "class": { clickable: true },
-                                                                       domProps: { innerHTML: "Show solution" },
+                                                                       domProps: { innerHTML: translations["Show solution"] },
                                                                        on: { click: this.toggleShowSolution },
                                                                }
                                                        ),
@@ -918,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',
@@ -966,13 +973,13 @@ Vue.component('my-game', {
                        switch (this.score)
                        {
                                case "1-0":
-                                       eogMessage = "White win";
+                                       eogMessage = translations["White win"];
                                        break;
                                case "0-1":
-                                       eogMessage = "Black win";
+                                       eogMessage = translations["Black win"];
                                        break;
                                case "1/2":
-                                       eogMessage = "Draw";
+                                       eogMessage = translations["Draw"];
                                        break;
                        }
                        return eogMessage;
@@ -1007,7 +1014,8 @@ 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
@@ -1209,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);
@@ -1277,7 +1286,10 @@ Vue.component('my-game', {
                        {
                                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}));
@@ -1303,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;
                                                }
@@ -1351,6 +1363,7 @@ 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);
                        if (mode == "human")
                        {
                                this.gameId = localStorage.getItem("gameId");
@@ -1359,8 +1372,11 @@ 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 (this.mycolor != this.vr.turn)
+                                       this.playComputerMove();
+                       }
                        if (moves.length > 0)
                        {
                                const lastMove = moves[moves.length-1];