X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=6d37d1ed85496c91651794f53c6ab0f7c89cb502;hb=f5768809ae96cf4565c0bc3d2747ffc206837e20;hp=e5b45ecda2a896f474ea1d7a942c948e97e64788;hpb=0d5335de5c94d780e03ac0aa3279b731c69455cc;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index e5b45ecd..6d37d1ed 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -131,6 +131,7 @@ import Chat from "@/components/Chat.vue"; import { store } from "@/store"; import { GameStorage } from "@/utils/gameStorage"; import { ppt } from "@/utils/datetime"; +import { notify } from "@/utils/notifications"; import { ajax } from "@/utils/ajax"; import { extractTime } from "@/utils/timeControl"; import { getRandString } from "@/utils/alea"; @@ -154,6 +155,7 @@ export default { gameRef: "", nextIds: [], game: {}, //passed to BaseGame + focus: false, // virtualClocks will be initialized from true game.clocks virtualClocks: [], vr: null, //"variant rules" object initialized from FEN @@ -229,6 +231,8 @@ export default { cleanBeforeDestroy: function() { clearInterval(this.socketCloseListener); document.removeEventListener('visibilitychange', this.visibilityChange); + window.removeEventListener('focus', this.onFocus); + window.removeEventListener('blur', this.onBlur); if (!!this.askLastate) clearInterval(this.askLastate); if (!!this.retrySendmove) clearInterval(this.retrySendmove); if (!!this.clockUpdate) clearInterval(this.clockUpdate); @@ -238,11 +242,25 @@ export default { }, visibilityChange: function() { // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27 - this.send( - document.visibilityState == "visible" - ? "getfocus" - : "losefocus" - ); + this.focus = (document.visibilityState == "visible"); + if (!this.focus && !!this.rematchOffer) { + this.rematchOffer = ""; + this.send("rematchoffer", { data: false }); + // Do not remove rematch offer from (local) storage + } + this.send(this.focus ? "getfocus" : "losefocus"); + }, + onFocus: function() { + this.focus = true; + this.send("getfocus"); + }, + onBlur: function() { + this.focus = false; + if (!!this.rematchOffer) { + this.rematchOffer = ""; + this.send("rematchoffer", { data: false }); + } + this.send("losefocus"); }, participateInChat: function(p) { return Object.keys(p.tmpIds).some(x => p.tmpIds[x].focus) && !!p.name; @@ -256,6 +274,8 @@ export default { }, atCreation: function() { document.addEventListener('visibilitychange', this.visibilityChange); + window.addEventListener('focus', this.onFocus); + window.addEventListener('blur', this.onBlur); // 0] (Re)Set variables this.gameRef = this.$route.params["id"]; // next = next corr games IDs to navigate faster (if applicable) @@ -408,16 +428,22 @@ export default { // NOTE: anonymous chats in corr games are not stored on server (TODO?) if (this.game.type == "corr" && this.st.user.id > 0) this.updateCorrGame({ chat: chat }); + else if (this.game.type == "live") { + chat.added = Date.now(); + GameStorage.update(this.gameRef, { chat: chat }); + } }, clearChat: function() { - // Nothing more to do if game is live (chats not recorded) - if (this.game.type == "corr") { - if (!!this.game.mycolor) { + if (!!this.game.mycolor) { + if (this.game.type == "corr") { ajax( "/chats", "DELETE", { data: { gid: this.game.id } } ); + } else { + // Live game + GameStorage.update(this.gameRef, { delchat: true }); } this.$set(this.game, "chats", []); } @@ -629,8 +655,13 @@ export default { this.send("fullgame", { data: gameToSend, target: data.from }); break; case "fullgame": - // Callback "roomInit" to poll clients only after game is loaded - this.loadVariantThenGame(data.data, this.roomInit); + if (!!data.data.empty) { + alert(this.st.tr["The game should be in another tab"]); + this.$router.go(-1); + } + else + // Callback "roomInit" to poll clients only after game is loaded + this.loadVariantThenGame(data.data, this.roomInit); break; case "asklastate": // Sending informative last state if I played a move or score != "*" @@ -669,9 +700,22 @@ export default { } else { this.gotMoveIdx = movePlus.index; const receiveMyMove = (movePlus.color == this.game.mycolor); - if (!receiveMyMove && !!this.game.mycolor) + const moveColIdx = ["w", "b"].indexOf(movePlus.color); + if (!receiveMyMove && !!this.game.mycolor) { // Notify opponent that I got the move: this.send("gotmove", {data: movePlus.index, target: data.from}); + // And myself if I'm elsewhere: + if (!this.focus) { + notify( + "New move", + { + body: + (this.game.players[moveColIdx].name || "@nonymous") + + " just played." + } + ); + } + } if (movePlus.cancelDrawOffer) { // Opponent refuses draw this.drawOffer = ""; @@ -685,7 +729,6 @@ export default { } } this.$refs["basegame"].play(movePlus.move, "received", null, true); - const moveColIdx = ["w", "b"].indexOf(movePlus.color); this.game.clocks[moveColIdx] = movePlus.clock; this.processMove( movePlus.move, @@ -756,11 +799,17 @@ export default { } break; } - case "newchat": - this.$refs["chatcomp"].newChat(data.data); + case "newchat": { + let chat = data.data; + this.$refs["chatcomp"].newChat(chat); + if (this.game.type == "live") { + chat.added = Date.now(); + GameStorage.update(this.gameRef, { chat: chat }); + } if (!document.getElementById("modalChat").checked) document.getElementById("chatBtn").classList.add("somethingnew"); break; + } } }, updateCorrGame: function(obj, callback) { @@ -953,7 +1002,10 @@ export default { return p.sid == this.st.user.sid || p.id == this.st.user.id; }); const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers - if (!game.chats) game.chats = []; //live games don't have chat history + // Live games before 26/03/2020 don't have chat history. TODO: remove next line + if (!game.chats) game.chats = []; + // Sort chat messages from newest to oldest + game.chats.sort((c1, c2) => c2.added - c1.added); if (gtype == "corr") { // NOTE: clocks in seconds game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of @@ -966,10 +1018,6 @@ export default { (Date.now() - game.moves[L-1].played) / 1000; } } - // Sort chat messages from newest to oldest - game.chats.sort((c1, c2) => { - return c2.added - c1.added; - }); if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) { // Did a chat message arrive after my last move? let dtLastMove = 0; @@ -991,6 +1039,12 @@ export default { game.moves = game.moves.map(m => m.squares); } if (gtype == "live") { + if ( + game.chats.length > 0 && + (!game.initime || game.initime < game.chats[0].added) + ) { + document.getElementById("chatBtn").classList.add("somethingnew"); + } if (game.clocks[0] < 0) { // Game is unstarted. clock is ignored until move 2 game.clocks = [tc.mainTime, tc.mainTime]; @@ -1273,7 +1327,7 @@ export default { }); }; // The active tab can update storage immediately - if (!document.hidden) updateStorage(); + if (this.focus) updateStorage(); // Small random delay otherwise else setTimeout(updateStorage, 500 + 1000 * Math.random()); } @@ -1404,6 +1458,13 @@ export default { }; if (this.game.type == "live") { GameStorage.update(this.gameRef, scoreObj); + // Notify myself locally if I'm elsewhere: + if (!this.focus) { + notify( + "Game over", + { body: score + " : " + scoreMsg } + ); + } if (!!callback) callback(); } else this.updateCorrGame(scoreObj, callback);