From ecb9d91991bac0d207b2b0c6dd6085c497753924 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Thu, 4 Dec 2025 01:53:25 +0100
Subject: [PATCH] feat(ui): Vue

Added wiggle animation when you want to play a card that you aren't allowed to.
---
 knockoutwhistweb/public/javascripts/events.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js
index 80eb8e6..7836265 100644
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -59,8 +59,7 @@ const PlayerHandComponent = {
     },
     computed: {
         isHandInactive() {
-            console.log("isHandInactive got executed" + !canPlayCard)
-            return !canPlayCard
+            //TODO: Needs implementation
         }
     },
     template: `
@@ -122,6 +121,8 @@ const PlayerHandComponent = {
                 easing: 'ease-in-out',
                 fill: 'forwards'
             };
+            const targetButton = this.$el.querySelector(`[data-card-id="${cardidx}"]`);
+            const cardElement = targetButton ? targetButton.closest('.handcard') : null;
 
             const payload = {
                 cardindex: cardidx.toString(),
@@ -138,8 +139,14 @@ const PlayerHandComponent = {
                 }
             ).catch(
                 (err) => {
+                    if (cardElement) {
+                        cardElement.animate(wiggleKeyframes, wiggleTiming);
+                    } else {
+                        console.warn(`Could not find DOM element for card index ${cardidx} to wiggle.`);
+                    }
                     this.isAwaitingResponse = false;
                     canPlayCard = true;
+
                 }
             )
         },