feat: FRO-24 Create Played Cards Component

src/components/Ingame.vue

@@ -9,6 +9,7 @@ import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
 import TurnC from "@/components/ingame/TurnC.vue";
 
 const ig = useIngame()
+
 </script>
 
 <template>

src/components/ingame/HandC.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import {toRefs} from 'vue'
 import type {Hand, Player} from "@/types/GameSubTypes.ts";
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+
+const wb = useWebSocket()
 
 const props = defineProps<{
   hand: Hand
@@ -8,21 +11,37 @@ const props = defineProps<{
   self: Player | null
 }>()
 
-const emit = defineEmits<{
-  (e: 'play-card', idx: number): void
-  (e: 'skip-dog'): void
-}>()
-
 const { hand, isHandInactive, self } = toRefs(props)
 
-function handlePlayCard(idx: number | null) {
+function handlePlayCard(element: any, index: number | null) {
-  if (idx === null) return
+  if (index === null) return
   if (isHandInactive?.value) return
-  emit('play-card', idx)
+  isHandInactive.value = true
+
+  const wiggleKeyframes = [
+    { transform: 'translateX(0)' },
+    { transform: 'translateX(-5px)' },
+    { transform: 'translateX(5px)' },
+    { transform: 'translateX(-5px)' },
+    { transform: 'translateX(0)' }
+  ];
+
+  const wiggleTiming = {
+    duration: 400,
+    iterations: 1,
+    easing: 'ease-in-out',
+    fill: 'forwards'
+  };
+
+  wb.sendAndWait("PlayCard", { cardindex: index })
+    .catch(() => {
+      element.animate(wiggleKeyframes, wiggleTiming);
+      isHandInactive.value = false;
+    })
 }
 
 function handleSkipDogLife() {
-  emit('skip-dog')
+  //TODO: Add some animation or feedback for skipping turn
 }
 
 function getCardImagePath(cardPath: string) {
@@ -37,7 +56,7 @@ function getCardImagePath(cardPath: string) {
     <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
       <div class="cards-row">
         <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
-          <div class="card-btn" @click="handlePlayCard(card.idx)" aria-label="Play card">
+          <div class="card-btn" @click="handlePlayCard(this, card.idx)" aria-label="Play card">
             <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
           </div>
         </div>