Add basic Desktop notifications for game start + new move + game over

[vchess.git] / client / src / views / Hall.vue

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index e60d982..48fd68e 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -205,6 +205,7 @@ main
 <script>
 import { store } from "@/store";
 import { checkChallenge } from "@/data/challengeCheck";
+import { notify } from "@/utils/notifications";
 import { ArrayFun } from "@/utils/array";
 import { ajax } from "@/utils/ajax";
 import params from "@/parameters";
@@ -248,11 +249,13 @@ export default {
         diag: "", //visualizing FEN
         memorize: false //put settings in localStorage
       },
+      focus: true,
       tchallDiag: "",
       curChallToAccept: {from: {}},
       presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"),
       conn: null,
       connexionString: "",
+      socketCloseListener: 0,
       // Related to (killing of) self multi-connects:
       newConnect: {},
       killed: {}
@@ -274,6 +277,8 @@ export default {
   },
   created: function() {
     document.addEventListener('visibilitychange', this.visibilityChange);
+    window.addEventListener('focus', this.onFocus);
+    window.addEventListener('blur', this.onBlur);
     window.addEventListener("beforeunload", this.cleanBeforeDestroy);
     if (this.st.variants.length > 0 && this.newchallenge.vid > 0)
       this.loadNewchallVariant();
@@ -306,7 +311,16 @@ export default {
     this.conn = new WebSocket(this.connexionString);
     this.conn.onopen = connectAndPoll;
     this.conn.addEventListener("message", this.socketMessageListener);
-    this.conn.addEventListener("close", this.socketCloseListener);
+    this.socketCloseListener = setInterval(
+      () => {
+        if (this.conn.readyState == 3) {
+          this.conn.removeEventListener("message", this.socketMessageListener);
+          this.conn = new WebSocket(this.connexionString);
+          this.conn.addEventListener("message", this.socketMessageListener);
+        }
+      },
+      1000
+    );
   },
   mounted: function() {
     ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
@@ -396,10 +410,12 @@ export default {
   },
   methods: {
     cleanBeforeDestroy: function() {
+      clearInterval(this.socketCloseListener);
       document.removeEventListener('visibilitychange', this.visibilityChange);
+      window.removeEventListener('focus', this.onFocus);
+      window.removeEventListener('blur', this.onBlur);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
       this.conn.removeEventListener("message", this.socketMessageListener);
-      this.conn.removeEventListener("close", this.socketCloseListener);
       this.send("disconnect");
       this.conn = null;
     },
@@ -422,11 +438,16 @@ 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");
+      this.send(this.focus ? "getfocus" : "losefocus");
+    },
+    onFocus: function() {
+      this.focus = true;
+      this.send("getfocus");
+    },
+    onBlur: function() {
+      this.focus = false;
+      this.send("losefocus");
     },
     partialResetNewchallenge: function() {
       // Reset potential target and custom FEN:
@@ -578,7 +599,6 @@ export default {
           // TODO: shuffling and random filtering on server,
           // if the room is really crowded.
           Object.keys(data.sockIds).forEach(sid => {
-            // TODO: test sid != user.sid was already done on server
             if (sid != this.st.user.sid) {
               // Pick a target tmpId (+page) at random:
               const pt = Object.values(data.sockIds[sid]);
@@ -595,7 +615,7 @@ export default {
               // Do not set name or id: identity unknown yet
               this.people[sid] = { tmpIds: data.sockIds[sid] };
             else
-              Object.assign(this.people[s.sid].tmpIds, data.sockIds[sid]);
+              Object.assign(this.people[sid].tmpIds, data.sockIds[sid]);
             if (Object.values(data.sockIds[sid]).some(v => v.page == "/"))
               // Peer is in Hall
               this.send("askchallenges", { target: sid });
@@ -838,12 +858,6 @@ export default {
           break;
       }
     },
-    socketCloseListener: function() {
-      if (!this.conn) return;
-      this.conn = new WebSocket(this.connexionString);
-      this.conn.addEventListener("message", this.socketMessageListener);
-      this.conn.addEventListener("close", this.socketCloseListener);
-    },
     loadMoreCorr: function() {
       ajax(
         "/observedgames",
@@ -1227,11 +1241,13 @@ export default {
           // Game state (including FEN): will be updated
           moves: [],
           clocks: [-1, -1], //-1 = unstarted
+          chats: [],
           score: "*"
         }
       );
       setTimeout(
         () => {
+          const myIdx = (game.players[0].sid == this.st.user.sid ? 0 : 1);
           GameStorage.add(game, (err) => {
             // If an error occurred, game is not added: a tab already
             // added the game. Maybe a focused one, maybe not.
@@ -1239,10 +1255,16 @@ export default {
             // ==> Do not play it again.
             if (!err && this.st.settings.sound)
               new Audio("/sounds/newgame.flac").play().catch(() => {});
+            if (!this.focus) {
+              notify(
+                "New live game",
+                { body: "vs " + game.players[1-myIdx].name || "@nonymous" }
+              );
+            }
             this.$router.push("/game/" + gameInfo.id);
           });
         },
-        document.hidden ? 500 + 1000 * Math.random() : 0
+        this.focus ? 500 + 1000 * Math.random() : 0
       );
     }
   }