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

feat(ui): FRO-33 Trumpsuit Component

Browse Source 
Added working animations and a blur effect which blurrs all the gamestuff behind it
This commit is contained in:
LQ63
2025-12-16 15:22:41 +01:00
parent 6c69acf37e
commit 4b43e66140
2 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Ingame.vue
View File

@@ -9,10 +9,22 @@ 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 {toRefs} from "vue";
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>
@@ -20,34 +32,46 @@ const { state } = toRefs(ig)
<q-page-container>
<q-page class="game-field-background vh-100 ingame-side-shadow">
<div class="py-5 container-xxl">
<TrumpC v-if="state === 'SelectTrump'" />
<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>
@@ -80,4 +104,17 @@ const { state } = toRefs(ig)
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>

7
src/components/ingame/TrumpC.vue
View File

@@ -1,4 +1,4 @@
<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
<script setup lang="ts" >
console.log("TRUMP WURDE AUFGERUFEN")
import {useWebSocket} from "@/composables/useWebsocket.ts";
import {useIngame} from "@/composables/useIngame.ts";
@@ -49,9 +49,8 @@ function selectTrump(trumpSuitIndex: number) {
})
}
</script>
<template>
<q-card v-if="trumpInf.chooser?.name === trumpInf.self?.name" class="player-profile-card q-ma-md q-mx-auto" flat bordered>
<q-card v-if="trumpInf.chooser?.name === trumpInf.self?.name" class="player-profile-card" flat bordered>
<q-card-section class="bg-primary text-white text-center q-py-lg">
<div class="text-h3 text-weight-bolder">
{{ trumpInf.self?.name || "Loading Player..."}}
@@ -93,7 +92,7 @@ function selectTrump(trumpSuitIndex: number) {
</q-card>
<q-card
v-else
class="player-profile-card q-ma-md q-mx-auto text-center"
class="player-profile-card text-center"
flat
bordered
style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"