X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=271c0bcf6b22b839427020496674a511d3904f4e;hb=a041d5d84031f29fc001597a9ac958d6a3e6de76;hp=6ecc55270faa85982bab4f771506b087b49abf92;hpb=f9c36b2da005b596ad656f4b6cc4e09ef3c656f1;p=vchess.git

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index 6ecc5527..271c0bcf 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -10,15 +10,17 @@ main
       p(v-html="infoMessage")
   input#modalAccept.modal(type="checkbox")
   div#acceptDiv(role="dialog")
-    .card.text-center
-      p
+    .card
+      p.text-center
         span.variantName {{ curChallToAccept.vname }} 
         span {{ curChallToAccept.cadence }} 
         span {{ st.tr["with"] + " " + curChallToAccept.from.name }}
       .diagram(v-html="tchallDiag")
       .button-group#buttonsTchall
-        button.acceptBtn(@click="decisionChallenge(true)") {{ st.tr["Accept challenge?"] }}
-        button.refuseBtn(@click="decisionChallenge(false)") {{ st.tr["Refuse"] }}
+        button.acceptBtn(@click="decisionChallenge(true)")
+          span {{ st.tr["Accept challenge?"] }}
+        button.refuseBtn(@click="decisionChallenge(false)")
+          span {{ st.tr["Refuse"] }}
   input#modalNewgame.modal(
     type="checkbox"
     @change="cadenceFocusIfOpened($event)"
@@ -98,7 +100,7 @@ main
             )
               | {{ st.tr["Observe"] }}
             button.player-action(
-              v-else-if="st.user.id > 0 && sid != st.user.sid"
+              v-else-if="isFocusedOnHall(sid)"
               @click="challenge(sid)"
             )
               | {{ st.tr["Challenge"] }}
