lq64
9feb4a93b8
Added a nice working trumpsuit component with animations Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #24 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
121 lines
3.7 KiB
Vue
121 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
import {useIngame} from "@/composables/useIngame.ts";
|
|
import type {GameInfo, TrumpInfo} 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";
|
|
import TrumpC from "@/components/ingame/TrumpC.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {ref, toRefs, watch} from "vue";
|
|
|
|
const ig = useIngame()
|
|
const { state } = toRefs(ig)
|
|
|
|
const cachedGameInfo = ref<GameInfo | null>(null)
|
|
|
|
watch(
|
|
() => ig.data,
|
|
(newData) => {
|
|
if (state.value === 'InGame' && newData) {
|
|
cachedGameInfo.value = newData as GameInfo
|
|
}
|
|
},
|
|
{ deep: true, immediate: true }
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout>
|
|
<q-page-container>
|
|
<q-page class="game-field-background vh-100 ingame-side-shadow">
|
|
<div class="py-5 container-xxl">
|
|
<transition
|
|
appear
|
|
enter-active-class="animate__animated animate__fadeInDown"
|
|
leave-active-class="animate__animated animate__fadeOutDown"
|
|
>
|
|
<div
|
|
v-if="state === 'SelectTrump'"
|
|
class="full-overlay-blur"
|
|
style="z-index: 2000;"
|
|
>
|
|
<TrumpC />
|
|
</div>
|
|
</transition>
|
|
<div class="fit row wrap justify-center items-center content-start">
|
|
<div class="mt-5 ml-4 self-start col-2">
|
|
<TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>
|
|
</div>
|
|
|
|
<div class="text-center col-6">
|
|
<ScoreboardC v-if="(cachedGameInfo as GameInfo)?.currentRound" :current-round="(cachedGameInfo as GameInfo).currentRound!" />
|
|
</div>
|
|
|
|
|
|
<div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
|
|
<GameInfoC v-if="(cachedGameInfo as GameInfo)?.currentRound"
|
|
:first-card="(cachedGameInfo as GameInfo).currentTrick?.firstCard ?? null"
|
|
:trumpsuit="(cachedGameInfo 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="(cachedGameInfo as GameInfo)?.currentTrick" :trick="(cachedGameInfo 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="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo 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;
|
|
}
|
|
.full-overlay-blur {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
backdrop-filter: blur(5px);
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|