X-Git-Url: https://git.auder.net/variants/%24%7Bvname%7D/current/git-favicon.png?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=067a50dbae623bb35875aae742f24ae4b13bd5e5;hb=49dad26138d3dee0cacbb94ad8d3d3eff12c477a;hp=e60d982fe916cc04c61913e890c9b0b08d7ab7fb;hpb=7ebc0408a76b4a966273190a2ade49e0f97099be;p=vchess.git

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index e60d982f..067a50db 100644
--- 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,14 +249,15 @@ 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: {}
+      newConnect: {}
     };
   },
   watch: {
@@ -274,6 +276,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 +310,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 +409,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 +437,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:
@@ -460,7 +480,8 @@ export default {
     },
     removePresetChall: function(e, pchall) {
       e.stopPropagation();
-      const pchallIdx = this.presetChalls.findIndex(pc => pc.index == pchall.index);
+      const pchallIdx =
+        this.presetChalls.findIndex(pc => pc.index == pchall.index);
       this.presetChalls.splice(pchallIdx, 1);
       localStorage.setItem("presetChalls", JSON.stringify(this.presetChalls));
     },
@@ -480,7 +501,7 @@ export default {
         document.getElementById("cadence").focus();
     },
     send: function(code, obj) {
-      if (!!this.conn) {
+      if (!!this.conn && this.conn.readyState == 1) {
         this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
       }
     },
@@ -523,7 +544,8 @@ export default {
         // This is meant to challenge people, thus the next 2 conditions:
         this.st.user.id > 0 &&
         sid != this.st.user.sid &&
-        Object.values(this.people[sid].tmpIds).some(v => v.focus && v.page == "/")
+        Object.values(this.people[sid].tmpIds)
+          .some(v => v.focus && v.page == "/")
       );
     },
     challenge: function(sid) {
@@ -578,7 +600,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 +616,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 });
@@ -616,13 +637,13 @@ export default {
           const page = data.page || "/";
           if (data.code == "connect") {
             // Ask challenges only on first connexion:
-            if (!this.people[data.from])
+            if (!this.people[data.from[0]])
               this.send("askchallenges", { target: data.from[0] });
           }
           // Ask game only if live:
           else if (!page.match(/\/[0-9]+$/))
             this.send("askgame", { target: data.from[0], page: page });
-          if (!this.people[data.from]) {
+          if (!this.people[data.from[0]]) {
             this.$set(
               this.people,
               data.from[0],
@@ -632,7 +653,8 @@ export default {
                 }
               }
             );
-            this.newConnect[data.from] = true; //for self multi-connects tests
+            // For self multi-connects tests:
+            this.newConnect[data.from[0]] = true;
             this.send("askidentity", { target: data.from[0], page: page });
           } else {
             this.people[data.from[0]].tmpIds[data.from[1]] =
@@ -643,8 +665,9 @@ export default {
         }
         case "disconnect":
         case "gdisconnect": {
-          // If the user reloads the page twice very quickly (experienced with Firefox),
-          // the first reload won't have time to connect but will trigger a "close" event anyway.
+          // If the user reloads the page twice very quickly
+          // (experienced with Firefox), the first reload won't have time to
+          // connect but will trigger a "close" event anyway.
           // ==> Next check is required.
           if (!this.people[data.from[0]]) return;
           delete this.people[data.from[0]].tmpIds[data.from[1]];
@@ -663,7 +686,7 @@ export default {
             const gid = data.page.match(/[a-zA-Z0-9]+$/)[0];
             // Corr games are always reachable:
             if (!gid.match(/^[0-9]+$/)) {
-              // Live games are reachable as long as someone is on the game page
+              // Live games are reachable if someone is on the game page
               if (Object.values(this.people).every(p =>
                 Object.values(p.tmpIds).every(v => v.page != data.page))
               ) {
@@ -690,13 +713,6 @@ export default {
           }
           break;
         }
-        case "killed":
-          // I logged in elsewhere:
-          this.conn.removeEventListener("message", this.socketMessageListener);
-          this.conn.removeEventListener("close", this.socketCloseListener);
-          this.conn = null;
-          alert(this.st.tr["New connexion detected: tab now offline"]);
-          break;
         case "askidentity": {
           // Request for identification
           const me = {
@@ -719,16 +735,16 @@ export default {
           this.$forceUpdate();
           // If I multi-connect, kill current connexion if no mark (I'm older)
           if (this.newConnect[user.sid]) {
+            delete this.newConnect[user.sid];
             if (
               user.id > 0 &&
               user.id == this.st.user.id &&
-              user.sid != this.st.user.sid &&
-              !this.killed[this.st.user.sid]
+              user.sid != this.st.user.sid
             ) {
-                this.send("killme", { sid: this.st.user.sid });
-                this.killed[this.st.user.sid] = true;
+              // I logged in elsewhere:
+              this.cleanBeforeDestroy();
+              alert(this.st.tr["New connexion detected: tab now offline"]);
             }
-            delete this.newConnect[user.sid];
           }
           break;
         }
@@ -739,9 +755,9 @@ export default {
               c.from.sid == this.st.user.sid && c.type == "live"
             )
             .map(c => {
-              // NOTE: in principle, should only send targeted challenge to the target.
-              // But we may not know yet the identity of the target (just name),
-              // so cannot decide if data.from is the target or not.
+              // NOTE: in principle, should only send targeted challenge to the
+              // target. But we may not know yet the identity of the target
+              // (just name), so can't decide if data.from is the target.
               return {
                 id: c.id,
                 from: this.st.user.sid,
@@ -772,7 +788,8 @@ export default {
         case "deletechallenge_s": {
           // NOTE: the challenge(s) may be already removed
           const cref = data.data;
-          if (!!cref.cid) ArrayFun.remove(this.challenges, c => c.id == cref.cid);
+          if (!!cref.cid)
+            ArrayFun.remove(this.challenges, c => c.id == cref.cid);
           else if (!!cref.sids) {
             cref.sids.forEach(s => {
               ArrayFun.remove(
@@ -838,12 +855,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",
@@ -909,6 +920,15 @@ export default {
             .getElementById("btnC" + newChall.type)
             .classList.add("somethingnew");
         }
+        if (!!chall.to) {
+          notify(
+            "New challenge",
+            // fromValues.name should exist since the player is online, but
+            // let's consider there is some chance that the challenge arrives
+            // right after we connected and before receiving the poll result:
+            { body: "from " + (fromValues.name || "unknown yet...") }
+          );
+        }
       }
     },
     loadNewchallVariant: async function(cb) {
@@ -1036,7 +1056,7 @@ export default {
           name: this.st.user.name
         };
         chall.added = Date.now();
-        // NOTE: vname and type are redundant (can be deduced from cadence + vid)
+        // NOTE: vname and type are redundant (deduced from cadence + vid)
         chall.type = ctype;
         chall.vname = this.newchallenge.vname;
         this.challenges.push(chall);
@@ -1085,9 +1105,13 @@ export default {
           name: this.st.user.name
         };
         this.launchGame(c);
-        if (c.type == "live")
+        if (c.type == "live") {
           // Remove all live challenges of both players
-          this.send("deletechallenge_s", { data: { sids: [c.from.sid, c.seat.sid] } });
+          this.send(
+            "deletechallenge_s",
+            { data: { sids: [c.from.sid, c.seat.sid] } }
+          );
+        }
         else
           // Corr challenge: just remove the challenge
           this.send("deletechallenge_s", { data: { cid: c.id } });
@@ -1227,11 +1251,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 +1265,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
       );
     }
   }