feat(ui): FRO-33 Trumpsuit Component

Added working animations and a blur effect which blurrs all the gamestuff behind it

src/components/Ingame.vue

@@ -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"
+              <GameInfoC v-if="(cachedGameInfo as GameInfo)?.currentRound"
-                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
+                         :first-card="(cachedGameInfo as GameInfo).currentTrick?.firstCard ?? null"
-                         :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
+                         :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>

src/components/ingame/TrumpC.vue

@@ -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;"