ci: bump version to v0.14.1

.gitignore

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

CHANGELOG.md

@@ -115,53 +115,4 @@
 
 * **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)
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.14.0...0.0.0) (2025-12-18)
-
-### 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))

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,9 +7,8 @@ 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"

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,14 +2,18 @@
   "name": "knockoutwhistfrontend",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "scripts": {
-    "build": "run-p type-check \"build-only {@}\" --",
-    "lint": "eslint . --fix --cache",
-    "build-only": "vite build",
     "dev": "vite",
-    "format": "prettier --write --experimental-cli src/",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "type-check": "vue-tsc --build"
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {
     "@quasar/extras": "^1.17.0",
@@ -18,7 +22,6 @@
     "axios": "^1.13.2",
     "pinia": "^3.0.4",
     "quasar": "^2.18.6",
-    "register-service-worker": "^1.7.2",
     "tsparticles": "~3.9.1",
     "vue": "^3.5.25",
     "vue-axios": "^3.5.2",
@@ -27,7 +30,7 @@
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",
     "@tsconfig/node24": "^24.0.3",
-    "@types/node": "^25.0.3",
+    "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -41,12 +44,7 @@
     "sass-embedded": "^1.93.3",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
-    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-vue-devtools": "^8.0.5",
     "vue-tsc": "^3.1.5"
-  },
+  }
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
-  "type": "module"
 }

public/env.js

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

public/env.template.js

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

src/App.vue

@@ -1,102 +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 { useIngame } from "@/composables/useIngame";
-import { storeToRefs } from "pinia";
-import { useWebSocket } from "@/composables/useWebsocket";
-import { useQuasar } 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(() => {
-  window.addEventListener('online', handleOnlineStatusChange);
-
-  // Continuously check user state every 10 seconds
-  interval = window.setInterval(async () => {
-    if (navigator.onLine && route.name !== 'login' && route.name !== 'offline') {
-      await info.requestState();
-      if (!info.username && route.name !== 'login') {
-        router.push({ name: 'login' });
-      }
-    }
-  }, 10000);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('online', handleOnlineStatusChange);
-  if (interval) {
-    clearInterval(interval);
-  }
-});
-
-watch(() => info.gameId, (newGameId) => {
-  if (newGameId && route.name !== 'game') {
-    router.push({ name: 'game' });
-  }
-});
-
-const ig = useIngame()
-const { isWsConnected } = storeToRefs(ig)
-const wb = useWebSocket()
-const $q = useQuasar();
-
-watch(isWsConnected, (connected) => {
-  if (!connected && info.gameId && route.name === 'game') {
-    showReconnectDialog();
-  }
-});
-
-function showReconnectDialog() {
-  $q.dialog({
-    title: 'Connection Lost',
-    message: 'The connection to the game server was lost. Would you like to reconnect?',
-    persistent: true,
-    ok: {
-      label: 'Reconnect',
-      color: 'positive'
-    },
-    cancel: {
-      label: 'Quit',
-      color: 'negative'
-    }
-  }).onOk(() => {
-    reconnect();
-  }).onCancel(() => {
-    router.replace("/");
-  });
-}
-
-async function reconnect() {
-  try {
-    await wb.connect();
-    $q.notify({
-      message: 'Reconnected successfully!',
-      color: 'positive',
-      icon: 'check'
-    });
-  } catch (err) {
-    $q.notify({
-      message: 'Failed to reconnect. Please try again.',
-      color: 'negative',
-      icon: 'error'
-    });
-    showReconnectDialog();
-  }
-}
 </script>
 
 <template>

src/components/Ingame.vue

