From: Benjamin Auder Date: Tue, 25 Jun 2019 15:08:10 +0000 (+0200) Subject: Almost fixed clocks update (incoherent FEN state) X-Git-Url: https://git.auder.net/images/assets/js/rpsls.js?a=commitdiff_plain;h=809ba2aa7682693e33f7b92c1fdfbb3b004befb4;p=vchess.git Almost fixed clocks update (incoherent FEN state) --- diff --git a/client/src/utils/gameStorage.js b/client/src/utils/gameStorage.js index 94c1c30c..75696a09 100644 --- a/client/src/utils/gameStorage.js +++ b/client/src/utils/gameStorage.js @@ -12,7 +12,7 @@ // fen: string, // moves: array of Move objects, // clocks: array of integers, -// initime: integer (when clock start running), +// initime: array of integers (when clock start running), // score: string (several options; '*' == running), // } @@ -64,7 +64,7 @@ export const GameStorage = // TODO: also option to takeback a move ? // NOTE: for live games only (all on server for corr) - update: function(gameId, obj) //colorIdx, move, fen, addTime, initime, score + update: function(gameId, obj) //colorIdx, nextIdx, move, fen, addTime, score { dbOperation((db) => { let objectStore = db.transaction("games", "readwrite").objectStore("games"); @@ -76,9 +76,8 @@ export const GameStorage = game.fen = obj.fen; if (!!obj.addTime) //NaN if first move in game game.clocks[obj.colorIdx] += obj.addTime; + game.initime[obj.nextIdx] = Date.now(); } - if (!!obj.initime) //just a flag (true) - game.initime = Date.now(); if (!!obj.score) game.score = obj.score; objectStore.put(game); //save updated data diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index d3a4bd7b..9271f487 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -11,8 +11,8 @@ button(@click="abortGame") {{ st.tr["Game is too boring"] }} BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove" @gameover="gameOver") - // TODO: virtualClocks[...], not "clockState" - div Time: {{ clockState }} + // 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 @@ -44,23 +44,12 @@ export default { rid: "" }, game: { }, //passed to BaseGame - virtualClocks: [ ], //initialized with true game.clocks + 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) }; }, - - // TODO: this method should disappear and virtualClocks already be "prettified": - // all computations are done when game.clocks are updated (see below) - computed: { - clockState: function() { - if (this.virtualClocks.length == 0) - return; //nothing to display for now - return ppt(this.virtualClocks[0]) + " - " + ppt(this.virtualClocks[1]); - }, - }, - watch: { '$route' (to, from) { if (!!to.params["id"]) @@ -71,16 +60,49 @@ export default { } }, "game.clocks": function(newState) { - this.virtualClocks = newState; - setInterval(function() { + 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); - // TODO: run clock of current turn, stop at 0, clearInterval in the end - // https://www.geeksforgeeks.org/create-countdown-timer-using-javascript/ - // if it was my turn, call gameOver. Otherwise just stay at 0 and wait. - if ( ...........) -//à 0, bloquer puis si mon temps : perte au temps. Sinon attendre message adversaire (il peut être offline). +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() { @@ -249,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) { @@ -275,7 +297,8 @@ 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"); }, // 3 cases for loading a game: // - from indexedDB (running or completed live game I play) @@ -285,7 +308,7 @@ export default { 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 @@ -341,7 +364,7 @@ export default { let addTime = undefined; if (move.color == this.game.mycolor) { - const elapsed = Date.now() - this.game.initime; + 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 => { @@ -357,20 +380,20 @@ export default { } else addTime = move.addTime; //supposed transmitted - const myTurnNow = (this.vr.turn == this.game.mycolor); + 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: myTurnNow, }); // 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 = (myTurnNow ? Date.now() : undefined); + this.game.initime[nextIdx] = Date.now(); }, // TODO: this update function should also work for corr games gameOver: function(score) { diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 22aa53e0..4d1d8095 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -591,7 +591,8 @@ export default { newGame: function(gameInfo) { // Extract times (in [milli]seconds), set clocks const tc = extractTime(gameInfo.timeControl); - const IPlayFirst = (gameInfo.players[0].sid == this.st.user.sid); + let initime = [...Array(gameInfo.players.length)]; + initime[0] = Date.now(); const game = { // Game infos: constant @@ -606,7 +607,7 @@ export default { fen: gameInfo.fen, moves: [], clocks: [...Array(gameInfo.players.length)].fill(tc.mainTime), - initime: (IPlayFirst ? Date.now() : undefined), + initime: initime, score: "*", }; GameStorage.add(game);