X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=c3f211984e3b0b649e8cff54dac618ba1cee4ada;hp=c2b27043e634103b39d107bd3465538fdb69ba35;hb=16d06164d56332bd00fb22acc5b2b2997b942d73;hpb=af4a532a1e1b25f85b240afc4edb244d9dd3ef5f diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index c2b27043..c3f21198 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -7,7 +7,7 @@ main ) .card label.modal-close(for="modalRules") - a#variantNameInGame(:href="'/#/variants/'+game.vname") {{ game.vname }} + a#variantNameInGame(:href="'/#/variants/'+game.vname") {{ game.vdisp }} div(v-html="rulesContent") input#modalScore.modal(type="checkbox") div#scoreDiv( @@ -78,7 +78,9 @@ main .row #aboveBoard.col-sm-12 span.variant-cadence(v-if="game.type!='import'") {{ game.cadence }} - span.variant-name {{ game.vname }} + span.variant-name + | {{ game.vname }} + | {{ !!vr ? vr.constructor.AbbreviateOptions(game.options) : '' }} span#nextGame( v-if="nextIds.length > 0" @click="showNextGame()" @@ -234,7 +236,8 @@ export default { // If newmove got no pingback, send again: opponentGotMove: false, connexionString: "", - socketCloseListener: 0, + reopenTimeout: 0, + reconnectTimeout: 0, // Incomplete info games: show move played moveNotation: "", // Intervals from setInterval(): @@ -287,14 +290,13 @@ export default { }, methods: { cleanBeforeDestroy: function() { - clearInterval(this.socketCloseListener); document.removeEventListener('visibilitychange', this.visibilityChange); window.removeEventListener('focus', this.onFocus); window.removeEventListener('blur', this.onBlur); if (!!this.askLastate) clearInterval(this.askLastate); if (!!this.retrySendmove) clearInterval(this.retrySendmove); if (!!this.clockUpdate) clearInterval(this.clockUpdate); - this.conn.removeEventListener("message", this.socketMessageListener); + clearTimeout(this.reopenTimeout); this.send("disconnect"); this.conn = null; }, @@ -331,6 +333,29 @@ export default { ) ); }, + requestLastate: function(sid) { + // TODO: maybe also find opponent SID ? + //const oppSid = + // this.game.players.find(p => p.sid != this.st.user.sid).sid; + this.send("asklastate", { target: sid }); + let counter = 1; + this.askLastate = setInterval( + () => { + // Ask at most 3 times: + // if no reply after that there should be a network issue. + if ( + counter < 3 && + !this.gotLastate && + !!this.people[sid] + ) { + this.send("asklastate", { target: sid }); + counter++; + } + else clearInterval(this.askLastate); + }, + 1500 + ); + }, atCreation: function() { document.addEventListener('visibilitychange', this.visibilityChange); window.addEventListener('focus', this.onFocus); @@ -349,7 +374,7 @@ export default { id: my.id, name: my.name, tmpIds: { - tmpId: { focus: true } + [tmpId]: { focus: true } } } ); @@ -384,32 +409,52 @@ export default { "&page=" + // Discard potential "/?next=[...]" for page indication: encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]); + openConnection(); + }, + openConnection: function() { this.conn = new WebSocket(this.connexionString); - this.conn.addEventListener("message", this.socketMessageListener); - this.socketCloseListener = setInterval( - () => { - if (this.conn.readyState == 3) { - this.conn.removeEventListener( - "message", this.socketMessageListener); - this.conn = new WebSocket(this.connexionString); - this.conn.addEventListener("message", this.socketMessageListener); - } - }, - 1000 - ); + const onOpen = () => { + this.reconnectTimeout = 250; + const oppSid = this.getOppsid(); + if (!!oppSid) this.requestLastate(oppSid); //in case of + }; + this.conn.onopen = onOpen; + this.conn.onmessage = this.socketMessageListener; + const closeConnection = () => { + this.reopenTimeout = setTimeout( + () => { + this.openConnection(); + this.reconnectTimeout = Math.min(2*this.reconnectTimeout, 30000); + }, + this.reconnectTimeout + ); + }; + this.conn.onerror = closeConnection; + this.conn.onclose = closeConnection; // Socket init required before loading remote game: const socketInit = callback => { if (this.conn.readyState == 1) // 1 == OPEN state callback(); - else + else { // Socket not ready yet (initial loading) // NOTE: first arg is Websocket object, unused here: - this.conn.onopen = () => callback(); + this.conn.onopen = () => { + onOpen(); + callback(); + }; + } }; this.fetchGame((game) => { - if (!!game) + if (!!game) { + if (!game.options) { + // Patch for retro-compatibility (TODO: remove it) + game.options = { randomness: game.randomness }; + delete game["randomness"]; + } + else game.options = JSON.parse(game.options); this.loadVariantThenGame(game, () => socketInit(this.roomInit)); + } else // Live game stored remotely: need socket to retrieve it // NOTE: the callback "roomInit" will be lost, so it's not provided. @@ -663,24 +708,7 @@ export default { this.game.type == "live" && this.game.players.some(p => p.sid == user.sid) ) { - this.send("asklastate", { target: user.sid }); - let counter = 1; - this.askLastate = setInterval( - () => { - // Ask at most 3 times: - // if no reply after that there should be a network issue. - if ( - counter < 3 && - !this.gotLastate && - !!this.people[user.sid] - ) { - this.send("asklastate", { target: user.sid }); - counter++; - } - else clearInterval(this.askLastate); - }, - 1500 - ); + this.requestLastate(user.sid); } break; } @@ -707,7 +735,7 @@ export default { const gameToSend = Object.keys(this.game) .filter(k => [ - "id","fen","players","vid","cadence","fenStart","vname", + "id","fen","players","vid","cadence","fenStart","options", "moves","clocks","score","drawOffer","rematchOffer" ].includes(k)) .reduce( @@ -1024,7 +1052,6 @@ export default { { // (other) Game infos: constant fenStart: gameInfo.fen, - vname: this.game.vname, created: Date.now(), // Game state (including FEN): will be updated moves: [], @@ -1049,15 +1076,14 @@ export default { // Start a new game! let gameInfo = { id: getRandString(), //ignored if corr - fen: V.GenRandInitFen(this.game.randomness), - randomness: this.game.randomness, + fen: V.GenRandInitFen(this.game.options), + options: JSON.stringify(this.game.options), players: [this.game.players[1], this.game.players[0]], vid: this.game.vid, cadence: this.game.cadence }; const notifyNewGame = () => { - const oppsid = this.getOppsid(); //may be null - this.send("rnewgame", { data: gameInfo, oppsid: oppsid }); + this.send("rnewgame", { data: gameInfo }); // To main Hall if corr game: if (this.game.type == "corr") this.send("newgame", { data: gameInfo, page: "/" }); @@ -1065,6 +1091,10 @@ export default { this.notifyMyGames("newgame", gameInfo); }; if (this.game.type == "live") { + GameStorage.update( + this.gameRef, + { rematchOffer: "" } + ); // Increment game stats counter in DB ajax( "/gamestat", @@ -1075,15 +1105,16 @@ export default { } else { // corr game + this.updateCorrGame({ rematchOffer: 'n' }); ajax( "/games", "POST", { data: { gameInfo: gameInfo }, success: (response) => { - gameInfo.id = response.gameId; + gameInfo.id = response.id; notifyNewGame(); - this.$router.push("/game/" + response.gameId); + this.$router.push("/game/" + response.id); } } ); @@ -1278,18 +1309,35 @@ export default { if (!!callback) callback(); }, loadVariantThenGame: async function(game, callback) { - await import("@/variants/" + game.vname + ".js") - .then((vModule) => { - window.V = vModule[game.vname + "Rules"]; - this.loadGame(game, callback); - }); - this.rulesContent = - afterRawLoad( - require( - "raw-loader!@/translations/rules/" + - game.vname + "/" + this.st.lang + ".pug" - ).default - ).replace(/(fen:)([^:]*):/g, replaceByDiag); + const afterSetVname = async () => { + await import("@/variants/" + game.vname + ".js") + .then((vModule) => { + window.V = vModule[game.vname + "Rules"]; + this.loadGame(game, callback); + }); + this.rulesContent = + afterRawLoad( + require( + "raw-loader!@/translations/rules/" + + game.vname + "/" + this.st.lang + ".pug" + ).default + ).replace(/(fen:)([^:]*):/g, replaceByDiag); + }; + let variant = undefined; + const trySetVname = setInterval( + () => { + // this.st.variants might be uninitialized (variant == null) + variant = this.st.variants.find(v => { + return v.id == game.vid || v.name == game.vname + }); + if (!!variant) { + clearInterval(trySetVname); + game.vname = variant.name; + game.vdisp = variant.display; + afterSetVname(); + } + }, 500 + ); }, // 3 cases for loading a game: // - from indexedDB (running or completed live game I play) @@ -1402,18 +1450,20 @@ export default { // In corr games, just reset clock to mainTime: this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime; } - // If repetition detected, consider that a draw offer was received: - const fenObj = this.vr.getFenForRepeat(); - this.repeat[fenObj] = - !!this.repeat[fenObj] - ? this.repeat[fenObj] + 1 - : 1; - if (this.repeat[fenObj] >= 3) { - if (V.LoseOnRepetition) - this.gameOver(moveCol == "w" ? "0-1" : "1-0", "Repetition"); - else this.drawOffer = "threerep"; + if (!V.IgnoreRepetition) { + // If repetition detected, consider that a draw offer was received: + const fenObj = this.vr.getFenForRepeat(); + this.repeat[fenObj] = + !!this.repeat[fenObj] + ? this.repeat[fenObj] + 1 + : 1; + if (this.repeat[fenObj] >= 3) { + if (this.vr.loseOnRepetition()) + this.gameOver(moveCol == "w" ? "0-1" : "1-0", "Repetition"); + else this.drawOffer = "threerep"; + } + else if (this.drawOffer == "threerep") this.drawOffer = ""; } - else if (this.drawOffer == "threerep") this.drawOffer = ""; if (!!this.game.mycolor && !data.receiveMyMove) { // NOTE: 'var' to see that variable outside this block var filtered_move = getFilteredMove(move); @@ -1579,7 +1629,9 @@ export default { if (["all","byrow"].includes(V.ShowMoves)) { this.curDiag = getDiagram({ position: position, - orientation: V.CanFlip ? this.game.mycolor : "w" + orientation: V.CanFlip ? this.game.mycolor : "w", + color: this.game.mycolor, + score: "*" }); document.querySelector("#confirmDiv > .card").style.width = boardDiv.offsetWidth + "px";