Vue rewrite

src/components/maumau/lobby/Lobby.vue

@@ -0,0 +1,44 @@
+<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>