X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=ddd5e5935605a7b75c4df1957e67bc59e0f79d20;hp=2f33bc58ac8dd13aea767bd6335a5cce1d52868e;hb=ac8f441c6441d827b43aabeb812cb4c79e9ee96b;hpb=3837d4f7885a3c3cdb468da2f3fa3fa1e5a1415a diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 2f33bc58..ddd5e593 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -1,17 +1,37 @@ @@ -24,6 +44,8 @@ import { GameStorage } from "@/utils/gameStorage"; import { ppt } from "@/utils/datetime"; import { extractTime } from "@/utils/timeControl"; import { ArrayFun } from "@/utils/array"; +import { processModalClick } from "@/utils/modalClick"; +import { getScoreMessage } from "@/utils/scoring"; export default { name: 'my-game', @@ -42,10 +64,11 @@ export default { game: {players:[{name:""},{name:""}]}, //passed to BaseGame virtualClocks: [0, 0], //initialized with true game.clocks vr: null, //"variant rules" object initialized from FEN - drawOffer: "", //TODO: use for button style - people: [], //players + observers + drawOffer: "", + people: {}, //players + observers lastate: undefined, //used if opponent send lastate before game is ready repeat: {}, //detect position repetition + newChat: "", }; }, watch: { @@ -76,21 +99,18 @@ export default { { clearInterval(clockUpdate); if (countdown < 0) - this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", "Time"); + this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", this.st.tr["Time"]); } else - { - // TODO: with Vue 3, just do this.virtualClocks[colorIdx] = ppt(--countdown) this.$set(this.virtualClocks, colorIdx, ppt(Math.max(0, --countdown))); - } }, 1000); }, }, - // TODO: redundant code with Hall.vue (related to people array) + // NOTE: some redundant code with Hall.vue (related to people array) created: function() { // Always add myself to players' list const my = this.st.user; - this.people.push({sid:my.sid, id:my.id, name:my.name}); + 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: @@ -118,23 +138,38 @@ export default { socketInit(this.loadGame); } }, + mounted: function() { + document.getElementById("chatWrap").addEventListener( + "click", processModalClick); + }, 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"})); }, + isConnected: function(index) { + const name = this.game.players[index].name; + if (this.st.user.name == name) + return true; + return Object.values(this.people).some(p => p.name == name); + }, socketMessageListener: function(msg) { const data = JSON.parse(msg.data); switch (data.code) { case "duplicate": - alert("Warning: duplicate 'offline' connection"); + alert(this.st.tr["Warning: multi-tabs not supported"]); break; // 0.2] Receive clients list (just socket IDs) case "pollclients": { data.sockIds.forEach(sid => { - this.people.push({sid:sid, id:0, name:""}); + 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})); }); @@ -145,35 +180,41 @@ export default { // Request for identification: reply if I'm not anonymous if (this.st.user.id > 0) { - this.st.conn.send(JSON.stringify( - // people[0] instead of st.user to avoid sending email - {code:"identity", user:this.people[0], target:data.from})); + 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})); } break; } case "identity": { - let player = this.people.find(p => p.sid == data.user.sid); // NOTE: sometimes player.id fails because player is undefined... // Probably because the event was meant for Hall? - if (!player) + if (!this.people[data.user.sid]) return; - player.id = data.user.id; - player.name = data.user.name; - // Sending last state only for live games: corr games are complete - if (this.game.type == "live" && this.game.oppsid == player.sid) + 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) { // Send our "last state" informations to opponent const L = this.game.moves.length; - let lastMove = (L>0 ? this.game.moves[L-1] : undefined); - if (!!lastMove && this.drawOffer == "sent") - lastMove.draw = true; this.st.conn.send(JSON.stringify({ code: "lastate", - target: player.sid, + target: data.user.sid, state: { - lastMove: lastMove, + 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, @@ -183,20 +224,33 @@ export default { break; } case "askgame": - // Send current (live) game - const myGame = + // Send current (live) game if I play in (not an observer), + // and not asked by opponent (!) + if (this.game.type == "live" + && this.game.players.some(p => p.sid == this.st.user.sid) + && this.game.players.every(p => p.sid != data.from)) { - // Minimal game informations: - id: this.game.id, - players: this.game.players.map(p => { return {name:p.name}; }), - vid: this.game.vid, - timeControl: this.game.timeControl, - }; - this.st.conn.send(JSON.stringify({code:"game", - game:myGame, target:data.from})); + const myGame = + { + // 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})); + } break; case "newmove": - this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3... + if (!!data.move.cancelDrawOffer) //opponent refuses draw + this.drawOffer = ""; + this.$set(this.game, "moveToPlay", data.move); + break; + case "newchat": + this.newChat = data.chat; + if (!document.getElementById("modalChat").checked) + document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; break; case "lastate": //got opponent infos about last move { @@ -213,13 +267,15 @@ export default { this.gameOver("?", "Abort"); break; case "draw": - this.gameOver("1/2", "Mutual agreement"); + this.gameOver("1/2", data.message); break; case "drawoffer": - this.drawOffer = "received"; //TODO: observers don't know who offered draw + // 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})); + 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 @@ -227,12 +283,16 @@ export default { break; case "connect": { - this.people.push({name:"", id:0, sid:data.from}); - this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from})); + // 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})); + } break; } case "disconnect": - ArrayFun.remove(this.people, p => p.sid == data.from); + this.$delete(this.people, data.from); break; } }, @@ -244,70 +304,69 @@ export default { if (data.movesCount > L) { // Just got last move from him - this.$set(this.game, "moveToPlay", data.lastMove); if (data.score != "*" && this.game.score == "*") - { - // Opponent resigned or aborted game, or accepted draw offer - // (this is not a stalemate or checkmate) - this.gameOver(data.score, "Opponent action"); - } + this.gameOver(data.score); this.game.clocks = data.clocks; //TODO: check this? - if (!!data.lastMove.draw) + if (!!data.drawSent) this.drawOffer = "received"; + this.$set(this.game, "moveToPlay", data.lastMove); } }, - offerDraw: function() { - if (this.drawOffer == "received") + clickDraw: function() { + if (!this.game.mycolor) + return; //I'm just spectator + if (["received","threerep"].includes(this.drawOffer)) { - if (!confirm("Accept draw?")) + if (!confirm(this.st.tr["Accept draw?"])) return; - this.people.forEach(p => { - if (p.sid != this.st.user.sid) - this.st.conn.send(JSON.stringify({code:"draw", target:p.sid})); + 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.gameOver("1/2", "Mutual agreement"); + this.gameOver("1/2", message); } - else if (this.drawOffer == "sent") + else if (this.drawOffer == "") //no effect if drawOffer == "sent" { - this.drawOffer = ""; - if (this.game.type == "corr") - GameStorage.update(this.gameRef.id, {drawOffer: false}); - } - else - { - if (!confirm("Offer draw?")) + if (this.game.mycolor != this.vr.turn) + return alert(this.st.tr["Draw offer only in your turn"]); + if (!confirm(this.st.tr["Offer draw?"])) return; this.drawOffer = "sent"; - this.people.forEach(p => { - if (p.sid != this.st.user.sid) - this.st.conn.send(JSON.stringify({code:"drawoffer", target:p.sid})); + Object.keys(this.people).forEach(sid => { + if (sid != this.st.user.sid) + this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid})); }); - if (this.game.type == "corr") - GameStorage.update(this.gameRef.id, {drawOffer: true}); + GameStorage.update(this.gameRef.id, {drawOffer: this.game.mycolor}); } }, abortGame: function() { - if (!confirm(this.st.tr["Terminate game?"])) + if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"])) return; this.gameOver("?", "Abort"); - this.people.forEach(p => { - if (p.sid != this.st.user.sid) + Object.keys(this.people).forEach(sid => { + if (sid != this.st.user.sid) { this.st.conn.send(JSON.stringify({ code: "abort", - target: p.sid, + target: sid, })); } }); }, resign: function(e) { - if (!confirm("Resign the game?")) + if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"])) return; - this.people.forEach(p => { - if (p.sid != this.st.user.sid) + 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:p.sid})); + side:this.game.mycolor, target:sid})); } }); this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); @@ -352,8 +411,6 @@ export default { } if (L >= 1) game.initime[L%2] = game.moves[L-1].played; - if (game.drawOffer) - this.drawOffer = "received"; } // Now that we used idx and played, re-format moves as for live games game.moves = game.moves.map( (m) => { @@ -388,6 +445,26 @@ export default { } } } + if (!!game.drawOffer) + { + if (game.drawOffer == "t") //three repetitions + this.drawOffer = "threerep"; + else + { + if (myIdx < 0) + this.drawOffer = "received"; //by any of the players + else + { + // I play in this game: + if ((game.drawOffer == "w" && myIdx==0) || (game.drawOffer=="b" && myIdx==1)) + this.drawOffer = "sent"; + else //all other cases + this.drawOffer = "received"; + } + } + } + if (!!game.scoreMsg) + game.scoreMsg = this.st.tr[game.scoreMsg]; //stored in english this.game = Object.assign({}, game, // NOTE: assign mycolor here, since BaseGame could also be VS computer @@ -401,7 +478,22 @@ export default { oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid), } ); - this.repeat = {}; //reset + this.repeat = {}; //reset: scan past moves' FEN: + let repIdx = 0; + // NOTE: vr_tmp to obtain FEN strings is redundant with BaseGame + let vr_tmp = new V(game.fenStart); + game.moves.forEach(m => { + vr_tmp.play(m); + const fenObj = V.ParseFen( vr_tmp.getFen() ); + 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"; if (!!this.lastate) //lastate arrived before game was loaded: this.processLastate(); callback(); @@ -422,22 +514,26 @@ export default { }, // Post-process a move (which was just played) processMove: function(move) { - if (!this.game.mycolor) - return; //I'm just an observer - // Update storage (corr or live) + // Update storage (corr or live) if I play in the game const colorIdx = ["w","b"].indexOf(move.color); // https://stackoverflow.com/a/38750895 - const allowed_fields = ["appear", "vanish", "start", "end"]; - const filtered_move = Object.keys(move) - .filter(key => allowed_fields.includes(key)) - .reduce((obj, key) => { - obj[key] = move[key]; - return obj; - }, {}); + if (!!this.game.mycolor) + { + const allowed_fields = ["appear", "vanish", "start", "end"]; + // NOTE: 'var' to see this variable outside this block + var filtered_move = Object.keys(move) + .filter(key => allowed_fields.includes(key)) + .reduce((obj, key) => { + obj[key] = move[key]; + return obj; + }, {}); + } // Send move ("newmove" event) to people in the room (if our turn) let addTime = 0; if (move.color == this.game.mycolor) { + if (this.drawOffer == "received") //I refuse draw + this.drawOffer = ""; if (this.game.moves.length >= 2) //after first move { const elapsed = Date.now() - this.game.initime[colorIdx]; @@ -445,13 +541,14 @@ export default { addTime = this.game.increment - elapsed/1000; } let sendMove = Object.assign({}, filtered_move, {addTime: addTime}); - this.people.forEach(p => { - if (p.sid != this.st.user.sid) + Object.keys(this.people).forEach(sid => { + if (sid != this.st.user.sid) { this.st.conn.send(JSON.stringify({ code: "newmove", - target: p.sid, + target: sid, move: sendMove, + cancelDrawOffer: this.drawOffer=="", })); } }); @@ -459,10 +556,41 @@ export default { 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(); + // If repetition detected, consider that a draw offer was received: + const fenObj = V.ParseFen(move.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"; + 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.type == "live" || move.color == this.game.mycolor) + if (!!this.game.mycolor && + (this.game.type == "live" || move.color == this.game.mycolor)) { + let drawCode = ""; + switch (this.drawOffer) + { + case "threerep": + drawCode = "t"; + break; + case "sent": + drawCode = this.game.mycolor; + break; + case "received": + drawCode = this.vr.turn; + break; + } if (this.game.type == "corr") { GameStorage.update(this.gameRef.id, @@ -472,8 +600,9 @@ export default { { squares: filtered_move, played: Date.now(), //TODO: on server? - idx: this.game.moves.length, + idx: this.game.moves.length - 1, }, + drawOffer: drawCode, }); } else //live @@ -482,55 +611,51 @@ export default { { fen: move.fen, move: filtered_move, - clocks: this.game.clocks.map((t,i) => i==colorIdx - ? this.game.clocks[i] + addTime - : this.game.clocks[i]), - initime: this.game.initime.map((t,i) => i==nextIdx - ? Date.now() - : this.game.initime[i]), + clocks: this.game.clocks, + initime: this.game.initime, + drawOffer: drawCode, }); } } - // Also update current game object: - this.game.moves.push(move); - this.game.fen = move.fen; - //TODO: (Vue3) just this.game.clocks[colorIdx] += addTime; - this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); - this.game.initime[nextIdx] = Date.now(); - // If repetition detected, consider that a draw offer was received: - const fenObj = V.ParseFen(move.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 = "received"; //TODO: will print "mutual agreement"... + }, + resetChatColor: function() { + // TODO: this is called twice, once on opening an once on closing + document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; }, processChat: function(chat) { - if (this.game.type == "corr") + this.st.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}); }, gameOver: function(score, scoreMsg) { - this.game.mode = "analyze"; this.game.score = score; - this.game.scoreMsg = scoreMsg; + this.game.scoreMsg = this.st.tr[(!!scoreMsg + ? scoreMsg + : getScoreMessage(score))]; 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, { score: score }); + { + GameStorage.update(this.gameRef.id, + {score: score, scoreMsg: scoreMsg}); + } }, }, }; -