Adjust comments, add a few TODOs + remove DEBUG in play/undo

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index aaef522..72b5da9 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -17,6 +17,7 @@ Vue.component('my-game', {
                        incheck: [],
                        pgnTxt: "",
                        expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
+                       gameId: "", //used to limit computer moves' time
                };
        },
        render(h) {
@@ -239,23 +240,77 @@ Vue.component('my-game', {
                                );
                        }
                        elementArray.push(gameDiv);
-       //                      if (!!vr.reserve)
-       //                      {
-       //                              let reserve = h('div',
-       //                                      {'class':{'game':true}}, [
-       //                                              h('div',
-       //                                                      { 'class': { 'row': true }},
-       //                                                      [
-       //                                                              h('div',
-       //                                                                      {'class':{'board':true}},
-       //                                                                      [h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})]
-       //                                                              )
-       //                                                      ]
-       //                                              )
-       //                                      ],
-       //                              );
-       //                              elementArray.push(reserve);
-       //                      }
+                       if (!!this.vr.reserve)
+                       {
+                               const shiftIdx = (this.mycolor=="w" ? 0 : 1);
+                               let myReservePiecesArray = [];
+                               for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+                               {
+                                       myReservePiecesArray.push(h('div',
+                                       {
+                                               'class': {'board':true, ['board'+sizeY]:true},
+                                               attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
+                                       },
+                                       [
+                                               h('img',
+                                               {
+                                                       'class': {"piece":true},
+                                                       attrs: {
+                                                               "src": "/images/pieces/" +
+                                                                       this.vr.getReservePpath(this.mycolor,i) + ".svg",
+                                                       }
+                                               }),
+                                               h('sup',
+                                                       {style: { "padding-left":"40%"} },
+                                                       [ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
+                                               )
+                                       ]));
+                               }
+                               let oppReservePiecesArray = [];
+                               const oppCol = this.vr.getOppCol(this.mycolor);
+                               for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+                               {
+                                       oppReservePiecesArray.push(h('div',
+                                       {
+                                               'class': {'board':true, ['board'+sizeY]:true},
+                                               attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+                                       },
+                                       [
+                                               h('img',
+                                               {
+                                                       'class': {"piece":true},
+                                                       attrs: {
+                                                               "src": "/images/pieces/" +
+                                                                       this.vr.getReservePpath(oppCol,i) + ".svg",
+                                                       }
+                                               }),
+                                               h('sup',
+                                                       {style: { "padding-left":"40%"} },
+                                                       [ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
+                                               )
+                                       ]));
+                               }
+                               let reserves = h('div',
+                                       {
+                                               'class':{'game':true},
+                                               style: {"margin-bottom": "20px"},
+                                       },
+                                       [
+                                               h('div',
+                                                       {
+                                                               'class': { 'row': true },
+                                                               style: {"margin-bottom": "15px"},
+                                                       },
+                                                       myReservePiecesArray
+                                               ),
+                                               h('div',
+                                                       { 'class': { 'row': true }},
+                                                       oppReservePiecesArray
+                                               )
+                                       ]
+                               );
+                               elementArray.push(reserves);
+                       }
                        const eogMessage = this.getEndgameMessage(this.score);
                        const modalEog = [
                                h('input',
@@ -377,14 +432,14 @@ Vue.component('my-game', {
                                        "col-lg-6":true,
                                        "col-lg-offset-3":true,
                                },
-                               // NOTE: click = mousedown + mouseup --> what about smartphone?!
+                               // NOTE: click = mousedown + mouseup
                                on: {
                                        mousedown: this.mousedown,
                                        mousemove: this.mousemove,
                                        mouseup: this.mouseup,
-                                       touchdown: this.mousedown,
-                                       touchmove: this.mousemove,
-                                       touchup: this.mouseup,
+//                                     touchstart: this.mousedown, //TODO...
+//                                     touchmove: this.mousemove,
+//                                     touchend: this.mouseup,
                                },
                        },
                        elementArray
@@ -585,7 +640,6 @@ 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 = "*";
@@ -614,6 +668,8 @@ Vue.component('my-game', {
                                }
                                return;
                        }
+                       // random enough (TODO: function)
+                       this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
                        this.vr = new VariantRules(fen, moves || []);
                        this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
                        this.mode = mode;
@@ -654,8 +710,11 @@ Vue.component('my-game', {
                playComputerMove: function() {
                        const timeStart = Date.now();
                        const nbMoves = this.vr.moves.length; //using played moves to know if search finished
+                       const gameId = this.gameId; //to know if game was reset before timer end
                        setTimeout(
                                () => {
+                                       if (gameId != this.gameId)
+                                               return; //game stopped
                                        const L = this.vr.moves.length;
                                        if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
                                                this.vr.shouldReturn = true;
@@ -677,6 +736,19 @@ Vue.component('my-game', {
                },
                mousedown: function(e) {
                        e = e || window.event;
+                       let ingame = false;
+                       let elem = e.target;
+                       while (!ingame && elem !== null)
+                       {
+                               if (elem.classList.contains("game"))
+                               {
+                                       ingame = true;
+                                       break;
+                               }
+                               elem = elem.parentElement;
+                       }
+                       if (!ingame) //let default behavior (click on button...)
+                               return;
                        e.preventDefault(); //disable native drag & drop
                        if (!this.selectedPiece && e.target.classList.contains("piece"))
                        {
@@ -696,7 +768,8 @@ Vue.component('my-game', {
                                this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
                                        ? this.vr.getPossibleMovesFrom(startSquare)
                                        : [];
-                               e.target.parentNode.appendChild(this.selectedPiece);
+                               // Next line add moving piece just after current image (required for Crazyhouse reserve)
+                               e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
                        }
                },
                mousemove: function(e) {