61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<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> |