feat(ui): FRO-33 Trumpsuit Component

Added a nice icon removed logs

src/components/ingame/TrumpC.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts" >
-console.log("TRUMP WURDE AUFGERUFEN")
 import {useWebSocket} from "@/composables/useWebsocket.ts";
 import {useIngame} from "@/composables/useIngame.ts";
 import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
@@ -16,23 +15,12 @@ const trumpSuits = [
   "/images/cards/AC.png"
 ]
 const $q = useQuasar();
-$q.notify({
-  message: "Bin im Trump",
-  color: "negative",
-  position: "top"
-})
 function getCardImagePath(cardPath: string) {
   if (!cardPath) return ''
   if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
   return `/${cardPath}`
 }
 function selectTrump(trumpSuitIndex: number) {
-  // 1. Notify the user of the selection
-  $q.notify({
-    message: `You selected ${trumpSuitIndex} as the trump suit.`,
-    color: "positive",
-    position: "top"
-  });
   wb.sendAndWait("PickTrumpsuit", { suitIndex: trumpSuitIndex }).then(
     $q.notify({
       message: "You've successfully picked your trumpsuit",
@@ -51,18 +39,24 @@ function selectTrump(trumpSuitIndex: number) {
 </script>
 <template>
     <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">
+      <q-card-section class="bg-white text-dark text-center q-py-lg">
         <div class="text-h3 text-weight-bolder">
           {{ trumpInf.self?.name || "Loading Player..."}}
         </div>
       </q-card-section>
 
-      <q-separator />
+      <q-card-section class="bg-light-green-7 text-dark text-center q-py-lg">
+        <div class="text-h4 text-weight-bolder">
+          <q-icon name="emoji_events" class="q-mr-sm" />
+          You won the last round!
+          <q-icon name="emoji_events" class="q-mr-sm" />
+        </div>
+      </q-card-section>
 
       <q-card-section class="q-py-md text-center bg-dark">
-        <div class="text-h6 q-mb-sm">Trump Suits</div>
+        <div class="text-h6 q-mb-sm">Select a trumpsuit</div>
         <div class="row justify-center q-gutter-sm">
-          <q-card v-for="(path, index) in trumpSuits" :key="index" class="q-pa-xs cursor-pointer">
+          <q-card v-for="(path, index) in trumpSuits" :key="index" class="q-pa-xs cursor-pointer trump-card-choice">
             <q-img
               :src="getCardImagePath(path)"
               @click="selectTrump(index)"
@@ -73,7 +67,7 @@ function selectTrump(trumpSuitIndex: number) {
         </div>
       </q-card-section>
 
-      <q-separator />
+      <q-separator color="grey-7" style="opacity: 0.9;" />
 
       <q-card-section class="q-pa-md text-center bg-dark">
         <div class="text-h6 q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
@@ -98,7 +92,7 @@ function selectTrump(trumpSuitIndex: number) {
     style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
   >
     <q-card-section class="q-pa-lg">
-      <q-spinner-hourglass color="primary" size="3em" class="q-mb-md" />
+      <q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
       <div class="text-h5 text-grey-8">
         Waiting for {{ trumpInf.chooser?.name || 'the other player' }} to select the trump suit...
       </div>
@@ -131,4 +125,10 @@ function selectTrump(trumpSuitIndex: number) {
 .player-profile-card {
   max-width: 1000px;
 }
+.trump-card-choice {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+.trump-card-choice:hover {
+  transform: translateY(-8px);
+}
 </style>