ci: bump version to v0.14.1

Added a nice working trumpsuit component with animations

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

CHANGELOG.md

@@ -115,3 +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) (2025-12-18)

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"
+  }
 }

src/App.vue

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

src/components/Ingame.vue

@@ -1,15 +1,30 @@
 <script setup lang="ts">
 
 import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo} from "@/types/GameTypes.ts";
+import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
 import HandC from "@/components/ingame/HandC.vue";
 import GameInfoC from "@/components/ingame/GameInfoC.vue";
 import PlayedCardsC from "@/components/ingame/PlayedCardsC.vue";
 import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
 import TurnC from "@/components/ingame/TurnC.vue";
+import TrumpC from "@/components/ingame/TrumpC.vue";
+import {storeToRefs} from "pinia";
+import {ref, toRefs, watch} from "vue";
 
 const ig = useIngame()
+const { state } = toRefs(ig)
 
+const cachedGameInfo = ref<GameInfo | null>(null)
+
+watch(
+  () => ig.data,
+  (newData) => {
+    if (state.value === 'InGame' && newData) {
+      cachedGameInfo.value = newData as GameInfo
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <template>
@@ -17,34 +32,46 @@ const ig = useIngame()
     <q-page-container>
       <q-page class="game-field-background vh-100 ingame-side-shadow">
         <div class="py-5 container-xxl">
-
+          <transition
+            appear
+            enter-active-class="animate__animated animate__fadeInDown"
+            leave-active-class="animate__animated animate__fadeOutDown"
+          >
+            <div
+              v-if="state === 'SelectTrump'"
+              class="full-overlay-blur"
+              style="z-index: 2000;"
+            >
+              <TrumpC />
+            </div>
+          </transition>
           <div class="fit row wrap justify-center items-center content-start">
             <div class="mt-5 ml-4 self-start col-2">
-              <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
+              <TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>
             </div>
 
             <div class="text-center col-6">
-              <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
+              <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="(ig.data as GameInfo)?.currentRound"
-                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
-                         :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
+              <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="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
+                <PlayedCardsC v-if="(cachedGameInfo as GameInfo)?.currentTrick" :trick="(cachedGameInfo as GameInfo).currentTrick!" />
               </div>
             </div>
           </div>
           <div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
             <div class="flex justify-center col-12">
-              <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
+              <HandC v-if="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo as GameInfo)?.self"/>
             </div>
           </div>
 
@@ -77,4 +104,17 @@ const ig = useIngame()
   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/ingame/TrumpC.vue

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

src/components/ingame/TurnC.vue

@@ -5,8 +5,8 @@ import {useIngame} from "@/composables/useIngame.ts";
 import type {GameInfo} from "@/types/GameTypes.ts";
 
 const ig = useIngame()
-const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue.currentPlayer)
-const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
 </script>
 
 <template>

src/router/index.ts

@@ -8,7 +8,6 @@ import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
 import rulesView from "../components/Rules.vue";
 import Game from "@/views/Game.vue";
-import OfflineView from "@/views/OfflineView.vue";
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
@@ -56,40 +55,12 @@ const router = createRouter({
       name: 'game',
       component: Game,
       meta: {requiresAuth: true }
-    },
-    {
-      path: '/offline',
-      name: 'offline',
-      component: OfflineView,
-      meta: {requiresAuth: false }
     }
   ],
 })
 
 router.beforeEach(async (to, from, next) => {
   const info = useUserInfo();
-  const isOnline = navigator.onLine;
-  if (to.name === 'offline') {
-    if (isOnline) {
-
-      try {
-        const response = await axios.get(`${api}/userInfo`, { withCredentials: true });
-        info.setUserInfo(response.data.username, response.data.userId);
-
-        return next({ name: 'mainmenu' });
-
-      } catch (err) {
-        info.clearUserInfo();
-        return next('/login');
-      }
-    } else {
-      return next();
-    }
-  }
-  if (!isOnline) {
-    return next({ name: 'offline' });
-  }
-
   if (!to.meta.requiresAuth) return next();
   try {
     await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
@@ -99,9 +70,8 @@ router.beforeEach(async (to, from, next) => {
     );
     next();
   } catch (err) {
-      info.clearUserInfo();
-      next('/login');
-
+    info.clearUserInfo();
+    next('/login');
   }
 });
 

src/views/Game.vue

@@ -33,7 +33,7 @@ ui.requestState().then(() => {
 
 <template>
   <div class="lobby-background">
-    <Ingame v-if="state === 'InGame'"/>
+    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
     <lobby-component v-if="state === 'Lobby'"/>
   </div>
 </template>

src/views/OfflineView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-
-</script>
-<template>
-<h1> DU BIST OFFLINE!!!</h1>
-</template>
-<style scoped>
-
-</style>

versions.env

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

vite.config.ts

@@ -1,62 +1,18 @@
 import { fileURLToPath, URL } from 'node:url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
-
-import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
-      template: { transformAssetUrls }
-    }),
+    vue({ template: { transformAssetUrls } }),
     vueJsx(),
     vueDevTools(),
     quasar(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      injectRegister: 'auto',
-
-      workbox: {
-        globDirectory: 'dist/',
-        globPatterns: [
-          '**/*.{js,css,html,ico,png,svg,webmanifest}',
-        ],
-        globIgnores: [
-          '**/node_modules/**/*',
-          'sw.js',
-        ],
-        swDest: 'dist/sw.js',
-      },
-
-      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: {