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

Started Lobby Component

CHANGELOG.md

@@ -104,14 +104,3 @@
 
 * FRO-25 Create Game Info Component ([#19](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/19)) ([06f27d6](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/06f27d6813f625af25e734de3dcbcf07b10f3a1a))
 ## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.12.0...0.0.0) (2025-12-10)
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.12.1...0.0.0) (2025-12-11)
-
-### Features
-
-* **ui:** FRO-35 Animations ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/22)) ([d73b4f3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d73b4f396be89b4f8ce2a446afe47c604cfe8598))
-## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.13.0...0.0.0) (2025-12-15)
-
-### Features
-
-* **ui:** FRO-34 Lobby ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/21)) ([bb6355d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/bb6355d9ed6745b4852a52040d880ee1dcc6d797))
-* **ui:** FRO-5 Animation Card Played ([#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/23)) ([70a44fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/70a44fd1ea119d43f875e6cfac56fb25747d8913))

src/components/ingame/HandC.vue

@@ -25,7 +25,8 @@ function triggerWiggle(index: number) {
 function handlePlayCard(index: number | null) {
   if (index === null) return
 
-  wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
+  wb.sendAndWait("PlayCard", { cardindex: index })
+    .catch((error) => {
       triggerWiggle(index)
 
       $q.notify({
@@ -36,14 +37,7 @@ function handlePlayCard(index: number | null) {
 
     })
 }
-function onBeforeLeave(el: Element) {
-  const element = el as HTMLElement;
-  const { marginLeft, marginTop, width, height } = window.getComputedStyle(element);
-  element.style.left = `${element.offsetLeft - parseFloat(marginLeft)}px`;
-  element.style.top = `${element.offsetTop - parseFloat(marginTop)}px`;
-  element.style.width = width;
-  element.style.height = height;
-}
+
 function handleSkipDogLife() {
   //TODO: Add some animation or feedback for skipping turn
 }
@@ -58,19 +52,13 @@ function getCardImagePath(cardPath: string) {
 <template>
   <div class="hand-container">
     <div id="card-slide" class="ingame-cards-slide">
-      <transition-group
-        tag="div"
-        class="cards-row"
-        name="card-move"
-        enter-active-class="animate__animated animate__fadeIn"
-        @before-leave="onBeforeLeave"
-        move-class="card-moving">
+      <div class="cards-row">
         <div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
           <div class="card-btn" aria-label="Play card">
             <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
           </div>
         </div>
-      </transition-group>
+      </div>
       <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
         <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
       </div>
@@ -148,18 +136,4 @@ function getCardImagePath(cardPath: string) {
     border-radius: 4px;
   }
 }
-.card-moving {
-  transition: transform 0.5s ease;
-  transition-delay: 1s;
-}
-.card-move-leave-active {
-  position: absolute;
-  transition: all 0.5s ease;
-  pointer-events: none;
-}
-
-.card-move-leave-to {
-  opacity: 0;
-  transform: translateY(-400px);
-}
 </style>

src/views/LobbyView.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import {computed, ref} from 'vue';
-import LobbyComponent from '../components/lobby/LobbyComponent.vue';
-import type {LobbyInfo} from "@/types/GameTypes.ts";
-import type {User} from "@/types/GameSubTypes.ts";
-import {useIngame} from "@/composables/useIngame.ts";
-import {sendEvent} from "@/services/ws.ts";
-
-const ig = useIngame()
-
-const lobbyInfo = computed<LobbyInfo | null>(() => {
-  if (ig.state === 'Lobby' && ig.data) {
-    return ig.data as LobbyInfo;
-  }
-  return null;
-});
-
-const handleKickPlayer = (user: User) => {
-  sendEvent("KickEvent", {
-    user: user
-  })
-};
-
-const handleStartGame = () => {
-  //TODO: Implement start game
-};
-
-const handleLeaveGame = (user: User) => {
-  sendEvent("LeftEvent",{
-    user: user
-    })
-};
-</script>
-
-<template>
-  <q-layout>
-    <q-page-container>
-      <q-page class="vh-100 column">
-        <lobby-component
-          v-if="lobbyInfo"
-          :lobbyInfo="lobbyInfo"
-          @kick-player="handleKickPlayer"
-          @start-game="handleStartGame"
-          @leave-game="handleLeaveGame"
-        />
-      </q-page>
-    </q-page-container>
-  </q-layout>
-</template>
-
-<style scoped>
-
-</style>

versions.env

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