X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=f8cf2a7afd04d7907e8a1d06216a13e16a111aee;hb=27d18a24ff2f3b04a7bf26b9b95c7214f8e5076a;hp=9d755df171bb5e0a91ff5e2c25d8aef1b4c8c340;hpb=b988c726df078aa456bd47709f6eee0f73dc5abd;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 9d755df1..f8cf2a7a 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -11,7 +11,9 @@ button(@click="abortGame") {{ st.tr["Game is too boring"] }} BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove" @gameover="gameOver") - .button-group(v-if="game.mode!='analyze'") + // TODO: show players names + clocks state + 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 @@ -25,7 +27,8 @@ import BaseGame from "@/components/BaseGame.vue"; //import Chat from "@/components/Chat.vue"; //import MoveList from "@/components/MoveList.vue"; import { store } from "@/store"; -import { GameStorage } from "@/utils/storage"; +import { GameStorage } from "@/utils/gameStorage"; +import { ppt } from "@/utils/datetime"; export default { name: 'my-game', @@ -41,6 +44,7 @@ export default { rid: "" }, game: { }, //passed to BaseGame + virtualClocks: [0, 0], //initialized with true game.clocks vr: null, //"variant rules" object initialized from FEN drawOfferSent: false, //did I just ask for draw? (TODO: use for button style) people: [ ], //potential observers (TODO) @@ -55,6 +59,36 @@ export default { this.loadGame(); } }, + "game.clocks": function(newState) { + this.virtualClocks = newState.map(s => ppt(s)); + const currentTurn = this.vr.turn; + const colorIdx = ["w","b","g","r"].indexOf(currentTurn); + let countdown = newState[colorIdx] - + (Date.now() - this.game.initime[colorIdx])/1000; + const myTurn = (currentTurn == this.game.mycolor); + let clockUpdate = setInterval(() => { + if (countdown <= 0 || this.vr.turn != currentTurn) + { + clearInterval(clockUpdate); + if (countdown <= 0 && myTurn) + { + this.$refs["basegame"].endGame( + this.game.mycolor=="w" ? "0-1" : "1-0", "Time"); + this.game.players.forEach(p => { + if (p.sid != this.st.user.sid) + { + this.st.conn.send(JSON.stringify({ + code: "timeover", + target: p.sid, + })); + } + }); + } + } + // TODO: with Vue 3, just do this.virtualClocks[colorIdx] = ppt(--countdown) + this.$set(this.virtualClocks, colorIdx, ppt(Math.max(0, --countdown))); + }, 1000); + }, }, created: function() { if (!!this.$route.params["id"]) @@ -219,8 +253,10 @@ export default { else { console.log(event); + return; //const message = event. - this.gameOver("?"); + // Next line will trigger a "gameover" event, bubbling up till here + this.$refs["basegame"].endGame("?", "Abort: " + event.msg); //TODO this.game.players.forEach(p => { if (!!p.sid && p.sid != this.st.user.sid) { @@ -246,35 +282,41 @@ export default { } }); // Next line will trigger a "gameover" event, bubbling up till here - this.$refs["basegame"].endGame(this.game.mycolor=="w" ? "0-1" : "1-0"); + this.$refs["basegame"].endGame( + this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); }, - // 4 cases for loading a game: - // - from localStorage (one running game I play) - // - from indexedDB (one completed live game) + // 3 cases for loading a game: + // - from indexedDB (running or completed live game I play) // - from server (one correspondance game I play[ed] or not) // - from remote peer (one live game I don't play, finished or not) - loadGame: function() { - GameStorage.get(this.gameRef, async (game) => { + loadGame: function(game) { + const afterRetrieval = async (game) => { + const vModule = await import("@/variants/" + game.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 bs VS computer {mycolor: [undefined,"w","b"][1 + 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); - // Post-processing: decorate each move with current FEN: - // (to be able to jump to any position quickly) - game.moves.forEach(move => { - // NOTE: this is doing manually what BaseGame.play() achieve... - // but in a lighter "fast-forward" way - move.color = this.vr.turn; - this.vr.play(move); - move.fen = this.vr.getFen(); + }; + if (!!game) + return afterRetrival(game); + if (!!this.gameRef.rid) + { + // TODO: just send a game request message to the remote player, + // and when receiving answer just call loadGame(received_game) + // + remote peer should have registered us as an observer + // (send moves updates + resign/abort/draw actions) + return; + } + else + { + GameStorage.get(this.gameRef.id, async (game) => { + afterRetrieval(game); }); - this.vr.re_init(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) // if (this.gameInfo.players.some(p => p.sid == this.st.user.sid)) @@ -304,37 +346,47 @@ export default { return obj; }, {}); // Send move ("newmove" event) to opponent(s) (if ours) - // (otherwise move.elapsed is supposed to be already transmitted) let addTime = undefined; if (move.color == this.game.mycolor) { - const elapsed = Date.now() - GameStorage.getInitime(); + const elapsed = Date.now() - this.game.initime[colorIdx]; + // elapsed time is measured in milliseconds + addTime = this.game.increment - elapsed/1000; this.game.players.forEach(p => { if (p.sid != this.st.user.sid) { this.st.conn.send(JSON.stringify({ code: "newmove", target: p.sid, - move: Object.assign({}, filtered_move, {elapsed: elapsed}), + move: Object.assign({}, filtered_move, {addTime: addTime}), })); } }); - move.elapsed = elapsed; - // elapsed time is measured in milliseconds - addTime = this.game.increment - elapsed/1000; } - GameStorage.update({ + else + addTime = move.addTime; //supposed transmitted + const nextIdx = ["w","b","g","r"].indexOf(this.vr.turn); + GameStorage.update(this.gameRef.id, + { colorIdx: colorIdx, + nextIdx: nextIdx, move: filtered_move, fen: move.fen, addTime: addTime, - initime: (this.vr.turn == this.game.mycolor), //my turn now? }); + // Also update current game object: + this.game.moves.push(move); + this.game.fen = move.fen; + //TODO: just this.game.clocks[colorIdx] += (!!addTime ? addTime : 0); + this.$set(this.game.clocks, colorIdx, + this.game.clocks[colorIdx] + (!!addTime ? addTime : 0)); + this.game.initime[nextIdx] = Date.now(); }, // TODO: this update function should also work for corr games gameOver: function(score) { this.game.mode = "analyze"; - GameStorage.update({ + GameStorage.update(this.gameRef.id, + { score: score, }); },