ci: bump version to v0.12.1

Force push of Janis ingame changes

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

CHANGELOG.md

@@ -83,3 +83,24 @@
 ### Features
 
 * FRO-23 Create Player Hand Component ([#15](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/15)) ([b20ec0a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/b20ec0a3638649155f2f9c5984014d75eb2ba618))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.8.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **api:** FRO-15 Join Game ([#16](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/16)) ([14e001c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/14e001cae67592c5ea15786905aa3574df9a9e6c))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.9.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-24 Create Played Cards Component ([#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/17)) ([21db939](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/21db939d342c72f5ad5fad3b4f873e902d1e5a0f))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.10.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **ui:** FRO-13 User Component ([#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/18)) ([f05f10e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/f05f10ea56b21f15cefbc76277ead5806eb1cf18))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.11.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-25 Create Game Info Component ([#19](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/19)) ([06f27d6](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/06f27d6813f625af25e734de3dcbcf07b10f3a1a))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.12.0...0.0.0) (2025-12-10)

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/User.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useUserInfo } from "@/composables/useUserInfo.ts";
+import { useRouter } from 'vue-router';
+import {useQuasar} from "quasar";
+import axios from "axios";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
+const $q = useQuasar()
+let userinfo = useUserInfo();
+const router = useRouter();
+
+const handleLogoff = () => {
+
+  axios.post(`${api}/logout`, {}, {withCredentials: true}).then((response) => {
+    const responseData = response.data
+    console.log("Response" + responseData.status)
+    $q.notify({
+      message: `You successfully logged out!`,
+      color: 'green-6',
+      icon: 'check_circle',
+      position: 'top'
+    });
+    router.push({ name: 'login' });
+  }).catch((err) => {
+    console.log("ERROR:" + err)
+    $q.notify({
+      message: `Something went wrong`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    });
+  })
+
+}
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-md">
+
+    <div
+      v-if="userinfo.username"
+      class="text-body1 text-weight-medium row items-center q-gutter-x-sm cursor-pointer relative-position"
+    >
+      <div id="user-menu-target" class="row items-center q-gutter-x-sm" style="min-width: 150px">
+        <q-icon name="account_circle" size="md" />
+        <span>{{ userinfo.username }}</span>
+        <q-icon name="arrow_drop_down" size="sm" />
+      </div>
+
+      <q-menu
+        target="#user-menu-target"
+        anchor="bottom right"
+        self="top right"
+      >
+        <q-list style="max-width: 150px" class="bg-dark">
+          <q-item
+            clickable
+            v-close-popup
+            @click="handleLogoff"
+            class="text-negative"
+          >
+            <q-item-section avatar>
+              <q-icon name="logout" color="negative" />
+            </q-item-section>
+            <q-item-section>Log Off</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div v-else class="text-caption text-grey-4">
+      Not Logged In
+    </div>
+
+  </div>
+</template>
+<style scoped>
+#user-menu-target:hover {
+  opacity: 0.8;
+}
+</style>

