81 lines
2.6 KiB
Vue
81 lines
2.6 KiB
Vue
<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>
|