X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=ffb7564ec97fed55ba238b3649a7fd8e75c94e6e;hb=978fa11c8c9838018124a36ec14e06856d948d1e;hp=99b1f22eef7aa5d6a23ee74a1435cf0a4112a57e;hpb=1c15969ecec2a86ee7dffe570e53dfd61fd06b22;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 99b1f22e..ffb7564e 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -212,9 +212,6 @@ export default { curDiag: "", //for corr moves confirmation conn: null, roomInitialized: false, - // If newmove has wrong index: ask fullgame again: - askGameTime: 0, - gameIsLoading: false, // If asklastate got no reply, ask again: gotLastate: false, gotMoveIdx: -1, //last move index received @@ -252,9 +249,6 @@ export default { }, // NOTE: some redundant code with Hall.vue (mostly related to people array) created: function() { - if (this.$route.query["focus"] === "false") - // Focus explicitely set to false from Hall (live game) - this.focus = false; this.atCreation(); }, mounted: function() { @@ -360,8 +354,6 @@ export default { this.rematchOffer = ""; this.lastate = undefined; this.roomInitialized = false; - this.askGameTime = 0; - this.gameIsLoading = false; this.gotLastate = false; this.gotMoveIdx = -1; this.opponentGotMove = false; @@ -539,27 +531,6 @@ export default { this.$router.push( "/game/" + nextGid + "/?next=" + JSON.stringify(this.nextIds)); }, - askGameAgain: function() { - this.gameIsLoading = true; - const currentUrl = document.location.href; - const doAskGame = () => { - if (document.location.href != currentUrl) return; //page change - this.fetchGame((game) => { - if (!!game) - // This is my game: just reload. - this.loadGame(game); - else - // Just ask fullgame again (once!), this is much simpler. - // If this fails, the user could just reload page :/ - this.send("askfullgame"); - }); - }; - // Delay of at least 2s between two game requests - const now = Date.now(); - const delay = Math.max(2000 - (now - this.askGameTime), 0); - this.askGameTime = now; - setTimeout(doAskGame, delay); - }, socketMessageListener: function(msg) { if (!this.conn) return; const data = JSON.parse(msg.data); @@ -749,10 +720,15 @@ export default { if (!this.game || !this.game.moves) this.lastateAsked = true; else this.sendLastate(data.from); break; + // TODO: possible bad scenario: reload page while oppponent sends a + // move => get both lastate and newmove, process both, add move twice. + // Confirm scenario? Fix? case "lastate": { // Got opponent infos about last move this.gotLastate = true; this.lastate = data.data; + if (this.lastate.movesCount - 1 > this.gotMoveIdx) + this.gotMoveIdx = this.lastate.movesCount - 1; if (this.game.rendered) // Game is rendered (Board component) this.processLastate(); @@ -760,78 +736,77 @@ export default { break; } case "newmove": { + +// DEBUG: +console.log("Receive move"); +console.log(data.data); +//moveslist not updated when receiving a move? (see in baseGame) + const movePlus = data.data; const movesCount = this.game.moves.length; - if (movePlus.index > movesCount) { - // This can only happen if I'm an observer and missed a move. - if (this.gotMoveIdx < movePlus.index) - this.gotMoveIdx = movePlus.index; - if (!this.gameIsLoading) this.askGameAgain(); + if ( + movePlus.index < movesCount || + this.gotMoveIdx >= movePlus.index + ) { + // Opponent re-send but we already have the move: + // (maybe he didn't receive our pingback...) + this.send("gotmove", {data: movePlus.index, target: data.from}); } else { - if ( - movePlus.index < movesCount || - this.gotMoveIdx >= movePlus.index - ) { - // Opponent re-send but we already have the move: - // (maybe he didn't receive our pingback...) - this.send("gotmove", {data: movePlus.index, target: data.from}); - } else { - this.gotMoveIdx = movePlus.index; - const receiveMyMove = (movePlus.color == this.game.mycolor); - const moveColIdx = ["w", "b"].indexOf(movePlus.color); - if (!receiveMyMove && !!this.game.mycolor) { - // Notify opponent that I got the move: - this.send( - "gotmove", - { data: movePlus.index, target: data.from } + this.gotMoveIdx = movePlus.index; + const receiveMyMove = (movePlus.color == this.game.mycolor); + const moveColIdx = ["w", "b"].indexOf(movePlus.color); + if (!receiveMyMove && !!this.game.mycolor) { + // Notify opponent that I got the move: + this.send( + "gotmove", + { data: movePlus.index, target: data.from } + ); + // And myself if I'm elsewhere: + if (!this.focus) { + notify( + "New move", + { + body: + (this.game.players[moveColIdx].name || "@nonymous") + + " just played." + } ); - // And myself if I'm elsewhere: - if (!this.focus) { - notify( - "New move", - { - body: - (this.game.players[moveColIdx].name || "@nonymous") + - " just played." - } - ); - } } - if (movePlus.cancelDrawOffer) { - // Opponent refuses draw - this.drawOffer = ""; - // NOTE for corr games: drawOffer reset by player in turn - if ( - this.game.type == "live" && - !!this.game.mycolor && - !receiveMyMove - ) { - GameStorage.update(this.gameRef, { drawOffer: "" }); - } + } + if (movePlus.cancelDrawOffer) { + // Opponent refuses draw + this.drawOffer = ""; + // NOTE for corr games: drawOffer reset by player in turn + if ( + this.game.type == "live" && + !!this.game.mycolor && + !receiveMyMove + ) { + GameStorage.update(this.gameRef, { drawOffer: "" }); } - this.$refs["basegame"].play(movePlus.move, "received"); - // Freeze time while the move is being play - // (TODO: a callback would be cleaner here) - clearInterval(this.clockUpdate); - this.clockUpdate = null; - const freezeDuration = ["all", "highlight"].includes(V.ShowMoves) - // 250 = length of animation, 500 = delay between sub-moves - ? 250 + 750 * - (Array.isArray(movePlus.move) ? movePlus.move.length - 1 : 0) - // Incomplete information: no move animation - : 0; - setTimeout( - () => { - this.game.clocks[moveColIdx] = movePlus.clock; - this.processMove( - movePlus.move, - { receiveMyMove: receiveMyMove } - ); - }, - freezeDuration - ); } + this.$refs["basegame"].play(movePlus.move, "received"); + // Freeze time while the move is being play + // (TODO: a callback would be cleaner here) + clearInterval(this.clockUpdate); + this.clockUpdate = null; + const freezeDuration = ["all", "highlight"].includes(V.ShowMoves) + // 250 = length of animation, 500 = delay between sub-moves + ? 250 + 750 * + (Array.isArray(movePlus.move) ? movePlus.move.length - 1 : 0) + // Incomplete information: no move animation + : 0; + setTimeout( + () => { + this.game.clocks[moveColIdx] = movePlus.clock; + this.processMove( + movePlus.move, + { receiveMyMove: receiveMyMove } + ); + }, + freezeDuration + ); } break; } @@ -1034,6 +1009,7 @@ export default { // Game state (including FEN): will be updated moves: [], clocks: [-1, -1], //-1 = unstarted + chats: [], score: "*" } ); @@ -1054,7 +1030,7 @@ export default { let gameInfo = { id: getRandString(), //ignored if corr fen: V.GenRandInitFen(this.game.randomness), - players: this.game.players.reverse(), + players: [this.game.players[1], this.game.players[0]], vid: this.game.vid, cadence: this.game.cadence }; @@ -1253,30 +1229,22 @@ export default { game ); this.$refs["basegame"].re_setVariables(this.game); - if (!this.gameIsLoading) { - // Initial loading: - this.gotMoveIdx = game.moves.length - 1; - // If we arrive here after 'nextGame' action, the board might be hidden - let boardDiv = document.querySelector(".game"); - if (!!boardDiv && boardDiv.style.visibility == "hidden") - boardDiv.style.visibility = "visible"; - } + // Initial loading: + this.gotMoveIdx = game.moves.length - 1; + // If we arrive here after 'nextGame' action, the board might be hidden + let boardDiv = document.querySelector(".game"); + if (!!boardDiv && boardDiv.style.visibility == "hidden") + boardDiv.style.visibility = "visible"; this.re_setClocks(); this.$nextTick(() => { this.game.rendered = true; // Did lastate arrive before game was rendered? - if (this.lastate) this.processLastate(); + if (!!this.lastate) this.processLastate(); }); if (this.lastateAsked) { this.lastateAsked = false; this.sendLastate(game.oppsid); } - if (this.gameIsLoading) { - this.gameIsLoading = false; - if (this.gotMoveIdx >= game.moves.length) - // Some moves arrived meanwhile... - this.askGameAgain(); - } if (!!callback) callback(); }, loadVariantThenGame: async function(game, callback) { @@ -1504,7 +1472,7 @@ export default { this.opponentGotMove = false; this.send("newmove", {data: sendMove}); // If the opponent doesn't reply gotmove soon enough, re-send move: - // Do this at most 2 times, because mpore would mean network issues, + // Do this at most 2 times, because more would mean network issues, // opponent would then be expected to disconnect/reconnect. let counter = 1; const currentUrl = document.location.href; @@ -1536,6 +1504,7 @@ export default { }; if ( this.game.type == "corr" && + V.CorrConfirm && moveCol == this.game.mycolor && !data.receiveMyMove ) { @@ -1579,7 +1548,8 @@ export default { }); document.querySelector("#confirmDiv > .card").style.width = boardDiv.offsetWidth + "px"; - } else { + } + else { // Incomplete information: just ask confirmation // Hide the board, because otherwise it could reveal infos boardDiv.style.visibility = "hidden"; @@ -1772,19 +1742,19 @@ span.yourturn background-color: lightyellow .draw-received, .draw-received:hover - background-color: lightgreen + background-color: #73C6B6 .draw-threerep, .draw-threerep:hover - background-color: #e4d1fc + background-color: #D2B4DE .rematch-sent, .rematch-sent:hover background-color: lightyellow .rematch-received, .rematch-received:hover - background-color: lightgreen + background-color: #48C9B0 .somethingnew - background-color: #c5fefe + background-color: #D2B4DE .diagram margin: 0 auto