feat: show lobby with logged in players

client/src/assets/css/colors.scss

@@ -15,6 +15,10 @@ $box-primary-background-color: $background-primary-color;
 $box-primary-text-color: $text-primary-color;
 $box-primary-border: 1px solid #e0e0e0;
 
+$box-primary-disabled-background-color: $box-primary-background-color;
+$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
+$box-primary-disabled-border: $box-primary-border;
+
 
 // Button
 $button-background-color: #00a0e0;

client/src/components/Lobby.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="lobby__container">
-    Lobby
-    <div class="lobby__players-list">
-      <div v-for="player in players" :key="player.id" class="lobby__player">
-        * {{ player.name }}
+    <div class="lobby__message">
+      waiting for gamemaster to start the game ...
     </div>
+    <div class="lobby__players-list">
+      <PlayerList :players="players" :hide-scores="true" />
     </div>
   </div>
 </template>
@@ -19,7 +19,22 @@ const players = usePlayersStore().players
 
 .lobby {
   &__container {
-    font-family: $font-primary;
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__message {
+    flex-grow: 1;
+    margin: 60px 0 0 200px;
+    font-family: $font-secondary;
+    font-size: 24px;
+    text-align: center;
+  }
+
+  &__players-list {
+    width: 200px;
+    margin: 16px 16px 0 0;
   }
 }
 </style>

client/src/components/Player.vue

@@ -0,0 +1,65 @@
+<template>
+  <div :class="['player__row', { 'player__row__idle': player.isIdle }]">
+    <div class="player__status">
+      <span v-if="isPhaseSelectQuote">{{ hasSelected ? '☑' : '☐' }}</span>
+    </div>
+    <div class="player__name">
+      {{ player.name }}
+    </div>
+    <div v-if="!hideScore" class="player__score">
+      {{ player.score || 0 }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Player } from '@/stores/PlayersStore';
+import { useGameinfoStore } from "@/stores/GameinfoStore"
+
+defineProps<{
+  player: Player,
+  hideScore?: boolean,
+}>()
+
+const game = useGameinfoStore()
+const isPhaseSelectQuote = computed(() => game.state === 'play' && game.phase === 'select-quote')
+const hasSelected = computed(() => false) // return this.$store.state.round.selections[this.player.id]
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.player {
+  &__row {
+    display: flex;
+    background-color: $box-primary-background-color;
+    color: $box-primary-text-color;
+    font-family: $font-secondary;
+    font-size: 18px;
+
+    &__idle {
+      background-color: $box-primary-disabled-background-color;
+      color: $box-primary-disabled-text-color;
+    }
+  }
+
+  &__name {
+    display: inline;
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__status {
+    width: 20px;
+  }
+
+  &__score {
+    width: 32px;
+    margin-left: 16px;
+    text-align: right;
+  }
+}
+</style>

client/src/components/PlayerList.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="player-list">
+    <div v-for="player in players" :key="player.id">
+      <Player :player="player" :hide-score="hideScores" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Players } from '@/stores/PlayersStore'
+
+defineProps<{
+  players: Players,
+  hideScores?: boolean,
+}>()
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.player-list {
+  padding: 8px;
+  border: $box-primary-border;
+  border-radius: 10px;
+  background-color: $box-primary-background-color;
+}
+</style>

client/src/pages/play.vue

@@ -7,7 +7,7 @@
     </AlertBox>
     <div class="page-play__playfield-container">
       <div class="page-play__playfield-content">
-        <Lobby v-if="true"/>
+        <Lobby v-if="game.state === 'idle'"/>
       </div>
       <EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
     </div>
@@ -16,10 +16,10 @@
 
 <script setup lang="ts">
 import { navigateTo, useRoute } from '#app'
-import { computed } from 'vue'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
 import useAuth from '@/composables/useAuth';
 import useEngine from '@/composables/useEngine';
-import { onMounted, onBeforeUnmount } from 'vue';
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
 // ensure user is authenticated
 const { authenticateAndLoadUserInfo } = useAuth()
@@ -35,6 +35,7 @@ onBeforeUnmount(() => stopEngine())
 
 // debugging
 const showEngineDebug = computed(() => useRoute().hash.indexOf('debug') > -1)
+const game = useGameinfoStore()
 </script>
 
 <style lang="scss">

client/src/stores/PlayersStore.ts

@@ -12,12 +12,12 @@ export type Players = Array<Player>
 export const usePlayersStore = defineStore('PlayersStore', {
   state: () => {
     return {
-      players: [],
+      players: [] as Players,
     }
   },
   actions: {
     setPlayers(players: Players): void {
-      this.players = players
+      this.players.splice(0, this.players.length, ...players)
     },
   },
 })