<script setup lang="ts">

import {useIngame} from "@/composables/useIngame.ts";
import type {GameInfo} from "@/types/GameTypes.ts";
import HandC from "@/components/ingame/HandC.vue";
import GameInfoC from "@/components/ingame/GameInfoC.vue";
import PlayedCardsC from "@/components/ingame/PlayedCardsC.vue";
import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
import TurnC from "@/components/ingame/TurnC.vue";

const ig = useIngame()

</script>

<template>
  <q-layout>
    <q-page-container>
      <q-page class="game-field-background vh-100 ingame-side-shadow">
        <div class="py-5 container-xxl">

          <div class="fit row wrap justify-center items-center content-start">
            <div class="mt-5 ml-4 self-start col-2">
              <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
            </div>

            <div class="text-center col-6">
              <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
            </div>


            <div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
              <GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
                         :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
            </div>
          </div>

          <div class="fit row wrap justify-center items-center content-start">
            <div class="mt-4 ml-4 col-3 justify-content-center">
              <div class="d-flex justify-content-center g-3 mb-5">
                <PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
              </div>
            </div>
          </div>
          <div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
            <div class="flex justify-center col-12">
              <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
            </div>
          </div>

        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style scoped>
.game-field-background {
  background-image: var(--body-background-color);
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
}
.ingame-side-shadow {
  box-shadow: 0 1px 15px 0 #000000
}
.bottom-div {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1400px;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 10px;
}
</style>
