Almost finished problems logic. TODO: showProblem() part
[vchess.git] / public / javascripts / components / game.js
index c7ec715..49db618 100644 (file)
@@ -20,12 +20,12 @@ Vue.component('my-game', {
                        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"),
+                       sound: parseInt(getCookie("sound", "2")),
                };
        },
        render(h) {
-               const [sizeX,sizeY] = VariantRules.size;
-               const smallScreen = (screen.width <= 420);
+               const [sizeX,sizeY] = [V.size.x,V.size.y];
+               const smallScreen = (window.innerWidth <= 420);
                // Precompute hints squares to facilitate rendering
                let hintSquares = doubleArray(sizeX, sizeY, false);
                this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -92,7 +92,7 @@ Vue.component('my-game', {
                        const settingsBtnElt = document.getElementById("settingsBtn");
                        const indicWidth = !!settingsBtnElt //-2 for border:
                                ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-                               : 37; //TODO: always 37?
+                               : (smallScreen ? 31 : 37);
                        if (this.mode == "human")
                        {
                                let connectedIndic = h(
@@ -140,8 +140,8 @@ Vue.component('my-game', {
                                                "tooltip": true,
                                                "topindicator": true,
                                                "indic-right": true,
-                                               "settings-btn": true,
-                                               "small": smallScreen,
+                                               "settings-btn": !smallScreen,
+                                               "settings-btn-small": smallScreen,
                                        },
                                },
                                [h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -409,7 +409,7 @@ Vue.component('my-game', {
                                        }),
                                h('div',
                                        {
-                                               attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
+                                               attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
                                        },
                                        [
                                                h('div',
@@ -425,6 +425,7 @@ Vue.component('my-game', {
                                                                ),
                                                                h('h3',
                                                                        {
+                                                                               attrs: { "id": "eogMessage" },
                                                                                "class": { "section": true },
                                                                                domProps: { innerHTML: eogMessage },
                                                                        }
@@ -445,7 +446,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
                                },
                                [
                                        h('div',
@@ -461,6 +462,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "newGameTxt" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "New game" },
                                                                }
@@ -485,7 +487,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-fenedit" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
                                },
                                [
                                        h('div',
@@ -501,6 +503,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "titleFenedit" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "Position + flags (FEN):" },
                                                                }
@@ -551,7 +554,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
                                },
                                [
                                        h('div',
@@ -567,6 +570,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "settingsTitle" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "Preferences" },
                                                                }
@@ -660,6 +664,7 @@ Vue.component('my-game', {
                                                                                                                "value": "0",
                                                                                                                innerHTML: "None"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==0 },
                                                                                                }
                                                                                        ),
                                                                                        h("option",
@@ -668,6 +673,7 @@ Vue.component('my-game', {
                                                                                                                "value": "1",
                                                                                                                innerHTML: "Newgame"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==1 },
                                                                                                }
                                                                                        ),
                                                                                        h("option",
@@ -676,6 +682,7 @@ Vue.component('my-game', {
                                                                                                                "value": "2",
                                                                                                                innerHTML: "All"
                                                                                                        },
+                                                                                                       attrs: { "selected": this.sound==2 },
                                                                                                }
                                                                                        ),
                                                                                ],
@@ -700,7 +707,10 @@ Vue.component('my-game', {
                {
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "pgn-div" } },
+                                       {
+                                               attrs: { id: "pgn-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('a',
                                                        {
@@ -713,10 +723,16 @@ Vue.component('my-game', {
                                                h('p',
                                                        {
                                                                attrs: { id: "pgn-game" },
-                                                               on: { click: this.download },
                                                                domProps: { innerHTML: this.pgnTxt }
                                                        }
-                                               )
+                                               ),
+                                               h('button',
+                                                       {
+                                                               attrs: { "id": "downloadBtn" },
+                                                               on: { click: this.download },
+                                                               domProps: { innerHTML: "Download game" },
+                                                       }
+                                               ),
                                        ]
                                )
                        );
@@ -726,7 +742,10 @@ Vue.component('my-game', {
                        // Show current FEN
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "fen-div" } },
+                                       {
+                                               attrs: { id: "fen-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('p',
                                                        {
@@ -764,7 +783,7 @@ Vue.component('my-game', {
        created: function() {
                const url = socketUrl;
                const continuation = (localStorage.getItem("variant") === variant);
-               this.myid = continuation ? localStorage.getItem("myid") : getRandString();
+               this.myid = (continuation ? localStorage.getItem("myid") : getRandString());
                if (!continuation)
                {
                        // HACK: play a small silent sound to allow "new game" sound later
@@ -793,6 +812,12 @@ Vue.component('my-game', {
                        const data = JSON.parse(msg.data);
                        switch (data.code)
                        {
+                               case "duplicate":
+                                       // 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!");
+                                       break;
                                case "newgame": //opponent found
                                        // oppid: opponent socket ID
                                        this.newGame("human", data.fen, data.color, data.oppid);
@@ -999,10 +1024,7 @@ Vue.component('my-game', {
                        {
                                const storageVariant = localStorage.getItem("variant");
                                if (!!storageVariant && storageVariant !== variant)
-                               {
-                                       alert("Finish your " + storageVariant + " game first!");
-                                       return;
-                               }
+                                       return alert("Finish your " + storageVariant + " game first!");
                                // Send game request and wait..
                                localStorage["newgame"] = variant;
                                this.seek = true;
@@ -1036,7 +1058,7 @@ Vue.component('my-game', {
                                        document.getElementById("modal-newgame").checked = false;
                                }
                                this.oppid = oppId;
-                               this.oppConnected = true;
+                               this.oppConnected = !continuation;
                                this.mycolor = color;
                                this.seek = false;
                                if (!!moves && moves.length > 0) //imply continuation
@@ -1062,7 +1084,10 @@ Vue.component('my-game', {
                        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);
-                       setTimeout(() => this.play(compMove, "animate"), delay);
+                       setTimeout(() => {
+                               if (this.mode == "computer") //Warning: mode could have changed!
+                                       this.play(compMove, "animate")
+                       }, delay);
                },
                // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
                getSquareId: function(o) {