Add 'display' DB field for nicer variants display. Remove join on Variants table...
[vchess.git] / client / src / views / Hall.vue
index 5b537d8..7749dfa 100644 (file)
@@ -48,7 +48,7 @@ main
               :value="v.id"
               :selected="newchallenge.vid==v.id"
             )
-              | {{ v.name }}
+              | {{ v.display }}
         fieldset
           label(for="cadence") {{ st.tr["Cadence"] }} *
           div#predefinedCadences
@@ -128,7 +128,8 @@ main
             )
               | {{ st.tr["Observe"] }}
             button.player-action(
-              v-else-if="isFocusedOnHall(sid)"
+              v-else-if="st.user.sid != sid"
+              :class="{focused: isFocusedOnHall(sid)}"
               @click="challenge(sid)"
             )
               | {{ st.tr["Challenge"] }}
@@ -278,7 +279,7 @@ export default {
     "st.variants": function() {
       // Set potential challenges and games variant names:
       this.challenges.concat(this.games).forEach(o => {
-        if (!o.vname) o.vname = this.getVname(o.vid);
+        if (!o.vname) this.setVname(o);
       });
       if (!this.newchallenge.V && this.newchallenge.vid > 0)
         this.loadNewchallVariant();
@@ -314,20 +315,24 @@ export default {
         // Automatic challenge sending, for tournaments
         this.loadNewchallVariant(
           () => {
-            this.newchallenge = {
-              fen: "",
-              vid:
-                this.st.variants
-                .find(v => v.name == this.$route.query["variant"])
-                .id,
-              to: this.$route.query["challenge"],
-              color: this.$route.query["color"] || '',
-              cadence: this.$route.query["cadence"],
-              // Tournament: no randomness (TODO: for now at least)
-              randomness: 0,
-              memorize: false
-            };
-            this.issueNewChallenge();
+            Object.assign(
+              this.newchallenge,
+              {
+                fen: "",
+                vid:
+                  this.st.variants
+                  .find(v => v.name == this.$route.query["variant"])
+                  .id,
+                to: this.$route.query["challenge"],
+                color: this.$route.query["color"] || '',
+                cadence: this.$route.query["cadence"],
+                // Tournament: no randomness (TODO: for now at least)
+                randomness: 0,
+                memorize: false
+              }
+            );
+            window.doClick("modalNewgame");
+            //this.issueNewChallenge(); //NOTE: doesn't work yet.
           },
           this.$route.query["variant"]
         );
@@ -414,7 +419,6 @@ export default {
                 const type = this.classifyObject(c);
                 const vname = this.getVname(c.vid);
                 return Object.assign(
-                  {},
                   {
                     type: type,
                     vname: vname,
@@ -440,7 +444,8 @@ export default {
                 }
               }
             );
-          } else addChallenges();
+          }
+          else addChallenges();
         }
       }
     );
@@ -548,10 +553,15 @@ export default {
         this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
       }
     },
-    getVname: function(vid) {
-      const variant = this.st.variants.find(v => v.id == vid);
+    setVname: function(obj) {
+      const variant = this.st.variants.find(v => v.id == obj.vid);
       // this.st.variants might be uninitialized (variant == null)
-      return variant ? variant.name : "";
+      if (!!variant) {
+        obj.vname = variant.name;
+        obj.vdisp = variant.display;
+      }
+      // NOTE: Next line is used in loadNewchallVariant
+      return (!variant ? "" : variant.name);
     },
     filterChallenges: function(type) {
       return this.challenges.filter(c => c.type == type);
@@ -561,9 +571,8 @@ export default {
     },
     // o: challenge or game
     classifyObject: function(o) {
-      // Consider imports as live games (TODO)
-      if (!!o.id && !!o.id.toString().match(/^i/)) return "live";
-      return o.cadence.indexOf("d") === -1 ? "live" : "corr";
+      // No imported games here
+      return (o.cadence.indexOf("d") >= 0 ? "corr" : "live");
     },
     setDisplay: function(letter, type, e) {
       this[letter + "display"] = type;
@@ -701,7 +710,8 @@ export default {
             // For self multi-connects tests:
             this.newConnect[data.from[0]] = true;
             this.send("askidentity", { target: data.from[0], page: page });
-          } else {
+          }
+          else {
             this.people[data.from[0]].tmpIds[data.from[1]] =
               { page: page, focus: true };
             this.$forceUpdate(); //TODO: shouldn't be required
@@ -733,7 +743,8 @@ export default {
                 "all"
               );
             }
-          } else {
+          }
+          else {
             // Remove the matching live game if now unreachable
             const gid = data.page.match(/[a-zA-Z0-9]+$/)[0];
             // Corr games are always reachable:
@@ -869,7 +880,7 @@ export default {
           ) {
             let newGame = game;
             newGame.type = this.classifyObject(game);
-            newGame.vname = this.getVname(game.vid);
+            this.setVname(game);
             if (!game.score)
               // New game from Hall
               newGame.score = "*";
@@ -937,18 +948,13 @@ export default {
               }
               this.cursor = res.games[L - 1].created;
               let moreGames = res.games.map(g => {
-                const vname = this.getVname(g.vid);
-                return Object.assign(
-                  {},
-                  g,
-                  {
-                    type: "corr",
-                    vname: vname
-                  }
-                );
+                this.setVname(g);
+                g.type = "corr";
+                return g;
               });
               this.games = this.games.concat(moreGames);
-            } else this.hasMore = false;
+            }
+            else this.hasMore = false;
           }
         }
       );
