Add some TODOs, some refactoring, first test for a future hexagonal board with canvas
authorBenjamin Auder <benjamin.auder@somewhere>
Mon, 7 Jan 2019 11:01:10 +0000 (12:01 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Mon, 7 Jan 2019 11:01:10 +0000 (12:01 +0100)
hexaboard_test.html [new file with mode: 0644]
public/javascripts/base_rules.js
public/javascripts/components/game.js

diff --git a/hexaboard_test.html b/hexaboard_test.html
new file mode 100644 (file)
index 0000000..800e189
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title> Chess Board</title>
+</head>
+
+<body>
+
+<canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
+Your browser does not support the HTML5 canvas tag.
+TODO: describe chessboard ?
+</canvas>
+
+<script>
+
+// TODO: draw hexagonal board, allow click and drag pieces
+// ==> work with coordinates and current board size as a parameter
+
+var c=document.getElementById("myCanvas");
+var ctx=c.getContext("2d");
+
+for(i=0;i<8;i++)
+{for(j=0;j<8;j++)
+{ctx.moveTo(0,70*j);
+ctx.lineTo(560,70*j);
+ctx.stroke();
+
+ctx.moveTo(70*i,0);
+ctx.lineTo(70*i,560);
+ctx.stroke();
+var left = 0;
+for(var a=0;a<8;a++) {
+    for(var b=0; b<8;b+=2) {
+      startX = b * 70;
+      if(a%2==0) startX = (b+1) * 70;
+      ctx.fillRect(startX + left,(a*70) ,70,70);
+       }}
+}}
+
+var img = new Image();
+img.onload = function() {
+           ctx.drawImage(img, 0, 0, 60, 60);
+}
+img.src = "public/images/pieces/wb.svg";
+
+       
+</script>
+
+</body>
+</html>
index e405cba..b6efa71 100644 (file)
@@ -503,6 +503,12 @@ class ChessRules
                return (color=="w" ? "b" : "w");
        }
 
+       // Get next color (for compatibility with 3 and 4 players games)
+       getNextCol(color)
+       {
+               return this.getOppCol(color);
+       }
+
        // Pieces codes (for a clearer code)
        static get PAWN() { return 'p'; }
        static get ROOK() { return 'r'; }
@@ -1036,14 +1042,12 @@ class ChessRules
                        this.kingPos[c] = [move.start.x, move.start.y];
        }
 
-       play(move, ingame)
+       play(move)
        {
                // DEBUG:
 //             if (!this.states) this.states = [];
-//             if (!ingame) this.states.push(this.getFen());
-
-               if (!!ingame)
-                       move.notation = this.getNotation(move);
+//             const stateFen = this.getBaseFen() + this.getTurnFen() + this.getFlagsFen();
+//             this.states.push(stateFen);
 
                if (V.HasFlags)
                        move.flags = JSON.stringify(this.aggregateFlags()); //save flags (for undo)
@@ -1053,12 +1057,6 @@ class ChessRules
                this.turn = this.getOppCol(this.turn);
                this.movesCount++;
                this.updateVariables(move);
-
-               if (!!ingame)
-               {
-                       // Hash of current game state *after move*, to detect repetitions
-                       move.hash = hex_md5(this.getFen());
-               }
        }
 
        undo(move)
@@ -1073,27 +1071,21 @@ class ChessRules
                this.unupdateVariables(move);
 
                // DEBUG:
-//             if (this.getFen() != this.states[this.states.length-1])
-//                     debugger;
+//             const stateFen = this.getBaseFen() + this.getTurnFen() + this.getFlagsFen();
+//             if (stateFen != this.states[this.states.length-1]) debugger;
 //             this.states.pop();
        }
 
        ///////////////
        // END OF GAME
 
