Fix
[vchess.git] / client / src / views / Hall.vue
index 57557d4..fd4bd2d 100644 (file)
@@ -99,7 +99,7 @@ main
       button(@click="issueNewChallenge()") {{ st.tr["Send challenge"] }}
   input#modalPeople.modal(
     type="checkbox"
-    @click="resetSocialColor()"
+    @click="toggleSocialColor()"
   )
   div#peopleWrap(
     role="dialog"
@@ -135,7 +135,7 @@ main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .button-group
-        button#peopleBtn(@click="openModalPeople()")
+        button#peopleBtn(onClick="window.doClick('modalPeople')")
           | {{ st.tr["Who's there?"] }}
         button(@click="showNewchallengeForm()")
           | {{ st.tr["New game"] }}
@@ -257,8 +257,7 @@ export default {
       connexionString: "",
       socketCloseListener: 0,
       // Related to (killing of) self multi-connects:
-      newConnect: {},
-      killed: {}
+      newConnect: {}
     };
   },
   watch: {
@@ -323,7 +322,13 @@ export default {
     );
   },
   mounted: function() {
-    ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
+    document.getElementById("peopleWrap")
+      .addEventListener("click", (e) => {
+        processModalClick(e, () => {
+          this.toggleSocialColor("close")
+        });
+      });
+    ["infoDiv", "newgameDiv"].forEach(eltName => {
       document.getElementById(eltName)
         .addEventListener("click", processModalClick);
     });
@@ -424,10 +429,6 @@ export default {
         ["random-" + pc.randomness]: true
       };
     },
-    openModalPeople: function() {
-      window.doClick("modalPeople");
-      document.getElementById("inputChat").focus();
-    },
     anonymousCount: function() {
       let count = 0;
       Object.values(this.people).forEach(p => {
@@ -502,7 +503,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)));
       }
     },
@@ -517,8 +518,10 @@ export default {
     filterGames: function(type) {
       return this.games.filter(g => g.type == type);
     },
+    // o: challenge or game
     classifyObject: function(o) {
-      // o: challenge or game
+      // Consider imports as live games (TODO)
+      if (!!o.id && !!o.id.toString().match(/^i/)) return "live";
       return o.cadence.indexOf("d") === -1 ? "live" : "corr";
     },
     setDisplay: function(letter, type, e) {
@@ -576,9 +579,11 @@ export default {
       // ==> Moves sent by connected remote player(s) if live game
       this.$router.push("/game/" + g.id);
     },
-    resetSocialColor: function() {
-      // TODO: this is called twice, once on opening an once on closing
-      document.getElementById("peopleBtn").classList.remove("somethingnew");
+    toggleSocialColor: function(action) {
+      if (!action && document.getElementById("modalPeople").checked)
+        document.getElementById("inputChat").focus();
+      else
+        document.getElementById("peopleBtn").classList.remove("somethingnew");
     },
     processChat: function(chat) {
       this.send("newchat", { data: chat });
@@ -638,13 +643,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],
@@ -654,7 +659,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]] =
@@ -713,13 +719,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 = {
@@ -742,16 +741,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;
         }
@@ -927,6 +926,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) {