X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=177f9eb30d8023cc2abf4557fa9280e302e87494;hb=8418f0d79395f40172b11d62eef8b83112f1d240;hp=35cec3a87c95de5ad7279eeb1bb2c72d6fa08e9f;hpb=a0c41e7e23c9ff64031739e072f38e493bac8dca;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 35cec3a8..177f9eb3 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -44,6 +44,7 @@ import { extractTime } from "@/utils/timeControl"; import { ArrayFun } from "@/utils/array"; import { processModalClick } from "@/utils/modalClick"; import { getScoreMessage } from "@/utils/scoring"; +import params from "@/parameters"; export default { name: 'my-game', @@ -70,6 +71,9 @@ export default { lastate: undefined, //used if opponent send lastate before game is ready repeat: {}, //detect position repetition newChat: "", + conn: null, + page: "", + tempId: "", //to distinguish several tabs }; }, watch: { @@ -114,20 +118,26 @@ export default { 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; + // Initialize connection + this.page = this.$route.path; + const connexionString = params.socketUrl + + "/?sid=" + this.st.user.sid + + "&tmpId=" + this.tempId + + "&page=" + encodeURIComponent(this.page); + this.conn = new WebSocket(connexionString); + this.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.conn = new WebSocket(connexionString); + this.conn.addEventListener('message', this.socketMessageListener); + this.conn.addEventListener('close', socketCloseListener); }; - this.st.conn.onclose = socketCloseListener; + this.conn.onclose = 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)); @@ -143,45 +153,50 @@ export default { document.getElementById("chatWrap").addEventListener( "click", processModalClick); }, + beforeDestroy: function() { + this.conn.send(JSON.stringify({code:"disconnect",page:this.page})); + }, 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.conn.send(JSON.stringify({code:"connect"})); + this.conn.send(JSON.stringify({code:"pollclients"})); }, 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) { const data = JSON.parse(msg.data); switch (data.code) { case "duplicate": - alert(this.st.tr["Warning: multi-tabs not supported"]); + this.conn.send(JSON.stringify({code:"duplicate", + page:"/game/" + this.game.id})); + alert(this.st.tr["This tab is now offline"]); 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})); + this.conn.send(JSON.stringify({code:"askidentity", target:sid})); }); break; - } case "askidentity": - { // Request for identification: reply if I'm not anonymous if (this.st.user.id > 0) { - this.st.conn.send(JSON.stringify({code:"identity", + this.conn.send(JSON.stringify({code:"identity", user: { // NOTE: decompose to avoid revealing email name: this.st.user.name, @@ -191,9 +206,7 @@ export default { target:data.from})); } break; - } case "identity": - { this.$set(this.people, data.user.sid, {id: data.user.id, name: data.user.name}); // Ask potentially missed last state, if opponent and I play @@ -201,20 +214,18 @@ export default { && this.game.type == "live" && this.game.score == "*" && this.game.players.some(p => p.sid == data.user.sid)) { - this.st.conn.send(JSON.stringify({code:"asklastate", target:data.user.sid})); + this.conn.send(JSON.stringify({code:"asklastate", target:data.user.sid})); } 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.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); - this.st.conn.send(JSON.stringify({ + this.conn.send(JSON.stringify({ code: "lastate", target: data.from, state: @@ -231,7 +242,6 @@ export default { })); } break; - } case "askgame": // Send current (live) game if I play in (not an observer), // and not asked by opponent (!) @@ -246,14 +256,20 @@ export default { players: this.game.players, vid: this.game.vid, timeControl: this.game.timeControl, + score: this.game.score, }; - this.st.conn.send(JSON.stringify({code:"game", + this.conn.send(JSON.stringify({code:"game", game:myGame, target:data.from})); } break; case "newmove": if (!!data.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", data.move); break; case "newchat": @@ -262,13 +278,11 @@ export default { document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; break; case "lastate": //got opponent infos about last move - { this.lastate = data.state; if (this.game.rendered) //game is rendered (Board component) this.processLastate(); //else: will be processed when game is ready break; - } case "resign": this.gameOver(data.side=="b" ? "1-0" : "0-1", "Resign"); break; @@ -283,7 +297,7 @@ export default { this.drawOffer = "received"; break; case "askfullgame": - this.st.conn.send(JSON.stringify({code:"fullgame", + this.conn.send(JSON.stringify({code:"fullgame", game:this.game, target:data.from})); break; case "fullgame": @@ -291,11 +305,9 @@ export default { this.loadGame(data.game, this.roomInit); break; case "connect": - { this.$set(this.people, data.from, {name:"", id:0}); - this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from})); + this.conn.send(JSON.stringify({code:"askidentity", target:data.from})); break; - } case "disconnect": this.$delete(this.people, data.from); break; @@ -309,11 +321,10 @@ export default { if (data.movesCount > L) { // Just got last move from him - const myIdx = ["w","b"].indexOf(this.game.mycolor); - if (!!data.drawSent) - this.drawOffer = "received"; this.$set(this.game, "moveToPlay", Object.assign({}, data.lastMove, {initime: data.initime})); } + if (data.drawSent) + this.drawOffer = "received"; if (data.score != "*") { this.drawOffer = ""; @@ -334,7 +345,7 @@ export default { Object.keys(this.people).forEach(sid => { if (sid != this.st.user.sid) { - this.st.conn.send(JSON.stringify({code:"draw", + this.conn.send(JSON.stringify({code:"draw", message:message, target:sid})); } }); @@ -349,7 +360,7 @@ export default { 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.conn.send(JSON.stringify({code:"drawoffer", target:sid})); }); GameStorage.update(this.gameRef.id, {drawOffer: this.game.mycolor}); } @@ -361,7 +372,7 @@ export default { Object.keys(this.people).forEach(sid => { if (sid != this.st.user.sid) { - this.st.conn.send(JSON.stringify({ + this.conn.send(JSON.stringify({ code: "abort", target: sid, })); @@ -374,7 +385,7 @@ export default { Object.keys(this.people).forEach(sid => { if (sid != this.st.user.sid) { - this.st.conn.send(JSON.stringify({code:"resign", + this.conn.send(JSON.stringify({code:"resign", side:this.game.mycolor, target:sid})); } }); @@ -516,7 +527,7 @@ export default { if (!!this.gameRef.rid) { // Remote live game: forgetting about callback func... (TODO: design) - this.st.conn.send(JSON.stringify( + this.conn.send(JSON.stringify( {code:"askfullgame", target:this.gameRef.rid})); } else @@ -554,15 +565,19 @@ export default { // elapsed time is measured in milliseconds addTime = this.game.increment - elapsed/1000; } - let sendMove = Object.assign({}, filtered_move, {addTime: addTime}); + const sendMove = Object.assign({}, + filtered_move, + { + addTime: addTime, + cancelDrawOffer: this.drawOffer=="", + }); Object.keys(this.people).forEach(sid => { if (sid != this.st.user.sid) { - this.st.conn.send(JSON.stringify({ + this.conn.send(JSON.stringify({ code: "newmove", target: sid, move: sendMove, - cancelDrawOffer: this.drawOffer=="", })); } }); @@ -618,7 +633,7 @@ export default { 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 @@ -639,7 +654,7 @@ export default { document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; }, processChat: function(chat) { - this.st.conn.send(JSON.stringify({code:"newchat", chat:chat})); + this.conn.send(JSON.stringify({code:"newchat", chat: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});