<template>
  <div class="lobby__container">
    <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>

<script setup lang="ts">
import { usePlayersStore } from '@/stores/PlayersStore'
const players = usePlayersStore().players
</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>