X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=df6930cb0774698014f9f9d211918175d6f9fe46;hb=3c18611517fa137f089cbd866cbc8d3f4cc07735;hp=bbbb6760ef5b40de6a27a64ce70673b0046ca396;hpb=dcff8e82dd8bbc285d9c2d5d5e3b361a9ecfa9ac;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index bbbb6760..df6930cb 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -30,32 +30,62 @@ main #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2 span.variant-cadence {{ game.cadence }} span.variant-name {{ game.vname }} - button#chatBtn(onClick="window.doClick('modalChat')") Chat + span#nextGame( + v-if="nextIds.length > 0" + @click="showNextGame()" + ) + | {{ st.tr["Next_g"] }} + button#chatBtn.tooltip( + onClick="window.doClick('modalChat')" + aria-label="Chat" + ) + img(src="/images/icons/chat.svg") #actions(v-if="game.score=='*'") - button( + button.tooltip( @click="clickDraw()" :class="{['draw-' + drawOffer]: true}" + :aria-label="st.tr['Draw']" ) - | {{ st.tr["Draw"] }} - button( + img(src="/images/icons/draw.svg") + button.tooltip( v-if="!!game.mycolor" @click="abortGame()" + :aria-label="st.tr['Abort']" ) - | {{ st.tr["Abort"] }} - button( + img(src="/images/icons/abort.svg") + button.tooltip( v-if="!!game.mycolor" @click="resign()" + :aria-label="st.tr['Resign']" ) - | {{ st.tr["Resign"] }} + img(src="/images/icons/resign.svg") + button.tooltip( + v-else-if="!!game.mycolor" + @click="rematch()" + :aria-label="st.tr['Rematch']" + ) + img(src="/images/icons/rematch.svg") #playersInfo p span.name(:class="{connected: isConnected(0)}") | {{ game.players[0].name || "@nonymous" }} - span.time(v-if="game.score=='*'") {{ virtualClocks[0] }} + span.time( + v-if="game.score=='*'" + :class="{yourturn: !!vr && vr.turn == 'w'}" + ) + span.time-left {{ virtualClocks[0][0] }} + span.time-separator(v-if="!!virtualClocks[0][1]") : + span.time-right(v-if="!!virtualClocks[0][1]") {{ virtualClocks[0][1] }} span.split-names - span.name(:class="{connected: isConnected(1)}") | {{ game.players[1].name || "@nonymous" }} - span.time(v-if="game.score=='*'") {{ virtualClocks[1] }} + span.time( + v-if="game.score=='*'" + :class="{yourturn: !!vr && vr.turn == 'b'}" + ) + span.time-left {{ virtualClocks[1][0] }} + span.time-separator(v-if="!!virtualClocks[1][1]") : + span.time-right(v-if="!!virtualClocks[1][1]") {{ virtualClocks[1][1] }} BaseGame( ref="basegame" :game="game" @@ -100,7 +130,8 @@ export default { chats: [], rendered: false }, - virtualClocks: [0, 0], //initialized with true game.clocks + nextIds: [], + virtualClocks: [[0,0], [0,0]], //initialized with true game.clocks vr: null, //"variant rules" object initialized from FEN drawOffer: "", people: {}, //players + observers @@ -111,6 +142,7 @@ export default { 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, @@ -136,7 +168,11 @@ export default { const my = this.st.user; this.$set(this.people, my.sid, { id: my.id, name: my.name }); this.gameRef.id = this.$route.params["id"]; - this.gameRef.rid = this.$route.query["rid"]; //may be undefined + // rid = remote ID to find an observed live game, + // next = next corr games IDs to navigate faster + // (Both might be undefined) + this.gameRef.rid = this.$route.query["rid"]; + this.nextIds = JSON.parse(this.$route.query["next"] || "[]"); // Initialize connection this.connexionString = params.socketUrl + @@ -197,7 +233,9 @@ export default { const player = this.game.players[index]; // Is it me ? if (this.st.user.sid == player.sid || this.st.user.id == player.uid) - return true; + // 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 ( ( @@ -233,7 +271,7 @@ export default { notifyTurn: function(sid) { const player = this.people[sid]; const colorIdx = this.game.players.findIndex( - p => p.sid == sid || p.id == player.id); + p => p.sid == sid || p.uid == player.id); const color = ["w","b"][colorIdx]; const movesCount = this.game.moves.length; const yourTurn = @@ -241,6 +279,41 @@ export default { (color == "b" && movesCount % 2 == 1); this.send("turnchange", { target: sid, yourTurn: yourTurn }); }, + showNextGame: function() { + // Did I play in current game? If not, add it to nextIds list + if (this.game.score == "*" && this.vr.turn == this.game.mycolor) + this.nextIds.unshift(this.game.id); + const nextGid = this.nextIds.pop(); + this.$router.push( + "/game/" + nextGid + "/?next=" + JSON.stringify(this.nextIds)); + }, + rematch: function() { + alert("Unimplemented yet (soon :) )"); + // TODO: same logic as for draw, but re-click remove rematch offer (toggle) + }, + askGameAgain: function() { + this.gameIsLoading = true; + const doAskGame = () => { + if (!this.gameRef.rid) + // This is my game: just reload. + this.loadGame(); + else { + // Just ask fullgame again (once!), this is much simpler. + // If this fails, the user could just reload page :/ + let self = this; + (function askIfPeerConnected() { + if (!!self.people[self.gameRef.rid]) + self.send("askfullgame", { target: self.gameRef.rid }); + else setTimeout(askIfPeerConnected, 1000); + })(); + } + }; + // 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); @@ -325,7 +398,7 @@ export default { if (!self.gotLastate && !!self.people[user.sid]) askLastate(); }, - 750 + 1000 ); })(); } @@ -351,7 +424,20 @@ export default { } break; case "askfullgame": - this.send("fullgame", { data: this.game, target: data.from }); + const gameToSend = Object.keys(this.game) + .filter(k => + [ + "id","fen","players","vid","cadence","fenStart","vname", + "moves","clocks","initime","score","drawOffer" + ].includes(k)) + .reduce( + (obj, k) => { + obj[k] = this.game[k]; + return obj; + }, + {} + ); + this.send("fullgame", { data: gameToSend, target: data.from }); break; case "fullgame": // Callback "roomInit" to poll clients only after game is loaded @@ -399,23 +485,11 @@ export default { 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.gameIsLoading) { - this.gameIsLoading = true; - if (!this.gameRef.rid) - // This is my game: just reload. - this.loadGame(); - else { - // Just ask fullgame again (once!), this is much simpler. - // If this fails, the user could just reload page :/ - let self = this; - (function askIfPeerConnected() { - if (!!self.people[self.gameRef.rid]) - self.send("askfullgame", { target: self.gameRef.rid }); - else setTimeout(askIfPeerConnected, 1000); - })(); - } - } - } else { + if (this.gotMoveIdx < movePlus.index) + this.gotMoveIdx = movePlus.index; + if (!this.gameIsLoading) this.askGameAgain(); + } + else { if ( movePlus.index < movesCount || this.gotMoveIdx >= movePlus.index @@ -441,10 +515,9 @@ export default { GameStorage.update(this.gameRef.id, { drawOffer: "" }); } } - this.$refs["basegame"].play( + this.$refs["basegame"].play(movePlus.move, "received", null, true); + this.processMove( movePlus.move, - "received", - null, { addTime: movePlus.addTime, receiveMyMove: receiveMyMove @@ -517,7 +590,7 @@ export default { this.gameOver("1/2", message); } else if (this.drawOffer == "") { // No effect if drawOffer == "sent" - if (!!this.game.mycolor != this.vr.turn) { + if (this.game.mycolor != this.vr.turn) { alert(this.st.tr["Draw offer only in your turn"]); return; } @@ -566,10 +639,10 @@ export default { } // NOTE: clocks in seconds, initime in milliseconds game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of + game.clocks = [tc.mainTime, tc.mainTime]; const L = game.moves.length; if (game.score == "*") { // Set clocks + initime - game.clocks = [tc.mainTime, tc.mainTime]; game.initime = [0, 0]; if (L >= 1) { const gameLastupdate = game.moves[L-1].played; @@ -618,7 +691,7 @@ export default { } } } - if (game.drawOffer) { + if (!!game.drawOffer) { if (game.drawOffer == "t") // Three repetitions this.drawOffer = "threerep"; @@ -664,7 +737,7 @@ export default { ); if (this.gameIsLoading) // Re-load game because we missed some moves: - // artificially reset BaseGame (required if moves arrive too quickly) + // artificially reset BaseGame (required if moves arrived in wrong order) this.$refs["basegame"].re_setVariables(); this.re_setClocks(); this.$nextTick(() => { @@ -672,7 +745,12 @@ export default { // Did lastate arrive before game was rendered? if (this.lastate) this.processLastate(); }); - this.gameIsLoading = false; + if (this.gameIsLoading) { + this.gameIsLoading = false; + if (this.gotMoveIdx >= game.moves.length) + // Some moves arrived meanwhile... + this.askGameAgain(); + } if (!!callback) callback(); }; if (!!game) { @@ -691,7 +769,7 @@ export default { re_setClocks: function() { if (this.game.moves.length < 2 || this.game.score != "*") { // 1st move not completed yet, or game over: freeze time - this.virtualClocks = this.game.clocks.map(s => ppt(s)); + this.virtualClocks = this.game.clocks.map(s => ppt(s).split(':')); return; } const currentTurn = this.vr.turn; @@ -703,7 +781,7 @@ export default { this.virtualClocks = [0, 1].map(i => { const removeTime = i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0; - return ppt(this.game.clocks[i] - removeTime); + return ppt(this.game.clocks[i] - removeTime).split(':'); }); let clockUpdate = setInterval(() => { if ( @@ -721,11 +799,11 @@ export default { this.$set( this.virtualClocks, colorIdx, - ppt(Math.max(0, --countdown)) + ppt(Math.max(0, --countdown)).split(':') ); }, 1000); }, - // Post-process a (potentially partial) move (which was just played in BaseGame) + // Update variables and storage after a move: processMove: function(move, data) { if (!data) data = {}; const moveCol = this.vr.turn; @@ -801,15 +879,21 @@ export default { drawOffer: drawCode || "n" }); } - else if (!document.hidden) { - // Live game: consider only the active tab - GameStorage.update(this.gameRef.id, { - fen: this.game.fen, - move: filtered_move, - clocks: this.game.clocks, - initime: this.game.initime, - drawOffer: drawCode - }); + else { + const updateStorage = () => { + GameStorage.update(this.gameRef.id, { + fen: this.game.fen, + move: filtered_move, + moveIdx: origMovescount, + clocks: this.game.clocks, + initime: this.game.initime, + drawOffer: drawCode + }); + }; + // The active tab can update storage immediately + if (!document.hidden) updateStorage(); + // Small random delay otherwise + else setTimeout(updateStorage, 500 + 1000 * Math.random()); } } // Send move ("newmove" event) to people in the room (if our turn) @@ -825,22 +909,25 @@ export default { this.opponentGotMove = false; this.send("newmove", {data: sendMove}); // If the opponent doesn't reply gotmove soon enough, re-send move: - let retrySendmove = setInterval( () => { - if (this.opponentGotMove) { - clearInterval(retrySendmove); - return; - } - let oppsid = this.game.players[nextIdx].sid; - if (!oppsid) { - oppsid = Object.keys(this.people).find( - sid => this.people[sid].id == this.game.players[nextIdx].uid - ); - } - if (!oppsid || !this.people[oppsid]) - // Opponent is disconnected: he'll ask last state - clearInterval(retrySendmove); - else this.send("newmove", {data: sendMove, target: oppsid}); - }, 750); + let retrySendmove = setInterval( + () => { + if (this.opponentGotMove) { + clearInterval(retrySendmove); + return; + } + let oppsid = this.game.players[nextIdx].sid; + if (!oppsid) { + oppsid = Object.keys(this.people).find( + sid => this.people[sid].id == this.game.players[nextIdx].uid + ); + } + if (!oppsid || !this.people[oppsid]) + // Opponent is disconnected: he'll ask last state + clearInterval(retrySendmove); + else this.send("newmove", {data: sendMove, target: oppsid}); + }, + 1000 + ); } }; if ( @@ -913,9 +1000,16 @@ export default { #actions display: inline-block margin: 0 - button - display: inline-block - margin: 0 + +button + display: inline-block + margin: 0 + display: inline-flex + img + height: 24px + display: flex + @media screen and (max-width: 767px) + height: 18px @media screen and (max-width: 767px) #aboveBoard @@ -931,14 +1025,35 @@ export default { font-weight: bold padding-right: 10px -.name +span#nextGame + background-color: #edda99 + cursor: pointer + display: inline-block + margin-right: 10px + +span.name font-size: 1.5rem - padding: 1px + padding: 0 3px -.time +span.time font-size: 2rem display: inline-block - margin-left: 10px + .time-left + margin-left: 10px + .time-right + margin-left: 5px + .time-separator + margin-left: 5px + position: relative + top: -1px + +span.yourturn + color: #831B1B + .time-separator + animation: blink-animation 2s steps(3, start) infinite +@keyframes blink-animation + to + visibility: hidden .split-names display: inline-block @@ -949,9 +1064,6 @@ export default { max-width: 767px border: none; -#chatBtn - margin: 0 10px 0 0 - .draw-sent, .draw-sent:hover background-color: lightyellow