From: Benjamin Auder <benjamin.auder@somewhere> Date: Tue, 4 Jun 2019 13:49:04 +0000 (+0200) Subject: Improved logic for playing against bots X-Git-Url: https://git.auder.net/doc/current/%7B%7B%20path('fos_user_resetting_request')%20%7D%7D?a=commitdiff_plain;h=834c202a003ca6285106133336701b340939ba12;p=vchess.git Improved logic for playing against bots --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 715d2fb7..d0b584b1 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -6,9 +6,9 @@ .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} - Board(:vr="vr" :last-move="lastMove" :analyze="analyze" - :user-color="gameInfo.mycolor" :orientation="orientation" - :vname="vname" @play-move="play") + Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" + :user-color="game.mycolor" :orientation="orientation" + :vname="game.vname" @play-move="play") .button-group button(@click="() => play()") Play button(@click="() => undo()") Undo @@ -39,8 +39,7 @@ export default { //MoveList, }, // "vr": VariantRules object, describing the game state + rules - // fenStart, players, mycolor - props: ["vname","analyze","vr","gameInfo"], + props: ["vr","game"], data: function() { return { st: store.state, @@ -54,24 +53,17 @@ export default { }; }, watch: { - // gameInfo (immutable once set) changes when a new game starts - "gameInfo": function() { + // game initial FEN changes when a new game starts + "game.fenStart": function() { // Reset all variables this.endgameMessage = ""; - this.orientation = this.gameInfo.mycolor || "w"; //default orientation for observed games - this.score = this.gameInfo.score; //mutable (if initially "*") - this.moves = this.gameInfo.moves; //TODO: this is mutable; make a copy instead + this.orientation = this.game.mycolor || "w"; //default orientation for observed games + this.score = this.game.score || "*"; //mutable (if initially "*") + this.moves = JSON.parse(JSON.stringify(this.game.moves || [])); const L = this.moves.length; this.cursor = L-1; this.lastMove = (L > 0 ? this.moves[L-1] : null); }, - analyze: function() { - if (this.analyze) - { - // Switched to analyze mode: game is over - this.endGame("*"); - } - }, }, computed: { showMoves: function() { @@ -79,7 +71,10 @@ export default { //return window.innerWidth >= 768; }, showFen: function() { - return this.vname != "Dark" || this.score != "*"; + return this.game.vname != "Dark" || this.score != "*"; + }, + analyze: function() { + return this.game.mode == "analyze"; }, }, methods: { @@ -113,11 +108,11 @@ export default { getPgn: function() { let pgn = ""; pgn += '[Site "vchess.club"]\n'; - pgn += '[Variant "' + this.vname + '"]\n'; + pgn += '[Variant "' + this.game.vname + '"]\n'; pgn += '[Date "' + getDate(new Date()) + '"]\n'; - pgn += '[White "' + this.gameInfo.players[0] + '"]\n'; - pgn += '[Black "' + this.gameInfo.players[1] + '"]\n'; - pgn += '[Fen "' + this.gameInfo.fenStart + '"]\n'; + pgn += '[White "' + this.game.players[0] + '"]\n'; + pgn += '[Black "' + this.game.players[1] + '"]\n'; + pgn += '[Fen "' + this.game.fenStart + '"]\n'; pgn += '[Result "' + this.score + '"]\n\n'; let counter = 1; let i = 0; @@ -144,7 +139,7 @@ export default { endGame: function(score) { this.score = score; this.showScoreMsg(score); - this.$emit("game-over"); + this.$emit("gameover"); //score not required (TODO?) }, animateMove: function(move) { let startSquare = document.getElementById(getSquareId(move.start)); @@ -251,7 +246,7 @@ export default { this.lastMove = this.moves[index]; }, gotoBegin: function() { - this.vr.re_init(this.fenStart); + this.vr.re_init(this.game.fenStart); this.cursor = -1; this.lastMove = null; }, diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue index debaeac8..21b11135 100644 --- a/client/src/components/ComputerGame.vue +++ b/client/src/components/ComputerGame.vue @@ -1,7 +1,8 @@ <template lang="pug"> .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove") + BaseGame(:game="game" :vr="vr" ref="basegame" + @newmove="processMove" @gameover="gameOver") </template> <script> @@ -20,10 +21,7 @@ export default { data: function() { return { st: store.state, - // variables passed to BaseGame: - fenStart: "", - players: ["Myself","Computer"], //playing as white - mycolor: "w", + game: { }, vr: null, // Web worker to play computer moves without freezing interface: timeStart: undefined, //time when computer starts thinking @@ -31,24 +29,20 @@ export default { compWorker: null, }; }, - computed: { - game: function() { - return Object.assign({}, - this.gameInfo, - { - fenStart: this.fenStart, - players: this.players, - mycolor: this.mycolor, - }); - }, - }, watch: { - gameInfo: function() { + "gameInfo.fen": function() { // (Security) No effect if a computer move is in progress: if (this.lockCompThink) return this.$emit("computer-think"); this.launchGame(); }, + "gameInfo.userStop": function() { + if (this.gameInfo.userStop) + { + // User stopped the game: unknown result + this.game.mode = "analyze"; + } + }, }, // Modal end of game, and then sub-components created: function() { @@ -70,7 +64,7 @@ export default { setTimeout( () => this.lockCompThink = false, 250); }, delay); } - if (!!this.fen) + if (!!this.gameInfo.fen) this.launchGame(); }, // dans variant.js (plutôt room.js) conn gère aussi les challenges @@ -80,17 +74,22 @@ export default { const vModule = await import("@/variants/" + this.gameInfo.vname + ".js"); window.V = vModule.VariantRules; this.compWorker.postMessage(["scripts",this.gameInfo.vname]); - this.compWorker.postMessage(["init",this.gameInfo.fenStart]); - this.newGameFromFen(this.gameInfo.fenStart); - }, - newGameFromFen: function(fen) { - this.vr = new V(fen); - this.mycolor = (Math.random() < 0.5 ? "w" : "b"); - this.players = ["Myself","Computer"]; - if (this.mycolor == "b") - this.players = this.players.reverse(); - this.compWorker.postMessage(["init",fen]); - if (this.mycolor != "w" || this.gameInfo.mode == "auto") + this.compWorker.postMessage(["init",this.gameInfo.fen]); + this.vr = new V(this.gameInfo.fen); + const mycolor = (Math.random() < 0.5 ? "w" : "b"); + let players = ["Myself","Computer"]; + if (mycolor == "b") + players = players.reverse(); + // NOTE: (TODO?) fen and fenStart are redundant in game object + this.game = Object.assign({}, + this.gameInfo, + { + fenStart: this.gameInfo.fen, + players: players, + mycolor: mycolor, + }); + this.compWorker.postMessage(["init",this.gameInfo.fen]); + if (mycolor != "w" || this.gameInfo.mode == "auto") this.playComputerMove(); }, playComputerMove: function() { @@ -103,11 +102,15 @@ export default { this.compWorker.postMessage(["newmove",move]); // subTurn condition for Marseille (and Avalanche) rules if ((!this.vr.subTurn || this.vr.subTurn <= 1) - && (this.mode == "auto" || this.vr.turn != this.mycolor)) + && (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)) { this.playComputerMove(); } }, + // When game ends normally, just switch to analyze mode + gameOver: function() { + this.game.mode = "analyze"; + }, }, }; </script> diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index 74c4e842..701d56a7 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -3,9 +3,9 @@ .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .button-group button(@click="display='rules'") Read the rules - button(v-show="!gameInProgress" @click="watchComputerGame") + button(v-show="!gameInProgress" @click="() => startGame('auto')") | Observe a sample game - button(v-show="!gameInProgress" @click="playAgainstComputer") + button(v-show="!gameInProgress" @click="() => startGame('versus')") | Beat the computer! button(v-show="gameInProgress" @click="stopGame") | Stop game @@ -31,20 +31,14 @@ export default { display: "rules", gameInProgress: false, // variables passed to ComputerGame: - vname: "_unknown", - mode: "versus", - fen: "", + gameInfo: { + vname: "_unknown", + mode: "versus", + fen: "", + userStop: false, + } }; }, - computed: { - gameInfo: function() { - return { - fen: this.fen, - mode: this.mode, - vname: this.vname, - }; - }, - }, watch: { "$route": function(newRoute) { this.tryChangeVariant(newRoute.params["vname"]); @@ -67,7 +61,7 @@ export default { tryChangeVariant: async function(vname) { if (!vname || vname == "_unknown") return; - this.vname = vname; + this.gameInfo.vname = vname; const vModule = await import("@/variants/" + vname + ".js"); window.V = vModule.VariantRules; // Method to replace diagrams in loaded HTML @@ -80,24 +74,19 @@ export default { require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug") .replace(/(fen:)([^:]*):/g, replaceByDiag); }, - startGame: function() { + startGame: function(mode) { if (this.gameInProgress) return; this.gameInProgress = true; this.display = "computer"; - this.fen = V.GenRandInitFen(); + this.gameInfo.mode = mode; + this.gameInfo.userStop = false; + this.gameInfo.fen = V.GenRandInitFen(); }, stopGame: function() { this.gameInProgress = false; - this.mode = "analyze"; - }, - playAgainstComputer: function() { - this.mode = "versus"; - this.startGame(); - }, - watchComputerGame: function() { - this.mode = "auto"; - this.startGame(); + this.gameInfo.userStop = true; + this.gameInfo.mode = "analyze"; }, }, };