X-Git-Url: https://git.auder.net/pieces/Cwda/n_white_knight.svg?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=7d4369beffef46d1dae4d49187454b111e79d7da;hb=5fde3a01497262862afc4cb4c9457d4e0ad69a4a;hp=8f9b946ad2a1aebc1a10f577df2a6e33dffad239;hpb=0e16cb26f6380f57f1079ece9bdb654243073bde;p=vchess.git

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 8f9b946a..7d4369be 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -1,25 +1,33 @@
 <template lang="pug">
 main
-  input#modalChat.modal(type="checkbox" @change="toggleChat")
+  input#modalChat.modal(type="checkbox" @click="resetChatColor")
   div#chatWrap(role="dialog" data-checkbox="modalChat"
       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
     #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
       button#chatBtn(onClick="doClick('modalChat')") Chat
-      #actions(v-if="game.mode!='analyze' && game.score=='*'")
+      #actions(v-if="game.score=='*'")
         button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw
         button(@click="abortGame") Abort
         button(@click="resign") Resign
       #playersInfo
         p
-          span.name(:class="{connected: isConnected(0)}") {{ game.players[0].name }}
+          span.name(:class="{connected: isConnected(0)}")
+            | {{ game.players[0].name || "@nonymous" }}
           span.time(v-if="game.score=='*'") {{ virtualClocks[0] }}
           span.split-names -
-          span.name(:class="{connected: isConnected(1)}") {{ game.players[1].name }}
+          span.name(:class="{connected: isConnected(1)}")
+            | {{ game.players[1].name || "@nonymous" }}
           span.time(v-if="game.score=='*'") {{ virtualClocks[1] }}
   BaseGame(:game="game" :vr="vr" ref="basegame"
     @newmove="processMove" @gameover="gameOver")
@@ -157,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:""});
@@ -214,12 +220,14 @@ export default {
           break;
         }
         case "askgame":
-          // Send current (live) game
+          // Send current (live) game if not asked by opponent (!)
+          if (this.game.players.some(p => p.sid == data.from))
+            return;
           const myGame =
           {
             // Minimal game informations:
             id: this.game.id,
-            players: this.game.players.map(p => { return {name:p.name}; }),
+            players: this.game.players,
             vid: this.game.vid,
             timeControl: this.game.timeControl,
           };
@@ -547,7 +555,8 @@ export default {
       if (this.repeat[repIdx] >= 3)
         this.drawOffer = "threerep";
     },
-    toggleChat: function() {
+    resetChatColor: function() {
+      // TODO: this is called twice, once on opening an once on closing
       document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
     },
     finishSendChat: function(chat) {
@@ -556,11 +565,10 @@ 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) {
-      this.game.mode = "analyze";
       this.game.score = score;
       this.game.scoreMsg = scoreMsg;
       const myIdx = this.game.players.findIndex(p => {
@@ -580,6 +588,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
@@ -598,6 +613,9 @@ export default {
 @media screen and (max-width: 767px)
   #aboveBoard
     text-align: center
+@media screen and (min-width: 768px)
+  #aboveBoard
+    margin-left: 30%
 
 .name
   font-size: 1.5rem