ci: bump version to v0.13.0

Added animations for mainmenu

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #22
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

CHANGELOG.md

@@ -68,3 +68,44 @@
 ### Features
 
 * FRO-20 Create scoreboard component ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/12)) ([97a9f85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/97a9f857586eb41feb056d7af0a5d8553d2bcf80))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.5.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-21 Create Turn Component ([#13](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/13)) ([ecb3851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/ecb38510de53b811eaaee2a39fc1ae423aed71c6))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.6.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **api:** FRO-14 Create Game ([#14](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/14)) ([df61db2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/df61db2730b5e6b2796cbe58d1d224f1d5d6f085))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.7.0...0.0.0) (2025-12-10)
+
+### 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)
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.12.1...0.0.0) (2025-12-11)
+
+### Features
+
+* **ui:** FRO-35 Animations ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/22)) ([d73b4f3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d73b4f396be89b4f8ce2a446afe47c604cfe8598))

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@quasar/extras": "^1.17.0",
         "@tsparticles/vue3": "~3.0.1",
+        "animate.css": "^4.1.1",
         "axios": "^1.13.2",
         "pinia": "^3.0.4",
         "quasar": "^2.18.6",
@@ -3272,6 +3273,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",

package.json

@@ -17,14 +17,15 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.17.0",
-    "quasar": "^2.18.6",
-    "vue": "^3.5.25",
-    "vue-router": "^4.6.3",
-    "tsparticles": "~3.9.1",
     "@tsparticles/vue3": "~3.0.1",
+    "animate.css": "^4.1.1",
     "axios": "^1.13.2",
+    "pinia": "^3.0.4",
+    "quasar": "^2.18.6",
+    "tsparticles": "~3.9.1",
+    "vue": "^3.5.25",
     "vue-axios": "^3.5.2",
-    "pinia": "^3.0.4"
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",

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

