Better squares highlighting

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 14d3007..a78f323 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -202,17 +202,18 @@ Vue.component('my-game', {
                                                                );
                                                        }
                                                        const lm = this.vr.lastMove;
-                                                       const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj});
+                                                       const showLight = !this.expert &&
+                                                               (this.mode!="idle" || this.cursor==this.vr.moves.length);
                                                        return h(
                                                                'div',
                                                                {
                                                                        '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,
-                                                                               'incheck': !this.expert && incheckSq[ci][cj],
+                                                                               'light-square': (i+j)%2==0,
+                                                                               'dark-square': (i+j)%2==1,
+                                                                               'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
+                                                                               'incheck': showLight && incheckSq[ci][cj],
                                                                        },
                                                                        attrs: {
                                                                                id: this.getSquareId({x:ci,y:cj}),
@@ -239,6 +240,34 @@ Vue.component('my-game', {
                                                [h('i', { 'class': { "material-icons": true } }, "flag")])
                                );
                        }
+                       else if (this.vr.moves.length > 0)
+                       {
+                               // A game finished, and another is not started yet: allow navigation
+                               actionArray = actionArray.concat([
+                                       h('button',
+                                               {
+                                                       style: { "margin-left": "30px" },
+                                                       on: { click: e => this.undo() },
+                                                       attrs: { "aria-label": 'Undo' },
+                                                       'class': {
+                                                               "tooltip":true,
+                                                               "bottom": true,
+                                                       },
+                                               },
+                                               [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
+                                       h('button',
+                                               {
+                                                       on: { click: e => this.play() },
+                                                       attrs: { "aria-label": 'Play' },
+                                                       'class': {
+                                                               "tooltip":true,
+                                                               "bottom": true,
+                                                       },
+                                               },
+                                               [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
+                                       ]
+                               );
+                       }
                        elementArray.push(gameDiv);
                        if (!!this.vr.reserve)
                        {
@@ -562,6 +591,18 @@ Vue.component('my-game', {
                this.conn.onopen = socketOpenListener;
                this.conn.onmessage = socketMessageListener;
                this.conn.onclose = socketCloseListener;
+               // Listen to keyboard left/right to navigate in game
+               document.onkeydown = event => {
+                       if (this.mode == "idle" && this.vr.moves.length > 0
+                               && [37,39].includes(event.keyCode))
+                       {
+                               event.preventDefault();
+                               if (event.keyCode == 37) //Back
+                                       this.undo();
+                               else //Forward (39)
+                                       this.play();
+                       }
+               };
        },
        methods: {
                download: function() {
@@ -583,6 +624,7 @@ Vue.component('my-game', {
                        if (this.mode == "human")
                                this.clearStorage();
                        this.mode = "idle";
+                       this.cursor = this.vr.moves.length; //to navigate in finished game
                        this.oppid = "";
                },
                getEndgameMessage: function(score) {
@@ -866,24 +908,52 @@ Vue.component('my-game', {
                        }, 200);
                },
                play: function(move, programmatic) {
+                       if (!move)
+                       {
+                               // Navigate after game is over
+                               if (this.cursor >= this.vr.moves.length)
+                                       return; //already at the end
+                               move = this.vr.moves[this.cursor++];
+                       }
                        if (!!programmatic) //computer or human opponent
                        {
                                this.animateMove(move);
                                return;
                        }
-                       this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
                        // Not programmatic, or animation is over
                        if (this.mode == "human" && this.vr.turn == this.mycolor)
                                this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
                        new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
-                       this.vr.play(move, "ingame");
+                       if (this.mode != "idle")
+                       {
+                               this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
+                               this.vr.play(move, "ingame");
+                       }
+                       else
+                       {
+                               VariantRules.PlayOnBoard(this.vr.board, move);
+                               this.$forceUpdate(); //TODO: ?!
+                       }
                        if (this.mode == "human")
                                this.updateStorage(); //after our moves and opponent moves
-                       const eog = this.vr.checkGameOver();
-                       if (eog != "*")
-                               this.endGame(eog);
-                       else if (this.mode == "computer" && this.vr.turn != this.mycolor)
+                       if (this.mode != "idle")
+                       {
+                               const eog = this.vr.checkGameOver();
+                               if (eog != "*")
+                                       this.endGame(eog);
+                       }
+                       if (this.mode == "computer" && this.vr.turn != this.mycolor)
                                setTimeout(this.playComputerMove, 500);
                },
+               undo: function() {
+                       // Navigate after game is over
+                       if (this.cursor == 0)
+                               return; //already at the beginning
+                       if (this.cursor == this.vr.moves.length)
+                               this.incheck = []; //in case of...
+                       const move = this.vr.moves[--this.cursor];
+                       VariantRules.UndoOnBoard(this.vr.board, move);
+                       this.$forceUpdate(); //TODO: ?!
+               }
        },
 })