X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=30fbc39b9608fca600fbe3ec20b30b5ad2554e6a;hb=dcd68c4108412f45b8ce119ae80ce8f6e296800b;hp=7b14055f969f595bbb217fb7f7f9d14e82bec646;hpb=63ca2b89cfe577efd168c6b2e26750cb01b66d64;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 7b14055f..30fbc39b 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -1,16 +1,26 @@ @@ -23,6 +33,7 @@ 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"; export default { name: 'my-game', @@ -41,8 +52,8 @@ 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 }; @@ -85,11 +96,11 @@ export default { }, 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: @@ -117,11 +128,21 @@ export default { socketInit(this.loadGame); } }, + mounted: function() { + document.getElementById("chatWrap").addEventListener( + "click", processModalClick); + }, methods: { // O.1] Ask server for room composition: roomInit: function() { 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) @@ -133,7 +154,11 @@ export default { case "pollclients": { data.sockIds.forEach(sid => { - this.people.push({sid:sid, id:0, name:""}); + // TODO: understand clearly what happens here, problems when a + // game is quit, and then launch a new game from hall. + 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})); }); @@ -144,15 +169,20 @@ 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); + let player = this.people[data.user.sid]; // NOTE: sometimes player.id fails because player is undefined... // Probably because the event was meant for Hall? if (!player) @@ -160,7 +190,7 @@ export default { 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) + if (this.game.type == "live" && this.game.oppsid == data.user.sid) { // Send our "last state" informations to opponent const L = this.game.moves.length; @@ -169,7 +199,7 @@ export default { lastMove.draw = true; this.st.conn.send(JSON.stringify({ code: "lastate", - target: player.sid, + target: data.user.sid, state: { lastMove: lastMove, @@ -212,7 +242,7 @@ 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 @@ -226,12 +256,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; } }, @@ -255,16 +289,22 @@ export default { this.drawOffer = "received"; } }, - offerDraw: function() { - if (this.drawOffer == "received") + clickDraw: function() { + if (["received","threerep"].includes(this.drawOffer)) { if (!confirm("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") { @@ -277,9 +317,9 @@ export default { if (!confirm("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}); @@ -289,12 +329,12 @@ export default { if (!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, })); } }); @@ -302,11 +342,11 @@ export default { resign: function(e) { if (!confirm("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"); @@ -364,6 +404,8 @@ export default { end: s.end, }; }); + // Also sort chat messages (if any) + game.chats.sort( (c1,c2) => { return c2.added - c1.added; }); } const myIdx = game.players.findIndex(p => { return p.sid == this.st.user.sid || p.uid == this.st.user.id; @@ -419,18 +461,20 @@ 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) @@ -442,12 +486,12 @@ 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, })); } @@ -458,7 +502,8 @@ export default { const nextIdx = ["w","b"].indexOf(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.type == "live" || move.color == this.game.mycolor) + if (!!this.game.mycolor && + (this.game.type == "live" || move.color == this.game.mycolor)) { if (this.game.type == "corr") { @@ -503,12 +548,19 @@ export default { ? this.repeat[repIdx]+1 : 1); if (this.repeat[repIdx] >= 3) - this.drawOffer = "received"; //TODO: will print "mutual agreement"... + this.drawOffer = "threerep"; }, - processChat: function(chat) { + toggleChat: function() { + document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; + }, + finishSendChat: function(chat) { if (this.game.type == "corr") GameStorage.update(this.gameRef.id, {chat: chat}); }, + processChat: function() { + if (!document.getElementById("inputChat").checked) + document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; + }, gameOver: function(score, scoreMsg) { this.game.mode = "analyze"; this.game.score = score; @@ -517,7 +569,10 @@ export default { 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}); + } }, }, }; @@ -525,9 +580,7 @@ export default {