Fixed bigger board variants. Still buggish

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 3f74fde..aaef522 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -20,7 +20,7 @@ Vue.component('my-game', {
                };
        },
        render(h) {
-               let [sizeX,sizeY] = VariantRules.size;
+               const [sizeX,sizeY] = VariantRules.size;
                // Precompute hints squares to facilitate rendering
                let hintSquares = doubleArray(sizeX, sizeY, false);
                this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -127,7 +127,10 @@ Vue.component('my-game', {
                                this.choices.map( m => { //a "choice" is a move
                                        return h('div',
                                                {
-                                                       'class': { 'board': true },
+                                                       'class': {
+                                                               'board': true,
+                                                               ['board'+sizeY]: true,
+                                                       },
                                                        style: {
                                                                'width': (100/this.choices.length) + "%",
                                                                'padding-bottom': (100/this.choices.length) + "%",
@@ -137,7 +140,7 @@ Vue.component('my-game', {
                                                        {
                                                                attrs: { "src": '/images/pieces/' +
                                                                        VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
-                                                               'class': { 'choice-piece': true, 'board': true },
+                                                               'class': { 'choice-piece': true },
                                                                on: { "click": e => { this.play(m); this.choices=[]; } },
                                                        })
                                                ]
@@ -204,6 +207,7 @@ Vue.component('my-game', {
                                                                {
                                                                        'class': {
                                                                                'board': true,
+                                                                               ['board'+sizeY]: true,
                                                                                'light-square': (i+j)%2==0 && (this.expert || !highlight),
                                                                                'dark-square': (i+j)%2==1 && (this.expert || !highlight),
                                                                                'highlight': !this.expert && highlight,
@@ -393,6 +397,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)
@@ -644,6 +653,13 @@ 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();
                        // (first move) HACK: avoid selecting elements before they appear on page:
                        const delay = Math.max(500-(Date.now()-timeStart), 0);
@@ -734,8 +750,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++)