X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=d3a4bd7b329d04be7890fe459ea0a4440cc67d2e;hb=5b87454c515b1fbf94e2c07ba7cb0cff21f38620;hp=7a99ef9b3348729ba96f28caa25abdb7d7dedaa8;hpb=ce87ac6a12007a62a55a45e404f818df3eb90f64;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 7a99ef9b..d3a4bd7b 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -1,29 +1,24 @@ - @@ -32,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', @@ -40,24 +36,31 @@ export default { BaseGame, }, // gameRef: to find the game in (potentially remote) storage - // mode: "live" or "corr" (correspondance game), or "analyze" data: function() { return { st: store.state, - gameRef: {id: "", rid: ""}, //given in URL (rid = remote ID) - gameInfo: {}, //passed to BaseGame - vr: null, //TODO - vname: "", //obtained from gameInfo (slightly redundant..) - mode: "analyze", //mutable - drawOfferSent: false, //did I just ask for draw? (TODO: draw variables?) - people: [], //potential observers (TODO) + gameRef: { //given in URL (rid = remote ID) + id: "", + rid: "" + }, + game: { }, //passed to BaseGame + virtualClocks: [ ], //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: { - analyze: function() { - return this.mode == "analyze"; + 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"]) @@ -67,6 +70,18 @@ export default { this.loadGame(); } }, + "game.clocks": function(newState) { + this.virtualClocks = newState; + setInterval(function() { + + // 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). + + }); + }, }, created: function() { if (!!this.$route.params["id"]) @@ -77,17 +92,14 @@ export default { } // TODO: how to know who is observing ? Send message to everyone with game ID ? // and then just listen to (dis)connect events - - // server always send "connect on " + URL ; then add to observers if game... // detect multiple tabs connected (when connect ask server if my SID is already in use) // router when access a game page tell to server I joined + game ID (no need rid) // and ask server for current joined (= observers) // when send to chat (or a move), reach only this group (send gid along) - // --> doivent être enregistrés comme observers au niveau du serveur... // non: poll users + events startObserving / stopObserving - + // (à faire au niveau du routeur ?) // TODO: also handle "draw accepted" (use opponents array?) // --> must give this info also when sending lastState... @@ -98,10 +110,9 @@ export default { switch (data.code) { case "newmove": - // TODO: observer on dark games must see all board ? Or alternate ? (seems better) - // ...or just see nothing as on buho21 - this.$refs["basegame"].play( - data.move, this.vname!="Dark" ? "animate" : null); + // 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.gameRef.id != data.gameId) @@ -110,7 +121,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, @@ -120,6 +131,7 @@ export default { }); break; // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves + // TODO: need to send along clock state (my current time) with my last move case "lastate": //got opponent infos about last move L = this.vr.moves.length; if (this.gameRef.id != data.gameId) @@ -128,7 +140,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, @@ -140,7 +152,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, @@ -149,11 +161,21 @@ export default { })); } else if (data.movesCount > L) //just got last move from him - this.play(data.lastMove, "animate"); + this.play(data.lastMove, "animate"); //TODO: wrong call (3 args) + break; + case "resign": + 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 "resign": //..you won! - this.endGame(this.mycolor=="w"?"1-0":"0-1"); + case "abort": + this.$refs["basegame"].endGame("?", "Abort: " + data.msg); break; + // TODO: drawaccepted (click draw button before sending move ==> draw offer in move) + // ==> on "newmove", check "drawOffer" field // TODO: also use (dis)connect info to count online players? case "gameconnect": case "gamedisconnect": @@ -176,14 +198,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. @@ -203,7 +222,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; } @@ -217,41 +236,79 @@ export default { // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers" // if accept: send message "draw" }, - abortGame: function() { - if (!confirm("Abort the game?")) + abortGame: function(event) { + if (!event) + { + // First call show options: + let modalBox = document.getElementById("modalAbort"); + modalBox.checked = true; + } + else + { + console.log(event); return; - //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, - //send message: "gameOver" avec score "?" + //const message = event. + // Next line will trigger a "gameover" event, bubbling up till here + this.$refs["basegame"].endGame("?"); + this.game.players.forEach(p => { + if (!!p.sid && p.sid != this.st.user.sid) + { + this.st.conn.send(JSON.stringify({ + code: "abort", + msg: message, + target: p.sid, + })); + } + }); + } }, resign: function(e) { if (!confirm("Resign the game?")) return; - if (this.mode == "human" && this.oppConnected(this.oppid)) - { - try { - this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); - } catch (INVALID_STATE_ERR) { - return; + this.game.players.forEach(p => { + if (!!p.sid && p.sid != this.st.user.sid) + { + this.st.conn.send(JSON.stringify({ + code: "resign", + target: p.sid, + })); } - } - this.endGame(this.mycolor=="w"?"0-1":"1-0"); + }); + // Next line will trigger a "gameover" event, bubbling up till here + this.$refs["basegame"].endGame(this.game.mycolor=="w" ? "0-1" : "1-0"); }, - // 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: async function() { - this.gameInfo = GameStorage.get(this.gameRef); - -console.log(GameStorage.get(this.gameRef)); - - this.vname = this.gameInfo.vname; - this.mode = this.gameInfo.mode; - const vModule = await import("@/variants/" + this.vname + ".js"); - window.V = vModule.VariantRules; - this.vr = new V(this.gameInfo.fen); - + 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.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)) @@ -262,11 +319,66 @@ console.log(GameStorage.get(this.gameRef)); // }); // } }, - oppConnected: function(uid) { - return this.opponents.some(o => o.id == uid && o.online); - }, + // TODO: refactor this old "oppConnected" logic +// oppConnected: function(uid) { +// return this.opponents.some(o => o.id == uid && o.online); +// }, + // Post-process a move (which was just played) processMove: function(move) { - // TODO: process some opponent's move + if (!this.game.mycolor) + return; //I'm just an observer + // Update storage (corr or live) + const colorIdx = ["w","b","g","r"].indexOf(move.color); + // https://stackoverflow.com/a/38750895 + const allowed_fields = ["appear", "vanish", "start", "end"]; + const filtered_move = Object.keys(move) + .filter(key => allowed_fields.includes(key)) + .reduce((obj, key) => { + obj[key] = move[key]; + return obj; + }, {}); + // Send move ("newmove" event) to opponent(s) (if ours) + let addTime = undefined; + if (move.color == this.game.mycolor) + { + const elapsed = Date.now() - this.game.initime; + // 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, {addTime: addTime}), + })); + } + }); + } + else + addTime = move.addTime; //supposed transmitted + const myTurnNow = (this.vr.turn == this.game.mycolor); + GameStorage.update(this.gameRef.id, + { + colorIdx: colorIdx, + 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); + }, + // TODO: this update function should also work for corr games + gameOver: function(score) { + this.game.mode = "analyze"; + GameStorage.update(this.gameRef.id, + { + score: score, + }); }, }, };