X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=5785abdd481e50d19d0b109af1063b053898e33a;hp=1675c30bc8072aaa97d4d248caf807a6c5f59dcd;hb=059228c9fd737361dc97de69811daed5abbd6254;hpb=09d375717c256a2cbd71a5d3b3a4e21aee17c0ec diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 1675c30b..5785abdd 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -1,66 +1,130 @@ @@ -73,10 +137,12 @@ 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 { name: "my-game", @@ -84,161 +150,317 @@ export default { BaseGame, Chat }, - // gameRef: to find the game in (potentially remote) storage data: function() { return { st: store.state, gameRef: { - //given in URL (rid = remote ID) + // rid = remote (socket) ID id: "", rid: "" }, - game: { - //passed to BaseGame - players: [{ name: "" }, { name: "" }], - chats: [], - rendered: false - }, - virtualClocks: [0, 0], //initialized with true game.clocks + nextIds: [], + game: {}, //passed to BaseGame + // virtualClocks will be initialized from true game.clocks + virtualClocks: [], vr: null, //"variant rules" object initialized from FEN drawOffer: "", + rematchId: "", + rematchOffer: "", + lastateAsked: false, people: {}, //players + observers lastate: undefined, //used if opponent send lastate before game is ready repeat: {}, //detect position repetition - newChat: "", + 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 + // 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.fetchGame(); + } } }, // 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"]; - this.gameRef.rid = this.$route.query["rid"]; //may be undefined - // 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 = () => { - return 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. - // A more general approach would be to store it somewhere. - socketInit(this.loadGame); - } + this.atCreation(); }, mounted: function() { - document - .getElementById("chatWrap") - .addEventListener("click", processModalClick); + document.addEventListener('visibilitychange', this.visibilityChange); + ["chatWrap", "infoDiv"].forEach(eltName => { + document.getElementById(eltName) + .addEventListener("click", processModalClick); + }); + if ("ontouchstart" in window) { + // Disable tooltips on smartphones: + document.querySelectorAll("#aboveBoard .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.lastateAsked = false; + this.rematchOffer = ""; + this.lastate = undefined; + 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 + + "&id=" + + this.st.user.id + + "&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 fetchGame fails. + this.conn.onopen = () => callback(); + }; + if (!this.gameRef.rid) + // Game stored locally or on server + this.fetchGame(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.fetchGame); + }, + 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() { - // Notify the room only now that I connected, because - // messages might be lost otherwise (if game loading is slow) - this.send("connect"); - this.send("pollclients"); + if (!this.roomInitialized) { + // Notify the room only now that I connected, because + // messages might be lost otherwise (if game loading is slow) + this.send("connect"); + this.send("pollclients"); + // We may ask fullgame several times if some moves are lost, + // but room should be init only once: + this.roomInitialized = true; + } }, send: function(code, obj) { - if (this.conn) { + if (!!this.conn) this.conn.send(JSON.stringify(Object.assign({ code: code }, obj))); - } }, isConnected: function(index) { const player = this.game.players[index]; - // Is it me ? - if (this.st.user.sid == player.sid || this.st.user.id == player.uid) - return true; + // 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) + // 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 ( - Object.keys(this.people).some(sid => sid == player.sid) || - Object.values(this.people).some(p => p.id == player.uid) + ( + !!player.sid && + Object.keys(this.people).some(sid => + sid == player.sid && this.people[sid].focus) + ) + || + ( + !!player.id && + Object.values(this.people).some(p => + p.id == player.id && p.focus) + ) ); }, - resetChatColor: function() { - // TODO: this is called twice, once on opening an once on closing + getOppsid: function() { + let oppsid = this.game.oppsid; + if (!oppsid) { + oppsid = Object.keys(this.people).find( + sid => this.people[sid].id == this.game.oppid + ); + } + // oppsid is useful only if opponent is online: + if (!!oppsid && !!this.people[oppsid]) return oppsid; + return null; + }, + toggleChat: function() { + if (document.getElementById("modalChat").checked) + // Entering chat + document.getElementById("inputChat").focus(); + // TODO: next line is only required when exiting chat, + // but the event for now isn't well detected. document.getElementById("chatBtn").classList.remove("somethingnew"); }, processChat: function(chat) { 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}); - // TODO: this.game.chats = [] could be enough here? + if (!!this.game.mycolor) { + ajax( + "/chats", + "DELETE", + { data: { gid: this.game.id } } + ); + } this.$set(this.game, "chats", []); } }, + getGameType: function(game) { + return game.cadence.indexOf("d") >= 0 ? "corr" : "live"; + }, + // Notify something after a new move (to opponent and me on MyGames page) + notifyMyGames: function(thing, data) { + this.send( + "notify" + thing, + { + data: data, + targets: this.game.players.map(p => { + return { sid: p.sid, id: p.id }; + }) + } + ); + }, + 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)); + }, + 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.fetchGame(); + else + // Just ask fullgame again (once!), this is much simpler. + // If this fails, the user could just reload page :/ + this.send("askfullgame", { target: this.gameRef.rid }); + }; + // 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); switch (data.code) { case "pollclients": data.sockIds.forEach(sid => { - this.$set(this.people, sid, { id: 0, name: "" }); if (sid != this.st.user.sid) { + this.people[sid] = { focus: true }; this.send("askidentity", { target: sid }); - // Ask potentially missed last state, if opponent and I play - if ( - !!this.game.mycolor && - this.game.type == "live" && - this.game.score == "*" && - this.game.players.some(p => p.sid == sid) - ) { - this.send("asklastate", { target: sid }); - } } }); break; case "connect": - if (!this.people[data.from]) - this.$set(this.people, data.from, { name: "", id: 0 }); - if (!this.people[data.from].name) { + 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 }); } @@ -246,17 +468,29 @@ export default { case "disconnect": this.$delete(this.people, 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: - // TODO: this fails. See https://github.com/websockets/ws/issues/489 - //this.conn.removeEventListener("message", this.socketMessageListener); - //this.conn.removeEventListener("close", this.socketCloseListener); - //this.conn.close(); this.conn = null; alert(this.st.tr["New connexion detected: tab now offline"]); break; case "askidentity": { - // Request for identification (TODO: anonymous shouldn't need to reply) + // Request for identification const me = { // Decompose to avoid revealing email name: this.st.user.name, @@ -268,28 +502,53 @@ export default { } case "identity": { const user = data.data; - if (user.name) { - // If I multi-connect, kill current connexion if no mark (I'm older) + 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 ( - this.newConnect[user.sid] && user.id > 0 && user.id == this.st.user.id && - user.sid != this.st.user.sid + user.sid != this.st.user.sid && + !this.killed[this.st.user.sid] ) { - if (!this.killed[this.st.user.sid]) { this.send("killme", { sid: this.st.user.sid }); this.killed[this.st.user.sid] = true; - } } - if (user.sid != this.st.user.sid) { - //I already know my identity... - this.$set(this.people, user.sid, { - id: user.id, - name: user.name - }); + delete this.newConnect[user.sid]; + } + if (!this.killed[this.st.user.sid]) { + // Ask potentially missed last state, if opponent and I play + if ( + !!this.game.mycolor && + this.game.type == "live" && + this.game.score == "*" && + 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 + ); } } - delete this.newConnect[user.sid]; break; } case "askgame": @@ -311,65 +570,101 @@ 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","rematchOffer" + ].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 - let game = data.data; - // Move format isn't the same in storage and in browser, - // because of the 'addTime' field. - game.moves = game.moves.map(m => { return m.move || m; }); - this.loadGame(game, this.roomInit); + this.fetchGame(data.data, this.roomInit); break; case "asklastate": - // Sending last state if I played a move or score != "*" - if ( - (this.game.moves.length > 0 && this.vr.turn != this.game.mycolor) || - this.game.score != "*" || - this.drawOffer == "sent" - ) { - // Send our "last state" informations to opponent - const L = this.game.moves.length; - const myIdx = ["w", "b"].indexOf(this.game.mycolor); - const myLastate = { - // NOTE: lastMove (when defined) includes addTime - lastMove: L > 0 ? this.game.moves[L - 1] : undefined, - // Since we played a move (or abort or resign), - // only drawOffer=="sent" is possible - drawSent: this.drawOffer == "sent", - score: this.game.score, - movesCount: L, - initime: this.game.initime[1 - myIdx] //relevant only if I played - }; - this.send("lastate", { data: myLastate, target: data.from }); - } + // Sending informative last state if I played a move or score != "*" + // If the game or moves aren't loaded yet, delay the sending: + if (!this.game || !this.game.moves) this.lastateAsked = true; + else this.sendLastate(data.from); break; - case "lastate": //got opponent infos about last move - this.lastate = data.data; - if (this.game.rendered) - // Game is rendered (Board component) - this.processLastate(); - // Else: will be processed when game is ready + case "lastate": { + // Got opponent infos about last move + this.gotLastate = true; + if (!data.data.nothing) { + this.lastate = data.data; + if (this.game.rendered) + // Game is rendered (Board component) + this.processLastate(); + // Else: will be processed when game is ready + } break; + } case "newmove": { - const move = data.data; - if (move.cancelDrawOffer) { - // Opponent refuses draw - this.drawOffer = ""; - // NOTE for corr games: drawOffer reset by player in turn - if (this.game.type == "live" && !!this.game.mycolor) - GameStorage.update(this.gameRef.id, { drawOffer: "" }); + 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(); } - this.$refs["basegame"].play( - move.move, - "received", - null, - {addTime:move.addTime}); + 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); + if (!receiveMyMove && !!this.game.mycolor) + // Notify opponent that I got the move: + this.send("gotmove", {data: movePlus.index, target: data.from}); + 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.id, { drawOffer: "" }); + } + } + this.$refs["basegame"].play(movePlus.move, "received", null, true); + this.processMove( + movePlus.move, + { + clock: movePlus.clock, + receiveMyMove: receiveMyMove + } + ); + } + } + break; + } + 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": - const score = data.side == "b" ? "1-0" : "0-1"; - const side = data.side == "w" ? "White" : "Black"; + const score = (data.data == "b" ? "1-0" : "0-1"); + const side = (data.data == "w" ? "White" : "Black"); this.gameOver(score, side + " surrender"); break; case "abort": @@ -382,8 +677,42 @@ export default { // NOTE: observers don't know who offered draw this.drawOffer = "received"; break; + case "rematchoffer": + // NOTE: observers don't know who offered rematch + this.rematchOffer = data.data ? "received" : ""; + break; + case "newgame": { + // A game started, redirect if I'm playing in + const gameInfo = data.data; + const gameType = this.getGameType(gameInfo); + if ( + gameType == "live" && + gameInfo.players.some(p => p.sid == this.st.user.sid) + ) { + this.addAndGotoLiveGame(gameInfo); + } else if ( + gameType == "corr" && + gameInfo.players.some(p => p.id == this.st.user.id) + ) { + this.$router.push("/game/" + gameInfo.id); + } else { + let urlRid = ""; + if (gameInfo.cadence.indexOf('d') === -1) { + urlRid = "/?rid="; + // Select sid of any of the online players: + let onlineSid = []; + gameInfo.players.forEach(p => { + if (!!this.people[p.sid]) onlineSid.push(p.sid); + }); + urlRid += onlineSid[Math.floor(Math.random() * onlineSid.length)]; + } + this.rematchId = gameInfo.id + urlRid; + document.getElementById("modalInfo").checked = true; + } + break; + } case "newchat": - this.newChat = data.data; + this.$refs["chatcomp"].newChat(data.data); if (!document.getElementById("modalChat").checked) document.getElementById("chatBtn").classList.add("somethingnew"); break; @@ -394,6 +723,48 @@ 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(); + } + } + ); + }, + sendLastate: function(target) { + if ( + (this.game.moves.length > 0 && this.vr.turn != this.game.mycolor) || + this.game.score != "*" || + this.drawOffer == "sent" || + this.rematchOffer == "sent" + ) { + // Send our "last state" informations to opponent + const L = this.game.moves.length; + const myIdx = ["w", "b"].indexOf(this.game.mycolor); + const myLastate = { + lastMove: L > 0 ? this.game.moves[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", + rematchSent: this.rematchOffer == "sent", + score: this.game.score, + scoreMsg: this.game.scoreMsg, + movesCount: L, + initime: this.game.initime[1 - myIdx] //relevant only if I played + }; + this.send("lastate", { data: myLastate, target: target }); + } else { + this.send("lastate", { data: {nothing: true}, target: target }); + } + }, // lastate was received, but maybe game wasn't ready yet: processLastate: function() { const data = this.lastate; @@ -401,16 +772,15 @@ export default { const L = this.game.moves.length; if (data.movesCount > L) { // Just got last move from him - this.$refs["basegame"].play( - data.lastMove.move, - "received", - null, - {addTime:data.lastMove.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.rematchSent) this.rematchOffer = "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() { @@ -432,7 +802,97 @@ 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 }); + } + }, + addAndGotoLiveGame: function(gameInfo, callback) { + const game = Object.assign( + {}, + gameInfo, + { + // (other) Game infos: constant + fenStart: gameInfo.fen, + vname: this.game.vname, + created: Date.now(), + // Game state (including FEN): will be updated + moves: [], + clocks: [-1, -1], //-1 = unstarted + initime: [0, 0], //initialized later + score: "*" + } + ); + GameStorage.add(game, (err) => { + // No error expected. + if (!err) { + if (this.st.settings.sound) + new Audio("/sounds/newgame.flac").play().catch(() => {}); + if (!!callback) callback(); + this.$router.push("/game/" + gameInfo.id); + } + }); + }, + clickRematch: function() { + if (!this.game.mycolor) return; //I'm just spectator + if (this.rematchOffer == "received") { + // Start a new game! + let gameInfo = { + id: getRandString(), //ignored if corr + fen: V.GenRandInitFen(this.game.randomness), + players: this.game.players.reverse(), + vid: this.game.vid, + cadence: this.game.cadence + }; + const notifyNewGame = () => { + const oppsid = this.getOppsid(); //may be null + this.send("rnewgame", { data: gameInfo, oppsid: oppsid }); + // To main Hall if corr game: + if (this.game.type == "corr") + this.send("newgame", { data: gameInfo }); + // Also to MyGames page: + this.notifyMyGames("newgame", gameInfo); + }; + if (this.game.type == "live") + this.addAndGotoLiveGame(gameInfo, notifyNewGame); + else { + // corr game + ajax( + "/games", + "POST", + { + // cid is useful to delete the challenge: + data: { gameInfo: gameInfo }, + success: (response) => { + gameInfo.id = response.gameId; + notifyNewGame(); + this.$router.push("/game/" + response.gameId); + } + } + ); + } + } else if (this.rematchOffer == "") { + this.rematchOffer = "sent"; + this.send("rematchoffer", { data: true }); + if (this.game.type == "live") { + GameStorage.update( + this.gameRef.id, + { rematchOffer: this.game.mycolor } + ); + } else this.updateCorrGame({ rematchOffer: this.game.mycolor }); + } else if (this.rematchOffer == "sent") { + // Toggle rematch offer (on --> off) + this.rematchOffer = ""; + this.send("rematchoffer", { data: false }); + if (this.game.type == "live") { + GameStorage.update( + this.gameRef.id, + { rematchOffer: '' } + ); + } else this.updateCorrGame({ rematchOffer: 'n' }); } }, abortGame: function() { @@ -444,8 +904,8 @@ export default { if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"])) return; this.send("resign", { data: this.game.mycolor }); - const score = this.game.mycolor == "w" ? "0-1" : "1-0"; - const side = this.game.mycolor == "w" ? "White" : "Black"; + const score = (this.game.mycolor == "w" ? "0-1" : "1-0"); + const side = (this.game.mycolor == "w" ? "White" : "Black"); this.gameOver(score, side + " surrender"); }, // 3 cases for loading a game: @@ -453,151 +913,189 @@ export default { // - from server (one correspondance game I play[ed] or not) // - from remote peer (one live game I don't play, finished or not) loadGame: function(game, callback) { - const afterRetrieval = async game => { - const vModule = await import("@/variants/" + game.vname + ".js"); - window.V = vModule.VariantRules; - this.vr = new V(game.fen); - const gtype = game.cadence.indexOf("d") >= 0 ? "corr" : "live"; - const tc = extractTime(game.cadence); - const myIdx = game.players.findIndex(p => { - return p.sid == this.st.user.sid || p.uid == this.st.user.id; + this.vr = new V(game.fen); + const gtype = 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; + }); + const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers + if (!game.chats) game.chats = []; //live games don't have chat history + if (gtype == "corr") { + // 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.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; + if (L >= 1) game.initime[L % 2] = game.moves[L-1].played; + // NOTE: game.clocks shouldn't be computed right now: + // job will be done in re_setClocks() called soon below. + } + // Sort chat messages from newest to oldest + game.chats.sort((c1, c2) => { + return c2.added - c1.added; }); - const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers - if (!game.chats) game.chats = []; //live games don't have chat history - if (gtype == "corr") { - if (game.players[0].color == "b") { - // Adopt the same convention for live and corr games: [0] = white - [game.players[0], game.players[1]] = [ - game.players[1], - game.players[0] - ]; - } - // corr game: need to compute the clocks + initime - // NOTE: clocks in seconds, initime in milliseconds - game.clocks = [tc.mainTime, tc.mainTime]; - game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of - const L = game.moves.length; - if (game.score == "*") { - // Set clocks + initime - game.initime = [0, 0]; - if (L >= 3) { - let addTime = [0, 0]; - for (let i = 2; i < L; i++) { - addTime[i % 2] += - tc.increment - - (game.moves[i].played - game.moves[i - 1].played) / 1000; - } - for (let i = 0; i <= 1; i++) game.clocks[i] += addTime[i]; + if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) { + // Did a chat message arrive after my last move? + let dtLastMove = 0; + if (L == 1 && myIdx == 0) + dtLastMove = game.moves[0].played; + else if (L >= 2) { + if (L % 2 == 0) { + // It's now white turn + dtLastMove = game.moves[L-1-(1-myIdx)].played; + } else { + // Black turn: + dtLastMove = game.moves[L-1-myIdx].played; } - if (L >= 1) game.initime[L % 2] = game.moves[L - 1].played; } - // Sort chat messages from newest to oldest - game.chats.sort((c1, c2) => { - return c2.added - c1.added; + if (dtLastMove < game.chats[0].added) + document.getElementById("chatBtn").classList.add("somethingnew"); + } + // Now that we used idx and played, re-format moves as for live games + game.moves = game.moves.map(m => m.squares); + } + if (gtype == "live" && game.clocks[0] < 0) { + // Game is unstarted. clocks and initime are ignored until move 2 + game.clocks = [tc.mainTime, tc.mainTime]; + game.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; + if (myIdx >= 0) { + // I play in this live game + GameStorage.update(game.id, { + clocks: game.clocks, + initime: game.initime }); - if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) { - // Did a chat message arrive after my last move? - let dtLastMove = 0; - if (L == 1 && myIdx == 0) - dtLastMove = game.moves[0].played; - else if (L >= 2) { - if (L % 2 == 0) { - // It's now white turn - dtLastMove = game.moves[L-1-(1-myIdx)].played; - } else { - // Black turn: - dtLastMove = game.moves[L-1-myIdx].played; - } - } - if (dtLastMove < game.chats[0].added) - document.getElementById("chatBtn").classList.add("somethingnew"); - } - // Now that we used idx and played, re-format moves as for live games - game.moves = game.moves.map(m => m.squares); - } - if (gtype == "live" && game.clocks[0] < 0) { - // Game is unstarted - game.clocks = [tc.mainTime, tc.mainTime]; - if (game.score == "*") { - game.initime[0] = Date.now(); - if (myIdx >= 0) { - // I play in this live game; corr games don't have clocks+initime - GameStorage.update(game.id, { - clocks: game.clocks, - initime: game.initime - }); - } - } } - if (game.drawOffer) { - if (game.drawOffer == "t") - // Three repetitions - this.drawOffer = "threerep"; + } + // TODO: merge next 2 "if" conditions + if (!!game.drawOffer) { + if (game.drawOffer == "t") + // Three repetitions + this.drawOffer = "threerep"; + else { + // Draw offered by any of the players: + if (myIdx < 0) this.drawOffer = "received"; else { - // Draw offered by any of the players: - if (myIdx < 0) this.drawOffer = "received"; - else { - // I play in this game: - if ( - (game.drawOffer == "w" && myIdx == 0) || - (game.drawOffer == "b" && myIdx == 1) - ) - this.drawOffer = "sent"; - else this.drawOffer = "received"; - } + // I play in this game: + if ( + (game.drawOffer == "w" && myIdx == 0) || + (game.drawOffer == "b" && myIdx == 1) + ) + this.drawOffer = "sent"; + else this.drawOffer = "received"; } } - this.repeat = {}; //reset: scan past moves' FEN: - let repIdx = 0; - let vr_tmp = new V(game.fenStart); - let curTurn = "n"; - game.moves.forEach(m => { - playMove(m, vr_tmp); - const fenIdx = vr_tmp.getFen().replace(/ /g, "_"); - this.repeat[fenIdx] = this.repeat[fenIdx] - ? this.repeat[fenIdx] + 1 - : 1; - }); - if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep"; - this.game = Object.assign( - // NOTE: assign mycolor here, since BaseGame could also be VS computer - { - type: gtype, - increment: tc.increment, - mycolor: mycolor, - // 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, - movesCount: game.moves.length - }, - game, - ); - this.re_setClocks(); - this.$nextTick(() => { - this.game.rendered = true; - // Did lastate arrive before game was rendered? - if (this.lastate) this.processLastate(); + } + if (!!game.rematchOffer) { + if (myIdx < 0) this.rematchOffer = "received"; + else { + // I play in this game: + if ( + (game.rematchOffer == "w" && myIdx == 0) || + (game.rematchOffer == "b" && myIdx == 1) + ) + this.rematchOffer = "sent"; + else this.rematchOffer = "received"; + } + } + this.repeat = {}; //reset: scan past moves' FEN: + let repIdx = 0; + let vr_tmp = new V(game.fenStart); + let curTurn = "n"; + game.moves.forEach(m => { + playMove(m, vr_tmp); + const fenIdx = vr_tmp.getFen().replace(/ /g, "_"); + this.repeat[fenIdx] = this.repeat[fenIdx] + ? this.repeat[fenIdx] + 1 + : 1; + }); + if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep"; + this.game = Object.assign( + // NOTE: assign mycolor here, since BaseGame could also be VS computer + { + type: gtype, + increment: tc.increment, + mycolor: mycolor, + // 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].id + }, + 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"; + } + this.re_setClocks(); + this.$nextTick(() => { + this.game.rendered = true; + // Did lastate arrive before game was rendered? + 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(); + }, + fetchGame: function(game, callback) { + const afterRetrieval = async (game) => { + await import("@/variants/" + game.vname + ".js") + .then((vModule) => { + window.V = vModule[game.vname + "Rules"]; + this.loadGame(game, callback); }); - if (callback) callback(); }; - if (game) { + if (!!game) { afterRetrieval(game); return; } - if (this.gameRef.rid) { + if (this.gameRef.rid) // Remote live game: forgetting about callback func... (TODO: design) this.send("askfullgame", { target: this.gameRef.rid }); - } else { - // Local or corr game + else { + // 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) => { + res.game.moves.forEach(m => { + m.squares = JSON.parse(m.squares); + }); + afterRetrieval(res.game); + } + } + ); + } + else + // Local game + GameStorage.get(this.gameRef.id, afterRetrieval); } }, re_setClocks: function() { - if (this.game.movesCount < 2 || this.game.score != "*") { + 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; @@ -609,80 +1107,103 @@ 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 ( - 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)) - ); - }, 1000); + }, + 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; const doProcessMove = () => { const colorIdx = ["w", "b"].indexOf(moveCol); const nextIdx = 1 - colorIdx; - if (this.game.mycolor) { - // NOTE: 'var' to see that variable outside this block - var filtered_move = getFilteredMove(move); - } - // Send move ("newmove" event) to people in the room (if our turn) - let addTime = data ? data.addTime : 0; - if (moveCol == this.game.mycolor) { + const origMovescount = this.game.moves.length; + let addTime = 0; //for live games + if (moveCol == this.game.mycolor && !data.receiveMyMove) { if (this.drawOffer == "received") // I refuse draw this.drawOffer = ""; - if (this.game.movesCount >= 2) { + if (this.game.type == "live" && origMovescount >= 2) { const elapsed = Date.now() - this.game.initime[colorIdx]; // elapsed time is measured in milliseconds addTime = this.game.increment - elapsed / 1000; } - const sendMove = { - move: filtered_move, - addTime: addTime, - cancelDrawOffer: this.drawOffer == "", - // Players' SID required for /mygames page - // TODO: precompute and add this field to game object? - players: this.game.players.map(p => p.sid) - }; - this.send("newmove", { data: sendMove }); } - // Update current game object (no need for moves stack): + // Update current game object: playMove(move, this.vr); - this.game.movesCount++; - // (add)Time indication: useful in case of lastate infos requested - this.game.moves.push({move:move, addTime:addTime}); + // 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); + } + this.game.moves.push(move); this.game.fen = this.vr.getFen(); - this.game.clocks[colorIdx] += addTime; - // data.initime is set only when I receive a "lastate" move from opponent - this.game.initime[nextIdx] = (data && data.initime) ? data.initime : Date.now(); - this.re_setClocks(); + if (this.game.type == "live") { + if (!!data.clock) this.game.clocks[colorIdx] = data.clock; + else this.game.clocks[colorIdx] += addTime; + } else { + // In corr games, just reset clock to mainTime: + 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 = V.ParseFen(this.game.fen); - let repIdx = fenObj.position + "_" + fenObj.turn; - if (fenObj.flags) repIdx += "_" + fenObj.flags; - this.repeat[repIdx] = this.repeat[repIdx] ? this.repeat[repIdx] + 1 : 1; - if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep"; + const fenObj = this.vr.getFenForRepeat(); + 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 = ""; + if (!!this.game.mycolor && !data.receiveMyMove) { + // NOTE: 'var' to see that variable outside this block + var filtered_move = getFilteredMove(move); + } + if (moveCol == this.game.mycolor && !data.receiveMyMove) { + // Notify turn on MyGames page: + this.notifyMyGames( + "turn", + { + gid: this.gameRef.id, + turn: this.vr.turn + } + ); + } // Since corr games are stored at only one location, update should be // done only by one player for each move: if ( - this.game.mycolor && + !!this.game.mycolor && + !data.receiveMyMove && (this.game.type == "live" || moveCol == this.game.mycolor) ) { let drawCode = ""; @@ -698,70 +1219,183 @@ 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, - played: Date.now(), - idx: this.game.moves.length - 1 + idx: origMovescount }, // Code "n" for "None" to force reset (otherwise it's ignored) drawOffer: drawCode || "n" }); } else { - // Live game: - GameStorage.update(this.gameRef.id, { - fen: this.game.fen, - move: filtered_move, - clocks: this.game.clocks, - initime: this.game.initime, - drawOffer: drawCode - }); + 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) + if (moveCol == this.game.mycolor && !data.receiveMyMove) { + let sendMove = { + move: filtered_move, + index: origMovescount, + // color is required to check if this is my move (if several tabs opened) + color: moveCol, + 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: + // 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 ( + counter >= 3 || + this.opponentGotMove || + document.location.href != currentUrl //page change + ) { + clearInterval(this.retrySendmove); + return; + } + const oppsid = this.getOppsid(); + if (!oppsid) + // Opponent is disconnected: he'll ask last state + clearInterval(this.retrySendmove); + else { + this.send("newmove", { data: sendMove, target: oppsid }); + counter++; + } + }, + 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) { - setTimeout(() => { - if ( - !confirm( - this.st.tr["Move played:"] + - " " + - getFullNotation(move) + - "\n" + - this.st.tr["Are you sure?"] - ) - ) { - this.$refs["basegame"].cancelLastMove(); - return; - } + if ( + this.game.type == "corr" && + moveCol == this.game.mycolor && + !data.receiveMyMove + ) { + 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; + return p.sid == this.st.user.sid || p.id == 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 }); + // Also to MyGames page (TODO: doubled as well...) + this.notifyMyGames( + "score", + { + gid: this.gameRef.id, + score: score + } + ); } + else if (!!callback) callback(); } } };