X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=9271f487fa7b6cf46308c5ea0d82e15d17db4614;hb=809ba2aa7682693e33f7b92c1fdfbb3b004befb4;hp=9be880693c78cf04c41d255d3f96dda1e171d06f;hpb=d4036efea5b57656478affd7d71f53dcea0f8017;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 9be88069..9271f487 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -11,6 +11,8 @@ button(@click="abortGame") {{ st.tr["Game is too boring"] }} BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove" @gameover="gameOver") + // 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 @@ -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,51 @@ 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); + +console.log(this.vr.turn + " " + currentTurn + " " + this.vr.getFen()); + + let clockUpdate = setInterval(() => { + + + + +console.log(countdown); + console.log(this.vr.turn +" " + currentTurn + " " + this.vr.getFen()); + +// TODO: incoherent state because vr is altered in BaseGame to replay game + // ==> should use a temporary vr ? + + + + 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"]) @@ -222,7 +271,7 @@ export default { return; //const message = event. // Next line will trigger a "gameover" event, bubbling up till here - this.$refs["basegame"].endGame("?"); + this.$refs["basegame"].endGame("?", "Abort: " + event.msg); //TODO this.game.players.forEach(p => { if (!!p.sid && p.sid != this.st.user.sid) { @@ -248,25 +297,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.fenStart); + 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)]}, ); - }); + }; + 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); + }); + } // // 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)) @@ -296,37 +361,45 @@ 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; + 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, }); },