Improve smartphone menu open/close buttons
[vchess.git] / client / src / views / Hall.vue
index 469d46b..2141cf9 100644 (file)
@@ -55,7 +55,7 @@ main
             placeholder="5+0, 1h+30s, 5d ..."
           )
         fieldset
-          label(for="selectRandomLevel") {{ st.tr["Randomness"] }}
+          label(for="selectRandomLevel") {{ st.tr["Randomness"] }} *
           select#selectRandomLevel(v-model="newchallenge.randomness")
             option(value="0") {{ st.tr["Deterministic"] }}
             option(value="1") {{ st.tr["Symmetric random"] }}
@@ -77,7 +77,7 @@ main
       button(@click="newChallenge()") {{ st.tr["Send challenge"] }}
   input#modalPeople.modal(
     type="checkbox"
-    @click="resetChatColor()"
+    @click="resetSocialColor()"
   )
   div#peopleWrap(
     role="dialog"
@@ -89,14 +89,19 @@ main
         #players
           p(
             v-for="sid in Object.keys(people)"
-            v-if="!!people[sid].name"
+            v-if="people[sid].name"
           )
             span {{ people[sid].name }}
             button.player-action(
-              v-if="isGamer(sid) || (st.user.id > 0 && sid!=st.user.sid)"
-              @click="challOrWatch(sid)"
+              v-if="isGamer(sid)"
+              @click="watchGame(sid)"
             )
-              | {{ getActionLabel(sid) }}
+              | {{ st.tr["Observe"] }}
+            button.player-action(
+              v-else-if="st.user.id > 0 && sid!=st.user.sid"
+              @click="challenge(sid)"
+            )
+              | {{ st.tr["Challenge"] }}
           p.anonymous @nonymous ({{ anonymousCount }})
         #chat
           Chat(
@@ -216,7 +221,8 @@ export default {
     anonymousCount: function() {
       let count = 0;
       Object.values(this.people).forEach(p => {
-        count += !p.name ? 1 : 0;
+        // Do not cound people who did not send their identity yet:
+        count += (!p.name && p.id === 0) ? 1 : 0;
       });
       return count;
     }
@@ -368,29 +374,23 @@ export default {
     isGamer: function(sid) {
       return this.people[sid].pages.some(p => p.indexOf("/game/") >= 0);
     },
-    getActionLabel: function(sid) {
-      return this.people[sid].pages.some(p => p == "/")
-        ? "Challenge"
-        : "Observe";
+    challenge: function(sid) {
+      // Available, in Hall (only)
+      this.newchallenge.to = this.people[sid].name;
+      document.getElementById("modalPeople").checked = false;
+      window.doClick("modalNewgame");
     },
-    challOrWatch: function(sid) {
-      if (this.people[sid].pages.some(p => p == "/")) {
-        // Available, in Hall
-        this.newchallenge.to = this.people[sid].name;
-        document.getElementById("modalPeople").checked = false;
-        window.doClick("modalNewgame");
-      } else {
-        // In some game, maybe playing maybe not: show a random one
-        let gids = [];
-        this.people[sid].pages.forEach(p => {
-          const matchGid = p.match(/[a-zA-Z0-9]+$/);
-          if (matchGid) gids.push(matchGid[0]);
-        });
-        const gid = gids[Math.floor(Math.random() * gids.length)];
-        const game = this.games.find(g => g.id == gid);
-        if (game) this.showGame(game);
-        else this.$router.push("/game/" + gid); //game vs. me
-      }
+    watchGame: function(sid) {
+      // In some game, maybe playing maybe not: show a random one
+      let gids = [];
+      this.people[sid].pages.forEach(p => {
+        const matchGid = p.match(/[a-zA-Z0-9]+$/);
+        if (matchGid) gids.push(matchGid[0]);
+      });
+      const gid = gids[Math.floor(Math.random() * gids.length)];
+      const game = this.games.find(g => g.id == gid);
+      if (game) this.showGame(game);
+      else this.$router.push("/game/" + gid); //game vs. me
     },
     showGame: function(g) {
       // NOTE: we are an observer, since only games I don't play are shown here
@@ -400,7 +400,7 @@ export default {
         url += "?rid=" + g.rids[Math.floor(Math.random() * g.rids.length)];
       this.$router.push(url);
     },
-    resetChatColor: function() {
+    resetSocialColor: function() {
       // TODO: this is called twice, once on opening an once on closing
       document.getElementById("peopleBtn").classList.remove("somethingnew");
     },
@@ -419,17 +419,18 @@ export default {
           data.sockIds.forEach(s => {
             const page = s.page || "/";
             if (s.sid != this.st.user.sid && !identityAsked[s.sid]) {
-              identityAsked[s.sid] = true;
               this.send("askidentity", { target: s.sid, page: page });
+              identityAsked[s.sid] = true;
             }
             if (!this.people[s.sid])
-              this.$set(this.people, s.sid, { id: 0, name: "", pages: [page] });
+              // Do not set name or id: identity unknown yet
+              this.$set(this.people, s.sid, { pages: [page] });
             else if (this.people[s.sid].pages.indexOf(page) < 0)
               this.people[s.sid].pages.push(page);
             if (!s.page)
-              //peer is in Hall
+              // Peer is in Hall
               this.send("askchallenge", { target: s.sid });
-            //peer is in Game
+            // Peer is in Game
             else this.send("askgame", { target: s.sid, page: page });
           });
           break;
@@ -441,20 +442,17 @@ export default {
           // So it's a good idea to ask identity if he was anonymous.
           // But only ask game / challenge if currently disconnected.
           if (!this.people[data.from]) {
-            this.$set(this.people, data.from, {
-              name: "",
-              id: 0,
-              pages: [page]
-            });
+            this.$set(this.people, data.from, { pages: [page] });
             if (data.code == "connect")
               this.send("askchallenge", { target: data.from });
             else this.send("askgame", { target: data.from, page: page });
           } else {
-            // append page if not already in list
+            // Append page if not already in list
             if (this.people[data.from].pages.indexOf(page) < 0)
               this.people[data.from].pages.push(page);
           }
-          if (this.people[data.from].id == 0) {
+          if (!this.people[data.from].name && this.people[data.from].id !== 0) {
+            // Identity not known yet
             this.newConnect[data.from] = true; //for self multi-connects tests
             this.send("askidentity", { target: data.from, page: page });
           }
@@ -509,6 +507,11 @@ export default {
         }
         case "identity": {
           const user = data.data;
+          this.$set(this.people, user.sid, {
+            id: user.id,
+            name: user.name,
+            pages: this.people[user.sid].pages
+          });
           if (user.name) {
             // If I multi-connect, kill current connexion if no mark (I'm older)
             if (
@@ -522,14 +525,6 @@ export default {
                 this.killed[this.st.user.sid] = true;
               }
             }
-            if (user.sid != this.st.user.sid) {
-              //I already know my identity...
-              this.$set(this.people, user.sid, {
-                id: user.id,
-                name: user.name,
-                pages: this.people[user.sid].pages
-              });
-            }
           }
           delete this.newConnect[user.sid];
           break;
@@ -604,7 +599,8 @@ export default {
           // NOTE: it may be live or correspondance
           const game = data.data;
           // Ignore games where I play (corr games)
-          if (game.players.every(p => p.id != this.st.user.id))
+          if (game.players.every(p =>
+            p.sid != this.st.user.sid || p.id != this.st.user.id))
           {
             let locGame = this.games.find(g => g.id == game.id);
             if (!locGame) {