@@ -968,7 +974,7 @@ export default {
         let fromValues = Object.assign({}, this.people[chall.from]);
         delete fromValues["pages"]; //irrelevant in this context
         newChall.from = Object.assign({ sid: chall.from }, fromValues);
-        newChall.vname = this.getVname(newChall.vid);
+        this.setVname(newChall);
         this.challenges.push(newChall);
         if (
           (newChall.type == "live" && this.cdisplay == "corr") ||
@@ -978,24 +984,23 @@ export default {
             .getElementById("btnC" + newChall.type)
             .classList.add("somethingnew");
         }
-        if (!!chall.to) {
+        if (!!chall.to && chall.to == this.st.user.name) {
           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...") }
+            { body: "from " + (fromValues.name || "@nonymous") }
           );
         }
       }
     },
     loadNewchallVariant: async function(cb, vname) {
-      vname = vname || this.getVname(this.newchallenge.vid);
+      vname = vname || this.setVname(this.newchallenge);
       await import("@/variants/" + vname + ".js")
       .then((vModule) => {
         window.V = vModule[vname + "Rules"];
         this.newchallenge.V = window.V;
-        this.newchallenge.vname = vname;
         if (!!cb) cb();
       });
     },
@@ -1016,7 +1021,8 @@ export default {
           position: parsedFen.position
           //,orientation: parsedFen.turn
         });
-      } else this.newchallenge.diag = "";
+      }
+      else this.newchallenge.diag = "";
     },
     newChallFromPreset(pchall) {
       this.partialResetNewchallenge();
@@ -1125,7 +1131,9 @@ export default {
           this.challenges.splice(challToDelIdx, 1);
         }
         this.send("newchallenge", {
-          data: Object.assign({ from: this.st.user.sid }, chall)
+          data: Object.assign(
+            // Temporarily add sender infos to display challenge on Discord.
+            { from: this.st.user.sid, sender: this.st.user.name }, chall)
         });
         // Add new challenge:
         chall.from = {
@@ -1154,7 +1162,8 @@ export default {
       if (ctype == "live") {
         // Live challenges have a random ID
         finishAddChallenge(null);
-      } else {
+      }
+      else {
         // Correspondence game: send challenge to server
         ajax(
           "/challenges",
@@ -1193,7 +1202,8 @@ export default {
         else
           // Corr challenge: just remove the challenge
           this.send("deletechallenge_s", { data: { cid: c.id } });
-      } else {
+      }
+      else {
         const oppsid = this.getOppsid(c);
         if (!!oppsid)
           this.send("refusechallenge", { data: c.id, target: oppsid });
@@ -1217,24 +1227,26 @@ export default {
           alert(this.st.tr["Please log in to accept corr challenges"]);
           return;
         }
-        c.accepted = true;
-        await import("@/variants/" + c.vname + ".js")
-        .then((vModule) => {
-          window.V = vModule[c.vname + "Rules"];
-          if (!!c.to) {
-            // c.to == this.st.user.name (connected)
-            if (!!c.fen) {
-              const parsedFen = V.ParseFen(c.fen);
-              this.tchallDiag = getDiagram({
-                position: parsedFen.position,
-                orientation: parsedFen.turn
-              });
+        else {
+          c.accepted = true;
+          await import("@/variants/" + c.vname + ".js")
+          .then((vModule) => {
+            window.V = vModule[c.vname + "Rules"];
+            if (!!c.to) {
+              // c.to == this.st.user.name (connected)
+              if (!!c.fen) {
+                const parsedFen = V.ParseFen(c.fen);
+                this.tchallDiag = getDiagram({
+                  position: parsedFen.position,
+                  orientation: parsedFen.turn
+                });
+              }
+              this.curChallToAccept = c;
+              document.getElementById("modalAccept").checked = true;
             }
-            this.curChallToAccept = c;
-            document.getElementById("modalAccept").checked = true;
-          }
-          else this.finishProcessingChallenge(c);
-        });
+            else this.finishProcessingChallenge(c);
+          });
+        }
       }
       else {
         // My challenge
@@ -1296,9 +1308,17 @@ export default {
         // on game just after, the main Hall will be notified.
       };
       if (c.type == "live") {
+        // TODO: ask my IP + opp IP, to add to game infos? (potential bans)
         notifyNewgame();
         this.startNewGame(gameInfo);
-      } else {
+        // Increment game stats counter in DB
+        ajax(
+          "/gamestat",
+          "POST",
+          { data: { vid: gameInfo.vid } }
+        );
+      }
+      else {
         // corr: game only on server
         ajax(
           "/games",
@@ -1320,13 +1340,13 @@ export default {
     },
     // NOTE: for live games only (corr games start on the server)
     startNewGame: function(gameInfo) {
+      this.setVname(gameInfo);
       const game = Object.assign(
         {},
         gameInfo,
         {
           // (other) Game infos: constant
           fenStart: gameInfo.fen,
-          vname: this.getVname(gameInfo.vid),
           created: Date.now(),
           // Game state (including FEN): will be updated
           moves: [],
@@ -1348,7 +1368,7 @@ export default {
                 new Audio("/sounds/newgame.flac").play().catch(() => {});
               notify(
                 "New live game",
-                { body: "vs " + game.players[1-myIdx].name || "@nonymous" }
+                { body: "vs " + (game.players[1-myIdx].name || "@nonymous") }
               );
             }
             this.$router.push("/game/" + gameInfo.id);
@@ -1415,6 +1435,8 @@ div#peopleWrap > .card
 
 button.player-action
   margin-left: 32px
+  &.focused
+    background-color: #E6D271
 
 .somethingnew
   background-color: #90C4EC !important