src/components/ingame/GameInfoC.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type {Card} from "@/types/GameSubTypes.ts";
+import {computed, toRefs} from "vue";
+
+const props = defineProps<{
+  trumpsuit: Card
+  firstCard: Card | null
+}>()
+const {trumpsuit, firstCard} = toRefs(props)
+
+
+
+const trumpName = computed(() => {
+  switch (trumpsuit.value.path.charAt(trumpsuit.value.path.length - 1)) {
+    case 'S':
+      return 'Spades'
+    case 'H':
+      return 'Hearts'
+    case 'D':
+      return 'Diamonds'
+    case 'C':
+      return 'Clubs'
+    default:
+      return 'Unknown'
+  }
+})
+
+</script>
+
+<template>
+  <div>
+    <div class="q-mb-sm">
+      <div class="text-h6 q-mb-xs q-font-medium">Trumpsuit</div>
+      <div id="trumpsuit" class="text-h5 text-primary">{{ trumpName }}</div>
+    </div>
+
+    <div class="q-mt-md">
+      <div class="text-subtitle1 q-mb-xs q-font-medium">First Card</div>
+      <div id="first-card-container" class="q-pa-sm bg-grey-2 rounded shadow-2"
+           style="display:inline-block;">
+        <q-img v-if="firstCard" :src="firstCard.path" alt="First Card" class="firstbox"
+               style="width: 80px; border-radius: 6px;"/>
+        <div v-else class="q-pa-sm"
+             style="width: 80px; height: 120px; display:flex; align-items:center; justify-content:center; border-radius:6px; background: #ffffff; color: #666;">
+          No image
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.firstbox {
+  width: 80px;
+  border-radius: 6px;
+}
+</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) {
+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>

src/components/ingame/PlayedCardsC.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import {computed, defineProps, toRefs} from 'vue'
+import type {Trick} from "@/types/GameSubTypes.ts";
+const props = defineProps<{ trick: Trick }>()
+
+const {trick } = toRefs(props)
+
+const playedCards = computed(() => {
+  return [...trick.value.cards].map(card => {
+    return {
+      cardId: card[1].path,
+      player: card[0].name
+    }
+  })
+})
+
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+</script>
+
+<template>
+  <div class="row items-center justify-center q-gutter-sm" id="trick-cards-content">
+    <div v-for="(play, index) in playedCards" :key="index" class="col-auto">
+      <q-card flat class="bg-transparent trick-card" style="width: 7rem; backdrop-filter: blur(4px);">
+        <q-card-section class="q-pa-sm q-pb-xs">
+          <q-img :src="getCardImagePath(play.cardId)" alt="card" style="border-radius: 6px; width:100%" />
+        </q-card-section>
+        <q-card-section class="q-pa-sm q-pt-xs text-center bg-transparent">
+          <div class="text-subtitle2 text-grey-7">{{ play.player }}</div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.trick-card {
+  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
+}
+</style>

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 };
+});

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 };
 });

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
   };
 }

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);
+        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;

src/types/GameSubTypes.ts

@@ -34,7 +34,7 @@ type Round = {
 }
 
 type Trick = {
-  cards: { [player: string]: Card }
+  cards: Map<Player, Card>
   firstCard: Card | null
   winner: Player | null
 }

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>

src/views/JoinGameView.vue

@@ -2,27 +2,37 @@
 import {ref} from "vue";
 import { useRouter } from 'vue-router';
 import {useQuasar} from "quasar";
+import axios from "axios";
 const router = useRouter();
 const lobbyCode = ref('');
 const isLoading = ref(false);
 const $q = useQuasar();
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 const startGameQuasar = async() => {
   if (!lobbyCode.value) {
     $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
     return;
   }
   isLoading.value = true;
-  //TODO: Implement Logic to Start the Game and Redirect to Ingame
+  axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
-  await delay(3000)
+    const responseData = response.data
-  isLoading.value = false;
     $q.notify({
       message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
       color: 'green-6',
       icon: 'check_circle',
       position: 'top'
     });
-  router.push({ name: 'mainmenu'});
+    router.push("/lobby")
+  }).catch(() => {
+    $q.notify({
+      message: `Lobby "${lobbyCode.value}" nicht gefunden`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    })
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </script>
 

src/views/MainMenuView.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
+import UserStatusArea from '../components/User.vue'
 </script>
 
 <template>
   <q-layout view="hHh lpR fFf" class="font-roboto">
-    <q-page-container>
+    <q-header elevated class="bg-dark text-white">
-      <q-page class="flex justify-start items-center column">
+      <q-toolbar>
+        <q-toolbar-title class="q-ml-md">
+        </q-toolbar-title>
 
-        <header class="text-center q-mb-xl">
+        <UserStatusArea />
-          <h1 class="game-title text-white q-my-none">
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <q-page class="flex justify-start items-center column q-pa-md"> <header class="text-center q-mb-xl q-mt-md"> <h1 class="game-title text-white q-my-none">
         KnockOutWhist
       </h1>
       </header>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=8
+MINOR=12
-PATCH=0
+PATCH=1