Small fix + attempt to improve socket messages reliability...
[vchess.git] / client / src / views / Hall.vue
index db483e1..4f27f79 100644 (file)
@@ -172,9 +172,11 @@ main
             th {{ st.tr["Options"] }}
             th
         tbody
+          // TODO: remove the check !!pc.options
           tr(
             v-for="pc in presetChalls"
             @click="newChallFromPreset(pc)"
+            v-if="!!pc.options"
           )
             td {{ pc.vname }}
             td {{ pc.cadence }}
@@ -280,7 +282,8 @@ export default {
       presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"),
       conn: null,
       connexionString: "",
-      socketCloseListener: 0,
+      reopenTimeout: 0,
+      reconnectTimeout: 0,
       // Related to (killing of) self multi-connects:
       newConnect: {}
     };
@@ -315,39 +318,35 @@ export default {
         id: my.id,
         name: my.name,
         tmpIds: {
-          tmpId: { page: "/", focus: true }
+          [tmpId]: { page: "/", focus: true }
         }
       }
     );
-    const connectAndPoll = () => {
-      this.send("connect");
-      this.send("pollclientsandgamers");
-      if (!!this.$route.query["challenge"]) {
-        // Automatic challenge sending, for tournaments
-        this.loadNewchallVariant(
-          () => {
-            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"],
-                options: {},
-                memorize: false
-              }
-            );
-            window.doClick("modalNewgame");
-          },
-          this.$route.query["variant"]
-        );
-      }
-    };
-    // Initialize connection
+    if (!!this.$route.query["challenge"]) {
+      // Automatic challenge sending, for tournaments
+      this.loadNewchallVariant(
+        () => {
+          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"],
+              options: {},
+              memorize: false
+            }
+          );
+          window.doClick("modalNewgame");
+        },
+        this.$route.query["variant"]
+      );
+    }
+    // Connexion string won't change if disconnect/reconnect
     this.connexionString =
       params.socketUrl +
       "/?sid=" + this.st.user.sid +
