Add some traces to understand what happens with connection indicator

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

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index ddbd330..f1521e6 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -192,7 +192,10 @@ export default {
   },
   watch: {
     $route: function(to, from) {
-      if (from.params["id"] != to.params["id"]) {
+      if (to.path.length < 6 || to.path.substr(6) != "/game/")
+        // Page change
+        this.cleanBeforeDestroy();
+      else if (from.params["id"] != to.params["id"]) {
         // Change everything:
         this.cleanBeforeDestroy();
         let boardDiv = document.querySelector(".game");
@@ -210,7 +213,6 @@ export default {
     this.atCreation();
   },
   mounted: function() {
-    document.addEventListener('visibilitychange', this.visibilityChange);
     ["chatWrap", "infoDiv"].forEach(eltName => {
       document.getElementById(eltName)
         .addEventListener("click", processModalClick);
@@ -223,10 +225,19 @@ export default {
     }
   },
   beforeDestroy: function() {
-    document.removeEventListener('visibilitychange', this.visibilityChange);
     this.cleanBeforeDestroy();
   },
   methods: {
+    cleanBeforeDestroy: function() {
+      document.removeEventListener('visibilitychange', this.visibilityChange);
+      if (!!this.askLastate)
+        clearInterval(this.askLastate);
+      if (!!this.retrySendmove)
+        clearInterval(this.retrySendmove);
+      if (!!this.clockUpdate)
+        clearInterval(this.clockUpdate);
+      this.send("disconnect");
+    },
     visibilityChange: function() {
       // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
       this.send(
@@ -236,6 +247,7 @@ export default {
       );
     },
     atCreation: function() {
+      document.addEventListener('visibilitychange', this.visibilityChange);
       // 0] (Re)Set variables
       this.gameRef = this.$route.params["id"];
       // next = next corr games IDs to navigate faster (if applicable)
@@ -310,15 +322,6 @@ export default {
           socketInit(() => { this.send("askfullgame"); });
       });
     },
-    cleanBeforeDestroy: function() {
-      if (!!this.askLastate)
-        clearInterval(this.askLastate);
-      if (!!this.retrySendmove)
-        clearInterval(this.retrySendmove);
-      if (!!this.clockUpdate)
-        clearInterval(this.clockUpdate);
-      this.send("disconnect");
-    },
     roomInit: function() {
       if (!this.roomInitialized) {
         // Notify the room only now that I connected, because
@@ -453,6 +456,7 @@ export default {
           });
           break;
         case "connect":
+          console.log("connect " + data.from + " " + !!this.people[data.from]);
           if (!this.people[data.from]) {
             this.people[data.from] = { focus: true };
             this.newConnect[data.from] = true; //for self multi-connects tests
@@ -460,9 +464,11 @@ export default {
           }
           break;
         case "disconnect":
+          console.log("disconnect " + data.from);
           this.$delete(this.people, data.from);
           break;
         case "getfocus": {
+          console.log("get focus " + data.from + " " + !!this.people[data.from]);
           let player = this.people[data.from];
           if (!!player) {
             player.focus = true;
@@ -471,6 +477,7 @@ export default {
           break;
         }
         case "losefocus": {
+          console.log("lose focus " + data.from + " " + !!this.people[data.from]);
           let player = this.people[data.from];
           if (!!player) {
             player.focus = false;