X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=fd4bd2da90c99220e84ab78916785ec256308360;hp=d0012fc6ec1cb66f4f64f98466cba4f26069a8b3;hb=077ba3446c4ea3c6553c325fc8d16a96b7a9ff4f;hpb=78d60fc852926e9ad643105d706847de49b5237e

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index d0012fc6..fd4bd2da 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -99,7 +99,7 @@ main
       button(@click="issueNewChallenge()") {{ st.tr["Send challenge"] }}
   input#modalPeople.modal(
     type="checkbox"
-    @click="resetSocialColor()"
+    @click="toggleSocialColor()"
   )
   div#peopleWrap(
     role="dialog"
@@ -135,7 +135,7 @@ main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .button-group
-        button#peopleBtn(@click="openModalPeople()")
+        button#peopleBtn(onClick="window.doClick('modalPeople')")
           | {{ st.tr["Who's there?"] }}
         button(@click="showNewchallengeForm()")
           | {{ st.tr["New game"] }}
@@ -322,7 +322,13 @@ export default {
     );
   },
   mounted: function() {
-    ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => {
+    document.getElementById("peopleWrap")
+      .addEventListener("click", (e) => {
+        processModalClick(e, () => {
+          this.toggleSocialColor("close")
+        });
+      });
+    ["infoDiv", "newgameDiv"].forEach(eltName => {
       document.getElementById(eltName)
         .addEventListener("click", processModalClick);
     });
@@ -423,10 +429,6 @@ export default {
         ["random-" + pc.randomness]: true
       };
     },
-    openModalPeople: function() {
-      window.doClick("modalPeople");
-      document.getElementById("inputChat").focus();
-    },
     anonymousCount: function() {
       let count = 0;
       Object.values(this.people).forEach(p => {
@@ -577,9 +579,11 @@ export default {
       // ==> Moves sent by connected remote player(s) if live game
       this.$router.push("/game/" + g.id);
     },
-    resetSocialColor: function() {
-      // TODO: this is called twice, once on opening an once on closing
-      document.getElementById("peopleBtn").classList.remove("somethingnew");
+    toggleSocialColor: function(action) {
+      if (!action && document.getElementById("modalPeople").checked)
+        document.getElementById("inputChat").focus();
+      else
+        document.getElementById("peopleBtn").classList.remove("somethingnew");
     },
     processChat: function(chat) {
       this.send("newchat", { data: chat });