@@ -356,19 +355,7 @@ export default {
       "&page=" +
       // Hall: path is "/" (TODO: could be hard-coded as well)
       encodeURIComponent(this.$route.path);
-    this.conn = new WebSocket(this.connexionString);
-    this.conn.onopen = connectAndPoll;
-    this.conn.addEventListener("message", this.socketMessageListener);
-    this.socketCloseListener = setInterval(
-      () => {
-        if (this.conn.readyState == 3) {
-          this.conn.removeEventListener("message", this.socketMessageListener);
-          this.conn = new WebSocket(this.connexionString);
-          this.conn.addEventListener("message", this.socketMessageListener);
-        }
-      },
-      1000
-    );
+    this.openConnection();
   },
   mounted: function() {
     document.getElementById("peopleWrap")
@@ -464,13 +451,36 @@ export default {
     this.cleanBeforeDestroy();
   },
   methods: {
+    openConnection: function() {
+      const connectAndPoll = () => {
+        this.send("connect");
+        this.send("pollclientsandgamers");
+      };
+      // Initialize connection
+      this.conn = new WebSocket(this.connexionString);
+      this.conn.onopen = () => {
+        this.reconnectTimeout = 250;
+        connectAndPoll();
+      };
+      this.conn.onmessage = this.socketMessageListener;
+      const closeConnection = () => {
+        this.reopenTimeout = setTimeout(
+          () => {
+            this.openConnection();
+            this.reconnectTimeout = Math.min(2*this.reconnectTimeout, 30000);
+          },
+          this.reconnectTimeout
+        );
+      };
+      this.conn.onerror = closeConnection;
+      this.conn.onclose = closeConnection;
+    },
     cleanBeforeDestroy: function() {
-      clearInterval(this.socketCloseListener);
       document.removeEventListener('visibilitychange', this.visibilityChange);
       window.removeEventListener('focus', this.onFocus);
       window.removeEventListener('blur', this.onBlur);
       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
-      this.conn.removeEventListener("message", this.socketMessageListener);
+      clearTimeout(this.reopenTimeout);
       this.send("disconnect");
       this.conn = null;
     },
@@ -505,7 +515,7 @@ export default {
     },
     invColor: function(c) {
       if (c == 'w') return this.st.tr["Black"];
-      return this.tr.tr["White"];
+      return this.st.tr["White"];
     },
     partialResetNewchallenge: function() {
       // Reset potential target and custom FEN:
@@ -848,7 +858,7 @@ export default {
                 id: c.id,
                 from: this.st.user.sid,
                 to: c.to,
-                options: c.options,
+                options: JSON.stringify(c.options),
                 fen: c.fen,
                 vid: c.vid,
                 cadence: c.cadence,
@@ -907,6 +917,8 @@ export default {
             if (!game.score)
               // New game from Hall
               newGame.score = "*";
+            // TODO: remove patch on next line (options || "{}")
+            newGame.options = JSON.parse(newGame.options || "{}");
             this.games.push(newGame);
             if (
               newGame.score == '*' &&
@@ -927,9 +939,12 @@ export default {
         }
         case "startgame": {
           // New game just started, I'm involved
-          const gameInfo = data.data;
-          if (this.classifyObject(gameInfo) == "live")
+          let gameInfo = data.data;
+          if (this.classifyObject(gameInfo) == "live") {
+            // TODO: remove patch on next line (+ const gameInfo)
+            if (!gameInfo.options) gameInfo.options = "{}";
             this.startNewGame(gameInfo);
+          }
           else {
             this.infoMessage =
               this.st.tr["New correspondence game:"] + " " +
@@ -973,6 +988,7 @@ export default {
               let moreGames = res.games.map(g => {
                 this.setVname(g);
                 g.type = "corr";
+                g.options = JSON.parse(g.options);
                 return g;
               });
               this.games = this.games.concat(moreGames);
@@ -992,7 +1008,8 @@ export default {
       ) {
         let newChall = Object.assign({}, chall);
         newChall.type = this.classifyObject(chall);
-        newChall.options = chall.options;
+        // TODO: remove patch on next line (options || "{}")
+        newChall.options = JSON.parse(chall.options || "{}");
         newChall.added = Date.now();
         let fromValues = Object.assign({}, this.people[chall.from]);
         delete fromValues["pages"]; //irrelevant in this context
@@ -1052,6 +1069,7 @@ export default {
       this.newchallenge.vid = pchall.vid;
       this.newchallenge.cadence = pchall.cadence;
       this.newchallenge.options = pchall.options;
+      this.newchallenge.fromPreset = true;
       this.loadNewchallVariant(this.issueNewChallenge);
     },
     issueNewChallenge: async function() {
@@ -1087,17 +1105,20 @@ export default {
         return;
       }
       window.V = this.newchallenge.V;
-      let chall = Object.assign({ options: {} }, this.newchallenge);
-      // Get/set options variables (if any) / TODO: v-model?!
-      for (const check of this.newchallenge.V.Options.check || []) {
-        const elt = document.getElementById(check.variable + "_opt");
-        if (elt.checked) chall.options[check.variable] = true;
-      }
-      for (const select of this.newchallenge.V.Options.select || []) {
-        const elt = document.getElementById(select.variable + "_opt");
-        const tryIntVal = parseInt(elt.value, 10);
-        chall.options[select.variable] =
-          (isNaN(tryIntVal) ? elt.value : tryIntVal);
+      let chall = Object.assign({}, this.newchallenge);
+      if (!this.newchallenge.fromPreset) chall.options = { options: {} };
+      if (V.Options && !this.newchallenge.fromPreset) {
+        // Get/set options variables (if any) / TODO: v-model?!
+        for (const check of this.newchallenge.V.Options.check || []) {
+          const elt = document.getElementById(check.variable + "_opt");
+          chall.options[check.variable] = elt.checked;
+        }
+        for (const select of this.newchallenge.V.Options.select || []) {
+          const elt = document.getElementById(select.variable + "_opt");
+          const tryIntVal = parseInt(elt.value, 10);
+          chall.options[select.variable] =
+            (isNaN(tryIntVal) ? elt.value : tryIntVal);
+        }
       }
       error = checkChallenge(chall);
       if (error) {
@@ -1125,7 +1146,7 @@ export default {
         alert(this.st.tr["Challenge already exists"]);
         return;
       }
-      if (this.newchallenge.memorize) this.addPresetChall(this.newchallenge);
+      if (this.newchallenge.memorize) this.addPresetChall(chall);
       delete chall["V"];
       delete chall["diag"];
       const finishAddChallenge = cid => {
@@ -1168,7 +1189,10 @@ export default {
         this.send("newchallenge", {
           data: Object.assign(
             // Temporarily add sender infos to display challenge on Discord.
-            { from: this.st.user.sid, sender: this.st.user.name }, chall)
+            { from: this.st.user.sid, sender: this.st.user.name },
+            chall,
+            { options: JSON.stringify(chall.options) }
+          )
         });
         // Add new challenge:
         chall.from = {
@@ -1316,7 +1340,7 @@ export default {
       let gameInfo = {
         id: getRandString(),
         fen: c.fen || V.GenRandInitFen(c.options),
-        options: c.options, //for rematch
+        options: JSON.stringify(c.options), //for rematch
         players: players,
         vid: c.vid,
         cadence: c.cadence
@@ -1366,11 +1390,7 @@ export default {
           {
             // cid is useful to delete the challenge:
             data: {
-              gameInfo: Object.assign(
-                {},
-                gameInfo,
-                { options: JSON.stringify(gameInfo.options) }
-              ),
+              gameInfo: gameInfo,
               cid: c.id
             },
             success: (response) => {
@@ -1396,8 +1416,7 @@ export default {
           moves: [],
           clocks: [-1, -1], //-1 = unstarted
           chats: [],
-          score: "*",
-          options: JSON.stringify(gameInfo.options)
+          score: "*"
         }
       );
       setTimeout(
@@ -1469,8 +1488,8 @@ div#peopleWrap > .card
 
 #chat > .card
   max-width: 100%
-  margin: 0;
-  border: none;
+  margin: 0
+  border: none
 
 #players > p
   margin-left: 5px