feat(ui): FRO-34 Lobby

Started Lobby Component

.gitignore

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

CHANGELOG.md

@@ -103,76 +103,3 @@
 ### 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))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.14.0...0.0.0) (2026-01-06)
-
-### Features
-
-* Enhance win effects and animations in OfflineView component ([db5c70d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/db5c70d02a646b83ba6e4043e28fc0dc9f76fb04))
-* Enhance win effects and animations in OfflineView component ([8aa0738](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/8aa07388ac27fbb13270fde58b1594688ec44fe7))
-* Enhance win effects and animations in OfflineView component ([6b3eaf2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6b3eaf2c706b2ea479aa7ba508b05adb4bab2db4))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.15.0...0.0.0) (2026-01-06)
-
-### Features
-
-* Update Dockerfile for multi-platform support and add nginx configuration ([e972f1c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/e972f1c4321ec2633e2989dbdaa714774632c495))
-* Update Dockerfile for multi-platform support and add nginx configuration ([37b88a1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/37b88a108c71e20fc2caee950acd23cf2bb81190))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.0...0.0.0) (2026-01-06)
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.1...0.0.0) (2026-01-07)
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.2...0.0.0) (2026-01-07)
-
-### Features
-
-* Add caching headers for env.js in Nginx configuration ([93e5af7](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/93e5af7402edb9fb9662e37d9b2b8c48d250c36e))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.17.0...0.0.0) (2026-01-07)
-
-### Features
-
-* Add caching headers for env.js in Nginx configuration ([d8b3904](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d8b3904cbc8b08ed9522d7b9b4fa8af79bc75def))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.18.0...0.0.0) (2026-01-07)
-
-### Features
-
-* Update joinGame endpoint to accept gameId as a path parameter ([92a7bc0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/92a7bc05866b77053ebb1d074ad207be8348f9d6))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.19.0...0.0.0) (2026-01-07)
-
-### Features
-
-* Enhance user state management with polling and WebSocket connection handling ([02869ff](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/02869fff8b448cde73369679c9b38bc99fb771ff))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.20.0...0.0.0) (2026-01-07)
-
-### Features
-
-* Implement PlayDogCard functionality in user session and update Vue component ([058d232](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/058d232d2ba00f33b1e658fc8a793dcd59018fa4))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.21.0...0.0.0) (2026-01-07)
-
-### Features
-
-* Update LobbyComponent to use icons for player removal buttons ([c653746](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/c6537467f87d60aeece18f86f42c839d5437c18b))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.22.0...0.0.0) (2026-01-13)
-
-### Features
-
-* **ui:** Tie selection ([#26](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/26)) ([6c914b1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6c914b1421030897d47449087dd1694068e84436))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.23.0...0.0.0) (2026-01-20)
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.23.1...0.0.0) (2026-01-20)
-
-### Features
-
-* Update docker-entrypoint.sh and vite.config.ts for improved runtime handling and API navigation ([cd950e9](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/cd950e952117cebe0ec46a18fc5b2cf90b247766))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.24.0...0.0.0) (2026-01-22)
-
-### Features
-
-* **ui:** FRO-26: Tie Component ([#30](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/30)) ([9823af2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/9823af2a1cee6cc4063f6f55a8ab64ec63525e84))

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
+FROM node:lts-alpine3.23 AS builder
 
 WORKDIR /app
 
@@ -9,15 +9,13 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
+FROM nginx:stable-alpine AS production
 
 RUN apk add --no-cache gettext
 
 RUN rm -rf /usr/share/nginx/html/*
 COPY --from=builder /app/dist /usr/share/nginx/html
 
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
 COPY public/env.template.js /usr/share/nginx/html/env.template.js
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh

docker-entrypoint.sh

@@ -7,13 +7,13 @@ TARGET_PATH="/usr/share/nginx/html/env.js"
 
 if [ -f "$TEMPLATE_PATH" ]; then
   echo "Rendering runtime config from $TEMPLATE_PATH"
-  echo "Using environment variables:"
+  # export all variables for envsubst to access
-  printenv
+  # only substitute variables present in the template
-  echo "----"
   envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
 else
   echo "No runtime template found at $TEMPLATE_PATH, skipping"
 fi
 
+# Start nginx in foreground
 exec nginx -g 'daemon off;'
 

env.d.ts

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

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Knockout-Whist</title>
+    <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>

nginx.conf

@@ -1,22 +0,0 @@
-server {
-    listen       80;
-    server_name  localhost;
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    location /env.js {
-        root /usr/share/nginx/html;
-        default_type application/javascript;
-        expires -1;
-        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-    }
-
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-}

package.json

@@ -2,32 +2,34 @@
   "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",
-    "@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-router": "^4.6.3",
+    "tsparticles": "~3.9.1",
+    "@tsparticles/vue3": "~3.0.1",
+    "axios": "^1.13.2",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.6.3"
+    "pinia": "^3.0.4"
   },
   "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 +43,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"
 }

public/env.js

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

public/env.template.js

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

src/App.vue

@@ -1,61 +1,5 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { onMounted, onUnmounted, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useUserInfo } from "@/composables/useUserInfo";
-import {Dark } from "quasar";
-
-const route = useRoute();
-const router = useRouter();
-const info = useUserInfo();
-
-const handleOnlineStatusChange = () => {
-  if (navigator.onLine) {
-    if (route.name === 'offline') {
-      window.location.reload();
-    }
-  }
-};
-
-let interval: number | null = null;
-
-onMounted(async () => {
-  window.addEventListener('online', handleOnlineStatusChange);
-
-  // Initialize dark mode based on browser preference
-  Dark.set('auto');
-
-  // Immediately check user state on app load
-  if (navigator.onLine) {
-    await info.requestState();
-    if (!info.username && route.meta.requiresAuth) {
-      router.push({ name: '/' });
-    }
-  }
-
-  // Continuously check user state every 10 seconds
-  interval = window.setInterval(async () => {
-    if (navigator.onLine) {
-      await info.requestState();
-      if (!info.username && route.meta.requiresAuth) {
-        router.push({ name: '/' });
-      }
-    }
-  }, 10000);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('online', handleOnlineStatusChange);
-  if (interval) {
-    clearInterval(interval);
-  }
-});
-
-watch(() => info.gameId, (newGameId) => {
-  if (newGameId && route.name !== 'game') {
-    router.push({ name: 'game' });
-  }
-});
 </script>
 
 <template>

src/components/Ingame.vue

@@ -1,101 +1,50 @@
 <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";
-import TieC from "@/components/ingame/TieC.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>
 
+      <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>
 
-          <transition
+        <q-col cols="4" class="text-center">
-            appear
+          <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
-            enter-active-class="animate__animated animate__fadeInDown"
-            leave-active-class="animate__animated animate__fadeOutDown"
-          >
-            <div
-              v-if="state === 'TieBreak'"
-              class="full-overlay-blur"
-              style="z-index: 2000;"
-            >
-              <TieC />
-            </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!" />
+            <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"/>
-            </div>
           </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>
-    </q-page-container>
-  </q-layout>
 </template>
 
 <style scoped>
@@ -110,28 +59,4 @@ watch(
 .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

@@ -1,91 +1,55 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { useUserInfo } from '@/composables/useUserInfo';
-import { useQuasar } from 'quasar';
 
 const router = useRouter();
-const userInfo = useUserInfo();
-const $q = useQuasar();
-
 const menuItems = [
   {
     title: 'Create game',
     description: 'Create a new game and invite your friends to play with you.',
     icon: 'add_circle_outline',
     routeName: 'create-Game',
-    color: 'green-9',
+    color: 'green-9'
-    requiresAuth: true
   },
   {
     title: 'Spiel beitreten',
     description: 'Join a game by typing in the game identifier.',
     icon: 'login',
     routeName: 'join-Game',
-    color: 'blue-9',
+    color: 'blue-9'
-    requiresAuth: true
   },
   {
     title: 'Settings',
     description: 'This area is currently under construction.',
     icon: 'settings',
     routeName: 'settings',
-    color: 'grey-8',
+    color: 'grey-8'
-    requiresAuth: false
   },
   {
     title: 'Rules',
     description: 'Look at the rules to have a clear understanding for playing the game.',
     icon: 'settings',
-    routeName: 'rule-Game',
+    routeName: 'rules-Game',
-    color: 'grey-8',
+    color: 'grey-8'
-    requiresAuth: false
   }
 ];
 
-const navigateTo = (item: any) => {
+const navigateTo = (routeName: string) => {
-  if (item.requiresAuth && !userInfo.username) {
+  router.push({ name: routeName });
-    $q.dialog({
-      title: 'Authentication Required',
-      message: 'You need to be logged in to create or join a game. Would you like to log in or sign up?',
-      ok: {
-        label: 'Login',
-        color: 'primary'
-      },
-      cancel: {
-        label: 'Sign Up',
-        color: 'secondary'
-      }
-    }).onOk(() => {
-      router.push({ name: 'login' });
-    }).onCancel(() => {
-      router.push({ name: 'register' });
-    });
-  } else {
-    router.push({ name: item.routeName });
-  }
 };
 </script>
 
 <template>
-  <transition-group
+  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
-    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"
         v-ripple
-        @click="navigateTo(item)"
+        @click="navigateTo(item.routeName)"
       >
         <q-card-section class="row items-center no-wrap">
           <q-avatar
@@ -104,7 +68,7 @@ const navigateTo = (item: any) => {
         </q-card-section>
       </q-card>
     </div>
-  </transition-group>
+  </div>
 </template>
 
 <style scoped>
@@ -113,6 +77,7 @@ const navigateTo = (item: any) => {
   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

@@ -68,21 +68,8 @@ const handleLogoff = () => {
       </q-menu>
     </div>
 
-    <div v-else class="row items-center q-gutter-x-sm">
+    <div v-else class="text-caption text-grey-4">
-      <q-btn
+      Not Logged In
-        flat
-        color="white"
-        label="Login"
-        @click="router.push({ name: 'login' })"
-        size="sm"
-      />
-      <q-btn
-        outline
-        color="white"
-        label="Sign Up"
-        @click="router.push({ name: 'register' })"
-        size="sm"
-      />
     </div>
 
   </div>

src/components/ingame/GameInfoC.vue

@@ -11,7 +11,7 @@ const {trumpsuit, firstCard} = toRefs(props)
 
 
 const trumpName = computed(() => {
-  switch (trumpsuit.value.identifier.charAt(1) as string) {
+  switch (trumpsuit.value.path.charAt(trumpsuit.value.path.length - 1)) {
     case 'S':
       return 'Spades'
     case 'H':
@@ -36,12 +36,14 @@ const trumpName = computed(() => {
 
     <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"
+      <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;"/>
-        <q-img v-else src="/images/cards/1B.png" alt="First Card" class="firstbox"
+        <div v-else class="q-pa-sm"
-               style="width: 80px; border-radius: 6px;"/>
+             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>

src/components/ingame/HandC.vue

@@ -1,56 +1,47 @@
 <script lang="ts" setup>
+import {toRefs} from 'vue'
+import type {Hand, Player} from "@/types/GameSubTypes.ts";
 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)
+const props = defineProps<{
-let wiggleTimer: ReturnType<typeof setTimeout> | null = null
+  hand: Hand
+  isHandInactive?: boolean
+  self: Player | null
+}>()
 
-function triggerWiggle(index: number) {
+const { hand, isHandInactive, self } = toRefs(props)
-  // 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) {
+function handlePlayCard(element: any, index: number | null) {
   if (index === null) return
+  if (isHandInactive?.value) return
+  isHandInactive.value = true
 
-  wb.sendAndWait((<GameInfo>wi.data)?.self?.dogLife ? "PlayDogCard" : "PlayCard", { cardindex: index }).catch((error) => {
+  const wiggleKeyframes = [
-      triggerWiggle(index)
+    { transform: 'translateX(0)' },
-      $q.notify({
+    { transform: 'translateX(-5px)' },
-        message: error.message,
+    { transform: 'translateX(5px)' },
-        color: "negative",
+    { transform: 'translateX(-5px)' },
-        position: "top"
+    { 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 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() {
-  wb.sendAndWait("PlayDogCard", { cardindex: 'Skip' }).catch((error) => {
+  //TODO: Add some animation or feedback for skipping turn
-    $q.notify({
-      message: error.message,
-      color: "negative",
-      position: "top"
-    })
-  })
 }
 
 function getCardImagePath(cardPath: string) {
@@ -61,22 +52,16 @@ function getCardImagePath(cardPath: string) {
 </script>
 
 <template>
-  <div class="hand-container">
+  <div class="bottom-div hand-container">
-    <div id="card-slide" class="ingame-cards-slide">
+    <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
-      <transition-group
+      <div class="cards-row">
-        tag="div"
+        <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
-        class="cards-row"
+          <div class="card-btn" @click="handlePlayCard(this, card.idx)" aria-label="Play card">
-        name="card-move"
+            <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
-        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>
-      <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
+      <div v-if="self?.dogLife" class="dog-actions">
         <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
       </div>
     </div>
@@ -134,18 +119,6 @@ function getCardImagePath(cardPath: string) {
   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 {
@@ -153,18 +126,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>

src/components/ingame/PlayedCardsC.vue

@@ -6,15 +6,12 @@ const props = defineProps<{ trick: Trick }>()
 const {trick } = toRefs(props)
 
 const playedCards = computed(() => {
-  if (!trick.value) return []
+  return [...trick.value.cards].map(card => {
-  let result: { cardId: string, player: string }[] = []
+    return {
-  for (const key in trick.value.cards) {
+      cardId: card[1].path,
-    result.push({
+      player: card[0].name
-      cardId: trick.value.cards[key]?.path ?? '',
-      player: key
-    })
     }
-  return result;
+  })
 })
 
 function getCardImagePath(cardPath: string) {

src/components/ingame/ScoreboardC.vue

@@ -1,11 +1,9 @@
 <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: ComputedRef<PlayerScore[]> = computed(() => {
+const playerScores: PlayerScore[] = props.currentRound.playersIn.map(player => {
-  return props.currentRound.playersIn.map(player => {
   return {
     name: player.name,
     tricks: props.currentRound.trickList.filter(trick => {
@@ -13,7 +11,6 @@ const playerScores: ComputedRef<PlayerScore[]> = computed(() => {
     }).length
   }
 })
-})
 </script>
 
 <template>

src/components/ingame/TieC.vue

@@ -1,485 +0,0 @@
-<script setup lang="ts">
-import {useWebSocket} from "@/composables/useWebsocket.ts";
-import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo} from "@/types/GameTypes.ts";
-import {useQuasar} from "quasar";
-import { ref } from 'vue';
-import { computed, nextTick } from 'vue'
-
-const wb = useWebSocket()
-const wi = useIngame()
-const tieInf = computed(() => wi.data as TieInfo)
-const tieBlankCard = "/images/cards/1B.png"
-const $q = useQuasar();
-function getCardImagePath(cardPath: string) {
-  if (!cardPath) return ''
-  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
-  return `/${cardPath}`
-}
-
-function getPlayerName(playerId: string) {
-  return tieInf.value.tiedPlayers.find(p => p.id === playerId)?.name || 'Player';
-}
-const myRevealedCard = computed(() => {
-  const myId = tieInf.value.self?.id;
-
-  if (!myId || !tieInf.value.selectedCards) return null;
-
-  const card = tieInf.value.selectedCards[myId];
-
-  return card ? getCardImagePath(card.path) : null;
-});
-
-const isFlipping = ref(false);
-const showPickScreen = computed(() => {
-  const isMyTurn = tieInf.value.self?.id === tieInf.value.currentPlayer?.id;
-  return isFlipping.value || (isMyTurn && !showResultScreen.value);
-});
-
-const showResultScreen = computed(() => {
-  const allPicked = Object.keys(tieInf.value.selectedCards).length === tieInf.value.tiedPlayers.length;
-  return allPicked && !isFlipping.value;
-});
-
-
-function selectTie(tieIndex: number) {
-  isFlipping.value = true;
-  nextTick(() => {
-    wb.sendAndWait("PickTie", { cardIndex: tieIndex })
-      .then(() => {
-        console.log("Server accepted pick, starting animation...");
-        console.log("CARD SELECTED: " + Object.keys(tieInf.value.selectedCards).length)
-
-
-        $q.notify({
-          message: "Card revealed!",
-          color: "positive",
-          position: "top",
-          timeout: 1000
-        });
-
-        setTimeout(() => {
-          isFlipping.value = false;
-          model.value = null;
-        }, 2500);
-      })
-      .catch((error) => {
-        isFlipping.value = false;
-        console.error("Pick failed:", error);
-        $q.notify({
-          message: error.message || "Failed to pick card",
-          color: "negative",
-          position: "top"
-        });
-      });
-  });
-
-}
-const model = ref<number | null>(null)
-const options = computed(() => {
-  const list = []
-  const max = tieInf.value.highestAmount?.valueOf() || 0
-  for (let i = 1; i <= max; i++) {
-    list.push(i)
-  }
-  return list
-})
-
-</script>
-
-<template>
-  <transition
-    appear
-    enter-active-class="animate__animated animate__fadeInDown"
-    leave-active-class="animate__animated animate__fadeOutDown"
-    mode="out-in"
-  >
-  <q-card v-if="showPickScreen" class="game-container text-center overflow-hidden">
-
-    <div class="bg-glow"></div>
-
-    <q-card-section class="content-layer q-py-xl">
-      <div class="text-overline text-primary letter-spacing-2">Tie-Break Round</div>
-      <div class="text-h4 text-weight-bold text-white q-mb-xl text-uppercase tracking-widest">
-        {{ isFlipping ? 'Your Result' : (model ? `Selection: Card #${model}` : 'Pick Your Card') }}
-      </div>
-
-      <div class="card-fan-container q-mb-xl">
-        <div
-          v-for="n in options"
-          :key="n"
-          @click="!isFlipping && (model = n)"
-          v-show="model === null || model === n"
-          class="tie-card-wrapper"
-          :class="{ 'selected-card': model === n, 'is-flipping': isFlipping && model === n }"
-        >
-          <div class="card-inner">
-            <q-img
-              :src="(model === n && myRevealedCard) ? myRevealedCard : getCardImagePath(tieBlankCard)"
-              class="card-image shadow-24"
-              :class="{ 'animate-reveal': isFlipping && model === n }"
-            />
-
-            <div v-if="!isFlipping" class="card-number">
-              {{ n }}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="action-area" :class="{ 'visible': model !== null && !isFlipping }">
-        <div class="row q-gutter-md justify-center items-center">
-          <q-btn flat color="grey-4" label="Cancel" @click="model = null" />
-          <q-btn
-            label="Confirm Selection"
-            color="positive"
-            unelevated
-            @click="selectTie(model!)"
-            class="confirm-btn"
-          />
-        </div>
-      </div>
-
-      <div v-if="!model && !isFlipping" class="text-grey-6 text-italic q-mt-md">
-        Hover and click to select a card from the deck
-      </div>
-    </q-card-section>
-  </q-card>
-
-  <q-card v-else-if="!showResultScreen" class="game-container text-center overflow-hidden">
-    <q-card-section class="content-layer q-py-xl">
-      <div class="text-overline text-primary letter-spacing-2">Tie-Break Round</div>
-
-      <div class="column items-center">
-
-        <div class="revealed-row q-mb-lg">
-          <div
-            v-for="(card, playerId) in tieInf.selectedCards"
-            :key="playerId"
-            class="revealed-card-wrapper"
-          >
-            <div class="text-caption text-grey-5 q-mb-xs">{{ getPlayerName(playerId) }}</div>
-            <q-img :src="getCardImagePath(card.path)" class="card-image shadow-24" />
-          </div>
-        </div>
-
-        <div class="card-fan-container skeleton-fan">
-          <q-skeleton
-            v-for="n in options"
-            :key="n"
-            type="rect"
-            class="skeleton-card"
-          />
-        </div>
-
-        <div class="q-mt-xl">
-          <q-spinner-hourglass color="white" size="4em" />
-          <div class="text-subtitle1 text-grey-5 q-mt-sm italic">
-            Waiting for <span class="text-white">{{ tieInf.currentPlayer?.name }}</span> to pick a card...
-          </div>
-        </div>
-      </div>
-    </q-card-section>
-
-  </q-card>
-    <q-card v-else class="game-container tie-break-card text-center overflow-hidden">
-      <div class="absolute-full bg-gradient-dark opacity-80"></div>
-
-      <q-card-section class="content-layer q-py-xl">
-        <div class="column items-center q-mb-xl">
-          <q-icon
-            :name="(tieInf.winners?.length || 0) > 1 ? 'auto_renew' : 'workspace_premium'"
-            :color="(tieInf.winners?.length || 0) > 1 ? 'info' : 'warning'"
-            size="64px"
-            class="q-mb-sm"
-          />
-          <div class="text-h3 text-weight-bolder text-white text-uppercase tracking-widest">
-            {{ (tieInf.winners?.length || 0) > 1 ? 'Another Tie!' : 'Tie Broken' }}
-          </div>
-          <p class="text-subtitle1 text-grey-4">
-            {{ (tieInf.winners?.length || 0) > 1 ? 'The high cards matched. Draw again!' : 'We have a winner.' }}
-          </p>
-        </div>
-
-        <div class="row justify-center items-end q-gutter-lg">
-          <div
-            v-for="(card, playerId) in tieInf.selectedCards"
-            :key="playerId"
-            class="revealed-card-wrapper"
-            :class="{
-          'winner-glow': tieInf.winners?.map(player => player.id).includes(playerId),
-          'opacity-40': !tieInf.winners?.map(player => player.id).includes(playerId) && (tieInf.winners?.length || 0) > 0
-        }"
-          >
-            <div class="player-tag q-mb-md">
-              <div class="text-overline text-white">{{ getPlayerName(playerId) }}</div>
-              <q-badge
-                v-if="tieInf.winners?.map(player => player.id).includes(playerId)"
-                :color="tieInf.winners.length > 1 ? 'info' : 'positive'"
-                :label="tieInf.winners.length > 1 ? 'Still Tied' : 'Winner'"
-                rounded
-              />
-            </div>
-
-            <div class="card-stack">
-              <q-img
-                :src="getCardImagePath(card.path)"
-                class="card-image-reveal shadow-24"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="column items-center q-mt-lg">
-          <q-spinner-hourglass color="white" size="4em" />
-          <div class="text-subtitle1 text-white q-mt-sm italic">
-            Preparing trumpsuit selection...
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </transition>
-</template>
-
-<style scoped>
-.game-container {
-  max-width: 1400px;
-  width: 95vw;
-  margin: 0 auto;
-  background: #0f0f0f;
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 20px;
-  position: relative;
-}
-
-.bg-glow {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 600px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(25, 118, 210, 0.15) 0%, rgba(0,0,0,0) 70%);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.card-fan-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  padding: 60px 20px;
-  min-height: 300px;
-  perspective: 1000px;
-  gap: 40px 0;
-}
-
-.tie-card-wrapper {
-  position: relative;
-  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  margin-left: -35px;
-  z-index: 1;
-}
-
-.tie-card-wrapper:first-child { margin-left: 0; }
-
-.card-image {
-  width: 60px;
-  border-radius: 10px;
-  border: 1px solid rgba(255,255,255,0.1);
-}
-
-.tie-card-wrapper:hover {
-  transform: translateY(-40px) scale(1.1) rotate(2deg);
-  z-index: 50 !important;
-}
-
-.selected-card {
-  margin-left: 0 !important;
-  transform: scale(1.4) !important;
-  z-index: 100;
-}
-
-.selected-card .card-image {
-  border: 3px solid #1976d2;
-  box-shadow: 0 0 30px rgba(25, 118, 210, 0.5);
-}
-
-.card-number {
-  position: absolute;
-  bottom: -30px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-weight: 900;
-  font-size: 1.1rem;
-  color: #fff;
-}
-
-.confirm-btn {
-  padding: 12px 40px;
-  border-radius: 50px;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-.letter-spacing-2 { letter-spacing: 2px; }
-
-
-/* Hide action area when no model is selected */
-.action-area {
-  opacity: 0;
-  transform: translateY(20px);
-  transition: all 0.3s ease;
-}
-.action-area.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-.bg-glow.dimmed {
-  background: radial-gradient(circle, rgba(150, 150, 150, 0.05) 0%, rgba(0,0,0,0) 70%);
-}
-.tracking-widest {
-  letter-spacing: 0.2em;
-}
-
-@keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 0.2; }
-  50% { transform: scale(1.05); opacity: 0.5; }
-}
-.skeleton-fan {
-  opacity: 0.15;
-  perspective: 1000px;
-}
-
-.skeleton-card {
-  width: 60px;
-  height: 90px;
-  background: rgba(255, 255, 255, 0.1) !important;
-  margin-left: -35px; /* Matches your tie-card-wrapper overlap */
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.skeleton-card:first-child {
-  margin-left: 0;
-}
-/* Container for the cards that have been "pulled" higher */
-.revealed-row {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  gap: 20px;
-  min-height: 140px; /* Reserves space so the layout doesn't jump */
-  width: 100%;
-}
-
-.revealed-card-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: slideDownFade 0.4s ease-out;
-}
-
-/* Specific styling for the revealed card images */
-.revealed-card-wrapper .card-image {
-  width: 65px;
-  border-radius: 8px;
-  border: 2px solid var(--q-primary);
-}
-
-/* Keeping your original skeleton fan look */
-.skeleton-fan {
-  opacity: 0.15;
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.skeleton-card {
-  width: 60px;
-  height: 90px;
-  background: rgba(255, 255, 255, 0.1) !important;
-  margin-left: -35px;
-  border-radius: 10px;
-}
-
-.skeleton-card:first-child {
-  margin-left: 0;
-}
-
-@keyframes slideDownFade {
-  0% { opacity: 0; transform: translateY(-20px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-.card-inner {
-  perspective: 1000px;
-}
-
-/* The Reveal Animation */
-.animate-reveal {
-  animation: dramaticFlip 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  backface-visibility: hidden;
-  z-index: 1000;
-}
-
-@keyframes dramaticFlip {
-  0% {
-    transform: rotateY(0deg) scale(1);
-  }
-  40% {
-    /* Halfway: Card is vertical and lifted up */
-    transform: rotateY(90deg) scale(1.5) translateY(-30px);
-    filter: brightness(1.3);
-  }
-  100% {
-    /* Final: Card is flat again, showing the face */
-    transform: rotateY(0deg) scale(1.3) translateY(0);
-  }
-}
-
-/* Ensure the image isn't mirrored after the rotation logic */
-.animate-reveal :deep(img) {
-  backface-visibility: hidden;
-}
-
-/* Optional: Slight pulse while the button is waiting to be clicked */
-.selected-card:not(.is-flipping) {
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% { transform: scale(1.4); }
-  50% { transform: scale(1.45); box-shadow: 0 0 40px rgba(25, 118, 210, 0.6); }
-  100% { transform: scale(1.4); }
-}
-/* Add to previous styles */
-
-.winner-glow .card-image {
-  border-color: #31ccec; /* Default 'info' blue for ongoing ties */
-  transform: scale(1.05) translateY(-10px);
-  box-shadow: 0 10px 40px rgba(49, 204, 236, 0.4) !important;
-}
-
-/* If there is only one winner, change glow to Gold */
-.winner-glow:only-child .card-image,
-.tie-break-card .winner-glow:has(.bg-positive) .card-image {
-  border-color: #f2c037;
-  box-shadow: 0 10px 40px rgba(242, 192, 55, 0.5) !important;
-}
-
-.opacity-40 {
-  opacity: 0.4;
-  filter: grayscale(0.8);
-  transform: scale(0.9);
-  transition: all 0.5s ease;
-}
-
-.card-stack {
-  perspective: 1000px;
-}
-
-.card-image-reveal {
-  width: 130px;
-  border-radius: 10px;
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-</style>

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>

src/components/ingame/TurnC.vue

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

src/components/lobby/LobbyComponent.vue

@@ -1,63 +1,38 @@
 <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 type {User} from "@/types/GameSubTypes.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 props = defineProps<{
-const isHost = computed(() => (<LobbyInfo>ig.data).self.host);
+  lobbyInfo: LobbyInfo
-const players = computed(() => {
+}>()
-  return (<LobbyInfo>ig.data).users;
+const emit = defineEmits<{
-})
+  (e: 'kick-player', user: User): void;
-const lobbyName = computed(() => {
+  (e: 'start-game'): void;
-  return `${ig.data?.gameId}`
+  (e: 'leave-game', user: User): void;
-});
+}>();
+
+const isHost = props.lobbyInfo.self.host;
+
+const players = props.lobbyInfo.users;
+
+const lobbyName = `${props.lobbyInfo.gameId}`;
 
 const handleKickPlayer = (user: User) => {
   if (isHost) {
-    wb.send("KickPlayer", {playerId: user.id})
+    emit('kick-player', user);
   }
 };
 
 const handleStartGame = () => {
   if (isHost) {
-    wb.sendAndWait("StartGame", {})
+    emit('start-game');
   }
 };
 
 const handleLeaveGame = (user: User) => {
-  wb.sendAndWait("LeaveGame", {user: user})
+  emit('leave-game', 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>
 
@@ -69,14 +44,14 @@ const profileIcon = 'person';
       <q-btn
         color="negative"
         label="Exit"
-        @click="handleLeaveGame((<LobbyInfo>ig.data).self)"
+        @click="handleLeaveGame(props.lobbyInfo.self)"
         class="q-ml-auto"
       />
     </div>
 
     <div class="row q-pb-md">
       <div class="col text-center text-subtitle1">
-        Players: {{ players.length }} / {{ maxPlayers }}
+        Players: {{ players.length }} / {{ props.lobbyInfo.maxPlayers }}
       </div>
     </div>
 
@@ -90,7 +65,7 @@ const profileIcon = 'person';
 
               <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">
+                  {{ player.username }} <q-badge v-if="player.id === props.lobbyInfo.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">
@@ -101,16 +76,16 @@ const profileIcon = 'person';
 
               <q-card-actions align="center" v-if="isHost">
                 <q-btn
-                  v-if="player.id !== (<LobbyInfo>ig.data).self.id"
+                  v-if="player.id !== props.lobbyInfo.self.id"
                   color="negative"
-                  icon="sports_martial_arts"
+                  label="Remove"
-                  @click="handleKickPlayer(player)"
+                  @click="handleKickPlayer(props.lobbyInfo.self)"
                   class="full-width"
                 />
                 <q-btn
                   v-else
                   color="negative"
-                  icon="sports_martial_arts"
+                  label="Remove (Cannot Kick Self)"
                   disable
                   class="full-width"
                 />

src/composables/useIngame.ts

@@ -2,26 +2,20 @@ 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);
-  const isWsConnected: Ref<boolean> = ref(false);
 
   function setIngame(newState: 'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch', newData: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo) {
     state.value = newState;
     data.value = newData;
   }
 
-  function setWsConnected(connected: boolean) {
+  function requestGame(gameId: string) {
-    isWsConnected.value = connected;
+    axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
-  }
-
-  async function requestGame(gameId: string) {
-    await axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
       setIngame(response.data.state, response.data.data);
     });
   }
@@ -29,8 +23,7 @@ export const useIngame = defineStore('ingame', () => {
   function clearIngame() {
     state.value = null;
     data.value = null;
-    isWsConnected.value = false;
   }
 
-  return { state, data, isWsConnected, requestGame, setIngame, clearIngame, setWsConnected };
+  return { state, data, requestGame, setIngame, clearIngame };
 });

src/composables/useUserInfo.ts

@@ -18,24 +18,14 @@ export const useUserInfo = defineStore('userInfo', () => {
     gameId.value = id;
   }
 
-  async function requestState() {
+  function requestState() {
-    await axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
+    axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
       console.log("STATUS DATA:" + response.data.status + response.data.inGame)
-      if (response.data.status === 'authenticated') {
       username.value = response.data.username;
-        userId.value = response.data.userId;
+      if (response.data.ingame) {
-        if (response.data.gameId) {
-          console.log("GAMEID:" + response.data.gameId)
         gameId.value = response.data.gameId;
-        } else {
-          gameId.value = null;
       }
-      } else {
+    });
-        username.value = null;
-        userId.value = null;
-        gameId.value = null;
-      }
-    })
   }
 
   function clearUserInfo() {

src/composables/useWebsocket.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import {
   connectWebSocket,
   disconnectWebSocket,
@@ -8,7 +8,6 @@ import {
   isWebSocketConnected,
   setDefaultHandler,
 } from "@/services/ws";
-import { useIngame } from "@/composables/useIngame";
 
 function defaultEventHandler<T = any>(data: (data: T) => void) {
   setDefaultHandler(data);
@@ -17,28 +16,15 @@ function defaultEventHandler<T = any>(data: (data: T) => void) {
 export function useWebSocket() {
   const isConnected = ref(isWebSocketConnected());
   const lastMessage = ref<any>(null);
+
   const lastError = ref<string | null>(null);
 
-  // Get ingame store to sync connection state
-  const ig = useIngame();
-
-  // Watch the ingame store's connection state and keep this composable in sync
-  watch(() => ig.isWsConnected, (connected) => {
-    isConnected.value = connected;
-  });
-
-  // Also update this composable's state when connecting/disconnecting
-  const updateConnectionState = (connected: boolean) => {
-    isConnected.value = connected;
-  };
-
   async function safeConnect(url?: string) {
     return connectWebSocket(url)
       .then(() => {
-        updateConnectionState(true);
+        isConnected.value = true;
       })
       .catch((err) => {
-        updateConnectionState(false);
         lastError.value = err?.message ?? "Unknown WS error";
         throw err;
       });
@@ -51,12 +37,10 @@ export function useWebSocket() {
     };
 
     onMounted(() => {
-      console.log("Registering event handler for " + event);
       onEvent(event, wrapped);
     });
 
     onBeforeUnmount(() => {
-      console.log("Unregistering event handler for " + event);
       onEvent(event, () => {});
     });
   }

src/main.ts

@@ -5,15 +5,13 @@ import App from './App.vue'
 import router from './router'
 import Particles from "@tsparticles/vue3";
 import { loadFull } from "tsparticles";
-import {Quasar, Notify, QExpansionItem, Dialog, Dark} from 'quasar'
+import { Quasar, Notify, QExpansionItem } from 'quasar'
 import '@quasar/extras/material-icons/material-icons.css'
-import '@quasar/extras/bootstrap-icons/bootstrap-icons.css'
 import 'quasar/dist/quasar.css'
 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";
 
@@ -21,14 +19,15 @@ const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
-const ui = useIngame();
+const ingameStore = useIngame();
-initWebSocket(ui);
+initWebSocket(ingameStore)
 app.use(router)
 app.use(Quasar, {
   plugins: {
-    Notify,
+    Notify
-    Dialog,
+  },
-    Dark
+  components: {
+    QExpansionItem
   }
 })
 app.use(VueAxios, axios)

src/router/index.ts

@@ -1,7 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
-import RegisterView from '../views/RegisterView.vue'
-import UsernameSelectionView from '../views/UsernameSelectionView.vue'
 import MainMenuView from '../views/MainMenuView.vue'
 import createGameView from '../views/CreateGame.vue'
 import joinGameView from "@/views/JoinGameView.vue";
@@ -9,23 +7,23 @@ 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 LobbyView from "@/views/LobbyView.vue";
-import OfflineView from "@/views/OfflineView.vue";
+import GameView from "@/views/Game.vue"
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '/mainmenu/',
       component: MainMenuView,
-      meta: { requiresAuth: false },
+      meta: { requiresAuth: true },
       children: [
         {
           path: '',
           name: 'mainmenu',
           component: defaultMenu,
-          meta: { requiresAuth: false }
+          meta: { requiresAuth: true }
         },
         {
           path: 'create',
@@ -43,7 +41,7 @@ const router = createRouter({
           path: 'rules',
           name: 'rules-Game',
           component: rulesView,
-          meta: {requiresAuth: false }
+          meta: {requiresAuth: true }
         },
       ],
     },
@@ -54,72 +52,25 @@ const router = createRouter({
       meta: { requiresAuth: false }
     },
     {
-      path: '/register',
+      path: '/lobby',
-      name: 'register',
+      name: 'lobby',
-      component: RegisterView,
+      component: LobbyView,
-      meta: { requiresAuth: false }
-    },
-    {
-      path: '/select-username',
-      name: 'select-username',
-      component: UsernameSelectionView,
-      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 {
-        await info.requestState();
-        if (!info.username) {
-          info.clearUserInfo();
-          return next('/login');
-        }
-        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 info.requestState();
+    await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
-    if (!info.username) {
+      res => {
-      info.clearUserInfo();
+        info.setUserInfo(res.data.username, res.data.userId);
-      return next('/login');
-    }
-    if (info.gameId && to.name !== 'game') {
-      return next({ name: 'game' });
       }
+    );
     next();
   } catch (err) {
-    console.error("Routing Error", err);
     info.clearUserInfo();
     next('/login');
   }

src/runtimeConfig.ts

@@ -2,18 +2,13 @@
 // Reads runtime configuration injected into window.__RUNTIME_CONFIG__ (created by env.js at container start)
 
 declare global {
-  interface Window { __RUNTIME_CONFIG__?: { API_URL?: string; WEBSOCKET_URL?: string } }
+  interface Window { __RUNTIME_CONFIG__?: { API_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,8 +1,7 @@
 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"
+const api = window.__RUNTIME_CONFIG__?.API_URL;
 
 // ---------- Types ---------------------------------------------------------
 
@@ -108,9 +107,7 @@ function setupSocketHandlers(socket: WebSocket) {
     }
 
     if (state && stateData) {
-      console.debug("[WS] State change:", state, stateData);
       if(uState) {
-        console.debug("[WS] State change cascade:", state, stateData);
         uState.setIngame(state, stateData);
       }
     }
@@ -160,22 +157,18 @@ function setupSocketHandlers(socket: WebSocket) {
     stopHeartbeat();
     failAllPending("WebSocket closed");
 
-    if (uState) {
-      uState.setWsConnected(false);
-    }
-
     if (ev.wasClean) {
       console.log(`[WS] Closed cleanly: code=${ev.code} reason=${ev.reason}`);
     } else {
       console.warn("[WS] Connection died");
     }
+
+    // You redirect here — if you don’t want auto reconnect, keep as is.
+    location.href = "/mainmenu";
   };
 }
 
 export function connectWebSocket(url?: string): Promise<void> {
-  if (!url) {
-    url = window.__RUNTIME_CONFIG__?.WEBSOCKET_URL
-  }
   if (!url) {
     const loc = window.location;
     const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
@@ -192,9 +185,6 @@ export function connectWebSocket(url?: string): Promise<void> {
       const prevOnError = ws!.onerror;
       ws!.onopen = (ev) => {
         if (prevOnOpen) prevOnOpen.call(ws!, ev);
-        if (uState) {
-          uState.setWsConnected(true);
-        }
         resolve();
       };
       ws!.onerror = (err) => {
@@ -211,9 +201,6 @@ export function connectWebSocket(url?: string): Promise<void> {
   return new Promise((resolve, reject) => {
     ws!.onopen = () => {
       console.log("[WS] Connected");
-      if (uState) {
-        uState.setWsConnected(true);
-      }
       startHeartbeat();
       resolve();
     };
@@ -231,9 +218,6 @@ export function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
       ws.close(code, reason);
     } catch {}
     ws = null;
-    if (uState) {
-      uState.setWsConnected(false);
-    }
   }
 }
 

src/types/GameSubTypes.ts

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

src/types/GameTypes.ts

@@ -5,8 +5,7 @@ import type {
   PodiumPlayer,
   Round,
   Trick,
-  User,
+  User
-  Card
 } from "@/types/GameSubTypes.ts";
 
 
@@ -32,8 +31,6 @@ type TieInfo = {
   self: Player | null
   tiedPlayers: Player[]
   highestAmount: number
-  selectedCards: Record<string, Card>
-  winners: Player[] | null
 }
 
 type TrumpInfo = {

src/views/CreateGame.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import axios from "axios";
-import {useUserInfo} from "@/composables/useUserInfo";
 
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 const lobbyName = ref('');
@@ -12,14 +11,13 @@ const playerAmount = ref(2);
 const $q = useQuasar();
 const isLoading = ref(false);
 const router = useRouter();
-const info = useUserInfo();
 const createGameQuasar = async () => {
   if (!lobbyName.value) {
     $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
     return;
   }
   isLoading.value = true;
-  axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then(async (response) => {
+  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({
@@ -28,12 +26,12 @@ const createGameQuasar = async () => {
       icon: 'check_circle',
       position: 'top'
     });
-    await info.requestState();
+    router.push("/lobby")
-    router.replace("/game")
   }).catch((err) => {
     console.log("ERROR:" + err)
+  }).finally(() =>
     isLoading.value = false
-  })
+  )
 }
 </script>
 

src/views/Game.vue

@@ -1,49 +1,26 @@
-<script lang="ts" setup>
+<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 LobbyComponent from "@/components/lobby/LobbyComponent.vue";
-import {storeToRefs} from "pinia";
-import {useQuasar} from "quasar";
 import router from "@/router";
-import {ref, watch} from "vue";
 
 const wb = useWebSocket()
 const ig = useIngame()
-const { state } = storeToRefs(ig)
 const ui = useUserInfo()
-const $q = useQuasar();
 
-
+ui.requestState()
-ui.requestState().then(() => {
+if (ui.gameId) {
-  if (ui.gameId == null) {
+  ig.requestGame(ui.gameId)
-    $q.notify({
+  wb.connect()
-      message: "You're not in any game!",
-      color: "negative"
-    })
-    router.replace("/")
 } else {
-    ig.requestGame(ui.gameId).then(() => {
+  router.replace("/")
-      // Attempt to connect to WebSocket
-      wb.connect().catch((err) => {
-        console.error('[Game] Initial WebSocket connection failed:', err);
-        $q.notify({
-          message: 'Failed to connect to game server. Please try reconnecting.',
-          color: 'negative',
-          icon: 'error',
-          timeout: 5000
-        });
-      });
-    })
 }
-})
 </script>
 
 <template>
   <div class="lobby-background">
-    <Ingame v-if="state === 'InGame' || state === 'SelectTrump' || state === 'TieBreak'"/>
+    <Ingame v-if="ig.state === 'InGame'" />
-    <lobby-component v-if="state === 'Lobby'"/>
   </div>
 </template>
 

src/views/JoinGameView.vue

@@ -1,49 +1,28 @@
 <script setup lang="ts">
-import {ref, onUnmounted} from "vue";
+import {ref} from "vue";
 import { useRouter } from 'vue-router';
 import {useQuasar} from "quasar";
 import axios from "axios";
-import {useUserInfo} from "@/composables/useUserInfo";
 const router = useRouter();
-const info = useUserInfo();
 const lobbyCode = ref('');
 const isLoading = ref(false);
 const $q = useQuasar();
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
-
-let pollInterval: number | null = null;
-
-onUnmounted(() => {
-  if (pollInterval) {
-    clearInterval(pollInterval);
-  }
-});
-
 const startGameQuasar = async() => {
   if (!lobbyCode.value) {
     $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
     return;
   }
   isLoading.value = true;
-  axios.post(`${api}/joinGame/${lobbyCode.value.toString()}`, {}, {withCredentials: true}).then(() => {
+  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("/lobby")
-    // Start polling until gameId is set
-    pollInterval = window.setInterval(async () => {
-      await info.requestState();
-      if (info.gameId) {
-        if (pollInterval) {
-          clearInterval(pollInterval);
-          pollInterval = null;
-        }
-      }
-    }, 100);
-
   }).catch(() => {
     $q.notify({
       message: `Lobby "${lobbyCode.value}" nicht gefunden`,
@@ -51,8 +30,9 @@ const startGameQuasar = async() => {
       icon: 'cancel',
       position: 'top'
     })
+  }).finally(() =>
     isLoading.value = false
-  })
+  )
 }
 </script>
 

src/views/LoginView.vue

@@ -1,111 +1,59 @@
 <template>
-  <div class="login-container">
+  <div class="login-box q-col-gutter-sm">
-    <div class="login-box">
+    <div class="text-h3 text-center row">
-      <div class="logo-section">
+      <img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
-        <div class="logo-container">
-          <img src="/logo.png" alt="Logo" class="logo" />
-          <div class="logo-text">KnockOut Whist</div>
-        </div>
     </div>
+    <q-form @submit.prevent="onSubmit"
+            class="q-gutter-md row justify-center"
+            style="width: 100%">
 
-      <div class="content-section">
+      <div class="row q-col-gutter-sm" style="width: 100%">
-        <h1 class="title">Welcome Back</h1>
-
-        <q-form @submit.prevent="onSubmit" class="form-section">
         <q-input
-            v-model="username"
+          style="width: 100%"
-            label="Username"
           filled
-            color="primary"
+          dark
-            label-color="grey-6"
+          label-color="white"
+          color="white"
+          v-model="username"
+          label="Username *"
+
           :error="!!loginError"
           :error-message="loginError"
-            class="form-input"
+
           lazy-rules
           :rules="[ val => val && val.length > 0 || 'Username is required']"
-          >
+        />
-            <template v-slot:prepend>
+      </div>
-              <q-icon name="person" color="grey-6" />
-            </template>
-          </q-input>
 
+      <div class="row q-col-gutter-sm" style="width: 100%">
         <q-input
-            v-model="password"
+          style="width: 100%"
-            label="Password"
           filled
+          dark
           type="password"
-            color="primary"
+          label-color="white"
-            label-color="grey-6"
+          color="white"
+          v-model="password"
+          label="Password *"
           :error="!!loginError"
           :error-message="loginError"
-            class="form-input"
+
           lazy-rules
           :rules="[
             val => !!val || 'Password is required'
           ]"
-          >
-            <template v-slot:prepend>
-              <q-icon name="lock" color="grey-6" />
-            </template>
-          </q-input>
-
-          <div class="action-buttons">
-            <q-btn
-              type="submit"
-              label="Sign In"
-              color="primary"
-              class="submit-btn"
-              :loading="inProgress"
-              size="md"
-              rounded
         />
       </div>
+
+      <div class="row justify-center">
+        <q-btn type="submit" label="Login" push color="dark" />
+      </div>
     </q-form>
-
-        <div class="divider-section">
-          <div class="divider">
-            <span class="divider-text">Or continue with</span>
-          </div>
-        </div>
-
-        <div class="social-buttons">
-          <q-btn
-            @click="loginWithProvider('discord')"
-            class="social-btn discord-btn"
-            size="md"
-            rounded
-            icon="discord"
-            label="Discord"
-            />
-          <q-btn
-            @click="loginWithProvider('keycloak')"
-            class="social-btn keycloak-btn"
-            size="md"
-            rounded
-            icon="emoji_people"
-            label="Keycloak"
-            />
-        </div>
-
-        <div class="register-link">
-          <span class="register-text">Don't have an account?</span>
-          <q-btn
-            flat
-            color="primary"
-            label="Register"
-            @click="goToRegister"
-            class="register-btn"
-            size="md"
-            dense
-          />
-        </div>
-      </div>
   </div>
   <vue-particles
     id="particles-js"
     :options='options'
   />
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -132,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(() =>
@@ -140,14 +88,6 @@ const onSubmit = () => {
   )
 }
 
-const loginWithProvider = (provider: string) => {
-  window.location.href = `${api}/auth/${provider}`
-}
-
-const goToRegister = () => {
-  router.push('/register')
-}
-
 const options = {
   "particles": {
     "number": {
@@ -260,213 +200,19 @@ const options = {
 </script>
 
 <style scoped>
-.login-container {
+.login-box {
-  position: relative;
+  position: fixed;
-  display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  top: 50%;
-  padding: 2rem;
+  left: 50%;
-  box-sizing: border-box;
+  transform: translate(-50%, -50%);
-}
+  display: flex;
-
-.login-box {
   width: 100%;
   max-width: 420px;
-  height: 100%;
-  max-height: calc(100vh - 1rem);
-  background: var(--color-background-soft);
-  backdrop-filter: blur(20px);
-  border-radius: 24px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  z-index: 2;
-  border: 1px solid var(--color-border);
-  box-sizing: border-box;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
-}
-
-.logo-section {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  padding: 2rem;
-  text-align: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.logo {
-  height: 50px;
-  width: auto;
-  filter: brightness(0) invert(1);
-}
-
-.logo-text {
-  color: #ffffff;
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-.content-section {
-  padding: 1.5rem;
-}
-
-.title {
-  color: var(--color-heading);
-  font-size: 1.8rem;
-  font-weight: 700;
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.subtitle {
-  color: var(--color-text);
-  text-align: center;
-  margin-bottom: 2rem;
-  font-size: 0.95rem;
-  line-height: 1.5;
-  opacity: 0.8;
-}
-
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.form-input {
-  border-radius: 12px;
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.submit-btn {
-  width: 100%;
-  height: 48px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-}
-
-.divider-section {
-  margin: 2rem 0;
-}
-
-.divider {
-  position: relative;
-  text-align: center;
-}
-
-.divider::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: var(--color-border);
-}
-
-.divider-text {
-  background: var(--color-background-soft);
-  padding: 0 1rem;
-  color: var(--color-text);
-  font-size: 0.85rem;
-  position: relative;
-  opacity: 0.7;
-}
-
-.social-buttons {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.social-btn {
-  flex: 1;
-  height: 48px;
-  background: var(--color-background-mute);
-  border: 2px solid var(--color-border);
-  color: var(--color-heading);
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.social-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.discord-btn:hover {
-  border-color: #5865F2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.keycloak-btn:hover {
-  border-color: #0088CC;
-  background: rgba(0, 136, 204, 0.1);
-}
-
-
-.register-link {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.register-text {
-  color: var(--color-text);
-  font-size: 0.9rem;
-  opacity: 0.7;
-}
-
-.register-btn {
-  font-weight: 600;
-  text-transform: none;
-}
-
-#particles-js {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-@media (max-width: 600px) {
-  .login-box {
-    max-width: 100%;
-    border-radius: 16px;
-    max-height: calc(100vh - 1rem);
-  }
-
-  .content-section {
   padding: 1rem;
-  }
+  z-index: 2;
-
+  background-color: var(--color-background);
-  .title {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    font-size: 1.5rem;
-  }
-
-  .social-buttons {
-    flex-direction: column;
-  }
 }
 </style>

src/views/MainMenuView.vue

@@ -14,26 +14,10 @@ import UserStatusArea from '../components/User.vue'
     </q-header>
 
     <q-page-container>
-      <q-page class="flex justify-start items-center column q-pa-md">
+      <q-page class="flex justify-start items-center column q-pa-md"> <header class="text-center q-mb-xl q-mt-md"> <h1 class="game-title text-white q-my-none">
-
-
-          <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

@@ -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>

src/views/RegisterView.vue

@@ -1,516 +0,0 @@
-<template>
-  <div class="register-container">
-    <div class="register-box">
-      <div class="logo-section">
-        <div class="logo-container">
-          <img src="/logo.png" alt="Logo" class="logo" />
-          <div class="logo-text">KnockOut Whist</div>
-        </div>
-      </div>
-
-      <div class="content-section">
-        <h1 class="title">Create Account</h1>
-        <p class="subtitle">Join the ultimate card game experience</p>
-
-        <q-form @submit.prevent="onSubmit" class="form-section">
-          <q-input
-            v-model="username"
-            label="Username"
-            filled
-            color="primary"
-            label-color="grey-6"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-            class="form-input"
-            lazy-rules
-            :rules="[
-              val => !!val && val.trim().length > 0 || 'Username is required',
-              val => val && val.trim().length >= 3 || 'Username must be at least 3 characters',
-              val => val && val.trim().length <= 30 || 'Username must be less than 30 characters',
-              val => /^[a-zA-Z0-9_-]+$/.test(val) || 'Username can only contain letters, numbers, underscores, and hyphens'
-            ]"
-          >
-            <template v-slot:prepend>
-              <q-icon name="person" color="grey-6" />
-            </template>
-          </q-input>
-
-          <q-input
-            v-model="password"
-            label="Password"
-            filled
-            type="password"
-            color="primary"
-            label-color="grey-6"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-            class="form-input"
-            lazy-rules
-            :rules="[
-              val => !!val || 'Password is required',
-              val => val && val.length >= 6 || 'Password must be at least 6 characters'
-            ]"
-          >
-            <template v-slot:prepend>
-              <q-icon name="lock" color="grey-6" />
-            </template>
-          </q-input>
-
-          <q-input
-            v-model="confirmPassword"
-            label="Confirm Password"
-            filled
-            type="password"
-            color="primary"
-            label-color="grey-6"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-            class="form-input"
-            lazy-rules
-            :rules="[
-              val => !!val || 'Password confirmation is required',
-              val => val === password || 'Passwords do not match'
-            ]"
-          >
-            <template v-slot:prepend>
-              <q-icon name="lock_outline" color="grey-6" />
-            </template>
-          </q-input>
-
-          <div class="action-buttons">
-            <q-btn
-              type="submit"
-              label="Create Account"
-              color="primary"
-              class="submit-btn"
-              :loading="inProgress"
-              size="md"
-              rounded
-            />
-          </div>
-        </q-form>
-
-        <div class="divider-section">
-          <div class="divider">
-            <span class="divider-text">Or register with</span>
-          </div>
-        </div>
-
-        <div class="social-buttons">
-          <q-btn
-            @click="loginWithProvider('discord')"
-            class="social-btn discord-btn"
-            size="md"
-            rounded
-            icon="discord"
-            label="Discord"
-          />
-          <q-btn
-            @click="loginWithProvider('keycloak')"
-            class="social-btn keycloak-btn"
-            size="md"
-            rounded
-            icon="emoji_people"
-            label="Keycloak"
-          />
-        </div>
-
-        <div class="login-link">
-          <span class="login-text">Already have an account?</span>
-          <q-btn
-            flat
-            color="primary"
-            label="Login"
-            @click="goToLogin"
-            class="login-btn"
-            size="md"
-            dense
-          />
-        </div>
-      </div>
-    </div>
-    <vue-particles
-      id="particles-js"
-      :options='options'
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useQuasar } from 'quasar'
-import { ref } from 'vue'
-import axios from "axios"
-import router from "@/router"
-
-const api = window?.__RUNTIME_CONFIG__?.API_URL
-const $q = useQuasar()
-
-const username = ref('')
-const password = ref('')
-const confirmPassword = ref('')
-const inProgress = ref(false)
-const errorMessage = ref('')
-
-const onSubmit = async () => {
-  if (inProgress.value) return
-
-  inProgress.value = true
-  errorMessage.value = ''
-
-  try {
-    const response = await axios.post(`${api}/register`, {
-      username: username.value.trim(),
-      password: password.value
-    })
-
-    if (response.status === 201) {
-      $q.notify({
-        type: 'positive',
-        message: 'Registration successful! Please login.',
-        position: 'top'
-      })
-      router.push('/login')
-    }
-  } catch (error: any) {
-    if (error.response?.status === 409) {
-      errorMessage.value = 'Username already taken'
-    } else if (error.response?.status === 400) {
-      errorMessage.value = error.response.data?.message || 'Invalid input'
-    } else {
-      errorMessage.value = 'Registration failed. Please try again.'
-    }
-  } finally {
-    inProgress.value = false
-  }
-}
-
-const goToLogin = () => {
-  router.push('/login')
-}
-
-const loginWithProvider = (provider: string) => {
-  window.location.href = `${api}/auth/${provider}`
-}
-
-const options = {
-  "particles": {
-    "number": {
-      "value": 80,
-      "density": {
-        "enable": true,
-        "area": 800
-      }
-    },
-    "color": {
-      "value": "#ffffff"
-    },
-    "shape": {
-      "type": "circle",
-      "stroke": {
-        "width": 0,
-        "color": "#000000"
-      },
-      "polygon": {
-        "sides": 5
-      }
-    },
-    "opacity": {
-      "value": 0.5,
-      "random": false,
-      "animation": {
-        "enable": false,
-        "speed": 1,
-        "minimumValue": 0.1,
-        "sync": false
-      }
-    },
-    "size": {
-      "value": 3,
-      "random": true,
-      "animation": {
-        "enable": false,
-        "speed": 40,
-        "minimumValue": 0.1,
-        "sync": false
-      }
-    },
-    "links": {
-      "enable": true,
-      "distance": 150,
-      "color": "#ffffff",
-      "opacity": 0.4,
-      "width": 1
-    },
-    "move": {
-      "enable": true,
-      "speed": 1,
-      "direction": "none",
-      "random": false,
-      "straight": false,
-      "outModes": {
-        "default": "out"
-      },
-      "attract": {
-        "enable": false,
-        "rotate": {
-          "x": 600,
-          "y": 1200
-        }
-      }
-    }
-  },
-  "interactivity": {
-    "detectsOn": "canvas",
-    "events": {
-      "onHover": {
-        "enable": false,
-        "mode": "repulse"
-      },
-      "onClick": {
-        "enable": false,
-        "mode": "push"
-      },
-      "resize": true
-    },
-    "modes": {
-      "grab": {
-        "distance": 400,
-        "links": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 400,
-        "size": 40,
-        "duration": 2,
-        "opacity": 8,
-        "speed": 3
-      },
-      "repulse": {
-        "distance": 200,
-        "duration": 0.4
-      },
-      "push": {
-        "quantity": 4
-      },
-      "remove": {
-        "quantity": 2
-      }
-    }
-  },
-  "detectRetina": true
-}
-</script>
-
-<style scoped>
-.register-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 1rem;
-  box-sizing: border-box;
-}
-
-.register-box {
-  width: 100%;
-  max-width: 420px;
-  max-height: calc(100vh - 1rem);
-  background: var(--color-background-soft);
-  backdrop-filter: blur(20px);
-  border-radius: 24px;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
-  overflow-y: auto;
-  overflow-x: hidden;
-  z-index: 2;
-  border: 1px solid var(--color-border);
-  box-sizing: border-box;
-}
-
-.logo-section {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  padding: 2rem;
-  text-align: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.logo {
-  height: 50px;
-  width: auto;
-  filter: brightness(0) invert(1);
-}
-
-.logo-text {
-  color: #ffffff;
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-.content-section {
-  padding: 1.5rem;
-}
-
-.title {
-  color: var(--color-heading);
-  font-size: 1.8rem;
-  font-weight: 700;
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.subtitle {
-  color: var(--color-text);
-  text-align: center;
-  margin-bottom: 2rem;
-  font-size: 0.95rem;
-  line-height: 1.5;
-  opacity: 0.8;
-}
-
-.form-section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2rem;
-}
-
-.form-input {
-  border-radius: 12px;
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.submit-btn {
-  width: 100%;
-  height: 48px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-  color: white;
-}
-
-.divider-section {
-  margin: 2rem 0;
-}
-
-.divider {
-  position: relative;
-  text-align: center;
-}
-
-.divider::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: var(--color-border);
-}
-
-.divider-text {
-  background: var(--color-background-soft);
-  padding: 0 1rem;
-  color: var(--color-text);
-  font-size: 0.85rem;
-  position: relative;
-  opacity: 0.7;
-}
-
-.social-buttons {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.social-btn {
-  flex: 1;
-  height: 48px;
-  background: var(--color-background-mute);
-  border: 2px solid var(--color-border);
-  color: var(--color-heading);
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.social-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.discord-btn:hover {
-  border-color: #5865F2;
-  background: rgba(88, 101, 242, 0.1);
-}
-
-.keycloak-btn:hover {
-  border-color: #0088CC;
-  background: rgba(0, 136, 204, 0.1);
-}
-
-.social-icon {
-  margin-right: 0.5rem;
-}
-
-.social-text {
-  font-weight: 500;
-}
-
-.login-link {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.login-text {
-  color: var(--color-text);
-  font-size: 0.9rem;
-  opacity: 0.7;
-}
-
-#particles-js {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-@media (max-width: 600px) {
-  .register-box {
-    max-width: 100%;
-    border-radius: 16px;
-    max-height: calc(100vh - 1rem);
-  }
-
-  .content-section {
-    padding: 1rem;
-  }
-
-  .title {
-    font-size: 1.5rem;
-  }
-
-  .social-buttons {
-    flex-direction: column;
-  }
-}
-</style>

src/views/UsernameSelectionView.vue

@@ -1,457 +0,0 @@
-<template>
-  <div class="username-selection-container">
-    <div class="username-selection-box">
-      <div class="logo-section">
-        <div class="logo-container">
-          <img src="/logo.png" alt="Logo" class="logo" />
-          <div class="logo-text">KnockOut Whist</div>
-        </div>
-      </div>
-
-      <div class="content-section">
-        <h1 class="title">Choose Your Username</h1>
-        <p class="subtitle">
-          You're signed in with <span class="provider-badge">{{ userInfo.providerName }}</span>. Please choose a username for your account.
-        </p>
-
-        <div class="user-info-card">
-          <div class="user-avatar">
-            <img v-if="userInfo.picture" :src="userInfo.picture" alt="Profile" class="avatar-img" />
-            <div v-else class="avatar-text">{{ userInfo.name?.charAt(0)?.toUpperCase() || 'U' }}</div>
-          </div>
-          <div class="user-details">
-            <div class="user-name">{{ userInfo.name || 'Unknown User' }}</div>
-            <div class="user-provider">Signed in with {{ userInfo.providerName }}</div>
-          </div>
-        </div>
-
-        <q-form @submit.prevent="onSubmit" class="form-section">
-          <q-input
-            v-model="username"
-            label="Username"
-            filled
-            dark
-            color="primary"
-            label-color="grey-6"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-            :loading="inProgress"
-            class="username-input"
-            lazy-rules
-            :rules="[
-              val => !!val && val.trim().length > 0 || 'Username is required',
-              val => val && val.trim().length >= 3 || 'Username must be at least 3 characters',
-              val => val && val.trim().length <= 30 || 'Username must be less than 30 characters',
-              val => /^[a-zA-Z0-9_-]+$/.test(val) || 'Username can only contain letters, numbers, underscores, and hyphens'
-            ]"
-          >
-            <template v-slot:prepend>
-              <q-icon name="person" color="grey-6" />
-            </template>
-          </q-input>
-
-          <div class="action-buttons">
-            <q-btn
-              type="submit"
-              label="Complete Registration"
-              color="primary"
-              class="submit-btn"
-              :loading="inProgress"
-              size="md"
-              rounded
-            />
-            <q-btn
-              flat
-              color="grey-6"
-              label="Cancel"
-              @click="goToLogin"
-              class="cancel-btn"
-              size="md"
-            />
-          </div>
-        </q-form>
-      </div>
-    </div>
-    <vue-particles
-      id="particles-js"
-      :options='options'
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useQuasar } from 'quasar'
-import { ref, onMounted } from 'vue'
-import axios from "axios"
-import router from "@/router"
-import { useUserInfo } from "@/composables/useUserInfo"
-
-const api = window?.__RUNTIME_CONFIG__?.API_URL
-const $q = useQuasar()
-const uInfo = useUserInfo()
-
-const username = ref('')
-const inProgress = ref(false)
-const errorMessage = ref('')
-const userInfo = ref({
-  id: '',
-  email: '',
-  name: '',
-  picture: '',
-  provider: '',
-  providerName: ''
-})
-
-onMounted(async () => {
-  // Get user info from session storage or API
-  try {
-    const response = await axios.get(`${api}/select-username`, { withCredentials: true })
-    userInfo.value = response.data
-  } catch (error) {
-    console.error('Failed to get user info:', error)
-    router.push('/login')
-  }
-})
-
-const onSubmit = async () => {
-  if (inProgress.value) return
-
-  inProgress.value = true
-  errorMessage.value = ''
-
-  try {
-    const response = await axios.post(`${api}/submit-username`, {
-      username: username.value.trim()
-    }, { withCredentials: true })
-
-    if (response.status === 200) {
-      // User successfully created and logged in
-      await uInfo.requestState()
-      router.push('/')
-    }
-  } catch (error: any) {
-    if (error.response?.status === 409) {
-      errorMessage.value = 'Username already taken'
-    } else if (error.response?.status === 400) {
-      errorMessage.value = error.response.data?.message || 'Invalid username'
-    } else {
-      errorMessage.value = 'Registration failed. Please try again.'
-    }
-  } finally {
-    inProgress.value = false
-  }
-}
-
-const goToLogin = () => {
-  router.push('/login')
-}
-
-const options = {
-  "particles": {
-    "number": {
-      "value": 80,
-      "density": {
-        "enable": true,
-        "area": 800
-      }
-    },
-    "color": {
-      "value": "#ffffff"
-    },
-    "shape": {
-      "type": "circle",
-      "stroke": {
-        "width": 0,
-        "color": "#000000"
-      },
-      "polygon": {
-        "sides": 5
-      }
-    },
-    "opacity": {
-      "value": 0.5,
-      "random": false,
-      "animation": {
-        "enable": false,
-        "speed": 1,
-        "minimumValue": 0.1,
-        "sync": false
-      }
-    },
-    "size": {
-      "value": 3,
-      "random": true,
-      "animation": {
-        "enable": false,
-        "speed": 40,
-        "minimumValue": 0.1,
-        "sync": false
-      }
-    },
-    "links": {
-      "enable": true,
-      "distance": 150,
-      "color": "#ffffff",
-      "opacity": 0.4,
-      "width": 1
-    },
-    "move": {
-      "enable": true,
-      "speed": 1,
-      "direction": "none",
-      "random": false,
-      "straight": false,
-      "outModes": {
-        "default": "out"
-      },
-      "attract": {
-        "enable": false,
-        "rotate": {
-          "x": 600,
-          "y": 1200
-        }
-      }
-    }
-  },
-  "interactivity": {
-    "detectsOn": "canvas",
-    "events": {
-      "onHover": {
-        "enable": false,
-        "mode": "repulse"
-      },
-      "onClick": {
-        "enable": false,
-        "mode": "push"
-      },
-      "resize": true
-    },
-    "modes": {
-      "grab": {
-        "distance": 400,
-        "links": {
-          "opacity": 1
-        }
-      },
-      "bubble": {
-        "distance": 400,
-        "size": 40,
-        "duration": 2,
-        "opacity": 8,
-        "speed": 3
-      },
-      "repulse": {
-        "distance": 200,
-        "duration": 0.4
-      },
-      "push": {
-        "quantity": 4
-      },
-      "remove": {
-        "quantity": 2
-      }
-    }
-  },
-  "detectRetina": true
-}
-</script>
-
-<style scoped>
-.username-selection-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 3rem;
-  box-sizing: border-box;
-}
-
-.username-selection-box {
-  width: 100%;
-  max-width: 420px;
-  height: 100%;
-  max-height: calc(100vh - 1rem);
-  background: var(--color-background-soft);
-  backdrop-filter: blur(20px);
-  border-radius: 24px;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
-  overflow-y: auto;
-  overflow-x: hidden;
-  z-index: 2;
-  border: 1px solid var(--color-border);
-  box-sizing: border-box;
-}
-
-.logo-section {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  padding: 2rem;
-  text-align: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.logo {
-  height: 50px;
-  width: auto;
-  filter: brightness(0) invert(1);
-}
-
-.logo-text {
-  color: #ffffff;
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
-
-.content-section {
-  padding: 1.5rem;
-}
-
-.title {
-  color: var(--color-heading);
-  font-size: 1.8rem;
-  font-weight: 700;
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
-.subtitle {
-  color: var(--color-text);
-  text-align: center;
-  margin-bottom: 2rem;
-  font-size: 0.95rem;
-  line-height: 1.5;
-  opacity: 0.8;
-}
-
-.provider-badge {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0.2rem 0.6rem;
-  border-radius: 12px;
-  font-size: 0.85rem;
-  font-weight: 600;
-}
-
-.user-info-card {
-  background: var(--color-background-mute);
-  border-radius: 16px;
-  padding: 1.5rem;
-  margin-bottom: 2rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  border: 1px solid var(--color-border);
-}
-
-.user-avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  flex-shrink: 0;
-}
-
-.avatar-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar-text {
-  color: white;
-  font-weight: 700;
-  font-size: 1.4rem;
-}
-
-.user-details {
-  flex: 1;
-}
-
-.user-name {
-  color: var(--color-heading);
-  font-weight: 600;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
-}
-
-.user-provider {
-  color: var(--color-text);
-  font-size: 0.9rem;
-  opacity: 0.7;
-}
-
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.username-input {
-  border-radius: 12px;
-}
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.submit-btn {
-  width: 100%;
-  height: 48px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: none;
-}
-
-.cancel-btn {
-  width: 100%;
-  height: 48px;
-  font-weight: 500;
-  color: var(--color-text);
-  opacity: 0.7;
-}
-
-.cancel-btn:hover {
-  opacity: 1;
-}
-
-#particles-js {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-@media (max-width: 600px) {
-  .username-selection-box {
-    max-width: 100%;
-    border-radius: 16px;
-    max-height: calc(100vh - 1rem);
-  }
-
-  .content-section {
-    padding: 1rem;
-  }
-
-  .title {
-    font-size: 1.5rem;
-  }
-}
-</style>

versions.env

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

vite.config.ts

@@ -1,57 +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({
+    vue({ template: { transformAssetUrls } }),
-      template: { transformAssetUrls }
-    }),
     vueJsx(),
     vueDevTools(),
     quasar(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      workbox: {
-        globDirectory: 'dist/',
-        globPatterns: [
-          '**/*.{js,css,html,ico,png,svg,webmanifest}',
-        ],
-        navigateFallbackDenylist: [
-          /^\/api/,
-        ],
-      },
-
-      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: {