From 39898ed03b02b69f4a2fe43c00c3193b0bfc8469 Mon Sep 17 00:00:00 2001
From: lq64 <lq@blackhole.local>
Date: Thu, 11 Dec 2025 00:15:50 +0100
Subject: [PATCH] feat/FRO-31: Added ingame (#20)

Force push of Janis ingame changes

Co-authored-by: Janis <janis.e.20@gmx.de>
Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/20
---
 src/components/Ingame.vue                     | 62 +++++++++++++++++++
 .../ingame/{GameInfo.vue => GameInfoC.vue}    |  0
 src/components/ingame/{Hand.vue => HandC.vue} | 39 +++++++++---
 .../{PlayedCards.vue => PlayedCardsC.vue}     |  0
 .../{Scoreboard.vue => ScoreboardC.vue}       |  0
 src/components/ingame/{Turn.vue => TurnC.vue} |  0
 src/composables/useIngame.ts                  | 29 +++++++++
 src/composables/useUserInfo.ts                | 23 ++++++-
 src/composables/useWebsocket.ts               |  6 ++
 src/services/ws.ts                            | 30 ++++++++-
 src/views/Game.vue                            | 33 ++++++++++
 11 files changed, 209 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Ingame.vue
 rename src/components/ingame/{GameInfo.vue => GameInfoC.vue} (100%)
 rename src/components/ingame/{Hand.vue => HandC.vue} (69%)
 rename src/components/ingame/{PlayedCards.vue => PlayedCardsC.vue} (100%)
 rename src/components/ingame/{Scoreboard.vue => ScoreboardC.vue} (100%)
 rename src/components/ingame/{Turn.vue => TurnC.vue} (100%)
 create mode 100644 src/composables/useIngame.ts
 create mode 100644 src/views/Game.vue

diff --git a/src/components/Ingame.vue b/src/components/Ingame.vue
new file mode 100644
index 0000000..5b139b2
--- /dev/null
+++ b/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>
diff --git a/src/components/ingame/GameInfo.vue b/src/components/ingame/GameInfoC.vue
similarity index 100%
rename from src/components/ingame/GameInfo.vue
rename to src/components/ingame/GameInfoC.vue
diff --git a/src/components/ingame/Hand.vue b/src/components/ingame/HandC.vue
similarity index 69%
rename from src/components/ingame/Hand.vue
rename to src/components/ingame/HandC.vue
index d2f4cea..1d13ce0 100644
--- a/src/components/ingame/Hand.vue
+++ b/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>
diff --git a/src/components/ingame/PlayedCards.vue b/src/components/ingame/PlayedCardsC.vue
similarity index 100%
rename from src/components/ingame/PlayedCards.vue
rename to src/components/ingame/PlayedCardsC.vue
diff --git a/src/components/ingame/Scoreboard.vue b/src/components/ingame/ScoreboardC.vue
similarity index 100%
rename from src/components/ingame/Scoreboard.vue
rename to src/components/ingame/ScoreboardC.vue
diff --git a/src/components/ingame/Turn.vue b/src/components/ingame/TurnC.vue
similarity index 100%
rename from src/components/ingame/Turn.vue
rename to src/components/ingame/TurnC.vue
diff --git a/src/composables/useIngame.ts b/src/composables/useIngame.ts
new file mode 100644
index 0000000..459d505
--- /dev/null
+++ b/src/composables/useIngame.ts
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import {ref, type Ref} from 'vue'
+import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo} from "@/types/GameTypes.ts";
+import axios from "axios";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
+
+export const useIngame = defineStore('ingame', () => {
+  const state: Ref<'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch' | null> = ref(null);
+  const data: Ref<GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo | null> = ref(null);
+
+  function setIngame(newState: 'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch', newData: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo) {
+    state.value = newState;
+    data.value = newData;
+  }
+
+  function requestGame(gameId: string) {
+    axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
+      setIngame(response.data.state, response.data.data);
+    });
+  }
+
+  function clearIngame() {
+    state.value = null;
+    data.value = null;
+  }
+
+  return { state, data, requestGame, setIngame, clearIngame };
+});
diff --git a/src/composables/useUserInfo.ts b/src/composables/useUserInfo.ts
index 220796d..781ba8a 100644
--- a/src/composables/useUserInfo.ts
+++ b/src/composables/useUserInfo.ts
@@ -1,19 +1,40 @@
 import { defineStore } from 'pinia'
 import {ref, type Ref} from 'vue'
+import axios from "axios";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 export const useUserInfo = defineStore('userInfo', () => {
   const username: Ref<string | null> = ref(null);
   const userId: Ref<number | null> = ref(null);
+  const gameId: Ref<string | null> = ref(null);
 
   function setUserInfo(name: string, id: number) {
     username.value = name;
     userId.value = id;
   }
 
+  function setGameId(id: string) {
+    gameId.value = id;
+  }
+
+  function requestState() {
+    axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
+      username.value = response.data.username;
+      if (response.data.ingame) {
+        gameId.value = response.data.gameId;
+      }
+    });
+  }
+
   function clearUserInfo() {
     username.value = null;
     userId.value = null;
   }
 
