44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<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> |