From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 2 Jun 2019 14:50:02 +0000 (+0200) Subject: Toward game info simplification X-Git-Url: https://git.auder.net/doc/%7B%7B%20asset%28%27mixstore/current/img/config.php?a=commitdiff_plain;h=6dd02928259482332d639bb71d2c44ff684fcfb5;p=vchess.git Toward game info simplification --- diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue index 5196e542..debaeac8 100644 --- a/client/src/components/ComputerGame.vue +++ b/client/src/components/ComputerGame.vue @@ -1,8 +1,7 @@ <template lang="pug"> .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:vname="vname" :analyze="analyze" :vr="vr" - :game-info="gameInfo" ref="basegame" @newmove="processMove") + BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove") </template> <script> @@ -10,26 +9,21 @@ import BaseGame from "@/components/BaseGame.vue"; import { store } from "@/store"; import Worker from 'worker-loader!@/playCompMove'; - -// TODO: simplify, just "game" and "gameInfo" prop (fen+mode+vname may change at the same time) - - export default { name: 'my-computer-game', components: { BaseGame, }, + // gameInfo: fen + mode + vname // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze" - props: ["fen","mode","vname"], + props: ["gameInfo"], data: function() { return { st: store.state, // variables passed to BaseGame: - gameInfo: { - fenStart: "", - players: ["Myself","Computer"], //playing as white - mycolor: "w", - }, + fenStart: "", + players: ["Myself","Computer"], //playing as white + mycolor: "w", vr: null, // Web worker to play computer moves without freezing interface: timeStart: undefined, //time when computer starts thinking @@ -38,12 +32,18 @@ export default { }; }, computed: { - analyze: function() { - return this.mode == "analyze"; + game: function() { + return Object.assign({}, + this.gameInfo, + { + fenStart: this.fenStart, + players: this.players, + mycolor: this.mycolor, + }); }, }, watch: { - fen: function() { + gameInfo: function() { // (Security) No effect if a computer move is in progress: if (this.lockCompThink) return this.$emit("computer-think"); @@ -62,7 +62,7 @@ export default { // Small delay for the bot to appear "more human" const delay = Math.max(500-(Date.now()-this.timeStart), 0); setTimeout(() => { - const animate = (this.vname != "Dark"); + const animate = (this.gameInfo.vname != "Dark"); this.$refs.basegame.play(compMove[0], animate); if (compMove.length == 2) setTimeout( () => { this.$refs.basegame.play(compMove[1], animate); }, 750); @@ -77,21 +77,20 @@ export default { // et les chats dans chat.js. Puis en webRTC, repenser tout ça. methods: { launchGame: async function() { - const vModule = await import("@/variants/" + this.vname + ".js"); + const vModule = await import("@/variants/" + this.gameInfo.vname + ".js"); window.V = vModule.VariantRules; - this.compWorker.postMessage(["scripts",this.vname]); - this.compWorker.postMessage(["init",this.fen]); - this.newGameFromFen(this.fen); + 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.gameInfo.fenStart = fen; - this.gameInfo.mycolor = (Math.random() < 0.5 ? "w" : "b"); - this.gameInfo.players = ["Myself","Computer"]; - if (this.gameInfo.mycolor == "b") - this.gameInfo.players = this.gameInfo.players.reverse(); + 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.gameInfo.mycolor != "w" || this.mode == "auto") + if (this.mycolor != "w" || this.gameInfo.mode == "auto") this.playComputerMove(); }, playComputerMove: function() { @@ -104,7 +103,7 @@ 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.gameInfo.mycolor)) + && (this.mode == "auto" || this.vr.turn != this.mycolor)) { this.playComputerMove(); } diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 3a2f03a5..2ef43c36 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -16,13 +16,12 @@ pareil quand quelqu'un reco. <template lang="pug"> .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:vname="game.vname" :game="game" :analyze="analyze" :vr="vr" - ref="basegame" @newmove="processMove") - .button-group(v-if="mode!='analyze'") + BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove") + .button-group(v-if="game.mode!='analyze'") button(@click="offerDraw") Draw button(@click="abortGame") Abort button(@click="resign") Resign - div(v-if="mode=='corr'") + div(v-if="game.mode=='corr'") textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg") div(v-show="cursor>=0") {{ moves[cursor].message }} </template> @@ -40,23 +39,16 @@ export default { BaseGame, }, // gameRef: to find the game in (potentially remote) storage - // mode: "live" or "corr" (correspondance game), or "analyze" data: function() { return { st: store.state, gameRef: {id: "", rid: ""}, //given in URL (rid = remote ID) game: {}, //passed to BaseGame - vr: null, //TODO - mode: "analyze", //mutable + vr: null, //"variant rules" object initialized from FEN drawOfferSent: false, //did I just ask for draw? (TODO: draw variables?) people: [], //potential observers (TODO) }; }, - computed: { - analyze: function() { - return this.mode == "analyze"; - }, - }, watch: { '$route' (to, from) { if (!!to.params["id"]) @@ -240,14 +232,12 @@ export default { // - from indexedDB (one completed live game) // - from server (one correspondance game I play[ed] or not) // - from remote peer (one live game I don't play, finished or not) - loadGame: async function() { - GameStorage.get(this.gameRef, (game) => { - this.gameInfo = - this.vname = game.vname; - this.mode = game.mode; - const vModule = await import("@/variants/" + this.vname + ".js"); + loadGame: function() { + GameStorage.get(this.gameRef, async (game) => { + this.game = game; + const vModule = await import("@/variants/" + game.vname + ".js"); window.V = vModule.VariantRules; - this.vr = new V(this.gameInfo.fen); + this.vr = new V(game.fen); }); // // Poll all players except me (if I'm playing) to know online status. // // --> Send ping to server (answer pong if players[s] are connected) diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index 738e25fa..74c4e842 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -10,8 +10,7 @@ button(v-show="gameInProgress" @click="stopGame") | Stop game .section-content(v-show="display=='rules'" v-html="content") - ComputerGame(v-show="display=='computer'" - :fen="fen" :mode="mode" :vname="variant.name" + ComputerGame(v-show="display=='computer'" :game-info="gameInfo" @computer-think="gameInProgress=false" @game-over="stopGame") </template> @@ -28,14 +27,24 @@ export default { data: function() { return { st: store.state, - variant: {id: 0, name: "_unknown"}, //...yet content: "", display: "rules", - mode: "versus", gameInProgress: false, + // variables passed to ComputerGame: + vname: "_unknown", + mode: "versus", fen: "", }; }, + computed: { + gameInfo: function() { + return { + fen: this.fen, + mode: this.mode, + vname: this.vname, + }; + }, + }, watch: { "$route": function(newRoute) { this.tryChangeVariant(newRoute.params["vname"]); @@ -58,13 +67,7 @@ export default { tryChangeVariant: async function(vname) { if (!vname || vname == "_unknown") return; - if (this.st.variants.length > 0) - { - const idxOfVar = this.st.variants.findIndex(e => e.name == vname); - this.variant = this.st.variants[idxOfVar]; - } - else - this.variant.name = vname; + this.vname = vname; const vModule = await import("@/variants/" + vname + ".js"); window.V = vModule.VariantRules; // Method to replace diagrams in loaded HTML