X-Git-Url: https://git.auder.net/game/%22%20%20%20data.gameInfo.gameId%20%20%20%22?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=f165b0a92d9bcad7c32953d536d6e3f3a75ff7d6;hb=5bcc9b31a762645af3d35192e7359771c95d4ff7;hp=7b42854d26d7e5d458cbd90948c6d5e38bf4ad58;hpb=dcd68c4108412f45b8ce119ae80ce8f6e296800b;p=vchess.git

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index 7b42854d..f165b0a9 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -32,36 +32,37 @@ main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .collapse
-        input#challengeSection(type="radio" checked aria-hidden="true" name="accordion")
-        label(for="challengeSection" aria-hidden="true") Challenges
         div
           .button-group
-            button(@click="cdisplay='live'") Live Challenges
-            button(@click="cdisplay='corr'") Correspondance challenges
+            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")
-        input#peopleSection(type="radio" aria-hidden="true" name="accordion")
-        label(for="peopleSection" aria-hidden="true") People
         div
           .button-group
-            button(@click="pdisplay='players'") Players
-            button(@click="pdisplay='chat'") Chat
+            button(@click="(e) => setDisplay('p','players',e)" class="active")
+              | Players
+            button(@click="(e) => setDisplay('p','chat',e)")
+              | Chat
           #players(v-show="pdisplay=='players'")
-            p.text-center(v-for="p in uniquePlayers")
+            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" @click="challOrWatch(p,$event)")
+              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="[]")
-        input#gameSection(type="radio" aria-hidden="true" name="accordion")
-        label(for="gameSection" aria-hidden="true") Games
         div
           .button-group
-            button(@click="gdisplay='live'") Live games
-            button(@click="gdisplay='corr'") Correspondance games
+            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')"
@@ -227,14 +228,25 @@ export default {
         url += "?rid=" + g.rid;
       this.$router.push(url);
     },
+    setDisplay: function(letter, type, e) {
+      this[letter + "display"] = type;
+      e.target.classList.add("active");
+      if (!!e.target.previousElementSibling)
+        e.target.previousElementSibling.classList.remove("active");
+      else
+        e.target.nextElementSibling.classList.remove("active");
+    },
     getVname: function(vid) {
       const variant = this.st.variants.find(v => v.id == vid);
       // this.st.variants might be uninitialized (variant == null)
       return (!!variant ? variant.name : "");
     },
     whatPlayerDoes: function(p) {
-      if (this.games.some(g => g.players.some(pl => pl.sid == p.sid)))
+      if (this.games.some(g => g.type == "live"
+        && g.players.some(pl => pl.sid == p.sid)))
+      {
         return "Playing";
+      }
       return "Challenge"; //player is available
     },
     sendSomethingTo: function(to, code, obj, warnDisconnected) {
@@ -349,7 +361,7 @@ export default {
         {
           // Receive game from some player (+sid)
           // NOTE: it may be correspondance (if newgame while we are connected)
-          if (!this.games.some(g => g.id == data.game.id)) //ignore duplicates
+          if (this.games.every(g => g.id != data.game.id)) //ignore duplicates
           {
             let newGame = data.game;
             newGame.type = this.classifyObject(data.game);
@@ -428,7 +440,7 @@ export default {
         case "Playing":
           // NOTE: this search for game was already done for rendering
           this.showGame(this.games.find(
-            g => g.players.some(pl => pl.sid == p.sid)));
+            g => g.type=="live" && g.players.some(pl => pl.sid == p.sid)));
           break;
       };
     },
@@ -620,7 +632,9 @@ export default {
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
+.active
+  color: #42a983
 #newGame
   display: block
   margin: 10px auto 5px auto
@@ -628,8 +642,13 @@ export default {
   max-width: 100%
   margin: 0;
   border: none;
+#players > p
+  margin-left: 40%
+@media screen and (max-width: 767px)
+  #players > p
+    margin-left: 5px
 .anonymous
   font-style: italic
 button.player-action
-  margin-left: 20px
+  margin-left: 32px
 </style>