Finished problems implementation. TODO: specify state for Crazyhouse,Grand. Improve...

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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 202f542..ded3091 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,5 +1,6 @@
 // Game logic on a variant page
 Vue.component('my-game', {
+       props: ["problem"],
        data: function() {
                return {
                        vr: null, //object to check moves, store them, FEN..
@@ -23,8 +24,17 @@ Vue.component('my-game', {
                        sound: parseInt(getCookie("sound", "2")),
                };
        },
+       watch: {
+               problem: function(p, pp) {
+                       // 'problem' prop changed: update board state
+                       // TODO: FEN + turn + flags + rappel instructions / solution on click sous l'échiquier
+                       // TODO: trouver moyen de passer la situation des reserves pour Crazyhouse,
+                       // et l'état des captures pour Grand... bref compléter le descriptif de l'état.
+                       this.newGame("problem", p.fen, p.fen.split(" ")[2]);
+               },
+       },
        render(h) {
-               const [sizeX,sizeY] = VariantRules.size;
+               const [sizeX,sizeY] = [V.size.x,V.size.y];
                const smallScreen = (window.innerWidth <= 420);
                // Precompute hints squares to facilitate rendering
                let hintSquares = doubleArray(sizeX, sizeY, false);
@@ -409,7 +419,7 @@ Vue.component('my-game', {
                                        }),
                                h('div',
                                        {
-                                               attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
+                                               attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
                                        },
                                        [
                                                h('div',
@@ -425,6 +435,7 @@ Vue.component('my-game', {
                                                                ),
                                                                h('h3',
                                                                        {
+                                                                               attrs: { "id": "eogMessage" },
                                                                                "class": { "section": true },
                                                                                domProps: { innerHTML: eogMessage },
                                                                        }
@@ -445,7 +456,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
                                },
                                [
                                        h('div',
@@ -461,6 +472,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "newGameTxt" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "New game" },
                                                                }
@@ -485,7 +497,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-fenedit" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
                                },
                                [
                                        h('div',
@@ -501,6 +513,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "titleFenedit" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "Position + flags (FEN):" },
                                                                }
@@ -551,7 +564,7 @@ Vue.component('my-game', {
                                }),
                        h('div',
                                {
-                                       attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+                                       attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
                                },
                                [
                                        h('div',
@@ -567,6 +580,7 @@ Vue.component('my-game', {
                                                        ),
                                                        h('h3',
                                                                {
+                                                                       attrs: { "id": "settingsTitle" },
                                                                        "class": { "section": true },
                                                                        domProps: { innerHTML: "Preferences" },
                                                                }
@@ -1014,16 +1028,13 @@ Vue.component('my-game', {
                        this.endGame(this.mycolor=="w"?"0-1":"1-0");
                },
                newGame: function(mode, fenInit, color, oppId, moves, continuation) {
-                       const fen = "3N1K2/2n2q2/P1R1kPnN/p3b1p1/b7/5Q2/4r3/8 0000";//fenInit || VariantRules.GenRandInitFen();
+                       const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
                        if (mode=="human" && !oppId)
                        {
                                const storageVariant = localStorage.getItem("variant");
                                if (!!storageVariant && storageVariant !== variant)
-                               {
-                                       alert("Finish your " + storageVariant + " game first!");
-                                       return;
-                               }
+                                       return alert("Finish your " + storageVariant + " game first!");
                                // Send game request and wait..
                                localStorage["newgame"] = variant;
                                this.seek = true;
@@ -1072,18 +1083,21 @@ Vue.component('my-game', {
                        }
                        else if (mode == "computer")
                        {
-                               this.mycolor = "w";//Math.random() < 0.5 ? 'w' : 'b';
+                               this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
                                if (this.mycolor == 'b')
                                        setTimeout(this.playComputerMove, 500);
                        }
-                       //else: against a (IRL) friend: nothing more to do
+                       //else: against a (IRL) friend or problem solving: nothing more to do
                },
                playComputerMove: function() {
                        const timeStart = Date.now();
                        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);
-                       setTimeout(() => this.play(compMove, "animate"), delay);
+                       setTimeout(() => {
+                               if (this.mode == "computer") //Warning: mode could have changed!
+                                       this.play(compMove, "animate")
+                       }, delay);
                },
                // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
                getSquareId: function(o) {
@@ -1126,8 +1140,9 @@ Vue.component('my-game', {
                                this.selectedPiece.style.display = "inline-block";
                                this.selectedPiece.style.zIndex = 3000;
                                let startSquare = this.getSquareFromId(e.target.parentNode.id);
-                               const iCanPlay = this.mode!="idle"
-                                       && (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
+                               const iCanPlay = this.mode!="idle" &&
+                                       (["friend","problem"].includes(this.mode) ||
+                                       this.vr.canIplay(this.mycolor,startSquare));
                                this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
                                // Next line add moving piece just after current image
                                // (required for Crazyhouse reserve)