feat: Enhance game and lobby components with improved state management and user notifications

feat: Update routing and websocket configuration for game state management
feat(ui): FRO-34 Lobby
2025-12-14 15:08:13 +01:00 · 2025-12-11 11:01:42 +01:00 · 2025-12-11 11:01:39 +01:00
17 changed files with 148 additions and 4965 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -34,4 +34,3 @@ coverage

 # Vitest
 __screenshots__/
-/dev-dist/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -104,14 +104,3 @@

 * 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))
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,14 +2,18 @@
  "name": "knockoutwhistfrontend",
  "version": "0.0.0",
  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
  "scripts": {
-    "build": "run-p type-check \"build-only {@}\" --",
-    "lint": "eslint . --fix --cache",
-    "build-only": "vite build",
    "dev": "vite",
-    "format": "prettier --write --experimental-cli src/",
+    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
-    "type-check": "vue-tsc --build"
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
  },
  "dependencies": {
    "@quasar/extras": "^1.17.0",
@@ -18,7 +22,6 @@
    "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",
@@ -27,7 +30,7 @@
  "devDependencies": {
    "@quasar/vite-plugin": "^1.10.0",
    "@tsconfig/node24": "^24.0.3",
-    "@types/node": "^25.0.3",
+    "@types/node": "^24.10.1",
    "@vitejs/plugin-vue": "^6.0.2",
    "@vitejs/plugin-vue-jsx": "^5.1.2",
    "@vue/eslint-config-prettier": "^10.2.0",
@@ -41,12 +44,7 @@
    "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"
+  }
 }
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,5 @@
 <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>
--- a/src/components/Ingame.vue
+++ b/src/components/Ingame.vue
@@ -1,30 +1,15 @@
 <script setup lang="ts">

 import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo, TrumpInfo} from "@/types/GameTypes.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";
-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>
@@ -32,46 +17,34 @@ watch(
    <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!"/>
+              <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
            </div>

            <div class="text-center col-6">
-              <ScoreboardC v-if="(cachedGameInfo as GameInfo)?.currentRound" :current-round="(cachedGameInfo as GameInfo).currentRound!" />
+              <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data 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"/>
+              <GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
+                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
+                         :trumpsuit="(ig.data 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!" />
+                <PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data 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"/>
+              <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
            </div>
          </div>

@@ -104,17 +77,4 @@ watch(
  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>
--- a/src/components/ingame/HandC.vue
+++ b/src/components/ingame/HandC.vue
@@ -25,7 +25,8 @@ function triggerWiggle(index: number) {
 function handlePlayCard(index: number | null) {
  if (index === null) return

-  wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
+  wb.sendAndWait("PlayCard", { cardindex: index })
+    .catch((error) => {
      triggerWiggle(index)

      $q.notify({
@@ -36,14 +37,7 @@ function handlePlayCard(index: number | null) {

    })
 }
-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
 }
@@ -58,19 +52,13 @@ function getCardImagePath(cardPath: string) {
 <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 class="cards-row">
        <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>
      <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
      </div>
@@ -148,18 +136,4 @@ function getCardImagePath(cardPath: string) {
    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>
--- a/src/components/ingame/TrumpC.vue
+++ b/src/components/ingame/TrumpC.vue
@@ -1,134 +0,0 @@
-<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>
--- a/src/components/ingame/TurnC.vue
+++ b/src/components/ingame/TurnC.vue
@@ -5,8 +5,8 @@ import {useIngame} from "@/composables/useIngame.ts";
 import type {GameInfo} from "@/types/GameTypes.ts";

 const ig = useIngame()
-const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
-const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue.currentPlayer)
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
 </script>

 <template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,7 +8,6 @@ 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({
@@ -56,40 +55,12 @@ const router = createRouter({
      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(
@@ -99,9 +70,8 @@ router.beforeEach(async (to, from, next) => {
    );
    next();
  } catch (err) {
-      info.clearUserInfo();
-      next('/login');
-
+    info.clearUserInfo();
+    next('/login');
  }
 });

--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -33,7 +33,7 @@ ui.requestState().then(() => {

 <template>
  <div class="lobby-background">
-    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
+    <Ingame v-if="state === 'InGame'"/>
    <lobby-component v-if="state === 'Lobby'"/>
  </div>
 </template>
--- a/src/views/LobbyView.vue
+++ b/src/views/LobbyView.vue
@@ -1,53 +0,0 @@
-<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>
--- a/src/views/OfflineView.vue
+++ b/src/views/OfflineView.vue
@@ -1,212 +0,0 @@
-<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>
--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=14
-PATCH=0
+MINOR=12
+PATCH=1
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,54 +1,18 @@
 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: {
Author	SHA1	Message	Date
Janis	30798ce723	feat: Enhance game and lobby components with improved state management and user notifications	2025-12-14 15:08:13 +01:00
Janis	76258b3ca8	feat: Update routing and websocket configuration for game state management	2025-12-11 11:01:42 +01:00
LQ63	4463144d1b	feat(ui): FRO-34 Lobby Started Lobby Component	2025-12-11 11:01:39 +01:00