From 0d1df8a1a9c8bb7fb0f842a67dab88cc098faded Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Sun, 14 Dec 2025 23:09:54 +0100
Subject: [PATCH] feat(ui): Animation Card Played

Added a fade Up Out animation. Also added a sliding animation for the remaining cards
---
 src/components/ingame/HandC.vue | 41 +++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/ingame/HandC.vue b/src/components/ingame/HandC.vue
index 9a79b2d..18be7db 100644
--- a/src/components/ingame/HandC.vue
+++ b/src/components/ingame/HandC.vue
@@ -25,8 +25,9 @@ function triggerWiggle(index: number) {
 function handlePlayCard(index: number | null) {
   if (index === null) return
 
-  wb.sendAndWait("PlayCard", { cardindex: index })
-    .catch((error) => {
+  wb.sendAndWait("PlayCard", { cardindex: index }).then(
+
+  ).catch((error) => {
       triggerWiggle(index)
 
       $q.notify({
@@ -37,7 +38,19 @@ function handlePlayCard(index: number | null) {
 
     })
 }
+function onBeforeLeave(el: Element) {
+  const element = el as HTMLElement;
+  // 1. Get the current position relative to the container
+  const { marginLeft, marginTop, width, height } = window.getComputedStyle(element);
 
+  // 2. Explicitly set the geometry to freeze it in place
+  element.style.left = `${element.offsetLeft - parseFloat(marginLeft)}px`;
+  element.style.top = `${element.offsetTop - parseFloat(marginTop)}px`;
+
+  // 3. Keep the width/height fixed so it doesn't shrink when becoming absolute
+  element.style.width = width;
+  element.style.height = height;
+}
 function handleSkipDogLife() {
   //TODO: Add some animation or feedback for skipping turn
 }
@@ -52,13 +65,19 @@ function getCardImagePath(cardPath: string) {
 <template>
   <div class="hand-container">
     <div id="card-slide" class="ingame-cards-slide">
-      <div class="cards-row">
+      <transition-group
+        tag="div"
+        class="cards-row"
+        name="card-move"
+        enter-active-class="animate__animated animate__fadeIn"
+        @before-leave="onBeforeLeave"
+        move-class="card-moving">
         <div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
           <div class="card-btn" aria-label="Play card">
             <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
           </div>
         </div>
-      </div>
+      </transition-group>
       <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
         <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
       </div>
@@ -136,4 +155,18 @@ function getCardImagePath(cardPath: string) {
     border-radius: 4px;
   }
 }
+.card-moving {
+  transition: transform 0.5s ease;
+  transition-delay: 1s;
+}
+.card-move-leave-active {
+  position: absolute;
+  transition: all 0.5s ease;
+  pointer-events: none;
+}
+
+.card-move-leave-to {
+  opacity: 0;
+  transform: translateY(-400px);
+}
 </style>