feat: Enhance win effects and animations in OfflineView component

Added a PWA for knockoutwhist including a special offline screen.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #25
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

.gitignore

@@ -34,3 +34,4 @@ coverage
 
 # Vitest
 __screenshots__/
+/dev-dist/

CHANGELOG.md

@@ -88,3 +88,30 @@
 ### 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))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.13.0...0.0.0) (2025-12-15)
+
+### Features
+
+* **ui:** FRO-34 Lobby ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/21)) ([bb6355d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/bb6355d9ed6745b4852a52040d880ee1dcc6d797))
+* **ui:** FRO-5 Animation Card Played ([#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/23)) ([70a44fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/70a44fd1ea119d43f875e6cfac56fb25747d8913))

env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare global {
-  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } }
+  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string; WEBSOCKET_URL?: string } }
 }
 
 export {};

package.json

@@ -2,34 +2,32 @@
   "name": "knockoutwhistfrontend",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
   "scripts": {
-    "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
     "lint": "eslint . --fix --cache",
-    "format": "prettier --write --experimental-cli src/"
+    "build-only": "vite build",
+    "dev": "vite",
+    "format": "prettier --write --experimental-cli src/",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --build"
   },
   "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",
+    "register-service-worker": "^1.7.2",
+    "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",
     "@tsconfig/node24": "^24.0.3",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -43,7 +41,12 @@
     "sass-embedded": "^1.93.3",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
+    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-vue-devtools": "^8.0.5",
     "vue-tsc": "^3.1.5"
-  }
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "type": "module"
 }

public/env.js

@@ -1,4 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
-  API_URL: "http://localhost:9000"
+  API_URL: "http://localhost:9000",
+  WEBSOCKET_API_URL: "ws://localhost:9000/websocket"
 };
 

public/env.template.js

@@ -1,4 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
-  API_URL: "${API_URL}"
+  API_URL: "${API_URL}",
+  WEBSOCKET_API_URL: "${WEBSOCKET_API_URL}"
 };
 

src/App.vue

