<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>