@@ -231,66 +233,85 @@ export default {
     if (this.st.variants.length > 0 && this.newchallenge.vid > 0)
       this.loadNewchallVariant();
     const my = this.st.user;
-    this.$set(this.people, my.sid, { id: my.id, name: my.name, pages: ["/"] });
+    this.$set(
+      this.people,
+      my.sid,
+      {
+        id: my.id,
+        name: my.name,
+        pages: [{ path: "/", focus: true }]
+      }
+    );
     // Ask server for current corr games (all but mines)
     ajax(
       "/games",
       "GET",
-      { uid: this.st.user.id, excluded: true },
-      response => {
-        this.games = this.games.concat(
-          response.games.map(g => {
-            const type = this.classifyObject(g);
-            const vname = this.getVname(g.vid);
-            return Object.assign({}, g, { type: type, vname: vname });
-          })
-        );
+      {
+        data: { uid: this.st.user.id, excluded: true },
+        success: (response) => {
+          this.games = this.games.concat(
+            response.games.map(g => {
+              const type = this.classifyObject(g);
+              const vname = this.getVname(g.vid);
+              return Object.assign({}, g, { type: type, vname: vname });
+            })
+          );
+        }
       }
     );
     // Also ask for corr challenges (open + sent by/to me)
-    ajax("/challenges", "GET", { uid: this.st.user.id }, response => {
-      // Gather all senders names, and then retrieve full identity:
-      // (TODO [perf]: some might be online...)
-      let names = {};
-      response.challenges.forEach(c => {
-        if (c.uid != this.st.user.id) names[c.uid] = "";
-        else if (!!c.target && c.target != this.st.user.id)
-          names[c.target] = "";
-      });
-      const addChallenges = () => {
-        names[this.st.user.id] = this.st.user.name; //in case of
-        this.challenges = this.challenges.concat(
-          response.challenges.map(c => {
-            const from = { name: names[c.uid], id: c.uid }; //or just name
-            const type = this.classifyObject(c);
-            const vname = this.getVname(c.vid);
-            return Object.assign(
-              {},
+    ajax(
+      "/challenges",
+      "GET",
+      {
+        data: { uid: this.st.user.id },
+        success: (response) => {
+          // Gather all senders names, and then retrieve full identity:
+          // (TODO [perf]: some might be online...)
+          let names = {};
+          response.challenges.forEach(c => {
+            if (c.uid != this.st.user.id) names[c.uid] = "";
+            else if (!!c.target && c.target != this.st.user.id)
+              names[c.target] = "";
+          });
+          const addChallenges = () => {
+            names[this.st.user.id] = this.st.user.name; //in case of
+            this.challenges = this.challenges.concat(
+              response.challenges.map(c => {
+                const from = { name: names[c.uid], id: c.uid }; //or just name
+                const type = this.classifyObject(c);
+                const vname = this.getVname(c.vid);
+                return Object.assign(
+                  {},
+                  {
+                    type: type,
+                    vname: vname,
+                    from: from,
+                    to: c.target ? names[c.target] : ""
+                  },
+                  c
+                );
+              })
+            );
+          };
+          if (Object.keys(names).length > 0) {
+            ajax(
+              "/users",
+              "GET",
               {
-                type: type,
-                vname: vname,
-                from: from,
-                to: c.target ? names[c.target] : ""
-              },
-              c
+                data: { ids: Object.keys(names).join(",") },
+                success: (response2) => {
+                  response2.users.forEach(u => {
+                    names[u.id] = u.name;
+                  });
+                  addChallenges();
+                }
+              }
             );
-          })
-        );
-      };
-      if (Object.keys(names).length > 0) {
-        ajax(
-          "/users",
-          "GET",
-          { ids: Object.keys(names).join(",") },
-          response2 => {
-            response2.users.forEach(u => {
-              names[u.id] = u.name;
-            });
-            addChallenges();
-          }
-        );
-      } else addChallenges();
-    });
+          } else addChallenges();
+        }
+      }
+    );
     const connectAndPoll = () => {
       this.send("connect");
       this.send("pollclientsandgamers");
@@ -303,6 +324,7 @@ export default {
       "&tmpId=" +
       getRandString() +
       "&page=" +
+      // Hall: path is "/" (could be hard-coded as well)
       encodeURIComponent(this.$route.path);
     this.conn = new WebSocket(this.connexionString);
     this.conn.onopen = connectAndPoll;
@@ -310,6 +332,7 @@ export default {
     this.conn.onclose = this.socketCloseListener;
   },
   mounted: function() {
+    document.addEventListener('visibilitychange', this.visibilityChange);
     ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
       let elt = document.getElementById(eltName);
       elt.addEventListener("click", processModalClick);
@@ -328,9 +351,18 @@ export default {
     this.setDisplay("g", showGtype);
   },
   beforeDestroy: function() {
+    document.removeEventListener('visibilitychange', this.visibilityChange);
     this.send("disconnect");
   },
   methods: {
+    visibilityChange: function() {
+      // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
+      this.send(
+        document.visibilityState == "visible"
+          ? "getfocus"
+          : "losefocus"
+      );
+    },
     // Helpers:
     cadenceFocusIfOpened: function() {
       if (event.target.checked)
@@ -372,7 +404,16 @@ export default {
       else elt.nextElementSibling.classList.remove("active");
     },
     isGamer: function(sid) {
-      return this.people[sid].pages.some(p => p.indexOf("/game/") >= 0);
+      return this.people[sid].pages
+        .some(p => p.focus && p.path.indexOf("/game/") >= 0);
+    },
+    isFocusedOnHall: function(sid) {
+      return (
+        // This is meant to challenge people, thus the next 2 conditions:
+        this.st.user.id > 0 &&
+        sid != this.st.user.sid &&
+        this.people[sid].pages.some(p => p.path == "/" && p.focus)
+      );
     },
     challenge: function(sid) {
       // Available, in Hall (only)
@@ -384,8 +425,10 @@ export default {
       // 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]);
+        if (p.focus) {
+          const matchGid = p.path.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);
@@ -431,11 +474,12 @@ export default {
               this.send("askidentity", { target: s.sid, page: page });
               identityAsked[s.sid] = true;
             }
-            if (!this.people[s.sid])
+            if (!this.people[s.sid]) {
               // 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);
+              this.people[s.sid] = { pages: [{path: page, focus: true}] };
+            }
+            else if (!(this.people[s.sid].pages.find(p => p.path == page)))
+              this.people[s.sid].pages.push({ path: page, focus: true });
             if (!s.page)
               // Peer is in Hall
               this.send("askchallenge", { target: s.sid });
@@ -447,18 +491,16 @@ export default {
         case "connect":
         case "gconnect": {
           const page = data.page || "/";
-          // NOTE: player could have been polled earlier, but might have logged in then
-          // So it's a good idea to ask identity if he was anonymous.
-          // But only ask game / challenge if currently disconnected.
+          // Only ask game / challenge if first connexion:
           if (!this.people[data.from]) {
-            this.$set(this.people, data.from, { pages: [page] });
+            this.people[data.from] = { pages: [{ path: page, focus: true }] };
             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
-            if (this.people[data.from].pages.indexOf(page) < 0)
-              this.people[data.from].pages.push(page);
+            if (!(this.people[data.from].pages.find(p => p.path == page)))
+              this.people[data.from].pages.push({ path: page, focus: true });
           }
           if (!this.people[data.from].name && this.people[data.from].id !== 0) {
             // Identity not known yet
@@ -496,11 +538,26 @@ export default {
             }
           }
           const page = data.page || "/";
-          ArrayFun.remove(this.people[data.from].pages, p => p == page);
+          ArrayFun.remove(this.people[data.from].pages, p => p.path == page);
           if (this.people[data.from].pages.length == 0)
             this.$delete(this.people, data.from);
           break;
         }
+        case "getfocus":
+          // If user reload a page, focus may arrive earlier than connect
+          if (!!this.people[data.from]) {
+            this.people[data.from].pages
+              .find(p => p.path == data.page).focus = true;
+            this.$forceUpdate(); //TODO: shouldn't be required
+          }
+          break;
+        case "losefocus":
+          if (!!this.people[data.from]) {
+            this.people[data.from].pages
+              .find(p => p.path == data.page).focus = false;
+            this.$forceUpdate(); //TODO: shouldn't be required
+          }
+          break;
         case "killed":
           // I logged in elsewhere:
           this.conn = null;
@@ -519,11 +576,13 @@ 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
-          });
+          let player = this.people[user.sid];
+          // player.pages is already set
+          player.id = user.id;
+          player.name = user.name;
+          // TODO: this.$set(people, ...) fails. So forceUpdate.
+          //       But this shouldn't be like that!
+          this.$forceUpdate();
           // If I multi-connect, kill current connexion if no mark (I'm older)
           if (this.newConnect[user.sid]) {
             if (
@@ -699,7 +758,7 @@ export default {
         const parsedFen = V.ParseFen(this.newchallenge.fen);
         this.newchallenge.diag = getDiagram({
           position: parsedFen.position,
-          orientation: V.GetOppCol(parsedFen.turn)
+          orientation: parsedFen.turn
         });
       }
     },
@@ -748,7 +807,11 @@ export default {
           // Delete current challenge (will be replaced now)
           this.send("deletechallenge", { data: this.challenges[cIdx].id });
           if (ctype == "corr") {
-            ajax("/challenges", "DELETE", { id: this.challenges[cIdx].id });
+            ajax(
+              "/challenges",
+              "DELETE",
+              { data: { id: this.challenges[cIdx].id } }
+            );
           }
           this.challenges.splice(cIdx, 1);
         }
@@ -785,9 +848,16 @@ export default {
         finishAddChallenge(null);
       } else {
         // Correspondance game: send challenge to server
-        ajax("/challenges", "POST", { chall: chall }, response => {
-          finishAddChallenge(response.cid);
-        });
+        ajax(
+          "/challenges",
+          "POST",
+          {
+            data: { chall: chall },
+            success: (response) => {
+              finishAddChallenge(response.cid);
+            }
+          }
+        );
       }
     },
     // Callback function after a diagram was showed to accept
@@ -810,8 +880,13 @@ export default {
         const oppsid = this.getOppsid(c);
         if (!!oppsid)
           this.send("refusechallenge", { data: c.id, target: oppsid });
-        if (c.type == "corr")
-          ajax("/challenges", "DELETE", { id: c.id });
+        if (c.type == "corr") {
+          ajax(
+            "/challenges",
+            "DELETE",
+            { data: { id: c.id } }
+          );
+        }
       }
       this.send("deletechallenge", { data: c.id });
     },
@@ -850,8 +925,13 @@ export default {
       }
       else {
         // My challenge
-        if (c.type == "corr")
-          ajax("/challenges", "DELETE", { id: c.id });
+        if (c.type == "corr") {
+          ajax(
+            "/challenges",
+            "DELETE",
+            { data: { id: c.id } }
+          );
+        }
         this.send("deletechallenge", { data: c.id });
       }
       // In all cases, the challenge is consumed:
@@ -886,11 +966,14 @@ export default {
         ajax(
           "/games",
           "POST",
-          { gameInfo: gameInfo, cid: c.id }, //cid useful to delete challenge
-          response => {
-            gameInfo.id = response.gameId;
-            notifyNewgame();
-            this.$router.push("/game/" + response.gameId);
+          {
+            // cid is useful to delete the challenge:
+            data: { gameInfo: gameInfo, cid: c.id },
+            success: (response) => {
+              gameInfo.id = response.gameId;
+              notifyNewgame();
+              this.$router.push("/game/" + response.gameId);
+            }
           }
         );
       }
@@ -989,6 +1072,9 @@ button.refuseBtn
 
 #buttonsTchall
   margin-top: 10px
+  & > button > span
+    width: 100%
+    text-align: center
 
 .variantName
   font-weight: bold
@@ -996,6 +1082,8 @@ button.refuseBtn
 .diagram
   margin: 0 auto
   max-width: 400px
+  // width: 100% required for Firefox
+  width: 100%
 
 #inputFen
   width: 100%