Chess Board

From 067c675b75072c496f9665c4bf801cdc3d40398d Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Mon, 7 Jan 2019 12:01:10 +0100 Subject: [PATCH] Add some TODOs, some refactoring, first test for a future hexagonal board with canvas --- hexaboard_test.html | 50 ++++++++++ public/javascripts/base_rules.js | 76 +++++---------- public/javascripts/components/game.js | 131 +++++++++++++++++--------- 3 files changed, 160 insertions(+), 97 deletions(-) create mode 100644 hexaboard_test.html diff --git a/hexaboard_test.html b/hexaboard_test.html new file mode 100644 index 00000000..800e1896 --- /dev/null +++ b/hexaboard_test.html @@ -0,0 +1,50 @@ + + + + Chess Board + + + + +

+ + + + + diff --git a/public/javascripts/base_rules.js b/public/javascripts/base_rules.js index e405cbaa..b6efa714 100644 --- a/public/javascripts/base_rules.js +++ b/public/javascripts/base_rules.js @@ -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 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"); diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index c02893b5..fec3df54 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -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 -- 2.44.0