Implemented turn indicator

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ab86057..829beaa 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -27,10 +27,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 +36,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 +48,7 @@ Vue.component('my-game', {
                                        attrs: { "aria-label": 'New game VS computer' },
                                        'class': {
                                                "tooltip":true,
+                                               "bottom": true,
                                                "playing": playingComp,
                                        },
                                },
@@ -58,25 +56,51 @@ 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 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",
@@ -180,7 +204,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")])
                        );
@@ -203,32 +230,6 @@ Vue.component('my-game', {
        //                              elementArray.push(reserve);
        //                      }
                        const eogMessage = this.getEndgameMessage(this.score);
-                       let elemsOfEog =
-                       [
-                               h('label',
-                                       {
-                                               attrs: { "for": "modal-eog" },
-                                               "class": { "modal-close": true },
-                                       }
-                               ),
-                               h('h3',
-                                       {
-                                               "class": { "section": true },
-                                               domProps: { innerHTML: eogMessage },
-                                       }
-                               )
-                       ];
-                       if (this.score != "*")
-                       {
-                               elemsOfEog.push(
-                                       h('p', //'textarea', //TODO: selectable!
-                                               {
-                                                       domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
-                                                       //attrs: { "readonly": true },
-                                               }
-                                       )
-                               );
-                       }
                        const modalEog = [
                                h('input',
                                        {
@@ -244,7 +245,20 @@ Vue.component('my-game', {
                                                        {
                                                                "class": { "card": true, "smallpad": true },
                                                        },
-                                                       elemsOfEog
+                                                       [
+                                                               h('label',
+                                                                       {
+                                                                               attrs: { "for": "modal-eog" },
+                                                                               "class": { "modal-close": true },
+                                                                       }
+                                                               ),
+                                                               h('h3',
+                                                                       {
+                                                                               "class": { "section": true },
+                                                                               domProps: { innerHTML: eogMessage },
+                                                                       }
+                                                               )
+                                                       ]
                                                )
                                        ]
                                )
@@ -299,6 +313,23 @@ Vue.component('my-game', {
                        actionArray
                );
                elementArray.push(actions);
+               if (this.score != "*")
+               {
+                       elementArray.push(
+                               h('div',
+                                       { },
+                                       [
+                                               h('p',
+                                                       {
+                                                               domProps: {
+                                                                       innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+                                                               }
+                                                       }
+                                               )
+                                       ]
+                               )
+                       );
+               }
                return h(
                        'div',
                        {
@@ -426,7 +457,7 @@ Vue.component('my-game', {
                        this.score = score;
                        let modalBox = document.getElementById("modal-eog");
                        modalBox.checked = true;
-                       //setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
+                       setTimeout(() => { modalBox.checked = false; }, 2000);
                        if (this.mode == "human")
                                this.clearStorage();
                        this.mode = "idle";
@@ -485,13 +516,12 @@ Vue.component('my-game', {
                        if (this.mode == "human")
                                return; //no newgame while playing
                        if (this.seek)
+                       {
                                delete localStorage["newgame"]; //cancel game seek
+                               this.seek = false;
+                       }
                        else
-                       {
-                               localStorage["newgame"] = variant;
                                this.newGame("human");
-                       }
-                       this.seek = !this.seek;
                },
                clickComputerGame: function() {
                        if (this.mode == "human")
@@ -507,11 +537,12 @@ Vue.component('my-game', {
                                const storageVariant = localStorage.getItem("variant");
                                if (!!storageVariant && storageVariant !== variant)
                                {
-                                       // TODO: find a better way to ensure this. Newgame system is currently a mess.
                                        alert("Finish your " + storageVariant + " game first!");
                                        return;
                                }
                                // Send game request and wait..
+                               localStorage["newgame"] = variant;
+                               this.seek = true;
                                this.clearStorage(); //in case of
                                try {
                                        this.conn.send(JSON.stringify({code:"newgame", fen:fen}));