X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=0735b76b0490a4c41390a8a41b4f3489ed1ca670;hb=ad030c7d24804fbfa06158e93d89a3f101d2c8b3;hp=878e7718e8101fea08ce48402a49d79785f3c31b;hpb=5e38a642ffa0ef5f0076aa0df05aa935b027f649;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 878e7718..0735b76b 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -7,7 +7,7 @@ main ) .card label.modal-close(for="modalRules") - h4#variantNameInGame(@click="gotoRules") {{ game.vname }} + a#variantNameInGame(:href="'/#/variants/'+game.vname") {{ game.vname }} div(v-html="rulesContent") input#modalScore.modal(type="checkbox") div#scoreDiv( @@ -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 @@ -310,9 +307,6 @@ export default { ) ); }, - gotoRules: function() { - this.$router.push("/variants/" + this.game.vname); - }, participateInChat: function(p) { return Object.keys(p.tmpIds).some(x => p.tmpIds[x].focus) && !!p.name; }, @@ -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; @@ -429,10 +421,14 @@ export default { isConnected: function(index) { const player = this.game.players[index]; // Is it me ? In this case no need to bother with focus - if (this.st.user.sid == player.sid || this.st.user.id == player.id) + if ( + this.st.user.sid == player.sid || + (!!player.name && this.st.user.id == player.id) + ) { // Still have to check for name (because of potential multi-accounts // on same browser, although this should be rare...) return (!this.st.user.name || this.st.user.name == player.name); + } // Try to find a match in people: return ( ( @@ -446,7 +442,7 @@ export default { ) || ( - !!player.id && + player.id > 0 && Object.values(this.people).some(p => { return ( p.id == player.id && @@ -535,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); @@ -745,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(); @@ -756,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; } @@ -883,6 +862,7 @@ export default { this.addAndGotoLiveGame(gameInfo); } else if ( gameType == "corr" && + this.st.user.id > 0 && gameInfo.players.some(p => p.id == this.st.user.id) ) { this.$router.push("/game/" + gameInfo.id); @@ -1049,7 +1029,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 }; @@ -1119,7 +1099,10 @@ export default { const gtype = game.type || this.getGameType(game); const tc = extractTime(game.cadence); const myIdx = game.players.findIndex(p => { - return p.sid == this.st.user.sid || p.id == this.st.user.id; + return ( + p.sid == this.st.user.sid || + (!!p.name && p.id == this.st.user.id) + ); }); // Sometimes the name isn't stored yet (TODO: why?) if ( @@ -1245,30 +1228,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) { @@ -1496,7 +1471,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; @@ -1528,6 +1503,7 @@ export default { }; if ( this.game.type == "corr" && + V.CorrConfirm && moveCol == this.game.mycolor && !data.receiveMyMove ) { @@ -1571,7 +1547,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"; @@ -1603,7 +1580,10 @@ export default { document.getElementById("modalScore").checked = true; this.$set(this.game, "scoreMsg", scoreMsg); const myIdx = this.game.players.findIndex(p => { - return p.sid == this.st.user.sid || p.id == this.st.user.id; + return ( + p.sid == this.st.user.sid || + (!!p.name && p.id == this.st.user.id) + ); }); if (myIdx >= 0) { // OK, I play in this game @@ -1761,19 +1741,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 @@ -1790,11 +1770,13 @@ button.acceptBtn button.refuseBtn background-color: red -h4#variantNameInGame - cursor: pointer +a#variantNameInGame + color: var(--card-fore-color) text-align: center - text-decoration: underline font-weight: bold + font-size: calc(1rem * var(--heading-ratio)) + line-height: 1.2 + margin: calc(1.5 * var(--universal-margin))