Vue rewrite

src/components/maumau/game/Game.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Hand from "@/components/maumau/game/Hand.vue";
+import Deck from "@/components/maumau/game/Deck.vue";
+import type {useGame} from "@/composables/game.composable";
+import {ref, watch} from "vue";
+import CurrentTypeBackdrop from "@/components/maumau/game/CurrentTypeBackdrop.vue";
+import PlayerList from "@/components/maumau/game/PlayerList.vue";
+import TypeChoiceModal from "@/components/maumau/game/TypeChoiceModal.vue";
+
+const props = defineProps<{
+  game: ReturnType<typeof useGame>,
+}>();
+
+const gameState = ref(props.game.state.value);
+
+const setTurnTitle = () => {
+  if (gameState.value.CurrentPlayer.Id === gameState.value.Me.Id){
+    document.title = "Mau - Your turn!"
+  } else {
+    document.title = "Mau - " + gameState.value.CurrentPlayer.Name + "'s turn!"
+  }
+}
+
+setTurnTitle();
+
+watch(() => props.game.state.value, (newState) => {
+  gameState.value = newState;
+
+  setTurnTitle();
+});
+</script>
+
+<template>
+<div class="game">
+  <div class="game-container">
+    <PlayerList :current="gameState.CurrentPlayer" :players="gameState.Players" :me="gameState.Me" />
+    <Deck :currentCard="gameState.CurrentCard" @click="game.onGrabCard" />
+    <Hand :cards="gameState.Hand" @click="game.onPlayCard" />
+  </div>
+  <TypeChoiceModal :show="gameState.MyState === 'CHOOSE'" @choice="game.onCardTypeChoice" />
+  <CurrentTypeBackdrop :currentType="gameState.NextAllowedCardType ?? gameState.CurrentCard.type" />
+</div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.game {
+  @extend .container-fill;
+
+  position: relative;
+
+  &-container {
+    @extend .container-fill-height;
+
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    place-items: center;
+  }
+}
+</style>