feat: show players in lobby

client/src/components/CollectQuotesExplain.vue

@@ -54,8 +54,8 @@ export default {
     this.$i18n.map({
       'explain-game-closed': { de: 'Erklärung zum Spiel', en: 'about the game' },
       'explain-game-p-1': {
-        de: 'Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden uns in der ersten Phase.',
+        de: 'Das Spiel besteht aus zwei Phasen. In der ersten Phase (in der wir uns gerade befinden) werden von den Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht man, die Aussagen den richtigen Personen zuzuordnen.',
-        en: 'The game has two phases. During the first phase, all players are asked to enter quotes. During the second phase, players try to assign the quotes to the right source. This is the first phase.'
+        en: 'The game has two phases. During the first phase (in which we are currently), all players are asked to enter statements about themselves. During the second phase, players try to assign the statements to the right source.'
       },
       'explain-game-p-2': { de: 'Schreibe in 3-5 einzelnen Aussagen etwas über dich.', en: 'Please enter 3-5 statements about yourself.' },
       'examples': { de: 'Beispiele', en: 'Examples' },

client/src/components/NoQuotesYet.vue

@@ -10,7 +10,7 @@ export default {
     this.$i18n.map({
       'click-to-add-first-quote': {
         de: 'Klicke, um deine erste Aussage zu hinterlegen.',
-        en: 'Click to add your first quote.',
+        en: 'Click to add your first statement.',
       }
     })
   },

client/src/components/Player.vue

@@ -7,7 +7,7 @@
       <div class="player__name">
         {{ player.name }}
       </div>
-      <div class="player__score">
+      <div v-if="!hideScore" class="player__score">
         {{ player.score || 0 }}
       </div>
     </div>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  props: ['player'],
+  props: ['player', 'hideScore'],
   computed: {
     gamePhase() {
       return this.$store.state.game.phase

client/src/components/PlayerList.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="player-list">
     <div v-for="player in players" :key="player.id">
-      <Player :player="player" />
+      <Player :player="player" :hide-score="hideScores" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['players'],
+  props: ['players', 'hideScores'],
 }
 </script>
 

client/src/components/lobby.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="lobby">
+    <div class="lobby__message">
+      <div class="lobby__teamname">{{ teamname }}</div>
+      {{ $t('waiting-for-gamemaster') }}
+    </div>
+    <div class="lobby__players">
+      <PlayerList :players="players" :hide-scores="true" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  beforeMount() {
+    this.$i18n.map({
+      'waiting-for-gamemaster': {
+        de: 'bitte warten, bis das Spiel vom Gamemaster gestartet wird ...',
+        en: 'waiting for gamemaster to start game ...',
+      },
+    })
+  },
+  computed: {
+    teamname() {
+      return this.$store.state.game.name
+    },
+    players() {
+      return this.$store.state.players.players
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.lobby {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  &__message {
+    flex-grow: 1;
+    margin-top: 60px;
+    text-align: center;
+    font-family: Dosis;
+    font-size: 24px;
+    color: #ffffff;
+  }
+  &__teamname {
+    font-size: 36px;
+    margin-bottom: 36px;
+  }
+  &__players {
+    width: 200px;
+    margin: 16px 16px 0 0;
+  }
+}
+</style>

client/src/pages/play.vue

@@ -6,10 +6,7 @@
           <GameControls />
         </div>
         <div class="page-play__area">
-          <div v-if="gameState === 'idle'" class="page-play__waiting">
+          <Lobby v-if="gameState === 'idle'" />
-            <div class="page-play__teamname">{{ teamname }}</div>
-            {{ $t('waiting-for-gamemaster') }}
-          </div>
           <ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
           <Play v-if="gameState === 'play'" />
           <CollectQuotes v-if="gameState === 'collect'" />
@@ -31,10 +28,6 @@
 export default {
   beforeMount() {
     this.$i18n.map({
-      'waiting-for-gamemaster': {
-        de: 'bitte warten, bis das Spiel vom Gamemaster gestartet wird ...',
-        en: 'waiting for gamemaster to start game ...',
-      },
       'connection-lost': {
         de: 'Verbindung zum Server unterbrochen',
         en: 'connection to server lost',
@@ -103,17 +96,6 @@ export default {
     flex: 1 1 auto;
   }
 
-  &__waiting {
-    margin-top: 60px;
-    text-align: center;
-    font-family: Dosis;
-    font-size: 24px;
-    color: #ffffff;
-  }
-  &__teamname {
-    font-size: 36px;
-    margin-bottom: 36px;
-  }
   &__error-box {
     position: absolute;
     left: 30%;