X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=282a3716b74e6188504c62360a783cd20e6fdffb;hb=f3fe29d815458e9bfca2295d16b1f6221040eb10;hp=df6930cb0774698014f9f9d211918175d6f9fe46;hpb=0a17525eeb101d538d334c2208eb8ee44cda1883;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index df6930cb..282a3716 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -8,24 +8,45 @@ main role="dialog" data-checkbox="modalChat" ) - #chat.card + .card label.modal-close(for="modalChat") #participants span {{ Object.keys(people).length + " " + st.tr["participant(s):"] }} span( v-for="p in Object.values(people)" - v-if="p.name" + v-if="p.focus && !!p.name" ) | {{ p.name }} - span.anonymous(v-if="Object.values(people).some(p => !p.name && p.id === 0)") + span.anonymous( + v-if="Object.values(people).some(p => p.focus && !p.name)" + ) | + @nonymous Chat( + ref="chatcomp" :players="game.players" :pastChats="game.chats" :newChat="newChat" @mychat="processChat" @chatcleared="clearChat" ) + input#modalConfirm.modal(type="checkbox") + div#confirmDiv(role="dialog") + .card + .diagram( + v-if="!!vr && ['all','byrow'].includes(vr.showMoves)" + v-html="curDiag" + ) + p.text-center(v-else) + span {{ st.tr["Move played:"] + " " }} + span.bold {{ moveNotation }} + br + span {{ st.tr["Are you sure?"] }} + .button-group#buttonsConfirm + // onClick for acceptBtn: set dynamically + button.acceptBtn + span {{ st.tr["Validate"] }} + button.refuseBtn(@click="cancelMove()") + span {{ st.tr["Cancel"] }} .row #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2 span.variant-cadence {{ game.cadence }} @@ -75,7 +96,8 @@ main ) 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.time-right(v-if="!!virtualClocks[0][1]") + | {{ virtualClocks[0][1] }} span.split-names - span.name(:class="{connected: isConnected(1)}") | {{ game.players[1].name || "@nonymous" }} @@ -85,12 +107,12 @@ main ) 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] }} + span.time-right(v-if="!!virtualClocks[1][1]") + | {{ virtualClocks[1][1] }} BaseGame( ref="basegame" :game="game" @newmove="processMove" - @gameover="gameOver" ) @@ -103,10 +125,11 @@ import { ppt } from "@/utils/datetime"; import { ajax } from "@/utils/ajax"; import { extractTime } from "@/utils/timeControl"; import { getRandString } from "@/utils/alea"; -import { processModalClick } from "@/utils/modalClick"; +import { getScoreMessage } from "@/utils/scoring"; import { getFullNotation } from "@/utils/notation"; +import { getDiagram } from "@/utils/printDiagram"; +import { processModalClick } from "@/utils/modalClick"; import { playMove, getFilteredMove } from "@/utils/playUndo"; -import { getScoreMessage } from "@/utils/scoring"; import { ArrayFun } from "@/utils/array"; import params from "@/parameters"; export default { @@ -115,7 +138,6 @@ export default { BaseGame, Chat }, - // gameRef: to find the game in (potentially remote) storage data: function() { return { st: store.state, @@ -124,20 +146,17 @@ export default { id: "", rid: "" }, - game: { - // Passed to BaseGame - players: [{ name: "" }, { name: "" }], - chats: [], - rendered: false - }, nextIds: [], - virtualClocks: [[0,0], [0,0]], //initialized with true game.clocks + game: {}, //passed to BaseGame + // virtualClocks will be initialized from true game.clocks + virtualClocks: [], vr: null, //"variant rules" object initialized from FEN drawOffer: "", people: {}, //players + observers onMygames: [], //opponents (or me) on "MyGames" page lastate: undefined, //used if opponent send lastate before game is ready repeat: {}, //detect position repetition + curDiag: "", //for corr moves confirmation newChat: "", conn: null, roomInitialized: false, @@ -150,70 +169,150 @@ export default { // If newmove got no pingback, send again: opponentGotMove: false, connexionString: "", + // Incomplete info games: show move played + moveNotation: "", + // Intervals from setInterval(): + askLastate: null, + retrySendmove: null, + clockUpdate: null, // Related to (killing of) self multi-connects: newConnect: {}, killed: {} }; }, watch: { - $route: function(to) { - this.gameRef.id = to.params["id"]; - this.gameRef.rid = to.query["rid"]; - this.loadGame(); + $route: function(to, from) { + if (from.params["id"] != to.params["id"]) { + // Change everything: + this.cleanBeforeDestroy(); + let boardDiv = document.querySelector(".game"); + if (!!boardDiv) + // In case of incomplete information variant: + boardDiv.style.visibility = "hidden"; + this.atCreation(); + } else { + // Same game ID + this.gameRef.id = to.params["id"]; + this.gameRef.rid = to.query["rid"]; + this.nextIds = JSON.parse(this.$route.query["next"] || "[]"); + this.loadGame(); + } } }, // NOTE: some redundant code with Hall.vue (mostly related to people array) created: function() { - // Always add myself to players' list - const my = this.st.user; - this.$set(this.people, my.sid, { id: my.id, name: my.name }); - this.gameRef.id = this.$route.params["id"]; - // 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 + - "/?sid=" + - this.st.user.sid + - "&tmpId=" + - getRandString() + - "&page=" + - encodeURIComponent(this.$route.path); - this.conn = new WebSocket(this.connexionString); - this.conn.onmessage = this.socketMessageListener; - this.conn.onclose = this.socketCloseListener; - // Socket init required before loading remote game: - const socketInit = callback => { - if (!!this.conn && this.conn.readyState == 1) - // 1 == OPEN state - callback(); - else - // Socket not ready yet (initial loading) - // NOTE: it's important to call callback without arguments, - // otherwise first arg is Websocket object and loadGame fails. - this.conn.onopen = () => callback(); - }; - if (!this.gameRef.rid) - // Game stored locally or on server - this.loadGame(null, () => socketInit(this.roomInit)); - else - // Game stored remotely: need socket to retrieve it - // NOTE: the callback "roomInit" will be lost, so we don't provide it. - // --> It will be given when receiving "fullgame" socket event. - socketInit(this.loadGame); + this.atCreation(); }, mounted: function() { + document.addEventListener('visibilitychange', this.visibilityChange); document .getElementById("chatWrap") .addEventListener("click", processModalClick); + if ("ontouchstart" in window) { + // Disable tooltips on smartphones: + document.getElementsByClassName("tooltip").forEach(elt => { + elt.classList.remove("tooltip"); + }); + } }, beforeDestroy: function() { - this.send("disconnect"); + document.removeEventListener('visibilitychange', this.visibilityChange); + this.cleanBeforeDestroy(); }, methods: { + visibilityChange: function() { + // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27 + this.send( + document.visibilityState == "visible" + ? "getfocus" + : "losefocus" + ); + }, + atCreation: function() { + // 0] (Re)Set variables + this.gameRef.id = this.$route.params["id"]; + // 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"] || "[]"); + // Always add myself to players' list + const my = this.st.user; + this.$set( + this.people, + my.sid, + { + id: my.id, + name: my.name, + focus: true + } + ); + this.game = { + players: [{ name: "" }, { name: "" }], + chats: [], + rendered: false + }; + let chatComp = this.$refs["chatcomp"]; + if (!!chatComp) chatComp.chats = []; + this.virtualClocks = [[0,0], [0,0]]; + this.vr = null; + this.drawOffer = ""; + this.onMygames = []; + this.lastate = undefined; + this.newChat = ""; + this.roomInitialized = false; + this.askGameTime = 0; + this.gameIsLoading = false; + this.gotLastate = false; + this.gotMoveIdx = -1; + this.opponentGotMove = false; + this.askLastate = null; + this.retrySendmove = null; + this.clockUpdate = null; + this.newConnect = {}; + this.killed = {}; + // 1] Initialize connection + this.connexionString = + params.socketUrl + + "/?sid=" + + this.st.user.sid + + "&tmpId=" + + getRandString() + + "&page=" + + // Discard potential "/?next=[...]" for page indication: + encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]); + this.conn = new WebSocket(this.connexionString); + this.conn.onmessage = this.socketMessageListener; + this.conn.onclose = this.socketCloseListener; + // Socket init required before loading remote game: + const socketInit = callback => { + if (!!this.conn && this.conn.readyState == 1) + // 1 == OPEN state + callback(); + else + // Socket not ready yet (initial loading) + // NOTE: it's important to call callback without arguments, + // otherwise first arg is Websocket object and loadGame fails. + this.conn.onopen = () => callback(); + }; + if (!this.gameRef.rid) + // Game stored locally or on server + this.loadGame(null, () => socketInit(this.roomInit)); + else + // Game stored remotely: need socket to retrieve it + // NOTE: the callback "roomInit" will be lost, so we don't provide it. + // --> It will be given when receiving "fullgame" socket event. + socketInit(this.loadGame); + }, + cleanBeforeDestroy: function() { + if (!!this.askLastate) + clearInterval(this.askLastate); + if (!!this.retrySendmove) + clearInterval(this.retrySendmove); + if (!!this.clockUpdate) + clearInterval(this.clockUpdate); + this.send("disconnect"); + }, roomInit: function() { if (!this.roomInitialized) { // Notify the room only now that I connected, because @@ -231,7 +330,7 @@ export default { }, isConnected: function(index) { const player = this.game.players[index]; - // Is it me ? + // Is it me ? In this case no need to bother with focus if (this.st.user.sid == player.sid || this.st.user.id == player.uid) // Still have to check for name (because of potential multi-accounts // on same browser, although this should be rare...) @@ -239,13 +338,15 @@ export default { // Try to find a match in people: return ( ( - player.sid && - Object.keys(this.people).some(sid => sid == player.sid) + !!player.sid && + Object.keys(this.people).some(sid => + sid == player.sid && this.people[sid].focus) ) || ( player.uid && - Object.values(this.people).some(p => p.id == player.uid) + Object.values(this.people).some(p => + p.id == player.uid && p.focus) ) ); }, @@ -257,13 +358,18 @@ export default { this.send("newchat", { data: chat }); // NOTE: anonymous chats in corr games are not stored on server (TODO?) if (this.game.type == "corr" && this.st.user.id > 0) - GameStorage.update(this.gameRef.id, { chat: chat }); + this.updateCorrGame({ chat: chat }); }, clearChat: function() { // Nothing more to do if game is live (chats not recorded) if (this.game.type == "corr") { - if (!!this.game.mycolor) - ajax("/chats", "DELETE", {gid: this.game.id}); + if (!!this.game.mycolor) { + ajax( + "/chats", + "DELETE", + { data: { gid: this.game.id } } + ); + } this.$set(this.game, "chats", []); } }, @@ -293,20 +399,16 @@ export default { }, askGameAgain: function() { this.gameIsLoading = true; + const currentUrl = document.location.href; const doAskGame = () => { + if (document.location.href != currentUrl) return; //page change if (!this.gameRef.rid) // This is my game: just reload. this.loadGame(); - else { + 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); - })(); - } + this.send("askfullgame", { target: this.gameRef.rid }); }; // Delay of at least 2s between two game requests const now = Date.now(); @@ -320,12 +422,15 @@ export default { switch (data.code) { case "pollclients": data.sockIds.forEach(sid => { - if (sid != this.st.user.sid) + if (sid != this.st.user.sid) { + this.people[sid] = { focus: true }; this.send("askidentity", { target: sid }); + } }); break; case "connect": if (!this.people[data.from]) { + this.people[data.from] = { focus: true }; this.newConnect[data.from] = true; //for self multi-connects tests this.send("askidentity", { target: data.from }); } @@ -349,6 +454,22 @@ export default { case "mdisconnect": ArrayFun.remove(this.onMygames, sid => sid == data.from); break; + case "getfocus": { + let player = this.people[data.from]; + if (!!player) { + player.focus = true; + this.$forceUpdate(); //TODO: shouldn't be required + } + break; + } + case "losefocus": { + let player = this.people[data.from]; + if (!!player) { + player.focus = false; + this.$forceUpdate(); //TODO: shouldn't be required + } + break; + } case "killed": // I logged in elsewhere: this.conn = null; @@ -367,7 +488,11 @@ export default { } case "identity": { const user = data.data; - this.$set(this.people, user.sid, { name: user.name, id: user.id }); + let player = this.people[user.sid]; + // player.focus is already set + player.name = user.name; + player.id = user.id; + this.$forceUpdate(); //TODO: shouldn't be required // If I multi-connect, kill current connexion if no mark (I'm older) if (this.newConnect[user.sid]) { if ( @@ -389,18 +514,25 @@ export default { this.game.score == "*" && this.game.players.some(p => p.sid == user.sid) ) { - let self = this; - (function askLastate() { - self.send("asklastate", { target: user.sid }); - setTimeout( - () => { - // Ask until we got a reply (or opponent disconnect): - if (!self.gotLastate && !!self.people[user.sid]) - askLastate(); - }, - 1000 - ); - })(); + 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 + ); } } break; @@ -455,11 +587,12 @@ export default { const myIdx = ["w", "b"].indexOf(this.game.mycolor); const myLastate = { lastMove: L > 0 ? this.game.moves[L - 1] : undefined, - addTime: L > 0 ? this.game.addTimes[L - 1] : undefined, + clock: this.game.clocks[myIdx], // Since we played a move (or abort or resign), // only drawOffer=="sent" is possible drawSent: this.drawOffer == "sent", score: this.game.score, + score: this.game.scoreMsg, movesCount: L, initime: this.game.initime[1 - myIdx] //relevant only if I played }; @@ -519,7 +652,7 @@ export default { this.processMove( movePlus.move, { - addTime: movePlus.addTime, + clock: movePlus.clock, receiveMyMove: receiveMyMove } ); @@ -529,6 +662,10 @@ export default { } case "gotmove": { this.opponentGotMove = true; + // Now his clock starts running: + const oppIdx = ['w','b'].indexOf(this.vr.turn); + this.game.initime[oppIdx] = Date.now(); + this.re_setClocks(); break; } case "resign": @@ -558,6 +695,21 @@ export default { this.conn.addEventListener("message", this.socketMessageListener); this.conn.addEventListener("close", this.socketCloseListener); }, + updateCorrGame: function(obj, callback) { + ajax( + "/games", + "PUT", + { + data: { + gid: this.gameRef.id, + newObj: obj + }, + success: () => { + if (!!callback) callback(); + } + } + ); + }, // lastate was received, but maybe game wasn't ready yet: processLastate: function() { const data = this.lastate; @@ -565,17 +717,14 @@ export default { const L = this.game.moves.length; if (data.movesCount > L) { // Just got last move from him - this.$refs["basegame"].play( - data.lastMove, - "received", - null, - {addTime: data.addTime, initime: data.initime} - ); + this.$refs["basegame"].play(data.lastMove, "received", null, true); + this.processMove(data.lastMove, { clock: data.clock }); } if (data.drawSent) this.drawOffer = "received"; if (data.score != "*") { this.drawOffer = ""; - if (this.game.score == "*") this.gameOver(data.score); + if (this.game.score == "*") + this.gameOver(data.score, data.scoreMsg); } }, clickDraw: function() { @@ -597,7 +746,12 @@ export default { if (!confirm(this.st.tr["Offer draw?"])) return; this.drawOffer = "sent"; this.send("drawoffer"); - GameStorage.update(this.gameRef.id, { drawOffer: this.game.mycolor }); + if (this.game.type == "live") { + GameStorage.update( + this.gameRef.id, + { drawOffer: this.game.mycolor } + ); + } else this.updateCorrGame({ drawOffer: this.game.mycolor }); } }, abortGame: function() { @@ -730,8 +884,7 @@ export default { // opponent sid not strictly required (or available), but easier // at least oppsid or oppid is available anyway: oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid, - oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].uid, - addTimes: [], //used for live games + oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].uid }, game, ); @@ -739,6 +892,14 @@ export default { // Re-load game because we missed some moves: // artificially reset BaseGame (required if moves arrived in wrong order) this.$refs["basegame"].re_setVariables(); + else { + // 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; @@ -761,9 +922,29 @@ export default { // Remote live game: forgetting about callback func... (TODO: design) this.send("askfullgame", { target: this.gameRef.rid }); } else { - // Local or corr game + // Local or corr game on server. // NOTE: afterRetrieval() is never called if game not found - GameStorage.get(this.gameRef.id, afterRetrieval); + const gid = this.gameRef.id; + if (Number.isInteger(gid) || !isNaN(parseInt(gid))) { + // corr games identifiers are integers + ajax( + "/games", + "GET", + { + data: { gid: gid }, + success: (res) => { + let g = res.game; + g.moves.forEach(m => { + m.squares = JSON.parse(m.squares); + }); + afterRetrieval(g); + } + } + ); + } + else + // Local game + GameStorage.get(this.gameRef.id, afterRetrieval); } }, re_setClocks: function() { @@ -783,25 +964,28 @@ export default { i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0; return ppt(this.game.clocks[i] - removeTime).split(':'); }); - let clockUpdate = setInterval(() => { - if ( - countdown < 0 || - this.game.moves.length > currentMovesCount || - this.game.score != "*" - ) { - clearInterval(clockUpdate); - if (countdown < 0) - this.gameOver( - currentTurn == "w" ? "0-1" : "1-0", - "Time" + this.clockUpdate = setInterval( + () => { + if ( + countdown < 0 || + this.game.moves.length > currentMovesCount || + this.game.score != "*" + ) { + clearInterval(this.clockUpdate); + if (countdown < 0) + this.gameOver( + currentTurn == "w" ? "0-1" : "1-0", + "Time" + ); + } else + this.$set( + this.virtualClocks, + colorIdx, + ppt(Math.max(0, --countdown)).split(':') ); - } else - this.$set( - this.virtualClocks, - colorIdx, - ppt(Math.max(0, --countdown)).split(':') - ); - }, 1000); + }, + 1000 + ); }, // Update variables and storage after a move: processMove: function(move, data) { @@ -811,10 +995,7 @@ export default { const colorIdx = ["w", "b"].indexOf(moveCol); const nextIdx = 1 - colorIdx; const origMovescount = this.game.moves.length; - let addTime = - this.game.type == "live" - ? (data.addTime || 0) - : undefined; + let addTime = 0; //for live games if (moveCol == this.game.mycolor && !data.receiveMyMove) { if (this.drawOffer == "received") // I refuse draw @@ -827,29 +1008,46 @@ export default { } // Update current game object: playMove(move, this.vr); + // The move is played: stop clock + clearInterval(this.clockUpdate); + if (!data.score) { + // Received move, score has not been computed in BaseGame (!!noemit) + const score = this.vr.getCurrentScore(); + if (score != "*") this.gameOver(score); + } // TODO: notifyTurn: "changeturn" message this.game.moves.push(move); - // (add)Time indication: useful in case of lastate infos requested - if (this.game.type == "live") - this.game.addTimes.push(addTime); this.game.fen = this.vr.getFen(); - if (this.game.type == "live") this.game.clocks[colorIdx] += addTime; + if (this.game.type == "live") { + if (!!data.clock) this.game.clocks[colorIdx] = data.clock; + else this.game.clocks[colorIdx] += addTime; + } // In corr games, just reset clock to mainTime: - else this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime; - // data.initime is set only when I receive a "lastate" move from opponent - this.game.initime[nextIdx] = data.initime || Date.now(); - this.re_setClocks(); + else { + this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime; + } + // NOTE: opponent's initime is reset after "gotmove" is received + if ( + !this.game.mycolor || + moveCol != this.game.mycolor || + !!data.receiveMyMove + ) { + this.game.initime[nextIdx] = Date.now(); + } // 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; + this.repeat[fenObj] = + !!this.repeat[fenObj] + ? this.repeat[fenObj] + 1 + : 1; if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep"; else if (this.drawOffer == "threerep") this.drawOffer = ""; - // Since corr games are stored at only one location, update should be - // done only by one player for each move: if (!!this.game.mycolor && !data.receiveMyMove) { // NOTE: 'var' to see that variable outside this block var filtered_move = getFilteredMove(move); } + // Since corr games are stored at only one location, update should be + // done only by one player for each move: if ( !!this.game.mycolor && !data.receiveMyMove && @@ -868,7 +1066,8 @@ export default { break; } if (this.game.type == "corr") { - GameStorage.update(this.gameRef.id, { + // corr: only move, fen and score + this.updateCorrGame({ fen: this.game.fen, move: { squares: filtered_move, @@ -898,21 +1097,30 @@ export default { } // Send move ("newmove" event) to people in the room (if our turn) if (moveCol == this.game.mycolor && !data.receiveMyMove) { - const sendMove = { + let sendMove = { move: filtered_move, index: origMovescount, // color is required to check if this is my move (if several tabs opened) color: moveCol, - addTime: addTime, //undefined for corr games cancelDrawOffer: this.drawOffer == "" }; + if (this.game.type == "live") + sendMove["clock"] = this.game.clocks[colorIdx]; this.opponentGotMove = false; this.send("newmove", {data: sendMove}); // If the opponent doesn't reply gotmove soon enough, re-send move: - let retrySendmove = setInterval( + // Do this at most 2 times, because mpore would mean network issues, + // opponent would then be expected to disconnect/reconnect. + let counter = 1; + const currentUrl = document.location.href; + this.retrySendmove = setInterval( () => { - if (this.opponentGotMove) { - clearInterval(retrySendmove); + if ( + counter >= 3 || + this.opponentGotMove || + document.location.href != currentUrl //page change + ) { + clearInterval(this.retrySendmove); return; } let oppsid = this.game.players[nextIdx].sid; @@ -923,54 +1131,106 @@ export default { } if (!oppsid || !this.people[oppsid]) // Opponent is disconnected: he'll ask last state - clearInterval(retrySendmove); - else this.send("newmove", {data: sendMove, target: oppsid}); + clearInterval(this.retrySendmove); + else { + this.send("newmove", { data: sendMove, target: oppsid }); + counter++; + } }, - 1000 + 1500 ); } + else + // Not my move or I'm an observer: just start other player's clock + this.re_setClocks(); }; if ( this.game.type == "corr" && moveCol == this.game.mycolor && !data.receiveMyMove ) { - setTimeout(() => { - // TODO: remplacer cette confirm box par qqch de plus discret - // (et de même pour challenge accepté / refusé) - if ( - !confirm( - this.st.tr["Move played:"] + - " " + - getFullNotation(move) + - "\n" + - this.st.tr["Are you sure?"] - ) - ) { - this.$refs["basegame"].cancelLastMove(); - return; - } + let boardDiv = document.querySelector(".game"); + const afterSetScore = () => { doProcessMove(); - // Let small time to finish drawing current move attempt: - }, 500); + if (this.st.settings.gotonext && this.nextIds.length > 0) + this.showNextGame(); + else { + // The board might have been hidden: + if (boardDiv.style.visibility == "hidden") + boardDiv.style.visibility = "visible"; + } + }; + let el = document.querySelector("#buttonsConfirm > .acceptBtn"); + // We may play several moves in a row: in case of, remove listener: + let elClone = el.cloneNode(true); + el.parentNode.replaceChild(elClone, el); + elClone.addEventListener( + "click", + () => { + document.getElementById("modalConfirm").checked = false; + if (!!data.score && data.score != "*") + // Set score first + this.gameOver(data.score, null, afterSetScore); + else afterSetScore(); + } + ); + // PlayOnBoard is enough, and more appropriate for Synchrone Chess + V.PlayOnBoard(this.vr.board, move); + const position = this.vr.getBaseFen(); + V.UndoOnBoard(this.vr.board, move); + if (["all","byrow"].includes(V.ShowMoves)) { + this.curDiag = getDiagram({ + position: position, + orientation: V.CanFlip ? this.game.mycolor : "w" + }); + document.querySelector("#confirmDiv > .card").style.width = + boardDiv.offsetWidth + "px"; + } else { + // Incomplete information: just ask confirmation + // Hide the board, because otherwise it could reveal infos + boardDiv.style.visibility = "hidden"; + this.moveNotation = getFullNotation(move); + } + document.getElementById("modalConfirm").checked = true; + } + else { + // Normal situation + if (!!data.score && data.score != "*") + this.gameOver(data.score, null, doProcessMove); + else doProcessMove(); } - else doProcessMove(); }, - gameOver: function(score, scoreMsg) { + cancelMove: function() { + let boardDiv = document.querySelector(".game"); + if (boardDiv.style.visibility == "hidden") + boardDiv.style.visibility = "visible"; + document.getElementById("modalConfirm").checked = false; + this.$refs["basegame"].cancelLastMove(); + }, + // In corr games, callback to change page only after score is set: + gameOver: function(score, scoreMsg, callback) { this.game.score = score; - this.$set(this.game, "scoreMsg", scoreMsg || getScoreMessage(score)); + if (!scoreMsg) scoreMsg = getScoreMessage(score); + this.game.scoreMsg = scoreMsg; + this.$set(this.game, "scoreMsg", scoreMsg); const myIdx = this.game.players.findIndex(p => { return p.sid == this.st.user.sid || p.uid == this.st.user.id; }); if (myIdx >= 0) { // OK, I play in this game - GameStorage.update(this.gameRef.id, { + const scoreObj = { score: score, scoreMsg: scoreMsg - }); + }; + if (this.game.type == "live") { + GameStorage.update(this.gameRef.id, scoreObj); + if (!!callback) callback(); + } + else this.updateCorrGame(scoreObj, callback); // Notify the score to main Hall. TODO: only one player (currently double send) this.send("result", { gid: this.game.id, score: score }); } + else if (!!callback) callback(); } } }; @@ -1059,10 +1319,14 @@ span.yourturn display: inline-block margin: 0 15px -#chat +#chatWrap > .card padding-top: 20px max-width: 767px - border: none; + border: none + +#confirmDiv > .card + max-width: 767px + max-height: 100% .draw-sent, .draw-sent:hover background-color: lightyellow @@ -1075,4 +1339,19 @@ span.yourturn .somethingnew background-color: #c5fefe + +.diagram + margin: 0 auto + width: 100% + +#buttonsConfirm + margin: 0 + & > button > span + width: 100% + text-align: center + +button.acceptBtn + background-color: lightgreen +button.refuseBtn + background-color: red