Fix Alice chess

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 8e8e277..3f74fde 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,4 +1,3 @@
-// TODO: use indexedDB instead of localStorage? (more flexible: allow several games)
 Vue.component('my-game', {
        data: function() {
                return {
@@ -16,6 +15,7 @@ Vue.component('my-game', {
                        seek: false,
                        fenStart: "",
                        incheck: [],
+                       pgnTxt: "",
                        expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
                };
        },
@@ -135,7 +135,8 @@ Vue.component('my-game', {
                                                },
                                                [h('img',
                                                        {
-                                                               attrs: { "src": '/images/pieces/' + VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
+                                                               attrs: { "src": '/images/pieces/' +
+                                                                       VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
                                                                'class': { 'choice-piece': true, 'board': true },
                                                                on: { "click": e => { this.play(m); this.choices=[]; } },
                                                        })
@@ -169,10 +170,12 @@ Vue.component('my-game', {
                                                                                {
                                                                                        'class': {
                                                                                                'piece': true,
-                                                                                               'ghost': !!this.selectedPiece && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
+                                                                                               'ghost': !!this.selectedPiece
+                                                                                                       && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
                                                                                        },
                                                                                        attrs: {
-                                                                                               src: "/images/pieces/" + VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
+                                                                                               src: "/images/pieces/" +
+                                                                                                       VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
                                                                                        },
                                                                                }
                                                                        )
@@ -216,18 +219,21 @@ Vue.component('my-game', {
                                        );
                                }), choices]
                        );
-                       actionArray.push(
-                               h('button',
-                                       {
-                                               on: { click: this.resign },
-                                               attrs: { "aria-label": 'Resign' },
-                                               'class': {
-                                                       "tooltip":true,
-                                                       "bottom": true,
+                       if (this.mode != "idle")
+                       {
+                               actionArray.push(
+                                       h('button',
+                                               {
+                                                       on: { click: this.resign },
+                                                       attrs: { "aria-label": 'Resign' },
+                                                       'class': {
+                                                               "tooltip":true,
+                                                               "bottom": true,
+                                                       },
                                                },
-                                       },
-                                       [h('i', { 'class': { "material-icons": true } }, "flag")])
-                       );
+                                               [h('i', { 'class': { "material-icons": true } }, "flag")])
+                               );
+                       }
                        elementArray.push(gameDiv);
        //                      if (!!vr.reserve)
        //                      {
@@ -349,7 +355,7 @@ Vue.component('my-game', {
                                                                attrs: { id: "pgn-game" },
                                                                on: { click: this.download },
                                                                domProps: {
-                                                                       innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+                                                                       innerHTML: this.pgnTxt
                                                                }
                                                        }
                                                )
@@ -408,7 +414,6 @@ Vue.component('my-game', {
                };
                const socketMessageListener = msg => {
                        const data = JSON.parse(msg.data);
-                       console.log("Receive message: " + data.code);
                        switch (data.code)
                        {
                                case "newgame": //opponent found
@@ -493,6 +498,8 @@ Vue.component('my-game', {
                        this.score = score;
                        let modalBox = document.getElementById("modal-eog");
                        modalBox.checked = true;
+                       // Variants may have special PGN structure (so next function isn't defined here)
+                       this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
                        setTimeout(() => { modalBox.checked = false; }, 2000);
                        if (this.mode == "human")
                                this.clearStorage();
@@ -569,6 +576,7 @@ Vue.component('my-game', {
                        this.newGame("computer");
                },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
+                       //const fen = "1n2T1n0/p2pO2p/1s1k1s2/8/3S2p1/2U2cO1/P3PuPP/3K1BR1 0100";
                        const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        this.score = "*";
@@ -598,6 +606,7 @@ Vue.component('my-game', {
                                return;
                        }
                        this.vr = new VariantRules(fen, moves || []);
+                       this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
                        this.incheck = []; //in case of
                        this.fenStart = continuation
@@ -634,9 +643,11 @@ Vue.component('my-game', {
                        }
                },
                playComputerMove: function() {
+                       const timeStart = Date.now();
                        const compMove = this.vr.getComputerMove();
-                       // HACK: avoid selecting elements before they appear on page:
-                       setTimeout(() => this.play(compMove, "animate"), 500);
+                       // (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);
                },
                // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
                getSquareId: function(o) {