X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=a61655a9bd868289a63f5ebf1a4a4ff16953732f;hb=51d87b528ca16905a834cd5bcfad83ab07fbc99f;hp=a7096e5259615ff2ea56288584e3ece97ee00365;hpb=77c5096644d83aaae8ab1dd42a5cde524507cf9d;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index a7096e52..a61655a9 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -5,18 +5,16 @@ main #chat.card label.modal-close(for="modalChat") #participants - span {{ Object.keys(people).length }} st.tr["participant(s):"] + span {{ Object.keys(people).length + " " + st.tr["participant(s):"] }} span(v-for="p in Object.values(people)" v-if="!!p.name") | {{ p.name }} span.anonymous(v-if="Object.values(people).some(p => !p.name)") | + @nonymous Chat(:players="game.players" :pastChats="game.chats" - @newchat-sent="finishSendChat" @newchat-received="processChat") + :newChat="newChat" @mychat="processChat") .row #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2 - span.variant-info - | {{ st.tr["Variant:"] + " " }} - span.vname {{ game.vname }} + span.variant-info {{ game.vname }} button#chatBtn(onClick="doClick('modalChat')") Chat #actions(v-if="game.score=='*'") button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") @@ -43,10 +41,11 @@ import { store } from "@/store"; import { GameStorage } from "@/utils/gameStorage"; import { ppt } from "@/utils/datetime"; import { extractTime } from "@/utils/timeControl"; +import { getRandString } from "@/utils/alea"; import { ArrayFun } from "@/utils/array"; import { processModalClick } from "@/utils/modalClick"; import { getScoreMessage } from "@/utils/scoring"; - +import params from "@/parameters"; export default { name: 'my-game', components: { @@ -61,13 +60,22 @@ export default { id: "", rid: "" }, - game: {players:[{name:""},{name:""}]}, //passed to BaseGame + game: { //passed to BaseGame + players:[{name:""},{name:""}], + rendered: false, + }, virtualClocks: [0, 0], //initialized with true game.clocks vr: null, //"variant rules" object initialized from FEN drawOffer: "", people: {}, //players + observers lastate: undefined, //used if opponent send lastate before game is ready repeat: {}, //detect position repetition + newChat: "", + conn: null, + connexionString: "", + // Related to (killing of) self multi-connects: + newConnect: {}, + killed: {}, }; }, watch: { @@ -105,27 +113,27 @@ export default { }, 1000); }, }, - // NOTE: some redundant code with Hall.vue (related to people array) + // 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 - // Define socket .onmessage() and .onclose() events: - this.st.conn.onmessage = this.socketMessageListener; - const socketCloseListener = () => { - store.socketCloseListener(); //reinitialize connexion (in store.js) - this.st.conn.addEventListener('message', this.socketMessageListener); - this.st.conn.addEventListener('close', socketCloseListener); - }; - this.st.conn.onclose = socketCloseListener; + // 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.st.conn && this.st.conn.readyState == 1) //1 == OPEN state + if (!!this.conn && this.conn.readyState == 1) //1 == OPEN state callback(); else //socket not ready yet (initial loading) - this.st.conn.onopen = callback; + this.conn.onopen = callback; }; if (!this.gameRef.rid) //game stored locally or on server this.loadGame(null, () => socketInit(this.roomInit)); @@ -141,114 +149,181 @@ export default { document.getElementById("chatWrap").addEventListener( "click", processModalClick); }, + beforeDestroy: function() { + this.send("disconnect"); + }, methods: { - // O.1] Ask server for room composition: roomInit: function() { // Notify the room only now that I connected, because // messages might be lost otherwise (if game loading is slow) - this.st.conn.send(JSON.stringify({code:"connect"})); - this.st.conn.send(JSON.stringify({code:"pollclients"})); + this.send("connect"); + this.send("pollclients"); + }, + send: function(code, obj) { + if (!!this.conn) + { + this.conn.send(JSON.stringify( + Object.assign( + {code: code}, + obj, + ) + )); + } }, isConnected: function(index) { - const name = this.game.players[index].name; - if (this.st.user.name == name) + const player = this.game.players[index]; + // Is it me ? + if (this.st.user.sid == player.sid || this.st.user.id == player.uid) return true; - return Object.values(this.people).some(p => p.name == 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); }, socketMessageListener: function(msg) { + if (!this.conn) + return; const data = JSON.parse(msg.data); switch (data.code) { - case "duplicate": - alert(this.st.tr["Warning: multi-tabs not supported"]); - break; - // 0.2] Receive clients list (just socket IDs) case "pollclients": - { data.sockIds.forEach(sid => { - if (!!this.people[sid]) - return; this.$set(this.people, sid, {id:0, name:""}); - // Ask only identity - this.st.conn.send(JSON.stringify({code:"askidentity", target:sid})); + if (sid != this.st.user.sid) + { + 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 "askidentity": - { - // Request for identification: reply if I'm not anonymous - if (this.st.user.id > 0) + case "connect": + if (!this.people[data.from]) + this.$set(this.people, data.from, {name:"", id:0}); + if (!this.people[data.from].name) { - this.st.conn.send(JSON.stringify({code:"identity", - user: { - // NOTE: decompose to avoid revealing email - name: this.st.user.name, - sid: this.st.user.sid, - id: this.st.user.id, - }, - target:data.from})); + this.newConnect[data.from] = true; //for self multi-connects tests + this.send("askidentity", {target:data.from}); } break; + case "disconnect": + this.$delete(this.people, data.from); + break; + case "killed": + // I logged in elsewhere: + alert(this.st.tr["New connexion detected: tab now offline"]); + // 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; + break; + case "askidentity": + { + // Request for identification (TODO: anonymous shouldn't need to reply) + const me = { + // Decompose to avoid revealing email + name: this.st.user.name, + sid: this.st.user.sid, + id: this.st.user.id, + }; + this.send("identity", {data:me, target:data.from}); + break; } case "identity": { - // NOTE: sometimes player.id fails because player is undefined... - // Probably because the event was meant for Hall? - if (!this.people[data.user.sid]) - return; - this.$set(this.people, data.user.sid, - {id: data.user.id, name: data.user.name}); - // Sending last state only for live games: corr games are complete, - // only if I played a move (otherwise opponent has all) - if (!!this.game.mycolor && this.game.type == "live" - && this.game.oppsid == data.user.sid - && this.game.moves.length > 0 && this.vr.turn != this.game.mycolor) + const user = data.data; + if (!!user.name) //otherwise anonymous { - // Send our "last state" informations to opponent - const L = this.game.moves.length; - this.st.conn.send(JSON.stringify({ - code: "lastate", - target: data.user.sid, - state: + // If I multi-connect, kill current connexion if no mark (I'm older) + if (this.newConnect[user.sid] && user.id > 0 + && user.id == this.st.user.id && user.sid != this.st.user.sid) + { + if (!this.killed[this.st.user.sid]) { - lastMove: this.game.moves[L-1], - // Since we played a move, only drawOffer=="sent" is possible - drawSent: this.drawOffer == "sent", - score: this.game.score, - movesCount: L, - clocks: this.game.clocks, + 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]; break; } case "askgame": - // Send current (live) game if not asked by opponent (!) - if (this.game.players.some(p => p.sid == data.from)) - return; - const myGame = + // Send current (live) game if not asked by any of the players + if (this.game.type == "live" + && this.game.players.every(p => p.sid != data.from[0])) { - // Minimal game informations: - id: this.game.id, - players: this.game.players, - vid: this.game.vid, - timeControl: this.game.timeControl, - }; - this.st.conn.send(JSON.stringify({code:"game", - game:myGame, target:data.from})); + const myGame = { + id: this.game.id, + fen: this.game.fen, + players: this.game.players, + vid: this.game.vid, + cadence: this.game.cadence, + score: this.game.score, + rid: this.st.user.sid, //useful in Hall if I'm an observer + }; + this.send("game", {data:myGame, target:data.from}); + } break; - case "newmove": - if (!!data.move.cancelDrawOffer) //opponent refuses draw - this.drawOffer = ""; - this.$set(this.game, "moveToPlay", data.move); + case "askfullgame": + this.send("fullgame", {data:this.game, target:data.from}); + break; + case "fullgame": + // Callback "roomInit" to poll clients only after game is loaded + this.loadGame(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}); + } break; case "lastate": //got opponent infos about last move - { - this.lastate = data; - if (!!this.game.type) //game is loaded + 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: ""}); + } + this.$set(this.game, "moveToPlay", move); + break; } case "resign": this.gameOver(data.side=="b" ? "1-0" : "0-1", "Resign"); @@ -257,35 +332,27 @@ export default { this.gameOver("?", "Abort"); break; case "draw": - this.gameOver("1/2", data.message); + this.gameOver("1/2", data.data); break; case "drawoffer": // NOTE: observers don't know who offered draw this.drawOffer = "received"; break; - case "askfullgame": - this.st.conn.send(JSON.stringify({code:"fullgame", - game:this.game, target:data.from})); - break; - case "fullgame": - // Callback "roomInit" to poll clients only after game is loaded - this.loadGame(data.game, this.roomInit); - break; - case "connect": + case "newchat": { - // TODO: next condition is probably not required. See note line 150 - if (!this.people[data.from]) - { - this.$set(this.people, data.from, {name:"", id:0}); - this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from})); - } + const chat = data.data; + this.newChat = chat; + if (!document.getElementById("modalChat").checked) + document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; break; } - case "disconnect": - this.$delete(this.people, data.from); - break; } }, + socketCloseListener: function() { + this.conn = new WebSocket(this.connexionString); + this.conn.addEventListener('message', this.socketMessageListener); + this.conn.addEventListener('close', this.socketCloseListener); + }, // lastate was received, but maybe game wasn't ready yet: processLastate: function() { const data = this.lastate; @@ -294,12 +361,15 @@ export default { if (data.movesCount > L) { // Just got last move from him - if (data.score != "*" && this.game.score == "*") + this.$set(this.game, "moveToPlay", Object.assign({initime: data.initime}, data.lastMove)); + } + if (data.drawSent) + this.drawOffer = "received"; + if (data.score != "*") + { + this.drawOffer = ""; + if (this.game.score == "*") this.gameOver(data.score); - this.game.clocks = data.clocks; //TODO: check this? - if (!!data.drawSent) - this.drawOffer = "received"; - this.$set(this.game, "moveToPlay", data.lastMove); } }, clickDraw: function() { @@ -312,13 +382,7 @@ export default { const message = (this.drawOffer == "received" ? "Mutual agreement" : "Three repetitions"); - Object.keys(this.people).forEach(sid => { - if (sid != this.st.user.sid) - { - this.st.conn.send(JSON.stringify({code:"draw", - message:message, target:sid})); - } - }); + this.send("draw", {data:message}); this.gameOver("1/2", message); } else if (this.drawOffer == "") //no effect if drawOffer == "sent" @@ -328,10 +392,7 @@ export default { if (!confirm(this.st.tr["Offer draw?"])) return; this.drawOffer = "sent"; - Object.keys(this.people).forEach(sid => { - if (sid != this.st.user.sid) - this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid})); - }); + this.send("drawoffer"); GameStorage.update(this.gameRef.id, {drawOffer: this.game.mycolor}); } }, @@ -339,26 +400,12 @@ export default { if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"])) return; this.gameOver("?", "Abort"); - Object.keys(this.people).forEach(sid => { - if (sid != this.st.user.sid) - { - this.st.conn.send(JSON.stringify({ - code: "abort", - target: sid, - })); - } - }); + this.send("abort"); }, resign: function(e) { if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"])) return; - Object.keys(this.people).forEach(sid => { - if (sid != this.st.user.sid) - { - this.st.conn.send(JSON.stringify({code:"resign", - side:this.game.mycolor, target:sid})); - } - }); + this.send("resign", {data:this.game.mycolor}); this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); }, // 3 cases for loading a game: @@ -370,8 +417,8 @@ export default { const vModule = await import("@/variants/" + game.vname + ".js"); window.V = vModule.VariantRules; this.vr = new V(game.fen); - const gtype = (game.timeControl.indexOf('d') >= 0 ? "corr" : "live"); - const tc = extractTime(game.timeControl); + const gtype = (game.cadence.indexOf('d') >= 0 ? "corr" : "live"); + const tc = extractTime(game.cadence); if (gtype == "corr") { if (game.players[0].color == "b") @@ -468,6 +515,12 @@ export default { oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid), } ); + this.$nextTick(() => { + this.game.rendered = true; + // Did lastate arrive before game was rendered? + if (!!this.lastate) + this.processLastate(); + }); this.repeat = {}; //reset: scan past moves' FEN: let repIdx = 0; // NOTE: vr_tmp to obtain FEN strings is redundant with BaseGame @@ -484,8 +537,6 @@ export default { }); if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep"; - if (!!this.lastate) //lastate arrived before game was loaded: - this.processLastate(); callback(); }; if (!!game) @@ -493,8 +544,7 @@ export default { if (!!this.gameRef.rid) { // Remote live game: forgetting about callback func... (TODO: design) - this.st.conn.send(JSON.stringify( - {code:"askfullgame", target:this.gameRef.rid})); + this.send("askfullgame", {target:this.gameRef.rid}); } else { @@ -506,6 +556,7 @@ export default { processMove: function(move) { // Update storage (corr or live) if I play in the game const colorIdx = ["w","b"].indexOf(move.color); + const nextIdx = ["w","b"].indexOf(this.vr.turn); // https://stackoverflow.com/a/38750895 if (!!this.game.mycolor) { @@ -530,27 +581,24 @@ export default { // elapsed time is measured in milliseconds addTime = this.game.increment - elapsed/1000; } - let sendMove = Object.assign({}, filtered_move, {addTime: addTime}); - Object.keys(this.people).forEach(sid => { - if (sid != this.st.user.sid) + const sendMove = Object.assign({}, + filtered_move, { - this.st.conn.send(JSON.stringify({ - code: "newmove", - target: sid, - move: sendMove, - cancelDrawOffer: this.drawOffer=="", - })); - } - }); + addTime: addTime, + cancelDrawOffer: this.drawOffer=="", + }); + this.send("newmove", {data: sendMove}); + // (Add)Time indication: useful in case of lastate infos requested + move.addTime = addTime; } else addTime = move.addTime; //supposed transmitted - const nextIdx = ["w","b"].indexOf(this.vr.turn); // Update current game object: this.game.moves.push(move); this.game.fen = move.fen; this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); - this.game.initime[nextIdx] = Date.now(); + // move.initime is set only when I receive a "lastate" move from opponent + this.game.initime[nextIdx] = move.initime || Date.now(); // If repetition detected, consider that a draw offer was received: const fenObj = V.ParseFen(move.fen); let repIdx = fenObj.position + "_" + fenObj.turn; @@ -589,10 +637,10 @@ export default { move: { squares: filtered_move, - played: Date.now(), //TODO: on server? + played: Date.now(), idx: this.game.moves.length - 1, }, - drawOffer: drawCode, + drawOffer: drawCode || "n", //"n" for "None" to force reset (otherwise it's ignored) }); } else //live @@ -612,15 +660,12 @@ export default { // TODO: this is called twice, once on opening an once on closing document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; }, - finishSendChat: function(chat) { + 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}); }, - processChat: function() { - if (!document.getElementById("modalChat").checked) - document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; - }, gameOver: function(score, scoreMsg) { this.game.score = score; this.game.scoreMsg = this.st.tr[(!!scoreMsg @@ -662,7 +707,6 @@ export default { margin-top: 10px button display: inline-block - width: 33% margin: 0 @media screen and (max-width: 767px) @@ -673,9 +717,8 @@ export default { margin-left: 30% .variant-info + font-weight: bold padding-right: 10px - .vname - font-weight: bold .name font-size: 1.5rem