KnockOutWhist/KnockOutWhist-Frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 35 Wiki Activity

feat/FRO-33: Added a nice Select Trumpsuit Component (#24)

Browse Source 
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>
This commit is contained in:
lq64
2025-12-18 09:44:46 +01:00
committed by Janis
parent ee8523d51a
commit 9feb4a93b8
4 changed files with 186 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Ingame.vue
View File

@@ -1,15 +1,30 @@
<script setup lang="ts">
import {useIngame} from "@/composables/useIngame.ts";
import type {GameInfo} from "@/types/GameTypes.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>
@@ -17,34 +32,46 @@ const ig = useIngame()
<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="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
<TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo 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!" />
<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="(ig.data as GameInfo)?.currentRound"
:first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
:trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
<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="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
<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="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
<HandC v-if="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo as GameInfo)?.self"/>
</div>
</div>
@@ -77,4 +104,17 @@ const ig = useIngame()
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>