@@ -39,12 +39,20 @@ const navigateTo = (routeName: string) => {
 </script>
 
 <template>
-  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
+  <transition-group
+    appear
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__fadeOut"
 
+    tag="div"
+    class="row q-col-gutter-md justify-center"
+    style="width: 100%; max-width: 1000px;"
+  >
     <div
       v-for="(item, index) in menuItems"
       :key="index"
       class="col-12 col-sm-6 col-md-4"
+      :style="{ animationDuration: '1.6s', animationDelay: `${index * 0.3 + 0.5}s` }"
     >
       <q-card
         class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
@@ -68,7 +76,7 @@ const navigateTo = (routeName: string) => {
         </q-card-section>
       </q-card>
     </div>
-  </div>
+  </transition-group>
 </template>
 
 <style scoped>
@@ -77,7 +85,6 @@ const navigateTo = (routeName: string) => {
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Hover-Effekt für die Karten */
 .menu-card:hover {
   transform: translateY(-5px);
   background-color: #2c3e50 !important;

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

@@ -0,0 +1,129 @@
+<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
+  isHandInactive?: boolean
+  self: Player | null
+}>()
+
+const { hand, isHandInactive, self } = toRefs(props)
+
+function handlePlayCard(element: any, index: number | null) {
+  if (index === null) return
+  if (isHandInactive?.value) return
+  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() {
+  //TODO: Add some animation or feedback for skipping turn
+}
+
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+</script>
+
+<template>
+  <div class="bottom-div hand-container">
+    <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(this, card.idx)" aria-label="Play card">
+            <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
+          </div>
+        </div>
+      </div>
+      <div v-if="self?.dogLife" class="dog-actions">
+        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bottom-div {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+}
+.hand-container {
+  margin-left: 0;
+  margin-right: 0;
+}
+.ingame-cards-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.cards-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: center;
+}
+.handcard {
+  border-radius: 6px;
+}
+.card-btn {
+  padding: 0;
+  min-width: 0;
+  border-radius: 6px;
+}
+.inactive {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.dog-actions {
+  margin-top: 8px;
+}
+.handcard :hover {
+  box-shadow: 3px 3px 3px #000000;
+}
+.card {
+  width:120px;
+  border-radius:6px
+}
+
+@media (max-height: 500px) {
+  .card {
+    width: 80px;
+    border-radius: 4px;
+  }
+}
+</style>

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/components/ingame/TurnC.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {PlayerQueue} from "@/types/GameSubTypes.ts";
+
+const props = defineProps<{
+  queue: PlayerQueue
+}>()
+
+const safeNextPlayers = computed(() => props.queue.players ?? [])
+</script>
+
+<template>
+  <q-card flat class="turn-tracker-container q-pa-md">
+    <q-card-section>
+      <div class="text-subtitle2 q-mb-xs">Current Player</div>
+      <div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
+          props.queue.currentPlayer?.name
+        }}</div>
+
+      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
+        <div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
+        <q-list id="next-players-container" dense>
+          <q-item v-for="player in safeNextPlayers" :key="player.id">
+            <q-item-section>
+              <div class="text-body1 text-primary">{{ player.name }}</div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped>
+.turn-tracker-container {
+  max-width: 320px;
+}
+</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/main.ts

@@ -12,7 +12,7 @@ import { createPinia } from 'pinia'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import {useUserInfo} from "@/composables/useUserInfo.ts";
-
+import 'animate.css/animate.min.css';
 const app = createApp(App)
 const pinia = createPinia()
 

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

@@ -11,7 +11,7 @@ type Hand = {
 type Player = {
   id: string
   name: string
-  dogLife: string
+  dogLife: boolean
 }
 
 type PlayerQueue = {
@@ -34,7 +34,7 @@ type Round = {
 }
 
 type Trick = {
-  cards: { [player: string]: Card }
+  cards: Map<Player, Card>
   firstCard: Card | null
   winner: Player | null
 }

src/views/CreateGame.vue

@@ -2,7 +2,9 @@
 import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+import axios from "axios";
 
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 const lobbyName = ref('');
 const isPublic = ref(false);
 const playerAmount = ref(2);
@@ -16,16 +18,21 @@ const createGameQuasar = async () => {
     return;
   }
   isLoading.value = true;
-  //TODO: Implement Logic to Create the Game and Redirect to Lobby
-  await delay(3000)
-  isLoading.value = false;
+  axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
+    const responseData = response.data
+    console.log("Response" + responseData.status)
     $q.notify({
-      message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
+      message: `Lobby "${lobbyName.value}" erfolgreich erstellt mit gameId ${responseData.gameId}!`,
       color: 'green-6',
       icon: 'check_circle',
       position: 'top'
     });
-    router.push({ name: 'mainmenu'});
+    router.push("/lobby")
+  }).catch((err) => {
+    console.log("ERROR:" + err)
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </script>
 

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
-  await delay(3000)
-  isLoading.value = false;
+  axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
+    const responseData = response.data
     $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/LoginView.vue

@@ -80,7 +80,7 @@ const onSubmit = () => {
   loginError.value = ''
   axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
     uInfo.setUserInfo(response.data.user.username, response.data.user.id)
-    router.push("/")
+    router.push("/mainmenu")
   }).catch(() => {
     loginError.value = 'Invalid username or password'
   }).finally(() =>

src/views/MainMenuView.vue

@@ -1,17 +1,39 @@
 <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-page class="flex justify-start items-center column">
+    <q-header elevated class="bg-dark text-white">
+      <q-toolbar>
+        <q-toolbar-title class="q-ml-md">
+        </q-toolbar-title>
 
-        <header class="text-center q-mb-xl">
+        <UserStatusArea />
+      </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">
+            <transition
+              appear
+              enter-active-class="animate__fadeInDown"
+              leave-active-class="animate__fadeOutUp"
+            >
+              <div
+                class="animate__animated"
+                :style="{ animationDuration: '1.6s' }"
+              >
           <h1 class="game-title text-white q-my-none">
             KnockOutWhist
           </h1>
+          </div>
+        </transition>
       </header>
+
         <router-view></router-view>
       </q-page>
     </q-page-container>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=5
+MINOR=13
 PATCH=0