-  return { username, userId, setUserInfo, clearUserInfo };
+  function clearGameId() {
+    gameId.value = null;
+  }
+
+  return { username, userId, gameId, setUserInfo, requestState, clearUserInfo, setGameId, clearGameId };
 });
diff --git a/src/composables/useWebsocket.ts b/src/composables/useWebsocket.ts
index 8de496d..12d721a 100644
--- a/src/composables/useWebsocket.ts
+++ b/src/composables/useWebsocket.ts
@@ -6,8 +6,13 @@ import {
   sendEventAndWait,
   onEvent,
   isWebSocketConnected,
+  setDefaultHandler,
 } from "@/services/ws";
 
+function defaultEventHandler<T = any>(data: (data: T) => void) {
+  setDefaultHandler(data);
+}
+
 export function useWebSocket() {
   const isConnected = ref(isWebSocketConnected());
   const lastMessage = ref<any>(null);
@@ -51,5 +56,6 @@ export function useWebSocket() {
     sendAndWait: sendEventAndWait,
 
     useEvent,
+    defaultEventHandler
   };
 }
diff --git a/src/services/ws.ts b/src/services/ws.ts
index 220aa72..7b59a09 100644
--- a/src/services/ws.ts
+++ b/src/services/ws.ts
@@ -1,3 +1,6 @@
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo} from "@/types/GameTypes.ts";
+
 const api = window.__RUNTIME_CONFIG__?.API_URL;
 
 // ---------- Types ---------------------------------------------------------
@@ -6,6 +9,8 @@ export type ServerMessage<T = any> = {
   id?: string;
   event?: string;
   status?: "success" | "error";
+  state?: "Lobby" | "InGame" | "SelectTrump" | "TieBreak" | "FinishedMatch";
+  stateData?: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo;
   data?: T;
   error?: string;
 };
@@ -28,9 +33,12 @@ let ws: WebSocket | null = null;
 
 const pending = new Map<string, PendingEntry>();
 const handlers = new Map<string, HandlerFn>();
+const uState = useIngame();
 
 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
 
+let defaultHandler: HandlerFn | null = null;
+
 function uuid(): string {
   return crypto.randomUUID();
 }
@@ -73,7 +81,7 @@ function setupSocketHandlers(socket: WebSocket) {
       return;
     }
 
-    const { id, event, status, data } = msg;
+    const { id, event, state, stateData, status, data } = msg;
 
     // RPC response branch
     if (id && status) {
@@ -91,6 +99,10 @@ function setupSocketHandlers(socket: WebSocket) {
       return;
     }
 
+    if (state && stateData) {
+      uState.setIngame(state, stateData);
+    }
+
     // Server event → handler branch
     if (id && event) {
       const handler = handlers.get(event);
@@ -103,7 +115,17 @@ function setupSocketHandlers(socket: WebSocket) {
 
       if (!handler) {
         console.warn("[WS] No handler for event:", event);
-        reply("error", `No handler for '${event}'`);
+        if (defaultHandler) {
+          try {
+            await defaultHandler(data ?? {});
+            reply("success");
+          } catch (err) {
+            reply("error", (err as Error).message);
+
+          }
+        } else {
+          reply("error", `No handler for '${event}'`);
+        }
         return;
       }
 
@@ -232,5 +254,9 @@ export function onEvent(event: string, handler: HandlerFn) {
   handlers.set(event, handler);
 }
 
+export function setDefaultHandler(handler: HandlerFn) {
+  defaultHandler = handler;
+}
+
 export const isWebSocketConnected = () =>
   !!ws && ws.readyState === WebSocket.OPEN;
diff --git a/src/views/Game.vue b/src/views/Game.vue
new file mode 100644
index 0000000..ccc2934
--- /dev/null
+++ b/src/views/Game.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import Ingame from "@/components/Ingame.vue";
+import {useUserInfo} from "@/composables/useUserInfo.ts";
+import router from "@/router";
+
+const wb = useWebSocket()
+const ig = useIngame()
+const ui = useUserInfo()
+
+ui.requestState()
+if (ui.gameId) {
+  ig.requestGame(ui.gameId)
+  wb.connect()
+} else {
+  router.replace("/")
+}
+</script>
+
+<template>
+  <div class="lobby-background">
+    <Ingame v-if="ig.state === 'InGame'" />
+  </div>
+</template>
+
+<style scoped>
+.lobby-background {
+  background-color: var(--body-background-color);
+  width: 100%;
+  min-height:100vh;
+}
+</style>