<script setup lang="ts">
import type {useGame} from "@/composables/game.composable";
import {onMounted} from "vue";
import WinnerModal from "@/components/maumau/lobby/WinnerModal.vue";
import PrimaryButton from "@/components/button/PrimaryButton.vue";
import PlayerList from "@/components/maumau/lobby/PlayerList.vue";

const props = defineProps<{
  game: ReturnType<typeof useGame>,
}>();

onMounted(() => {
  document.title = "Mau - Waiting for host to start the game...";
});
</script>

<template>
  <div class="lobby">
    <h1 class="lobby-title">Waiting for host to start the game</h1>

    <PlayerList :players="game.players.value" @kick="game.onKick"/>

    <section>
      <h2>Game Settings</h2>
      <p>Not available yet...</p>
    </section>

    <PrimaryButton @click="game.startGame()">Start Game</PrimaryButton>
  </div>

  <WinnerModal :winner="props.game.winner.value" @close="game.clearWinner"/>
</template>

<style scoped lang="scss">
@import "@/scss/layout";

.lobby {
  @extend .container-fill-height;

  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  grid-gap: 1rem;
}
</style>