@@ -10,7 +10,6 @@ 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)
@@ -46,22 +45,6 @@ watch(
               <TrumpC />
             </div>
           </transition>
-
-
-          <transition
-            appear
-            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!"/>

src/components/ingame/HandC.vue

@@ -25,8 +25,9 @@ function triggerWiggle(index: number) {
 function handlePlayCard(index: number | null) {
   if (index === null) return
 
-  wb.sendAndWait((<GameInfo>wi.data)?.self?.dogLife ? "PlayDogCard" : "PlayCard", { cardindex: index }).catch((error) => {
+  wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
       triggerWiggle(index)
+
       $q.notify({
         message: error.message,
         color: "negative",
@@ -44,13 +45,7 @@ function onBeforeLeave(el: Element) {
   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) {

src/components/ingame/TieC.vue

@@ -1,98 +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 } from 'vue'
-
-const wb = useWebSocket()
-const wi = useIngame()
-const tieInf = computed(() => wi.data as TieInfo)
-const tieBlankCard = [
-  "/images/cards/AS.png"
-]
-const $q = useQuasar();
-function getCardImagePath(cardPath: string) {
-  if (!cardPath) return ''
-  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
-  return `/${cardPath}`
-}
-function selectTie(tieIndex: number) {
-  wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
-    $q.notify({
-      message: "You've successfully picked your tieCard",
-      color: "positive",
-      position: "top"
-    })
-
-  ).catch((error) => {
-    $q.notify({
-      message: error.message,
-      color: "negative",
-      position: "top"
-    })
-  })
-}
-const model = ref(1)
-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>
-  <q-card v-if="tieInf.self?.name === tieInf.currentPlayer?.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">
-        {{ tieInf.self?.name || "Loading Player..."}}
-      </div>
-    </q-card-section>
-    <q-card-section class="bg-dark text-dark text-center q-py-lg">
-      <div class="q-pa-md" style="max-width: 500px">
-        <div class="q-gutter-md">
-          <q-select
-            v-model="model"
-            :options="options"
-            label="Select Amount"
-            filled
-            bg-color="white"
-            label-color="primary"
-            color="primary"
-            popup-content-class="bg-white text-black"
-          />
-          <q-btn
-            color="positive"
-            icon="sports_martial_arts"
-            @click="selectTie(model)"
-            class="full-width"
-          />
-        </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 {{ tieInf.currentPlayer?.name || 'the other player' }} to select card for the tie...
-      </div>
-    </q-card-section>
-  </q-card>
-</template>
-
-<style scoped>
-
-</style>

src/components/lobby/LobbyComponent.vue

@@ -103,14 +103,14 @@ const profileIcon = 'person';
                 <q-btn
                   v-if="player.id !== (<LobbyInfo>ig.data).self.id"
                   color="negative"
-                  icon="sports_martial_arts"
+                  label="Remove"
                   @click="handleKickPlayer(player)"
                   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

@@ -9,17 +9,12 @@ 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) {
-    isWsConnected.value = connected;
-  }
-
   async function requestGame(gameId: string) {
     await axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
       setIngame(response.data.state, response.data.data);
@@ -29,8 +24,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

@@ -21,19 +21,10 @@ export const useUserInfo = defineStore('userInfo', () => {
   async function requestState() {
     await 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;
-        username.value = response.data.username;
+      if (response.data.gameId) {
-        userId.value = response.data.userId;
+        console.log("GAMEID:" + response.data.gameId)
-        if (response.data.gameId) {
+        gameId.value = 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;
       }
     })
   }

src/router/index.ts

@@ -8,7 +8,6 @@ import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
 import rulesView from "../components/Rules.vue";
 import Game from "@/views/Game.vue";
-import OfflineView from "@/views/OfflineView.vue";
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
@@ -56,62 +55,23 @@ const router = createRouter({
       name: 'game',
       component: Game,
       meta: {requiresAuth: true }
-    },
-    {
-      path: '/offline',
-      name: 'offline',
-      component: OfflineView,
-      meta: {requiresAuth: false }
     }
   ],
 })
 
 router.beforeEach(async (to, from, next) => {
   const info = useUserInfo();
-  const isOnline = navigator.onLine;
-  if (to.name === 'offline') {
-    if (isOnline) {
-
-      try {
-        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(
-
+      res => {
-    if (!info.username) {
+        info.setUserInfo(res.data.username, res.data.userId);
-      info.clearUserInfo();
+      }
-      return next('/login');
+    );
-    }
-
-    if (info.gameId && to.name !== 'game') {
-      return next({ name: 'game' });
-    }
-
     next();
   } catch (err) {
-      info.clearUserInfo();
+    info.clearUserInfo();
-      next('/login');
+    next('/login');
-
   }
 });
 

src/services/ws.ts

@@ -160,22 +160,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.
+    router.replace("/");
   };
 }
 
 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 +188,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 +204,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 +221,6 @@ export function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
       ws.close(code, reason);
     } catch {}
     ws = null;
-    if (uState) {
-      uState.setWsConnected(false);
-    }
   }
 }
 

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.replace("/game")
   }).catch((err) => {
     console.log("ERROR:" + err)
+  }).finally(() =>
     isLoading.value = false
-  })
+  )
 }
 </script>
 

src/views/Game.vue

@@ -7,7 +7,6 @@ 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()
@@ -21,6 +20,7 @@ ui.requestState().then(() => {
     $q.notify({
       message: "You're not in any game!",
       color: "negative"
+
     })
     router.replace("/")
   } else {
@@ -33,7 +33,7 @@ ui.requestState().then(() => {
 
 <template>
   <div class="lobby-background">
-    <Ingame v-if="state === 'InGame' || state === 'SelectTrump' || state === 'TieBreak'"/>
+    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
     <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.replace("/game")
-    // 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/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>

versions.env

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

vite.config.ts

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