-       // Is game over ? And if yes, what is the score ?
-       checkGameOver()
+       // What is the score ? (Interesting if game is over)
+       getCurrentScore()
        {
                if (this.atLeastOneMove()) // game not over
                        return "*";
 
                // Game over
-               return this.checkGameEnd();
-       }
-
-       // No moves are possible: compute score
-       checkGameEnd()
-       {
                const color = this.turn;
                // No valid move: stalemate or checkmate?
                if (!this.isAttacked(this.kingPos[color], [this.getOppCol(color)]))
@@ -1142,11 +1134,10 @@ class ChessRules
                {
                        this.play(moves1[i]);
                        let finish = (Math.abs(this.evalPosition()) >= V.THRESHOLD_MATE);
-                       if (!finish && !this.atLeastOneMove())
+                       if (!finish)
                        {
-                               // Test mate (for other variants)
-                               const score = this.checkGameEnd();
-                               if (score != "1/2")
+                               const score = this.getCurrentScore();
+                               if (["1-0","0-1"].includes(score))
                                        finish = true;
                        }
                        this.undo(moves1[i]);
@@ -1160,8 +1151,9 @@ class ChessRules
                        // Initial self evaluation is very low: "I'm checkmated"
                        moves1[i].eval = (color=="w" ? -1 : 1) * maxeval;
                        this.play(moves1[i]);
+                       const score1 = this.getCurrentScore();
                        let eval2 = undefined;
-                       if (this.atLeastOneMove())
+                       if (score1 == "*")
                        {
                                // Initial enemy evaluation is very low too, for him
                                eval2 = (color=="w" ? 1 : -1) * maxeval;
@@ -1170,15 +1162,10 @@ class ChessRules
                                for (let j=0; j<moves2.length; j++)
                                {
                                        this.play(moves2[j]);
-                                       let evalPos = undefined;
-                                       if (this.atLeastOneMove())
-                                               evalPos = this.evalPosition()
-                                       else
-                                       {
-                                               // Working with scores is more accurate (necessary for Loser variant)
-                                               const score = this.checkGameEnd();
-                                               evalPos = (score=="1/2" ? 0 : (score=="1-0" ? 1 : -1) * maxeval);
-                                       }
+                                       const score2 = this.getCurrentScore();
+                                       const evalPos = score2 == "*"
+                                               ? this.evalPosition()
+                                               : (score2=="1/2" ? 0 : (score2=="1-0" ? 1 : -1) * maxeval);
                                        if ((color == "w" && evalPos < eval2)
                                                || (color=="b" && evalPos > eval2))
                                        {
@@ -1188,10 +1175,7 @@ class ChessRules
                                }
                        }
                        else
-                       {
-                               const score = this.checkGameEnd();
-                               eval2 = (score=="1/2" ? 0 : (score=="1-0" ? 1 : -1) * maxeval);
-                       }
+                               eval2 = (score1=="1/2" ? 0 : (score1=="1-0" ? 1 : -1) * maxeval);
                        if ((color=="w" && eval2 > moves1[i].eval)
                                || (color=="b" && eval2 < moves1[i].eval))
                        {
@@ -1239,17 +1223,9 @@ class ChessRules
   {
                const maxeval = V.INFINITY;
                const color = this.turn;
-               if (!this.atLeastOneMove())
-               {
-                       switch (this.checkGameEnd())
-                       {
-                               case "1/2":
-                                       return 0;
-                               default:
-                                       const score = this.checkGameEnd();
-                                       return (score=="1/2" ? 0 : (score=="1-0" ? 1 : -1) * maxeval);
-                       }
-               }
+               const score = this.getCurrentScore();
+               if (score != "*")
+                       return (score=="1/2" ? 0 : (score=="1-0" ? 1 : -1) * maxeval);
                if (depth == 0)
       return this.evalPosition();
                const moves = this.getAllValidMoves("computer");
index c02893b..fec3df5 100644 (file)
@@ -38,6 +38,8 @@ Vue.component('my-game', {
                        this.newGame("problem", p.fen, V.ParseFen(p.fen).turn);
                },
        },
+       // TODO: split the rendering in other components ?
+       // At least divide in parts, it's too big now.
        render(h) {
                const [sizeX,sizeY] = [V.size.x,V.size.y];
                // Precompute hints squares to facilitate rendering
@@ -810,6 +812,8 @@ Vue.component('my-game', {
                        else if (friendContinuation)
                                this.continueGame("friend");
                };
+
+               // TODO: this events listener is central. Refactor ? How ?
                const socketMessageListener = msg => {
                        const data = JSON.parse(msg.data);
                        let L = undefined;
@@ -899,6 +903,7 @@ Vue.component('my-game', {
                                        break;
                        }
                };
+
                const socketCloseListener = () => {
                        this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
                        this.conn.addEventListener('open', socketOpenListener);
@@ -920,7 +925,7 @@ Vue.component('my-game', {
                                        this.play();
                        }
                };
-               // Computer moves web worker logic:
+               // Computer moves web worker logic: (TODO: also for observers in HH games)
                this.compWorker.postMessage(["scripts",variant]);
                const self = this;
                this.compWorker.onmessage = function(e) {
@@ -947,10 +952,29 @@ Vue.component('my-game', {
                }
        },
        methods: {
+               // TODO: in settings.js
                setMyname: function(e) {
                        this.myname = e.target.value;
                        localStorage["username"] = this.myname;
                },
+               showSettings: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-settings").checked = true;
+               },
+               toggleHints: function() {
+                       this.hints = !this.hints;
+                       localStorage["hints"] = (this.hints ? "1" : "0");
+               },
+               setBoardColor: function(e) {
+                       this.bcolor = e.target.options[e.target.selectedIndex].value;
+                       localStorage["bcolor"] = this.bcolor;
+               },
+               setSound: function(e) {
+                       this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+                       localStorage["sound"] = this.sound;
+               },
+
+               // TODO: in another component
                trySendChat: function(e) {
                        if (e.keyCode == 13) //'enter' key
                                this.sendChat();
@@ -963,6 +987,12 @@ Vue.component('my-game', {
                        this.conn.send(JSON.stringify({
                                code:"newchat", oppid: this.oppid, msg: chatTxt}));
                },
+               startChat: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       document.getElementById("modal-chat").checked = true;
+               },
+
+               // TODO: in  problems component
                toggleShowSolution: function() {
                        let problemSolution = document.getElementById("problem-solution");
                        problemSolution.style.display =
@@ -970,6 +1000,7 @@ Vue.component('my-game', {
                                        ? "block"
                                        : "none";
                },
+
                download: function() {
                        // Variants may have special PGN structure (so next function isn't defined here)
                        const content = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
@@ -1000,6 +1031,10 @@ Vue.component('my-game', {
                        }
                        this.cursor = this.vr.moves.length; //to navigate in finished game
                },
+
+               // TODO: elsewhere (general methods to access/retrieve from storage, to be generalized)
+               // https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB
+               // https://dexie.org/
                getStoragePrefix: function(mode) {
                        let prefix = "";
                        if (mode == "computer")
@@ -1046,37 +1081,20 @@ Vue.component('my-game', {
                        delete localStorage[prefix+"fen"];
                        delete localStorage[prefix+"score"];
                },
-               // HACK because mini-css tooltips are persistent after click...
-               // NOTE: seems to work only in chrome/chromium. TODO...
-               getRidOfTooltip: function(elt) {
-                       elt.style.visibility = "hidden";
-                       setTimeout(() => { elt.style.visibility="visible"; }, 100);
-               },
-               startChat: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       document.getElementById("modal-chat").checked = true;
-               },
                clearCurrentGame: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        this.clearStorage();
                        location.reload(); //to see clearing effects
                },
-               showSettings: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       document.getElementById("modal-settings").checked = true;
-               },
-               toggleHints: function() {
-                       this.hints = !this.hints;
-                       localStorage["hints"] = (this.hints ? "1" : "0");
-               },
-               setBoardColor: function(e) {
-                       this.bcolor = e.target.options[e.target.selectedIndex].value;
-                       localStorage["bcolor"] = this.bcolor;
-               },
-               setSound: function(e) {
-                       this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
-                       localStorage["sound"] = this.sound;
+
+               // HACK because mini-css tooltips are persistent after click...
+               // NOTE: seems to work only in chrome/chromium. TODO...
+               getRidOfTooltip: function(elt) {
+                       elt.style.visibility = "hidden";
+                       setTimeout(() => { elt.style.visibility="visible"; }, 100);
                },
+
+               // TODO: elsewhere, probably (new game button)
                clickGameSeek: function(e) {
                        this.getRidOfTooltip(e.currentTarget);
                        if (this.mode == "human" && this.score == "*")
@@ -1103,18 +1121,7 @@ Vue.component('my-game', {
                        this.getRidOfTooltip(e.currentTarget);
                        document.getElementById("modal-fenedit").checked = true;
                },
-               resign: function(e) {
-                       this.getRidOfTooltip(e.currentTarget);
-                       if (this.mode == "human" && this.oppConnected)
-                       {
-                               try {
-                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
-                               } catch (INVALID_STATE_ERR) {
-                                       return; //socket is not ready (and not yet reconnected)
-                               }
-                       }
-                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
-               },
+               // In main hall :
                newGame: function(mode, fenInit, color, oppId, gameId) {
                        const fen = fenInit || VariantRules.GenRandInitFen();
                        console.log(fen); //DEBUG
@@ -1234,10 +1241,25 @@ Vue.component('my-game', {
                                setTimeout(() => this.endGame(score), 100);
                        }
                },
+
+               resign: function(e) {
+                       this.getRidOfTooltip(e.currentTarget);
+                       if (this.mode == "human" && this.oppConnected)
+                       {
+                               try {
+                                       this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+                               } catch (INVALID_STATE_ERR) {
+                                       return; //socket is not ready (and not yet reconnected)
+                               }
+                       }
+                       this.endGame(this.mycolor=="w"?"0-1":"1-0");
+               },
                playComputerMove: function() {
                        this.timeStart = Date.now();
                        this.compWorker.postMessage(["askmove"]);
                },
+
+               // TODO: purely graphical, move in a "chessground-like" component
                // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
                getSquareId: function(o) {
                        // NOTE: a separator is required to allow any size of board
@@ -1376,20 +1398,26 @@ Vue.component('my-game', {
                                this.play(move);
                        }, 250);
                },
+
+               // OK, these last functions can stay here (?!)
                play: function(move, programmatic) {
                        if (!move)
                        {
                                // Navigate after game is over
-                               if (this.cursor >= this.vr.moves.length)
+                               if (this.cursor >= this.moves.length)
                                        return; //already at the end
-                               move = this.vr.moves[this.cursor++];
+                               move = this.moves[this.cursor++];
                        }
                        if (!!programmatic) //computer or human opponent
                                return this.animateMove(move);
                        // 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}));
-                       if (this.score == "*")
+                       
+                       
+                       // TODO: play move, and stack it on this.moves (if a move was provided; otherwise just navigate)
+                       
+                       if (this.score == "*") //TODO: I don't like this if()
                        {
                                // Emergency check, if human game started "at the same time"
                                // TODO: robustify this...
@@ -1405,7 +1433,7 @@ Vue.component('my-game', {
                                        // Send the move to web worker (TODO: including his own moves?!)
                                        this.compWorker.postMessage(["newmove",move]);
                                }
-                               const eog = this.vr.checkGameOver();
+                               const eog = this.vr.getCurrentScore();
                                if (eog != "*")
                                {
                                        if (["human","computer"].includes(this.mode))
@@ -1418,16 +1446,17 @@ Vue.component('my-game', {
                                        }
                                }
                        }
-                       else
-                       {
-                               VariantRules.PlayOnBoard(this.vr.board, move);
-                               this.$forceUpdate(); //TODO: ?!
-                       }
+//                     else
+//                     {
+//                             VariantRules.PlayOnBoard(this.vr.board, move);
+//                             this.$forceUpdate(); //TODO: ?!
+//                     }
                        if (["human","computer","friend"].includes(this.mode))
                                this.updateStorage(); //after our moves and opponent moves
                        if (this.mode == "computer" && this.vr.turn != this.mycolor && this.score == "*")
                                this.playComputerMove();
                },
+               // TODO: merge two next functions
                undo: function() {
                        // Navigate after game is over
                        if (this.cursor == 0)
@@ -1457,3 +1486,11 @@ get lastMove()
                const L = this.moves.length;
                return (L>0 ? this.moves[L-1] : null);
        }
+
+// here too:
+                       move.notation = this.getNotation(move);
+                       // Hash of current game state *after move*, to detect repetitions
+                       move.hash = hex_md5(this.getBaseFen() + this.getTurnFen() + this.getFlagsFen());
+//TODO: confirm dialog with "opponent offers draw", avec possible bouton "prevent future offers" + bouton "proposer nulle"
+//+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
+//comme sur lichess