Attempt for better connection indicators

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

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index 2863546..d113da7 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -267,9 +267,14 @@ export default {
       });
       if (!this.newchallenge.V && this.newchallenge.vid > 0)
         this.loadNewchallVariant();
+    },
+    $route: function(to, from) {
+      if (to.path != "/") this.cleanBeforeDestroy();
     }
   },
   created: function() {
+    document.addEventListener('visibilitychange', this.visibilityChange);
+    window.addEventListener("beforeunload", this.cleanBeforeDestroy);
     if (this.st.variants.length > 0 && this.newchallenge.vid > 0)
       this.loadNewchallVariant();
     const my = this.st.user;
@@ -304,7 +309,6 @@ export default {
     this.conn.addEventListener("close", this.socketCloseListener);
   },
   mounted: function() {
-    document.addEventListener('visibilitychange', this.visibilityChange);
     ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
       document.getElementById(eltName)
         .addEventListener("click", processModalClick);
@@ -388,10 +392,14 @@ export default {
     );
   },
   beforeDestroy: function() {
-    document.removeEventListener('visibilitychange', this.visibilityChange);
-    this.send("disconnect");
+    this.cleanBeforeDestroy();
   },
   methods: {
+    cleanBeforeDestroy: function() {
+      document.removeEventListener('visibilitychange', this.visibilityChange);
+      window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
+      this.send("disconnect");
+    },
     getRandomnessClass: function(pc) {
       return {
         ["random-" + pc.randomness]: true
@@ -605,8 +613,11 @@ export default {
             this.people[data.from] = { pages: [{ path: page, focus: true }] };
           else {
             // Append page if not already in list
-            if (!(this.people[data.from].pages.find(p => p.path == page)))
+            let ppage = this.people[data.from].pages.find(p => p.path == page);
+            if (!ppage)
               this.people[data.from].pages.push({ path: page, focus: true });
+            else ppage.focus = true;
+            this.$forceUpdate(); //TODO: shouldn't be required
           }
           if (!this.people[data.from].name && this.people[data.from].id !== 0) {
             // Identity not known yet
@@ -625,6 +636,7 @@ export default {
           ArrayFun.remove(this.people[data.from].pages, p => p.path == page);
           if (this.people[data.from].pages.length == 0)
             this.$delete(this.people, data.from);
+          else this.$forceUpdate(); //TODO: shouldn't be required
           // Disconnect means no more tmpIds:
           if (data.code == "disconnect") {
             // Remove the live challenges sent by this player: