'update'

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 6faa1b6..d035e00 100644 (file)
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -20,7 +20,7 @@ div#baseGame(tabindex=-1 @click="() => focusBg()"
         button(@click="() => play()") >
         button(@click="gotoEnd") >>
       #pgnDiv
-        div(v-if="game.vname!='Dark' || game.score!='*'")
+        #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
           a#download(href="#")
           button(@click="download") {{ st.tr["Download PGN"] }}
         button(v-if="game.vname!='Dark' && game.mode!='analyze'"
@@ -394,6 +394,9 @@ console.log(newMove);
   margin-left: auto
   margin-right: auto
 
+#downloadDiv
+  display: inline-block
+
 #modal-eog+div .card
   overflow: hidden
 #controls

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index edaca5c..e77492f 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -5,6 +5,12 @@ main
       aria-labelledby="inputChat")
     #chat.card
       label.modal-close(for="modalChat")
+      #participants
+        span {{ Object.keys(people).length }} participant(s): 
+        span(v-for="p in Object.values(people)" v-if="!!p.name")
+          | {{ p.name }} 
+        span.anonymous(v-if="Object.values(people).some(p => !p.name)")
+          | + @nonymous
       Chat(:players="game.players" :pastChats="game.chats"
         @newchat-sent="finishSendChat" @newchat-received="processChat")
   .row
@@ -159,8 +165,6 @@ export default {
         case "pollclients":
         {
           data.sockIds.forEach(sid => {
-            // TODO: understand clearly what happens here, problems when a
-            // game is quit, and then launch a new game from hall.
             if (!!this.people[sid])
               return;
             this.$set(this.people, sid, {id:0, name:""});
@@ -552,7 +556,11 @@ export default {
         this.drawOffer = "threerep";
     },
     toggleChat: function() {
-      document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
+      let modalChat = document.getElementById("modalChat");
+      modalChat.style.backgroundColor =
+        (modalChat.style.backgroundColor == "#e2e2e2"
+          ? "#c5fefe"
+          : "#e2e2e2");
     },
     finishSendChat: function(chat) {
       // NOTE: anonymous chats in corr games are not stored on server (TODO?)
@@ -560,7 +568,7 @@ export default {
         GameStorage.update(this.gameRef.id, {chat: chat});
     },
     processChat: function() {
-      if (!document.getElementById("inputChat").checked)
+      if (!document.getElementById("modalChat").checked)
         document.getElementById("chatBtn").style.backgroundColor = "#c5fefe";
     },
     gameOver: function(score, scoreMsg) {
@@ -583,6 +591,13 @@ export default {
 .connected
   background-color: lightgreen
 
+#participants
+  margin-left: 5px
+
+.anonymous
+  color: grey
+  font-style: italic
+
 @media screen and (min-width: 768px)
   #actions
     width: 300px

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index f165b0a..ee7e01b 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -31,42 +31,40 @@ main
       button#newGame(onClick="doClick('modalNewgame')") New game
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-      .collapse
-        div
-          .button-group
-            button(@click="(e) => setDisplay('c','live',e)" class="active")
-              | Live Challenges
-            button(@click="(e) => setDisplay('c','corr',e)")
-              | Correspondance challenges
-          ChallengeList(v-show="cdisplay=='live'"
-            :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
-          ChallengeList(v-show="cdisplay=='corr'"
-            :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
-        div
-          .button-group
-            button(@click="(e) => setDisplay('p','players',e)" class="active")
-              | Players
-            button(@click="(e) => setDisplay('p','chat',e)")
-              | Chat
-          #players(v-show="pdisplay=='players'")
-            p(v-for="p in uniquePlayers")
-              span(:class="{anonymous: !!p.count}")
-                | {{ (p.name || '@nonymous') + (!!p.count ? " ("+p.count+")" : "") }}
-              button.player-action(v-if="!p.count && p.name != st.user.name"
-                  @click="challOrWatch(p,$event)")
-                | {{ whatPlayerDoes(p) }}
-          #chat(v-show="pdisplay=='chat'")
-            Chat(:players="[]")
-        div
-          .button-group
-            button(@click="(e) => setDisplay('g','live',e)" class="active")
-              | Live games
-            button(@click="(e) => setDisplay('g','corr',e)")
-              | Correspondance games
-          GameList(v-show="gdisplay=='live'" :games="filterGames('live')"
-            @show-game="showGame")
-          GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')"
-            @show-game="showGame")
+      div
+        .button-group
+          button(@click="(e) => setDisplay('c','live',e)" class="active")
+            | Live Challenges
+          button(@click="(e) => setDisplay('c','corr',e)")
+            | Correspondance challenges
+        ChallengeList(v-show="cdisplay=='live'"
+          :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
+        ChallengeList(v-show="cdisplay=='corr'"
+          :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
+      #people
+        h3.text-center Who's there?
+        #players
+          p(v-for="p in Object.values(people)" v-if="!!p.name")
+            span {{ p.name }}
+            button.player-action(
+              v-if="p.name != st.user.name"
+              @click="challOrWatch(p,$event)"
+            )
+              | {{ whatPlayerDoes(p) }}
+          p.anonymous @nonymous ({{ anonymousCount }})
+        #chat
+          Chat(:players="[]")
+        .clearer
+      div
+        .button-group
+          button(@click="(e) => setDisplay('g','live',e)" class="active")
+            | Live games
+          button(@click="(e) => setDisplay('g','corr',e)")
+            | Correspondance games
+        GameList(v-show="gdisplay=='live'" :games="filterGames('live')"
+          @show-game="showGame")
+        GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')"
+          @show-game="showGame")
 </template>
 
 <script>
@@ -119,23 +117,10 @@ export default {
     },
   },
   computed: {
-    uniquePlayers: function() {
-      // Show e.g. "@nonymous (5)", and do nothing on click on anonymous
-      let anonymous = {name:"", count:0};
-      let playerList = {};
-      Object.values(this.people).forEach(p => {
-        if (p.id > 0)
-        {
-          // We don't count registered users connections: either they are here or not.
-          if (!playerList[p.id])
-            playerList[p.id] = {name: p.name};
-        }
-        else
-          anonymous.count++;
-      });
-      if (anonymous.count > 0)
-        playerList[0] = anonymous;
-      return Object.values(playerList);
+    anonymousCount: function() {
+      let count = 0;
+      Object.values(this.people).forEach(p => { count += (!p.name ? 1 : 0); });
+      return count;
     },
   },
   created: function() {
@@ -194,6 +179,9 @@ export default {
     );
     // 0.1] Ask server for room composition:
     const funcPollClients = () => {
+      // Same strategy as in Game.vue: send connection
+      // after we're sure WebSocket is initialized
+      this.st.conn.send(JSON.stringify({code:"connect"}));
       this.st.conn.send(JSON.stringify({code:"pollclients"}));
     };
     if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state
@@ -638,15 +626,25 @@ export default {
 #newGame
   display: block
   margin: 10px auto 5px auto
+#people
+  width: 100%
+#players
+  width: 50%
+  position: relative
+  float: left
+#chat
+  width: 50%
+  float: left
+  position: relative
+@media screen and (max-width: 767px)
+  #players, #chats
+    width: 100%
 #chat > .card
   max-width: 100%
   margin: 0;
   border: none;
 #players > p
-  margin-left: 40%
-@media screen and (max-width: 767px)
-  #players > p
-    margin-left: 5px
+  margin-left: 5px
 .anonymous
   font-style: italic
 button.player-action