feat/FRO-31: Added ingame (#20)

Force push of Janis ingame changes

Co-authored-by: Janis <janis.e.20@gmx.de>
Reviewed-on: #20

src/components/Ingame.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
+import HandC from "@/components/ingame/HandC.vue";
+import GameInfoC from "@/components/ingame/GameInfoC.vue";
+import PlayedCardsC from "@/components/ingame/PlayedCardsC.vue";
+import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
+import TurnC from "@/components/ingame/TurnC.vue";
+
+const ig = useIngame()
+
+</script>
+
+<template>
+  <q-page class="game-field-background vh-100 ingame-side-shadow">
+    <div class="py-5 container-xxl">
+
+      <q-row class="q-gutter-md q-mx-md">
+        <q-col cols="4" class="mt-5 text-start">
+          <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
+        </q-col>
+
+        <q-col cols="4" class="text-center">
+          <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
+
+          <div class="d-flex justify-content-center g-3 mb-5">
+            <PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
+          </div>
+        </q-col>
+
+
+        <q-col cols="4" class="mt-5 text-end">
+          <GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
+                     :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
+                     :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
+        </q-col>
+      </q-row>
+
+      <q-row justify="center" class="q-gutter-sm mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
+        <q-col cols="12" class="flex justify-center">
+          <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self" :hand="(ig.data as GameInfo).hand!" :self="(ig.data as GameInfo).self"/>
+        </q-col>
+      </q-row>
+
+    </div>
+  </q-page>
+</template>
+
+<style scoped>
+.game-field-background {
+  background-image: var(--body-background-color);
+  background-repeat: no-repeat;
+  background-size: cover;
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+.ingame-side-shadow {
+  box-shadow: 0 1px 15px 0 #000000
+}
+</style>

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) {
-  if (idx === null) return
+function handlePlayCard(element: any, index: number | null) {
+  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>