feat(ui): Vue

Added wiggle animation when you want to play a card that you aren't allowed to.

knockoutwhistweb/public/javascripts/events.js

@@ -59,8 +59,7 @@ const PlayerHandComponent = {
     },
     computed: {
         isHandInactive() {
-            console.log("isHandInactive got executed" + !canPlayCard)
+            //TODO: Needs implementation
-            return !canPlayCard
         }
     },
     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;
+
                 }
             )
         },