X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=e417e5e434506fb7adf826616edc9b4d0b5e772f;hb=e69f159dfdeb8dbe5eee89c6e6f78fd9e7323640;hp=c292252d81fb0df42eb74ed2d90b3f73903a7d40;hpb=5f13148449c73de92993b7961c077167563b84e5;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index c292252d..e417e5e4 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -11,13 +11,14 @@ button(@click="abortGame") {{ st.tr["Game is too boring"] }} BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove" @gameover="gameOver") - // TODO: also show players names + textarea#mvMessage(v-if="game.type=='corr'" v-model="corrMsg") + div Names: {{ game.players[0].name }} - {{ game.players[1].name }} div Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }} .button-group(v-if="game.mode!='analyze' && game.score=='*'") button(@click="offerDraw") Draw button(@click="() => abortGame()") Abort button(@click="resign") Resign - div(v-if="game.mode=='corr'") + div(v-if="game.type=='corr'") textarea(v-show="score=='*' && vr.turn==game.mycolor" v-model="corrMsg") div(v-show="cursor>=0") {{ moves[cursor].message }} @@ -38,6 +39,7 @@ import { store } from "@/store"; import { GameStorage } from "@/utils/gameStorage"; import { ppt } from "@/utils/datetime"; import { extractTime } from "@/utils/timeControl"; +import { ArrayFun } from "@/utils/array"; export default { name: 'my-game', @@ -52,7 +54,7 @@ export default { id: "", rid: "" }, - game: {}, //passed to BaseGame + game: {players:[{name:""},{name:""}]}, //passed to BaseGame corrMsg: "", //to send offline messages in corr games virtualClocks: [0, 0], //initialized with true game.clocks vr: null, //"variant rules" object initialized from FEN @@ -83,23 +85,14 @@ export default { : 0; return ppt(newState[i] - removeTime); }); - const myTurn = (currentTurn == this.game.mycolor); let clockUpdate = setInterval(() => { - if (countdown <= 0 || this.vr.turn != currentTurn || this.game.score != "*") + if (countdown < 0 || this.vr.turn != currentTurn || this.game.score != "*") { clearInterval(clockUpdate); - if (countdown <= 0 && myTurn) + if (countdown < 0) { this.$refs["basegame"].endGame( - this.game.mycolor=="w" ? "0-1" : "1-0", "Time"); - const oppsid = this.getOppSid(); - if (!!oppsid) - { - this.st.conn.send(JSON.stringify({ - code: "timeover", - target: oppsid, - })); - } + this.vr.turn=="w" ? "0-1" : "1-0", "Time"); } } else @@ -109,14 +102,6 @@ export default { } }, 1000); }, - // In case variants array was't loaded when game was retrieved - "st.variants": function(variantArray) { - if (!!this.game.vname && this.game.vname == "") - { - this.game.vname = variantArray.filter(v => - v.id == this.game.vid)[0].name; - } - }, }, // TODO: redundant code with Hall.vue (related to people array) created: function() { @@ -179,67 +164,50 @@ export default { } case "identity": { - const pIdx = this.people.findIndex(p => p.sid == data.user.sid); - this.people[pIdx].id = data.user.id; - this.people[pIdx].name = data.user.name; - break; - } - case "newmove": - // NOTE: next call will trigger processMove() - this.$refs["basegame"].play(data.move, - "receive", this.game.vname!="Dark" ? "animate" : null); - break; - case "pong": //received if we sent a ping (game still alive on our side) - { - if (this.game.type == "live") //corr games are always complete + let player = this.people.find(p => p.sid == data.user.sid); + player.id = data.user.id; + player.name = data.user.name; + // Sending last state only for live games: corr games are complete + if (this.game.type == "live" && this.game.oppsid == player.sid) { - // Send our "last state" informations to opponent(s) + // Send our "last state" informations to opponent const L = this.game.moves.length; this.st.conn.send(JSON.stringify({ code: "lastate", - target: this.getOppSid(), //he's connected for sure - gameId: this.gameRef.id, - lastMove: (L>0 ? this.game.moves[L-1] : undefined), - score: this.game.score, - movesCount: L, - drawOffer: this.drawOffer, - clocks: this.game.clocks, + target: player.sid, + state: + { + lastMove: (L>0 ? this.game.moves[L-1] : undefined), + score: this.game.score, + movesCount: L, + drawOffer: this.drawOffer, + clocks: this.game.clocks, + } })); } break; } + case "newmove": + // NOTE: this call to play() will trigger processMove() + this.$refs["basegame"].play(data.move, + "receive", this.game.vname!="Dark" ? "animate" : null); + break; case "lastate": //got opponent infos about last move { const L = this.game.moves.length; - if (this.gameRef.id != data.gameId) - break; //games IDs don't match: nothing we can do... - // OK, opponent still in game (which might be over) if (data.movesCount > L) { // Just got last move from him - this.$refs["basegame"].play(data.lastMove, "receive"); + this.$refs["basegame"].play(data.lastMove, + "receive", this.game.vname!="Dark" ? "animate" : null); if (data.score != "*" && this.game.score == "*") { // Opponent resigned or aborted game, or accepted draw offer // (this is not a stalemate or checkmate) this.$refs["basegame"].endGame(data.score, "Opponent action"); } - this.game.clocks = data.clocks; - this.drawOffer = data.drawOffer; - } - else if (data.movesCount < L) - { - // We must tell last move to opponent - this.st.conn.send(JSON.stringify({ - code: "lastate", - target: this.getOppSid(), //we know he is connected - gameId: this.gameRef.id, - lastMove: (L>0 ? this.game.moves[L-1] : undefined), - score: this.game.score, - movesCount: L, - drawOffer: this.drawOffer, - clocks: this.game.clocks, - })); + this.game.clocks = data.clocks; //TODO: check this? + this.drawOffer = data.drawOffer; //does opponent offer draw? } break; } @@ -247,10 +215,6 @@ export default { this.$refs["basegame"].endGame( this.game.mycolor=="w" ? "1-0" : "0-1", "Resign"); break; - case "timeover": - this.$refs["basegame"].endGame( - this.game.mycolor=="w" ? "1-0" : "0-1", "Time"); - break; case "abort": this.$refs["basegame"].endGame("?", "Abort: " + data.msg); break; @@ -274,7 +238,6 @@ export default { // ==> on "newmove", check "drawOffer" field case "connect": { - // TODO: if opponent connect, trigger lastate chain of events... this.people.push({name:"", id:0, sid:data.sid}); this.st.conn.send(JSON.stringify({code:"askidentity", target:data.sid})); break; @@ -357,25 +320,24 @@ export default { // - from remote peer (one live game I don't play, finished or not) loadGame: function(game) { const afterRetrieval = async (game) => { - // NOTE: variants array might not be available yet, thus the two next lines - const variantCell = this.st.variants.filter(v => v.id == game.vid); - const vname = (variantCell.length > 0 ? variantCell[0].name : ""); - if (!game.fen) - game.fen = game.fenStart; //game wasn't started + const vModule = await import("@/variants/" + game.vname + ".js"); + window.V = vModule.VariantRules; + this.vr = new V(game.fen); const gtype = (game.timeControl.indexOf('d') >= 0 ? "corr" : "live"); - // TODO: this is not really beautiful (uid on corr players...) - if (gtype == "corr" && game.players[0].color == "b") - [ game.players[0], game.players[1] ] = [ game.players[1], game.players[0] ]; - const myIdx = game.players.findIndex(p => { - return p.sid == this.st.user.sid || p.uid == this.st.user.id; - }); const tc = extractTime(game.timeControl); if (gtype == "corr") { + if (game.players[0].color == "b") + { + // Adopt the same convention for live and corr games: [0] = white + [ game.players[0], game.players[1] ] = + [ game.players[1], game.players[0] ]; + } // corr game: needs to compute the clocks + initime game.clocks = [tc.mainTime, tc.mainTime]; game.initime = [0, 0]; const L = game.moves.length; + game.moves.sort((m1,m2) => m1.idx - m2.idx); //in case of if (L >= 3) { let addTime = [0, 0]; @@ -389,7 +351,21 @@ export default { } if (L >= 1) game.initime[L%2] = game.moves[L-1].played; + // Now that we used idx and played, re-format moves as for live games + game.moves = game.moves.map( (m) => { + const s = m.squares; + return { + appear: s.appear, + vanish: s.vanish, + start: s.start, + end: s.end, + message: m.message, + }; + }); } + const myIdx = game.players.findIndex(p => { + return p.sid == this.st.user.sid || p.uid == this.st.user.id; + }); if (gtype == "live" && game.clocks[0] < 0) //game unstarted { game.clocks = [tc.mainTime, tc.mainTime]; @@ -404,16 +380,12 @@ export default { }); } } - const vModule = await import("@/variants/" + vname + ".js"); - window.V = vModule.VariantRules; - this.vr = new V(game.fen); this.game = Object.assign({}, game, // NOTE: assign mycolor here, since BaseGame could also be VS computer { type: gtype, increment: tc.increment, - vname: vname, mycolor: [undefined,"w","b"][myIdx+1], // opponent sid not strictly required (or available), but easier // at least oppsid or oppid is available anyway: @@ -421,25 +393,20 @@ export default { oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid), } ); - if (!!this.game.oppid) - { - // Send ping to server (answer pong if players[s] are connected) - this.st.conn.send(JSON.stringify({code:"ping", target:this.game.oppid})); - } }; if (!!game) return afterRetrival(game); if (!!this.gameRef.rid) { + // Remote live game this.st.conn.send(JSON.stringify( {code:"askfullgame", target:this.gameRef.rid})); // (send moves updates + resign/abort/draw actions) } else { - GameStorage.get(this.gameRef.id, async (game) => { - afterRetrieval(game); - }); + // Local or corr game + GameStorage.get(this.gameRef.id, afterRetrieval); } }, // Post-process a move (which was just played) @@ -466,34 +433,71 @@ export default { // elapsed time is measured in milliseconds addTime = this.game.increment - elapsed/1000; } - this.st.conn.send(JSON.stringify({ - code: "newmove", - target: this.game.oppid, - move: Object.assign({}, filtered_move, {addTime: addTime}), - })); + let sendMove = Object.assign({}, filtered_move, {addTime: addTime}); + if (this.game.type == "corr") + sendMove.message = this.corrMsg; + const oppsid = this.getOppSid(); + if (!!oppsid) + { + this.st.conn.send(JSON.stringify({ + code: "newmove", + target: oppsid, + move: sendMove, + })); + } + if (this.game.type == "corr" && this.corrMsg != "") + { + // Add message to last move in BaseGame: + // TODO: not very good style... + this.$refs["basegame"].setCurrentMessage(this.corrMsg); + } } else addTime = move.addTime; //supposed transmitted const nextIdx = ["w","b"].indexOf(this.vr.turn); - GameStorage.update(this.gameRef.id, + // Since corr games are stored at only one location, update should be + // done only by one player for each move: + if (this.game.type == "live" || move.color == this.game.mycolor) { - move: filtered_move, - fen: move.fen, - clocks: this.game.clocks.map((t,i) => i==colorIdx - ? this.game.clocks[i] + addTime - : this.game.clocks[i]), - initime: this.game.initime.map((t,i) => i==nextIdx - ? Date.now() - : this.game.initime[i]), - }); + if (this.game.type == "corr") + { + GameStorage.update(this.gameRef.id, + { + fen: move.fen, + move: + { + squares: filtered_move, + message: this.corrMsg, + played: Date.now(), //TODO: on server? + idx: this.game.moves.length, + }, + }); + } + else //live + { + GameStorage.update(this.gameRef.id, + { + fen: move.fen, + move: filtered_move, + clocks: this.game.clocks.map((t,i) => i==colorIdx + ? this.game.clocks[i] + addTime + : this.game.clocks[i]), + initime: this.game.initime.map((t,i) => i==nextIdx + ? Date.now() + : this.game.initime[i]), + }); + } + } // Also update current game object: this.game.moves.push(move); this.game.fen = move.fen; //TODO: just this.game.clocks[colorIdx] += addTime; this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); this.game.initime[nextIdx] = Date.now(); + // Finally reset curMoveMessage if needed + if (this.game.type == "corr" && move.color == this.game.mycolor) + this.corrMsg = ""; }, - // TODO: this update function should also work for corr games gameOver: function(score) { this.game.mode = "analyze"; this.game.score = score;