Fix rematch process
[vchess.git] / client / src / views / Hall.vue
index 271c0bc..ac2e26e 100644 (file)
@@ -15,8 +15,11 @@ main
         span.variantName {{ curChallToAccept.vname }} 
         span {{ curChallToAccept.cadence }} 
         span {{ st.tr["with"] + " " + curChallToAccept.from.name }}
-      .diagram(v-html="tchallDiag")
-      .button-group#buttonsTchall
+      .diagram(
+        v-if="!!curChallToAccept.fen"
+        v-html="tchallDiag"
+      )
+      .button-group#buttonsTchall(:style="tchallButtonsMargin()")
         button.acceptBtn(@click="decisionChallenge(true)")
           span {{ st.tr["Accept challenge?"] }}
         button.refuseBtn(@click="decisionChallenge(false)")
@@ -117,7 +120,7 @@ main
       .button-group
         button#peopleBtn(onClick="window.doClick('modalPeople')")
           | {{ st.tr["Who's there?"] }}
-        button(onClick="window.doClick('modalNewgame')")
+        button(@click="showNewchallengeForm()")
           | {{ st.tr["New game"] }}
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
@@ -363,7 +366,20 @@ export default {
           : "losefocus"
       );
     },
-    // Helpers:
+    partialResetNewchallenge: function() {
+      // Reset potential target and custom FEN:
+      this.newchallenge.to = "";
+      this.newchallenge.fen = "";
+      this.newchallenge.diag = "";
+    },
+    showNewchallengeForm: function() {
+      this.partialResetNewchallenge();
+      window.doClick("modalNewgame");
+    },
+    tchallButtonsMargin: function() {
+      if (!!this.curChallToAccept.fen) return { "margin-top": "10px" };
+      return {};
+    },
     cadenceFocusIfOpened: function() {
       if (event.target.checked)
         document.getElementById("cadence").focus();
@@ -416,7 +432,8 @@ export default {
       );
     },
     challenge: function(sid) {
-      // Available, in Hall (only)
+      this.partialResetNewchallenge();
+      // Available, in Hall
       this.newchallenge.to = this.people[sid].name;
       document.getElementById("modalPeople").checked = false;
       window.doClick("modalNewgame");
@@ -665,11 +682,10 @@ export default {
         }
         case "game": //individual request
         case "newgame": {
-          // NOTE: it may be live or correspondance
           const game = data.data;
-          // Ignore games where I play (corr games)
+          // Ignore games where I play (will go in MyGames page)
           if (game.players.every(p =>
-            p.sid != this.st.user.sid || p.id != this.st.user.id))
+            p.sid != this.st.user.sid || p.uid != this.st.user.id))
           {
             let locGame = this.games.find(g => g.id == game.id);
             if (!locGame) {
@@ -703,7 +719,7 @@ export default {
           break;
         }
         case "startgame": {
-          // New game just started: data contain all information
+          // New game just started, I'm involved
           const gameInfo = data.data;
           if (this.classifyObject(gameInfo) == "live")
             this.startNewGame(gameInfo);
@@ -716,8 +732,7 @@ export default {
               "#/game/" +
               gameInfo.id +
               "</a>";
-            let modalBox = document.getElementById("modalInfo");
-            modalBox.checked = true;
+            document.getElementById("modalInfo").checked = true;
           }
           break;
         }
@@ -911,17 +926,11 @@ export default {
               position: parsedFen.position,
               orientation: c.mycolor
             });
-            this.curChallToAccept = c;
-            document.getElementById("modalAccept").checked = true;
-          }
-          else {
-            if (!confirm(this.st.tr["Accept challenge?"]))
-              c.accepted = false;
-            this.finishProcessingChallenge(c);
           }
+          this.curChallToAccept = c;
+          document.getElementById("modalAccept").checked = true;
         }
-        else
-          this.finishProcessingChallenge(c);
+        else this.finishProcessingChallenge(c);
       }
       else {
         // My challenge
@@ -939,6 +948,16 @@ export default {
     },
     // NOTE: when launching game, the challenge is already being deleted
     launchGame: function(c) {
+      let players =
+        !!c.mycolor
+          ? (c.mycolor == "w" ? [c.seat, c.from] : [c.from, c.seat])
+          : shuffle([c.from, c.seat]);
+      // Convention for players IDs in stored games is 'uid'
+      players.forEach(p => {
+        let pWithUid = p;
+        pWithUid["uid"] = p.id;
+        delete pWithUid["id"];
+      });
       // These game informations will be shared
       let gameInfo = {
         id: getRandString(),
@@ -953,16 +972,17 @@ export default {
       const notifyNewgame = () => {
         const oppsid = this.getOppsid(c);
         if (!!oppsid)
-          //opponent is online
+          // Opponent is online
           this.send("startgame", { data: gameInfo, target: oppsid });
-        // Send game info (only if live) to everyone except me in this tab
-        this.send("newgame", { data: gameInfo });
+        // Send game info (only if live) to everyone except me and opponent
+        // TODO: this double message send could be avoided.
+        this.send("newgame", { data: gameInfo, oppsid: oppsid });
       };
       if (c.type == "live") {
         notifyNewgame();
         this.startNewGame(gameInfo);
-      } //corr: game only on server
-      else {
+      } else {
+        // corr: game only on server
         ajax(
           "/games",
           "POST",
@@ -980,25 +1000,36 @@ export default {
     },
     // NOTE: for live games only (corr games start on the server)
     startNewGame: function(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: [],
-        clocks: [-1, -1], //-1 = unstarted
-        initime: [0, 0], //initialized later
-        score: "*"
-      });
-      GameStorage.add(game, (err) => {
-        // If an error occurred, game is not added: abort
-        if (!err) {
-          if (this.st.settings.sound)
-            new Audio("/sounds/newgame.flac").play().catch(() => {});
-          this.$router.push("/game/" + gameInfo.id);
+      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: [],
+          clocks: [-1, -1], //-1 = unstarted
+          initime: [0, 0], //initialized later
+          score: "*"
         }
-      });
+      );
+      setTimeout(
+        () => {
+          GameStorage.add(game, (err) => {
+            // If an error occurred, game is not added: a tab already
+            // added the game and (if focused) is redirected toward it.
+            // If no error and the tab is hidden: do not show anything.
+            if (!err && !document.hidden) {
+              if (this.st.settings.sound)
+                new Audio("/sounds/newgame.flac").play().catch(() => {});
+              this.$router.push("/game/" + gameInfo.id);
+            }
+          });
+        },
+        document.hidden ? 500 + 1000 * Math.random() : 0
+      );
     }
   }
 };
@@ -1071,7 +1102,7 @@ button.refuseBtn
   background-color: red
 
 #buttonsTchall
-  margin-top: 10px
+  // margin-top set dynamically (depends if diagram showed or not)
   & > button > span
     width: 100%
     text-align: center