knowyt/client/src/components/Lobby.vue

<template>
  <div class="lobby__container">
    <div class="lobby__message">
      {{ $t('waiting-for-gamemaster') }}
    </div>
    <div class="lobby__players-list">
      <PlayerList :show-score="false" :show-checkbox="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import useI18n from '@/composables/useI18n'

const { $t } = useI18n({
  'waiting-for-gamemaster': { en: 'waiting for gamemaster to start the game ...', de: 'warten, bis der/die Gamemaster:in das Spiel startet ...'},
})
</script>

<style lang="scss">
@import '~/assets/css/components';

.lobby {
  &__container {
    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>