@@ -1,5 +1,22 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { onMounted, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
+const handleOnlineStatusChange = () => {
+  if (navigator.onLine) {
+    if (route.name === 'offline') {
+      window.location.reload();
+    }
+  }
+};
+onMounted(() => {
+  window.addEventListener('online', handleOnlineStatusChange);
+});
+onUnmounted(() => {
+  window.removeEventListener('online', handleOnlineStatusChange);
+});
 </script>
 
 <template>

src/components/Ingame.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, TrumpInfo} 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";
+import TrumpC from "@/components/ingame/TrumpC.vue";
+import {storeToRefs} from "pinia";
+import {ref, toRefs, watch} from "vue";
+
+const ig = useIngame()
+const { state } = toRefs(ig)
+
+const cachedGameInfo = ref<GameInfo | null>(null)
+
+watch(
+  () => ig.data,
+  (newData) => {
+    if (state.value === 'InGame' && newData) {
+      cachedGameInfo.value = newData as GameInfo
+    }
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="game-field-background vh-100 ingame-side-shadow">
+        <div class="py-5 container-xxl">
+          <transition
+            appear
+            enter-active-class="animate__animated animate__fadeInDown"
+            leave-active-class="animate__animated animate__fadeOutDown"
+          >
+            <div
+              v-if="state === 'SelectTrump'"
+              class="full-overlay-blur"
+              style="z-index: 2000;"
+            >
+              <TrumpC />
+            </div>
+          </transition>
+          <div class="fit row wrap justify-center items-center content-start">
+            <div class="mt-5 ml-4 self-start col-2">
+              <TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>
+            </div>
+
+            <div class="text-center col-6">
+              <ScoreboardC v-if="(cachedGameInfo as GameInfo)?.currentRound" :current-round="(cachedGameInfo as GameInfo).currentRound!" />
+            </div>
+
+
+            <div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
+              <GameInfoC v-if="(cachedGameInfo as GameInfo)?.currentRound"
+                         :first-card="(cachedGameInfo as GameInfo).currentTrick?.firstCard ?? null"
+                         :trumpsuit="(cachedGameInfo as GameInfo).currentRound!.trumpSuit"/>
+            </div>
+          </div>
+
+          <div class="fit row wrap justify-center items-center content-start">
+            <div class="mt-4 ml-4 col-3 justify-content-center">
+              <div class="d-flex justify-content-center g-3 mb-5">
+                <PlayedCardsC v-if="(cachedGameInfo as GameInfo)?.currentTrick" :trick="(cachedGameInfo as GameInfo).currentTrick!" />
+              </div>
+            </div>
+          </div>
+          <div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
+            <div class="flex justify-center col-12">
+              <HandC v-if="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo as GameInfo)?.self"/>
+            </div>
+          </div>
+
+        </div>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</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
+}
+.bottom-div {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+}
+.full-overlay-blur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.2);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</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,55 @@
+<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.identifier.charAt(1) as string) {
+    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 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;"/>
+        <q-img v-else src="/images/cards/1B.png" alt="First Card" class="firstbox"
+               style="width: 80px; border-radius: 6px;"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.firstbox {
+  width: 80px;
+  border-radius: 6px;
+}
+</style>

src/components/ingame/Hand.vue

@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-import {toRefs} from 'vue'
-import type {Hand, Player} from "@/types/GameSubTypes.ts";
-
-const props = defineProps<{
-  hand: Hand
-  isHandInactive?: boolean
-  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
-  if (isHandInactive?.value) return
-  emit('play-card', idx)
-}
-
-function handleSkipDogLife() {
-  emit('skip-dog')
-}
-
-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(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/HandC.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
+import {useQuasar} from "quasar";
+import { ref } from 'vue';
+
+const wb = useWebSocket()
+const wi = useIngame()
+const $q = useQuasar();
+
+const wiggleIdx = ref<number | null>(null)
+let wiggleTimer: ReturnType<typeof setTimeout> | null = null
+
+function triggerWiggle(index: number) {
+  // clear previous timer if any
+  if (wiggleTimer) clearTimeout(wiggleTimer)
+  wiggleIdx.value = index
+  wiggleTimer = setTimeout(() => {
+    wiggleIdx.value = null
+    wiggleTimer = null
+  }, 700)
+}
+
+function handlePlayCard(index: number | null) {
+  if (index === null) return
+
+  wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
+      triggerWiggle(index)
+
+      $q.notify({
+        message: error.message,
+        color: "negative",
+        position: "top"
+      })
+
+    })
+}
+function onBeforeLeave(el: Element) {
+  const element = el as HTMLElement;
+  const { marginLeft, marginTop, width, height } = window.getComputedStyle(element);
+  element.style.left = `${element.offsetLeft - parseFloat(marginLeft)}px`;
+  element.style.top = `${element.offsetTop - parseFloat(marginTop)}px`;
+  element.style.width = width;
+  element.style.height = height;
+}
+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="hand-container">
+    <div id="card-slide" class="ingame-cards-slide">
+      <transition-group
+        tag="div"
+        class="cards-row"
+        name="card-move"
+        enter-active-class="animate__animated animate__fadeIn"
+        @before-leave="onBeforeLeave"
+        move-class="card-moving">
+        <div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
+          <div class="card-btn" aria-label="Play card">
+            <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
+          </div>
+        </div>
+      </transition-group>
+      <div v-if="(<GameInfo>wi.data)?.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
+}
+.wiggle {
+  animation: wiggle 700ms ease-in-out;
+}
+
+@keyframes wiggle {
+  0% { transform: translateY(0) rotate(0deg); }
+  15% { transform: translateY(-8px) rotate(-6deg); }
+  35% { transform: translateY(0) rotate(6deg); }
+  55% { transform: translateY(-4px) rotate(-3deg); }
+  75% { transform: translateY(0) rotate(2deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
+
+@media (max-height: 500px) {
+  .card {
+    width: 80px;
+    border-radius: 4px;
+  }
+}
+.card-moving {
+  transition: transform 0.5s ease;
+  transition-delay: 1s;
+}
+.card-move-leave-active {
+  position: absolute;
+  transition: all 0.5s ease;
+  pointer-events: none;
+}
+
+.card-move-leave-to {
+  opacity: 0;
+  transform: translateY(-400px);
+}
+</style>

src/components/ingame/PlayedCardsC.vue

@@ -0,0 +1,46 @@
+<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(() => {
+  if (!trick.value) return []
+  let result: { cardId: string, player: string }[] = []
+  for (const key in trick.value.cards) {
+    result.push({
+      cardId: trick.value.cards[key]?.path ?? '',
+      player: key
+    })
+  }
+  return result;
+})
+
+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/ScoreboardC.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type {Round} from "@/types/GameSubTypes.ts";
+import {computed, type ComputedRef} from "vue";
 
 interface PlayerScore { name: string; tricks: number }
 const props = defineProps<{ currentRound: Round }>()
-const playerScores: PlayerScore[] = props.currentRound.playersIn.map(player => {
+const playerScores: ComputedRef<PlayerScore[]> = computed(() => {
+  return props.currentRound.playersIn.map(player => {
     return {
       name: player.name,
       tricks: props.currentRound.trickList.filter(trick => {
@@ -11,6 +13,7 @@ const playerScores: PlayerScore[] = props.currentRound.playersIn.map(player => {
       }).length
     }
   })
+})
 </script>
 
 <template>

src/components/ingame/TrumpC.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts" >
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
+import {useQuasar} from "quasar";
+import { ref } from 'vue';
+
+const wb = useWebSocket()
+const wi = useIngame()
+const trumpInf = wi.data as TrumpInfo
+const trumpSuits = [
+  "/images/cards/AS.png",
+  "/images/cards/AH.png",
+  "/images/cards/AD.png",
+  "/images/cards/AC.png"
+]
+const $q = useQuasar();
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+function selectTrump(trumpSuitIndex: number) {
+  wb.sendAndWait("PickTrumpsuit", { suitIndex: trumpSuitIndex }).then(
+    $q.notify({
+      message: "You've successfully picked your trumpsuit",
+      color: "positive",
+      position: "top"
+    })
+
+  ).catch((error) => {
+      $q.notify({
+        message: error.message,
+        color: "negative",
+        position: "top"
+      })
+    })
+}
+</script>
+<template>
+    <q-card v-if="trumpInf.chooser?.name === trumpInf.self?.name" class="player-profile-card" flat bordered>
+      <q-card-section class="bg-white text-dark text-center q-py-lg">
+        <div class="text-h3 text-weight-bolder">
+          {{ trumpInf.self?.name || "Loading Player..."}}
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-light-green-7 text-dark text-center q-py-lg">
+        <div class="text-h4 text-weight-bolder">
+          <q-icon name="emoji_events" class="q-mr-sm" />
+          You won the last round!
+          <q-icon name="emoji_events" class="q-mr-sm" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-py-md text-center bg-dark">
+        <div class="text-h6 q-mb-sm">Select a trumpsuit</div>
+        <div class="row justify-center q-gutter-sm">
+          <q-card v-for="(path, index) in trumpSuits" :key="index" class="q-pa-xs cursor-pointer trump-card-choice">
+            <q-img
+              :src="getCardImagePath(path)"
+              @click="selectTrump(index)"
+              :alt="path"
+              class="card"
+            />
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-separator color="grey-7" style="opacity: 0.9;" />
+
+      <q-card-section class="q-pa-md text-center bg-dark">
+        <div class="text-h6 q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
+        <div class="row wrap justify-center q-gutter-sm">
+
+          <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
+            <q-img
+              :src="getCardImagePath(card.path)"
+              :alt="card.identifier"
+              class="card"
+            />
+          </div>
+
+        </div>
+      </q-card-section>
+    </q-card>
+  <q-card
+    v-else
+    class="player-profile-card text-center"
+    flat
+    bordered
+    style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
+  >
+    <q-card-section class="q-pa-lg">
+      <q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
+      <div class="text-h5 text-grey-8">
+        Waiting for {{ trumpInf.chooser?.name || 'the other player' }} to select the trump suit...
+      </div>
+    </q-card-section>
+
+    <q-separator />
+    <q-card-section class="q-pa-md text-center bg-dark">
+      <div class="text-h6 text-white q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
+      <div class="row wrap justify-center q-gutter-sm">
+
+        <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
+          <q-img
+            :src="getCardImagePath(card.path)"
+            :alt="card.identifier"
+            class="card"
+          />
+        </div>
+
+      </div>
+    </q-card-section>
+
+  </q-card>
+</template>
+
+<style scoped>
+.card {
+  width:120px;
+  border-radius:6px
+}
+.player-profile-card {
+  max-width: 1000px;
+}
+.trump-card-choice {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+.trump-card-choice:hover {
+  transform: translateY(-8px);
+}
+</style>

src/components/ingame/TurnC.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import {computed, toRefs} from 'vue'
 import type {PlayerQueue} from "@/types/GameSubTypes.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
 
-const props = defineProps<{
+const ig = useIngame()
-  queue: PlayerQueue
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
-}>()
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
-
-const safeNextPlayers = computed(() => props.queue.players ?? [])
 </script>
 
 <template>
-  <q-card flat class="turn-tracker-container q-pa-md">
+  <q-card flat class="turn-tracker-container q-pa-md no-background">
     <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
+          currentPlayer?.name
         }}</div>
 
-      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
+      <div v-if="queue.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 v-for="player in queue" :key="player.id">
             <q-item-section>
               <div class="text-body1 text-primary">{{ player.name }}</div>
             </q-item-section>
@@ -35,4 +35,7 @@ const safeNextPlayers = computed(() => props.queue.players ?? [])
 .turn-tracker-container {
   max-width: 320px;
 }
+.no-background {
+  background: none !important;
+}
 </style>

src/components/lobby/LobbyComponent.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import type {User} from "@/types/GameSubTypes.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {LobbyInfo} from "@/types/GameTypes.ts";
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {computed} from "vue";
+import router from "@/router";
+import {useQuasar} from "quasar";
+
+const wb = useWebSocket()
+const ig = useIngame();
+const $q = useQuasar();
+
+const maxPlayers = computed(() => (<LobbyInfo>ig.data).maxPlayers);
+const isHost = computed(() => (<LobbyInfo>ig.data).self.host);
+const players = computed(() => {
+  return (<LobbyInfo>ig.data).users;
+})
+const lobbyName = computed(() => {
+  return `${ig.data?.gameId}`
+});
+
+const handleKickPlayer = (user: User) => {
+  if (isHost) {
+    wb.send("KickPlayer", {playerId: user.id})
+  }
+};
+
+const handleStartGame = () => {
+  if (isHost) {
+    wb.sendAndWait("StartGame", {})
+  }
+};
+
+const handleLeaveGame = (user: User) => {
+  wb.sendAndWait("LeaveGame", {user: user})
+};
+
+wb.useEvent("SessionClosed", () => {
+  $q.notify({
+    message: `You left the lobby.`,
+    color: "positive"
+  })
+  router.replace("/")
+})
+wb.useEvent("LeftEvent", () => {
+  $q.notify({
+    message: `You left the lobby.`,
+    color: "positive"
+  })
+  router.replace("/")
+})
+
+wb.useEvent("KickEvent", () => {
+  $q.notify({
+    message: `You were kicked from the lobby!`,
+    color: "amber"
+  })
+  router.replace("/")
+})
+const profileIcon = 'person';
+</script>
+
+<template>
+
+    <div class="row q-pa-md items-center">
+      <div class="col text-center text-h4 text-weight-medium">
+        Lobby Name: {{ lobbyName }} </div>
+      <q-btn
+        color="negative"
+        label="Exit"
+        @click="handleLeaveGame((<LobbyInfo>ig.data).self)"
+        class="q-ml-auto"
+      />
+    </div>
+
+    <div class="row q-pb-md">
+      <div class="col text-center text-subtitle1">
+        Players: {{ players.length }} / {{ maxPlayers }}
+      </div>
+    </div>
+
+    <div class="row justify-center items-center flex-grow-1 q-px-md">
+      <div class="col-12">
+        <div class="row justify-center q-gutter-md">
+          <div v-for="player in players" :key="player.id" class="col-auto">
+            <q-card class="bg-dark q-pa-md text-center" style="width: 250px;">
+
+              <q-avatar size="80px" color="primary" text-color="white" :icon="profileIcon" class="q-mb-sm" />
+
+              <q-card-section>
+                <div class="text-h6">
+                  {{ player.username }} <q-badge v-if="player.id === (<LobbyInfo>ig.data).self.id" color="orange" align="middle" class="q-ml-xs">
+                  (You)
+                </q-badge>
+                  <q-badge v-else-if="player.host" color="blue" align="middle" class="q-ml-xs">
+                    (Host)
+                  </q-badge>
+                </div>
+              </q-card-section>
+
+              <q-card-actions align="center" v-if="isHost">
+                <q-btn
+                  v-if="player.id !== (<LobbyInfo>ig.data).self.id"
+                  color="negative"
+                  label="Remove"
+                  @click="handleKickPlayer(player)"
+                  class="full-width"
+                />
+                <q-btn
+                  v-else
+                  color="negative"
+                  label="Remove (Cannot Kick Self)"
+                  disable
+                  class="full-width"
+                />
+              </q-card-actions>
+
+            </q-card>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row q-py-lg text-center">
+      <div class="col-12">
+        <template v-if="isHost">
+          <q-btn
+            color="positive"
+            label="Start Game"
+            size="lg"
+            @click="handleStartGame"
+          />
+        </template>
+        <template v-else>
+          <div class="text-h6 q-mb-sm">
+            Waiting for the host to start the game...
+          </div>
+          <q-spinner
+            color="primary"
+            size="3em"
+            :thickness="2"
+          />
+        </template>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+</style>

src/composables/useIngame.ts

@@ -0,0 +1,30 @@
+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";
+import {initWebSocket} from "@/services/ws.ts";
+
+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;
+  }
+
+  async function requestGame(gameId: string) {
+    await 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,42 @@
 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;
+  }
+
+  async function requestState() {
+    await axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
+      console.log("STATUS DATA:" + response.data.status + response.data.inGame)
+      username.value = response.data.username;
+      if (response.data.gameId) {
+        console.log("GAMEID:" + response.data.gameId)
+        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);
@@ -32,10 +37,12 @@ export function useWebSocket() {
     };
 
     onMounted(() => {
+      console.log("Registering event handler for " + event);
       onEvent(event, wrapped);
     });
 
     onBeforeUnmount(() => {
+      console.log("Unregistering event handler for " + event);
       onEvent(event, () => {});
     });
   }
@@ -51,5 +58,6 @@ export function useWebSocket() {
     sendAndWait: sendEventAndWait,
 
     useEvent,
+    defaultEventHandler
   };
 }

src/main.ts

@@ -12,11 +12,16 @@ 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';
+import {useIngame} from "@/composables/useIngame.ts";
+import {initWebSocket} from "@/services/ws.ts";
 
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
+const ui = useIngame();
+initWebSocket(ui);
 app.use(router)
 app.use(Quasar, {
   plugins: {

src/router/index.ts

@@ -7,14 +7,15 @@ import defaultMenu from "../components/DefaultMenu.vue"
 import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
 import rulesView from "../components/Rules.vue";
-
+import Game from "@/views/Game.vue";
+import OfflineView from "@/views/OfflineView.vue";
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/mainmenu/',
+      path: '/',
       component: MainMenuView,
       meta: { requiresAuth: true },
       children: [
@@ -50,11 +51,45 @@ const router = createRouter({
       component: LoginView,
       meta: { requiresAuth: false }
     },
+    {
+      path: '/game',
+      name: 'game',
+      component: Game,
+      meta: {requiresAuth: true }
+    },
+    {
+      path: '/offline',
+      name: 'offline',
+      component: OfflineView,
+      meta: {requiresAuth: false }
+    }
   ],
 })
 
 router.beforeEach(async (to, from, next) => {
   const info = useUserInfo();
+  const isOnline = navigator.onLine;
+  if (to.name === 'offline') {
+    if (isOnline) {
+
+      try {
+        const response = await axios.get(`${api}/userInfo`, { withCredentials: true });
+        info.setUserInfo(response.data.username, response.data.userId);
+
+        return next({ name: 'mainmenu' });
+
+      } catch (err) {
+        info.clearUserInfo();
+        return next('/login');
+      }
+    } else {
+      return next();
+    }
+  }
+  if (!isOnline) {
+    return next({ name: 'offline' });
+  }
+
   if (!to.meta.requiresAuth) return next();
   try {
     await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
@@ -66,6 +101,7 @@ router.beforeEach(async (to, from, next) => {
   } catch (err) {
       info.clearUserInfo();
       next('/login');
+
   }
 });
 

src/runtimeConfig.ts

@@ -2,13 +2,18 @@
 // Reads runtime configuration injected into window.__RUNTIME_CONFIG__ (created by env.js at container start)
 
 declare global {
-  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } }
+  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string; WEBSOCKET_URL?: string } }
 }
 
 const runtime = (globalThis as any).__RUNTIME_CONFIG__ || {};
 
 export const API_URL = runtime.API_URL || (import.meta.env.VITE_API_URL as string) || 'http://localhost:9000';
+export const WEBSOCKET_URL = runtime.API_URL || (import.meta.env.VITE_WEBSOCKET_URL as string) || 'http://localhost:9000';
 
 export function getApiUrl(): string {
   return API_URL;
 }
+
+export function getWebsocketUrl(): string {
+  return WEBSOCKET_URL;
+}

src/services/ws.ts

@@ -1,4 +1,8 @@
-const api = window.__RUNTIME_CONFIG__?.API_URL;
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo} from "@/types/GameTypes.ts";
+import router from "@/router";
+
+const api = "localhost:9000"
 
 // ---------- Types ---------------------------------------------------------
 
@@ -6,6 +10,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 +34,15 @@ let ws: WebSocket | null = null;
 
 const pending = new Map<string, PendingEntry>();
 const handlers = new Map<string, HandlerFn>();
+let uState: ReturnType<typeof useIngame> | null = null;
 
 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
 
+export function initWebSocket(ingameStore: ReturnType<typeof useIngame>) {
+  uState = ingameStore;
+}
+let defaultHandler: HandlerFn | null = null;
+
 function uuid(): string {
   return crypto.randomUUID();
 }
@@ -62,6 +74,10 @@ function stopHeartbeat() {
 }
 
 function setupSocketHandlers(socket: WebSocket) {
+  if (!uState) {
+    console.error("[WS] WebSocket module not initialized with Pinia store!");
+    return;
+  }
   socket.onmessage = async (raw) => {
     console.debug("[WS] MESSAGE:", raw.data);
 
@@ -73,7 +89,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 +107,14 @@ function setupSocketHandlers(socket: WebSocket) {
       return;
     }
 
+    if (state && stateData) {
+      console.debug("[WS] State change:", state, stateData);
+      if(uState) {
+        console.debug("[WS] State change cascade:", state, stateData);
+        uState.setIngame(state, stateData);
+      }
+    }
+
     // Server event → handler branch
     if (id && event) {
       const handler = handlers.get(event);
@@ -103,7 +127,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;
       }
 
@@ -133,7 +167,7 @@ function setupSocketHandlers(socket: WebSocket) {
     }
 
     // You redirect here — if you don’t want auto reconnect, keep as is.
-    location.href = "/mainmenu";
+    router.replace("/");
   };
 }
 
@@ -232,5 +266,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

@@ -16,7 +16,7 @@ type Player = {
 
 type PlayerQueue = {
   currentPlayer: Player | null
-  players: Player[]
+  queue: Player[]
 }
 
 type PodiumPlayer = {
@@ -34,7 +34,7 @@ type Round = {
 }
 
 type Trick = {
-  cards: { [player: string]: Card }
+  cards: { [key: string]: Card} | null
   firstCard: Card | null
   winner: Player | null
 }

src/views/CreateGame.vue

@@ -11,7 +11,6 @@ const playerAmount = ref(2);
 const $q = useQuasar();
 const isLoading = ref(false);
 const router = useRouter();
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 const createGameQuasar = async () => {
   if (!lobbyName.value) {
     $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
@@ -27,7 +26,7 @@ const createGameQuasar = async () => {
       icon: 'check_circle',
       position: 'top'
     });
-    router.push("/lobby")
+    router.replace("/game")
   }).catch((err) => {
     console.log("ERROR:" + err)
   }).finally(() =>

src/views/Game.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+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 LobbyComponent from "@/components/lobby/LobbyComponent.vue";
+import {storeToRefs} from "pinia";
+import {useQuasar} from "quasar";
+import router from "@/router";
+
+const wb = useWebSocket()
+const ig = useIngame()
+const { state } = storeToRefs(ig)
+const ui = useUserInfo()
+const $q = useQuasar();
+
+
+ui.requestState().then(() => {
+  if (ui.gameId == null) {
+    $q.notify({
+      message: "You're not in any game!",
+      color: "negative"
+
+    })
+    router.replace("/")
+  } else {
+    ig.requestGame(ui.gameId).then(() => {
+      wb.connect()
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="lobby-background">
+    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
+    <lobby-component v-if="state === 'Lobby'"/>
+  </div>
+</template>
+
+<style scoped>
+.lobby-background {
+  background-color: var(--body-background-color);
+  width: 100%;
+  min-height: 100vh;
+}
+</style>

src/views/JoinGameView.vue

@@ -22,7 +22,7 @@ const startGameQuasar = async() => {
       icon: 'check_circle',
       position: 'top'
     });
-    router.push("/lobby")
+    router.replace("/game")
   }).catch(() => {
     $q.notify({
       message: `Lobby "${lobbyCode.value}" nicht gefunden`,

src/views/LobbyView.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+import LobbyComponent from '../components/lobby/LobbyComponent.vue';
+import type {LobbyInfo} from "@/types/GameTypes.ts";
+import type {User} from "@/types/GameSubTypes.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import {sendEvent} from "@/services/ws.ts";
+
+const ig = useIngame()
+
+const lobbyInfo = computed<LobbyInfo | null>(() => {
+  if (ig.state === 'Lobby' && ig.data) {
+    return ig.data as LobbyInfo;
+  }
+  return null;
+});
+
+const handleKickPlayer = (user: User) => {
+  sendEvent("KickEvent", {
+    user: user
+  })
+};
+
+const handleStartGame = () => {
+  //TODO: Implement start game
+};
+
+const handleLeaveGame = (user: User) => {
+  sendEvent("LeftEvent",{
+    user: user
+    })
+};
+</script>
+
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="vh-100 column">
+        <lobby-component
+          v-if="lobbyInfo"
+          :lobbyInfo="lobbyInfo"
+          @kick-player="handleKickPlayer"
+          @start-game="handleStartGame"
+          @leave-game="handleLeaveGame"
+        />
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+
+</style>

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("/mainmenu")
+    router.push("/")
   }).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-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 />
+      </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>

src/views/OfflineView.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+type Symbol = '🍎' | '💎' | '🔔' | '🍒' | '🍋' | '⭐' | '❓';
+const symbols: Symbol[] = ['🍎', '💎', '🔔', '🍒', '🍋', '⭐']
+
+const reelStates = ref([
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false }
+])
+
+const globalSpinning = ref(false)
+const hasSpun = ref(false)
+const glowThird = ref(false)
+const winBlink = ref(false)
+const winFire = ref(false)
+let winEffectsTimer: number | undefined
+
+const isWinner = computed(() => {
+  const [r1, r2, r3] = reelStates.value;
+  return hasSpun.value && !globalSpinning.value &&
+    r1?.value !== '❓' && r1?.value === r2?.value && r2?.value === r3?.value
+})
+
+const getRandomSymbol = (): Symbol => symbols[Math.floor(Math.random() * symbols.length)]!
+
+const spin = (): void => {
+  if (globalSpinning.value) return;
+
+  globalSpinning.value = true;
+  hasSpun.value = false;
+  // Reset possible win effects
+  winBlink.value = false;
+  winFire.value = false;
+  if (winEffectsTimer) {
+    clearTimeout(winEffectsTimer);
+    winEffectsTimer = undefined;
+  }
+  reelStates.value.forEach((reel) => {
+    reel.isSpinning = true;
+    reel.value = getRandomSymbol();
+  });
+
+  const base0 = 1500;
+  const gap = 800;
+  const base1 = base0 + gap;
+  const base2 = base1 + gap;
+  setTimeout(() => {
+    reelStates.value[0].isSpinning = false;
+  }, base0);
+  setTimeout(() => {
+    reelStates.value[1].isSpinning = false;
+  }, base1);
+  setTimeout(() => {
+    const firstTwoMatch = reelStates.value[0].value === reelStates.value[1].value &&
+      reelStates.value[0].value !== '❓';
+    const extraDelay = firstTwoMatch ? 1000 : 0;
+
+    glowThird.value = firstTwoMatch;
+
+    setTimeout(() => {
+      reelStates.value[2].isSpinning = false;
+      glowThird.value = false;
+      globalSpinning.value = false;
+      hasSpun.value = true;
+
+      const allThreeMatch =
+        reelStates.value[0].value !== '❓' &&
+        reelStates.value[0].value === reelStates.value[1].value &&
+        reelStates.value[1].value === reelStates.value[2].value;
+      if (allThreeMatch) {
+        winFire.value = true;
+        winBlink.value = true;
+        winEffectsTimer = window.setTimeout(() => {
+          winFire.value = false;
+          winBlink.value = false;
+          winEffectsTimer = undefined;
+        }, 3000);
+      }
+    }, base2 - base1 + extraDelay);
+  }, base1);
+};
+</script>
+
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex flex-center">
+        <transition
+          appear
+          tag="div"
+          enter-active-class="animate__animated animate__fadeInDown"
+          leave-active-class="animate__animated animate__fadeOutUp"
+        >
+          <q-card class="slot-machine-card q-pa-lg text-center shadow-10">
+            <div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Drehmaschine</div>
+
+            <div class="row justify-center q-gutter-md q-mb-xl">
+              <div
+                v-for="(reel, index) in reelStates"
+                :key="index"
+                :class="['reel-container', 'shadow-2', (winFire || (glowThird && index === 2)) ? 'glow-fire' : '']"
+              >
+
+                <div v-if="reel.isSpinning" class="reel-strip">
+                  <div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
+                </div>
+
+                <div v-else :class="['text-h2', 'static-symbol', winBlink ? 'blink-win' : '']">{{ reel.value }}</div>
+
+              </div>
+            </div>
+
+            <div class="result-box q-mb-md" style="height: 40px;">
+              <div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div>
+              <div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div>
+              <div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div>
+            </div>
+
+            <q-btn
+              size="lg" color="light-green"
+              :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
+              :loading="globalSpinning"
+              @click="spin" class="full-width" rounded
+            />
+          </q-card>
+        </transition>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+.slot-machine-card { width: 100%; max-width: 400px; border: 4px solid #2c3e50; border-radius: 20px; }
+
+.reel-container {
+  background: white;
+  width: 80px;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 2px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reel-strip {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  animation: move-strip 0.3s linear infinite;
+  filter: blur(2px);
+}
+
+@keyframes move-strip {
+  0% { transform: translateY(-50%); }
+  100% { transform: translateY(0); }
+}
+
+.static-symbol {
+  animation: land 0.2s ease-out;
+}
+
+@keyframes land {
+  0% { transform: translateY(-40px); opacity: 0; }
+  70% { transform: translateY(10px); }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.animate-bounce { animation: bounce 0.5s infinite alternate; }
+@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.1); } }
+
+.glow-fire {
+  border-color: #ff9800;
+  box-shadow:
+    0 0 10px 2px rgba(255, 152, 0, 0.8),
+    0 0 18px 6px rgba(255, 87, 34, 0.5),
+    inset 0 0 8px 2px rgba(255, 193, 7, 0.4);
+  animation: fireGlow 900ms ease-in-out infinite alternate;
+}
+
+@keyframes fireGlow {
+  0% {
+    box-shadow:
+      0 0 6px 1px rgba(255, 152, 0, 0.6),
+      0 0 12px 3px rgba(255, 87, 34, 0.35),
+      inset 0 0 5px 1px rgba(255, 193, 7, 0.3);
+    transform: translateY(0) scale(1);
+  }
+  100% {
+    box-shadow:
+      0 0 14px 3px rgba(255, 152, 0, 1),
+      0 0 24px 8px rgba(255, 87, 34, 0.6),
+      inset 0 0 10px 3px rgba(255, 193, 7, 0.5);
+    transform: translateY(-1px) scale(1.02);
+  }
+}
+
+.blink-win {
+  animation: blinkWin 300ms steps(1, end) infinite;
+}
+
+@keyframes blinkWin {
+  0% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
+  50% { opacity: 0.2; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
+  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
+}
+</style>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=9
+MINOR=14
 PATCH=0

vite.config.ts

@@ -1,18 +1,54 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ template: { transformAssetUrls } }),
+    vue({
+      template: { transformAssetUrls }
+    }),
     vueJsx(),
     vueDevTools(),
     quasar(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        globDirectory: 'dist/',
+        globPatterns: [
+          '**/*.{js,css,html,ico,png,svg,webmanifest}',
+        ],
+      },
+
+      manifest: {
+        name: 'Knockout Whist PWA',
+        short_name: 'Whist PWA',
+        description: 'The Knockout Whist card game as a Progressive Web App.',
+        theme_color: '#4A4A4A',
+        background_color: '#ffffff',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'logo192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'logo512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true,
+        type: 'module',
+      }
+    })
   ],
   resolve: {
     alias: {