From: Benjamin Auder Date: Tue, 4 Jun 2019 15:14:23 +0000 (+0200) Subject: Fix a few things: ready to work on basic live games X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/assets/doc/current/mini-custom.min.css?a=commitdiff_plain;h=4b0384faf03d3842ba2f80ccd6d104c5e34a355e;p=vchess.git Fix a few things: ready to work on basic live games --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index d0b584b1..e8ca6967 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -55,14 +55,7 @@ export default { watch: { // game initial FEN changes when a new game starts "game.fenStart": function() { - // Reset all variables - this.endgameMessage = ""; - 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); + this.re_setVariables(); }, }, computed: { @@ -77,7 +70,20 @@ export default { return this.game.mode == "analyze"; }, }, + created: function() { + if (!!this.game.fenStart) + this.re_setVariables(); + }, methods: { + re_setVariables: function() { + this.endgameMessage = ""; + 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); + }, setEndgameMessage: function(score) { let eogMessage = "Undefined"; switch (score) diff --git a/client/src/utils/storage.js b/client/src/utils/storage.js index eb040781..48435b51 100644 --- a/client/src/utils/storage.js +++ b/client/src/utils/storage.js @@ -1,5 +1,4 @@ import { extractTime } from "@/utils/timeControl"; -import { shuffle } from "@/utils/alea"; // TODO: show game structure //const newItem = [ @@ -79,10 +78,6 @@ export const GameStorage = // localStorage: init: function(o) { - // NOTE: when >= 3 players, better use an array + shuffle for mycolor - const mycolor = (Math.random() < 0.5 ? "w" : "b"); - // Shuffle players order (white then black then other colors). - const players = shuffle(o.players); // Extract times (in [milli]seconds), set clocks, store in localStorage const tc = extractTime(o.timeControl); @@ -91,9 +86,8 @@ export const GameStorage = { gameId: o.gameId, vname: o.vname, - mycolor: mycolor, fenStart: o.fenStart, - players: players, + players: o.players, timeControl: o.timeControl, increment: tc.increment, mode: "live", //function for live games only diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 2ef43c36..22cf5bf7 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -22,7 +22,7 @@ pareil quand quelqu'un reco. button(@click="abortGame") Abort button(@click="resign") Resign div(v-if="game.mode=='corr'") - textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg") + textarea(v-show="score=='*' && vr.turn==game.mycolor" v-model="corrMsg") div(v-show="cursor>=0") {{ moves[cursor].message }} @@ -42,11 +42,14 @@ export default { data: function() { return { st: store.state, - gameRef: {id: "", rid: ""}, //given in URL (rid = remote ID) - game: {}, //passed to BaseGame + gameRef: { //given in URL (rid = remote ID) + id: "", + rid: "" + }, + game: { }, //passed to BaseGame vr: null, //"variant rules" object initialized from FEN drawOfferSent: false, //did I just ask for draw? (TODO: draw variables?) - people: [], //potential observers (TODO) + people: [ ], //potential observers (TODO) }; }, watch: { @@ -101,7 +104,7 @@ export default { // Send our "last state" informations to opponent(s) L = this.vr.moves.length; Object.keys(this.opponents).forEach(oid => { - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: oid, gameId: this.gameRef.id, @@ -119,7 +122,7 @@ export default { if (this.score != "*") { // We finished the game (any result possible) - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: data.oppid, gameId: this.gameRef.id, @@ -131,7 +134,7 @@ export default { else if (data.movesCount < L) { // We must tell last move to opponent - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: this.opponent.id, gameId: this.gameRef.id, @@ -143,7 +146,7 @@ export default { this.play(data.lastMove, "animate"); break; case "resign": //..you won! - this.endGame(this.mycolor=="w"?"1-0":"0-1"); + this.endGame(this.game.mycolor=="w"?"1-0":"0-1"); break; // TODO: also use (dis)connect info to count online players? case "gameconnect": @@ -167,14 +170,11 @@ export default { } }; const socketCloseListener = () => { - this.conn.addEventListener('message', socketMessageListener); - this.conn.addEventListener('close', socketCloseListener); + this.st.conn.addEventListener('message', socketMessageListener); + this.st.conn.addEventListener('close', socketCloseListener); }; - if (!!this.conn) - { - this.conn.onmessage = socketMessageListener; - this.conn.onclose = socketCloseListener; - } + this.st.conn.onmessage = socketMessageListener; + this.st.conn.onclose = socketCloseListener; }, // dans variant.js (plutôt room.js) conn gère aussi les challenges // et les chats dans chat.js. Puis en webRTC, repenser tout ça. @@ -194,7 +194,7 @@ export default { if (!!o.online) { try { - this.conn.send(JSON.stringify({code: "draw", oppid: o.id})); + this.st.conn.send(JSON.stringify({code: "draw", oppid: o.id})); } catch (INVALID_STATE_ERR) { return; } @@ -213,6 +213,7 @@ export default { return; //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, //send message: "gameOver" avec score "?" + // ==> BaseGame must listen to game.score change, and call "endgame(score)" in this case }, resign: function(e) { if (!confirm("Resign the game?")) @@ -220,7 +221,7 @@ export default { if (this.mode == "human" && this.oppConnected(this.oppid)) { try { - this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); + this.st.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); } catch (INVALID_STATE_ERR) { return; } @@ -234,7 +235,11 @@ export default { // - from remote peer (one live game I don't play, finished or not) loadGame: function() { GameStorage.get(this.gameRef, async (game) => { - this.game = game; + this.game = Object.assign({}, + game, + // NOTE: assign mycolor here, since BaseGame could also bs VS computer + {mycolor: ["w","b"][game.players.findIndex(p => p.sid == this.st.user.sid)]}, + ); const vModule = await import("@/variants/" + game.vname + ".js"); window.V = vModule.VariantRules; this.vr = new V(game.fen); diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index e76139a1..563ecd30 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -78,7 +78,7 @@ import { NbPlayers } from "@/data/nbPlayers"; import { checkChallenge } from "@/data/challengeCheck"; import { ArrayFun } from "@/utils/array"; import { ajax } from "@/utils/ajax"; -import { getRandString } from "@/utils/alea"; +import { getRandString, shuffle } from "@/utils/alea"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; import { GameStorage } from "@/utils/storage"; @@ -564,11 +564,14 @@ export default { window.V = vModule.VariantRules; let players = [c.from]; Array.prototype.push.apply(players, c.seats); - let gameInfo = + // These game informations will be sent to other players + const gameInfo = { + gameId: getRandString(), fen: c.fen || V.GenRandInitFen(), // Players' names may be required if game start when a player is offline - players: players.map(p => { return {name:p.name, sid:p.sid} }), + // Shuffle players order (white then black then other colors). + players: shuffle(players.map(p => { return {name:p.name, sid:p.sid} })), vid: c.vid, timeControl: c.timeControl, }; @@ -584,7 +587,7 @@ export default { // NOTE: for live games only (corr games are launched on server) newGame: function(gameInfo) { GameStorage.init({ - gameId: getRandString(), + gameId: gameInfo.gameId, vname: this.getVname(gameInfo.vid), fenStart: gameInfo.fen, players: gameInfo.players,