Add a soft timer to avoid spending much more than 5 seconds on a move

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ca8a6bf..1b216ef 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 {
@@ -136,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=[]; } },
                                                        })
@@ -170,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",
                                                                                        },
                                                                                }
                                                                        )
@@ -391,6 +393,11 @@ Vue.component('my-game', {
                        ? localStorage.getItem("myid")
                        // random enough (TODO: function)
                        : (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+               if (!continuation)
+               {
+                       // HACK: play a small silent sound to allow "new game" sound later if tab not focused
+                       new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
+               }
                this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
                const socketOpenListener = () => {
                        if (continuation)
@@ -574,7 +581,8 @@ Vue.component('my-game', {
                        this.newGame("computer");
                },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
-                       const fen = "pppppppp/rnbqkbnr/8/8/8/8/PPPPPPPP/ROBQKBOR 1111"; //fenInit || VariantRules.GenRandInitFen();
+                       //const fen = "1n2T1n0/p2pO2p/1s1k1s2/8/3S2p1/2U2cO1/P3PuPP/3K1BR1 0100";
+                       const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        this.score = "*";
                        if (mode=="human" && !oppId)
@@ -640,9 +648,18 @@ Vue.component('my-game', {
                        }
                },
                playComputerMove: function() {
+                       const timeStart = Date.now();
+                       const nbMoves = this.vr.moves.length; //using played moves to know if search finished
+                       setTimeout(
+                               () => {
+                                       const L = this.vr.moves.length;
+                                       if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
+                                               this.vr.shouldReturn = true;
+                               }, 5000);
                        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) {
@@ -672,7 +689,7 @@ Vue.component('my-game', {
                                this.selectedPiece.style.display = "inline-block";
                                this.selectedPiece.style.zIndex = 3000;
                                let startSquare = this.getSquareFromId(e.target.parentNode.id);
-                               this.possibleMoves = true//this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
+                               this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
                                        ? this.vr.getPossibleMovesFrom(startSquare)
                                        : [];
                                e.target.parentNode.appendChild(this.selectedPiece);
@@ -729,8 +746,9 @@ Vue.component('my-game', {
                        let rectStart = startSquare.getBoundingClientRect();
                        let rectEnd = endSquare.getBoundingClientRect();
                        let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
-                       let movingPiece = document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
-                       // HACK for animation (otherwise with positive translate, image slides "under background"...)
+                       let movingPiece =
+                               document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
+                       // HACK for animation (with positive translate, image slides "under background"...)
                        // Possible improvement: just alter squares on the piece's way...
                        squares = document.getElementsByClassName("board");
                        for (let i=0; i<squares.length; i++)