X-Git-Url: https://git.auder.net/variants/Cwda/complete_rules.html?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=177f9eb30d8023cc2abf4557fa9280e302e87494;hb=8418f0d79395f40172b11d62eef8b83112f1d240;hp=baa9ae1930d50575ff1faaad66295f26a433796b;hpb=c4f6d5a15bac583f9392e4fc1fabee23eaf9d1f5;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index baa9ae19..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,12 +214,10 @@ 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.drawOffer == "sent") @@ -214,7 +225,7 @@ export default { // 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 (!) @@ -248,7 +258,7 @@ export default { 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; @@ -268,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; @@ -289,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": @@ -297,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; @@ -339,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})); } }); @@ -354,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}); } @@ -366,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, })); @@ -379,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})); } }); @@ -521,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 @@ -568,7 +574,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: "newmove", target: sid, move: sendMove, @@ -648,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});