ci: bump version to v0.13.0

Added animations for mainmenu

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #22
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

CHANGELOG.md

@@ -103,3 +103,9 @@
 ### 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))

package-lock.json

@@ -10,6 +10,7 @@
       "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",
@@ -3272,6 +3273,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",

package.json

@@ -17,14 +17,15 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.17.0",
-    "quasar": "^2.18.6",
-    "vue": "^3.5.25",
-    "vue-router": "^4.6.3",
-    "tsparticles": "~3.9.1",
     "@tsparticles/vue3": "~3.0.1",
+    "animate.css": "^4.1.1",
     "axios": "^1.13.2",
+    "pinia": "^3.0.4",
+    "quasar": "^2.18.6",
+    "tsparticles": "~3.9.1",
+    "vue": "^3.5.25",
     "vue-axios": "^3.5.2",
-    "pinia": "^3.0.4"
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",

src/components/Ingame.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+
+import {useIngame} from "@/composables/useIngame.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";
+
+const ig = useIngame()
+
+</script>
+
+<template>
+  <q-page class="game-field-background vh-100 ingame-side-shadow">
+    <div class="py-5 container-xxl">
+
+      <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>
+
+        <q-col cols="4" class="text-center">
+          <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
+
+          <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!" />
+          </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>
+</template>
+
+<style scoped>
+.game-field-background {
+  background-image: var(--body-background-color);
+  background-repeat: no-repeat;
+  background-size: cover;
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+.ingame-side-shadow {
+  box-shadow: 0 1px 15px 0 #000000
+}
+</style>

src/components/MainMenuBoxes.vue

@@ -39,12 +39,20 @@ const navigateTo = (routeName: string) => {
 </script>
 
 <template>
-  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
+  <transition-group
+    appear
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__fadeOut"
 
+    tag="div"
+    class="row q-col-gutter-md justify-center"
+    style="width: 100%; max-width: 1000px;"
+  >
     <div
       v-for="(item, index) in menuItems"
       :key="index"
       class="col-12 col-sm-6 col-md-4"
+      :style="{ animationDuration: '1.6s', animationDelay: `${index * 0.3 + 0.5}s` }"
     >
       <q-card
         class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
@@ -68,7 +76,7 @@ const navigateTo = (routeName: string) => {
         </q-card-section>
       </q-card>
     </div>
-  </div>
+  </transition-group>
 </template>
 
 <style scoped>
@@ -77,7 +85,6 @@ const navigateTo = (routeName: string) => {
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Hover-Effekt für die Karten */
 .menu-card:hover {
   transform: translateY(-5px);
   background-color: #2c3e50 !important;

src/components/ingame/HandC.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import {toRefs} from 'vue'
 import type {Hand, Player} from "@/types/GameSubTypes.ts";
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+
+const wb = useWebSocket()
 
 const props = defineProps<{
   hand: Hand
@@ -8,21 +11,37 @@ const props = defineProps<{
   self: Player | null
 }>()
 
-const emit = defineEmits<{
-  (e: 'play-card', idx: number): void
-  (e: 'skip-dog'): void
-}>()
-
 const { hand, isHandInactive, self } = toRefs(props)
 
-function handlePlayCard(idx: number | null) {
+function handlePlayCard(element: any, index: number | null) {
-  if (idx === null) return
+  if (index === null) return
   if (isHandInactive?.value) return
-  emit('play-card', idx)
+  isHandInactive.value = true
+
+  const wiggleKeyframes = [
+    { transform: 'translateX(0)' },
+    { transform: 'translateX(-5px)' },
+    { transform: 'translateX(5px)' },
+    { transform: 'translateX(-5px)' },
+    { 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 handleSkipDogLife() {
-  emit('skip-dog')
+  //TODO: Add some animation or feedback for skipping turn
 }
 
 function getCardImagePath(cardPath: string) {
@@ -37,7 +56,7 @@ function getCardImagePath(cardPath: string) {
     <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
       <div class="cards-row">
         <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
-          <div class="card-btn" @click="handlePlayCard(card.idx)" aria-label="Play card">
+          <div class="card-btn" @click="handlePlayCard(this, card.idx)" aria-label="Play card">
             <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
           </div>
         </div>

src/composables/useIngame.ts

@@ -0,0 +1,29 @@
+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";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
+
+export const useIngame = defineStore('ingame', () => {
+  const state: Ref<'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch' | null> = ref(null);
+  const data: Ref<GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo | null> = ref(null);
+
+  function setIngame(newState: 'Lobby' | 'InGame' | 'SelectTrump' | 'TieBreak' | 'FinishedMatch', newData: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo) {
+    state.value = newState;
+    data.value = newData;
+  }
+
+  function requestGame(gameId: string) {
+    axios.get(`${api}/status/${gameId}`, {withCredentials: true}).then((response) => {
+      setIngame(response.data.state, response.data.data);
+    });
+  }
+
+  function clearIngame() {
+    state.value = null;
+    data.value = null;
+  }
+
+  return { state, data, requestGame, setIngame, clearIngame };
+});

src/composables/useUserInfo.ts

@@ -1,19 +1,40 @@
 import { defineStore } from 'pinia'
 import {ref, type Ref} from 'vue'
+import axios from "axios";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 export const useUserInfo = defineStore('userInfo', () => {
   const username: Ref<string | null> = ref(null);
   const userId: Ref<number | null> = ref(null);
+  const gameId: Ref<string | null> = ref(null);
 
   function setUserInfo(name: string, id: number) {
     username.value = name;
     userId.value = id;
   }
 
+  function setGameId(id: string) {
+    gameId.value = id;
+  }
+
+  function requestState() {
+    axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
+      username.value = response.data.username;
+      if (response.data.ingame) {
+        gameId.value = response.data.gameId;
+      }
+    });
+  }
+
   function clearUserInfo() {
     username.value = null;
     userId.value = null;
   }
 
-  return { username, userId, setUserInfo, clearUserInfo };
+  function clearGameId() {
+    gameId.value = null;
+  }
+
+  return { username, userId, gameId, setUserInfo, requestState, clearUserInfo, setGameId, clearGameId };
 });

src/composables/useWebsocket.ts

@@ -6,8 +6,13 @@ import {
   sendEventAndWait,
   onEvent,
   isWebSocketConnected,
+  setDefaultHandler,
 } from "@/services/ws";
 
+function defaultEventHandler<T = any>(data: (data: T) => void) {
+  setDefaultHandler(data);
+}
+
 export function useWebSocket() {
   const isConnected = ref(isWebSocketConnected());
   const lastMessage = ref<any>(null);
@@ -51,5 +56,6 @@ export function useWebSocket() {
     sendAndWait: sendEventAndWait,
 
     useEvent,
+    defaultEventHandler
   };
 }

src/main.ts

@@ -12,7 +12,7 @@ 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';
 const app = createApp(App)
 const pinia = createPinia()
 

src/services/ws.ts

@@ -1,3 +1,6 @@
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo} from "@/types/GameTypes.ts";
+
 const api = window.__RUNTIME_CONFIG__?.API_URL;
 
 // ---------- Types ---------------------------------------------------------
@@ -6,6 +9,8 @@ export type ServerMessage<T = any> = {
   id?: string;
   event?: string;
   status?: "success" | "error";
+  state?: "Lobby" | "InGame" | "SelectTrump" | "TieBreak" | "FinishedMatch";
+  stateData?: GameInfo | LobbyInfo | TieInfo | TrumpInfo | WonInfo;
   data?: T;
   error?: string;
 };
@@ -28,9 +33,12 @@ let ws: WebSocket | null = null;
 
 const pending = new Map<string, PendingEntry>();
 const handlers = new Map<string, HandlerFn>();
+const uState = useIngame();
 
 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
 
+let defaultHandler: HandlerFn | null = null;
+
 function uuid(): string {
   return crypto.randomUUID();
 }
@@ -73,7 +81,7 @@ function setupSocketHandlers(socket: WebSocket) {
       return;
     }
 
-    const { id, event, status, data } = msg;
+    const { id, event, state, stateData, status, data } = msg;
 
     // RPC response branch
     if (id && status) {
@@ -91,6 +99,10 @@ function setupSocketHandlers(socket: WebSocket) {
       return;
     }
 
+    if (state && stateData) {
+      uState.setIngame(state, stateData);
+    }
+
     // Server event → handler branch
     if (id && event) {
       const handler = handlers.get(event);
@@ -103,7 +115,17 @@ function setupSocketHandlers(socket: WebSocket) {
 
       if (!handler) {
         console.warn("[WS] No handler for event:", event);
-        reply("error", `No handler for '${event}'`);
+        if (defaultHandler) {
+          try {
+            await defaultHandler(data ?? {});
+            reply("success");
+          } catch (err) {
+            reply("error", (err as Error).message);
+
+          }
+        } else {
+          reply("error", `No handler for '${event}'`);
+        }
         return;
       }
 
@@ -232,5 +254,9 @@ export function onEvent(event: string, handler: HandlerFn) {
   handlers.set(event, handler);
 }
 
+export function setDefaultHandler(handler: HandlerFn) {
+  defaultHandler = handler;
+}
+
 export const isWebSocketConnected = () =>
   !!ws && ws.readyState === WebSocket.OPEN;

src/views/Game.vue

@@ -0,0 +1,33 @@
+<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 router from "@/router";
+
+const wb = useWebSocket()
+const ig = useIngame()
+const ui = useUserInfo()
+
+ui.requestState()
+if (ui.gameId) {
+  ig.requestGame(ui.gameId)
+  wb.connect()
+} else {
+  router.replace("/")
+}
+</script>
+
+<template>
+  <div class="lobby-background">
+    <Ingame v-if="ig.state === 'InGame'" />
+  </div>
+</template>
+
+<style scoped>
+.lobby-background {
+  background-color: var(--body-background-color);
+  width: 100%;
+  min-height:100vh;
+}
+</style>

src/views/MainMenuView.vue

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

versions.env

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