ci: bump version to v0.13.0

feat(ui): FRO-35 Animations (#22 )
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>
2025-12-11 10:02:21 +00:00 · 2025-12-11 11:00:49 +01:00 · 2025-12-10 23:17:06 +00:00
13 changed files with 54 additions and 215 deletions
--- a/CHANGELOG.md
+++ b/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))
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/MainMenuBoxes.vue
+++ b/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;
--- a/src/components/lobby/LobbyComponent.vue
+++ b/src/components/lobby/LobbyComponent.vue
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import type {LobbyInfo} from "@/types/GameTypes.ts";
-import type {User} from "@/types/GameSubTypes.ts";
-
-
-const props = defineProps<{
-  lobbyInfo: LobbyInfo
-}>()
-const emit = defineEmits<{
-  (e: 'kick-player', user: User): void;
-  (e: 'start-game'): void;
-  (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) {
-    emit('kick-player', user);
-  }
-};
-
-const handleStartGame = () => {
-  if (isHost) {
-    emit('start-game');
-  }
-};
-
-const handleLeaveGame = (user: User) => {
-  emit('leave-game', user);
-};
-const profileIcon = 'person';
-</script>
-
-<template>
-
-    <div class="row q-pa-md items-center">
-      <div class="col text-center text-h4 text-weight-medium">
-        Lobby Name: {{ lobbyName }} </div>
-      <q-btn
-        color="negative"
-        label="Exit"
-        @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 }} / {{ props.lobbyInfo.maxPlayers }}
-      </div>
-    </div>
-
-    <div class="row justify-center items-center flex-grow-1 q-px-md">
-      <div class="col-12">
-        <div class="row justify-center q-gutter-md">
-          <div v-for="player in players" :key="player.id" class="col-auto">
-            <q-card class="bg-dark q-pa-md text-center" style="width: 250px;">
-
-              <q-avatar size="80px" color="primary" text-color="white" :icon="profileIcon" class="q-mb-sm" />
-
-              <q-card-section>
-                <div class="text-h6">
-                  {{ 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">
-                    (Host)
-                  </q-badge>
-                </div>
-              </q-card-section>
-
-              <q-card-actions align="center" v-if="isHost">
-                <q-btn
-                  v-if="player.id !== props.lobbyInfo.self.id"
-                  color="negative"
-                  label="Remove"
-                  @click="handleKickPlayer(props.lobbyInfo.self)"
-                  class="full-width"
-                />
-                <q-btn
-                  v-else
-                  color="negative"
-                  label="Remove (Cannot Kick Self)"
-                  disable
-                  class="full-width"
-                />
-              </q-card-actions>
-
-            </q-card>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="row q-py-lg text-center">
-      <div class="col-12">
-        <template v-if="isHost">
-          <q-btn
-            color="positive"
-            label="Start Game"
-            size="lg"
-            @click="handleStartGame"
-          />
-        </template>
-        <template v-else>
-          <div class="text-h6 q-mb-sm">
-            Waiting for the host to start the game...
-          </div>
-          <q-spinner
-            color="primary"
-            size="3em"
-            :thickness="2"
-          />
-        </template>
-      </div>
-    </div>
-</template>
-
-<style scoped>
-</style>
--- a/src/composables/useUserInfo.ts
+++ b/src/composables/useUserInfo.ts
@@ -20,7 +20,6 @@ export const useUserInfo = defineStore('userInfo', () => {

  function requestState() {
    axios.get(`${api}/status`, {withCredentials: true}).then((response) => {
-      console.log("STATUS DATA:" + response.data.status + response.data.inGame)
      username.value = response.data.username;
      if (response.data.ingame) {
        gameId.value = response.data.gameId;
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,15 +12,11 @@ import { createPinia } from 'pinia'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import {useUserInfo} from "@/composables/useUserInfo.ts";
-import {useIngame} from "@/composables/useIngame.ts";
-import {initWebSocket} from "@/services/ws.ts";
-
+import 'animate.css/animate.min.css';
 const app = createApp(App)
 const pinia = createPinia()

 app.use(pinia)
-const ingameStore = useIngame();
-initWebSocket(ingameStore)
 app.use(router)
 app.use(Quasar, {
  plugins: {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,8 +7,7 @@ import defaultMenu from "../components/DefaultMenu.vue"
 import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
 import rulesView from "../components/Rules.vue";
-import LobbyView from "@/views/LobbyView.vue";
-import GameView from "@/views/Game.vue"
+
 const api = window?.__RUNTIME_CONFIG__?.API_URL;

 const router = createRouter({
@@ -51,12 +50,6 @@ const router = createRouter({
      component: LoginView,
      meta: { requiresAuth: false }
    },
-    {
-      path: '/lobby',
-      name: 'lobby',
-      component: LobbyView,
-      meta: {requiresAuth: true }
-    }
  ],
 })

--- a/src/services/ws.ts
+++ b/src/services/ws.ts
@@ -33,13 +33,10 @@ let ws: WebSocket | null = null;

 const pending = new Map<string, PendingEntry>();
 const handlers = new Map<string, HandlerFn>();
-let uState: ReturnType<typeof useIngame> | null = null;
+const uState = useIngame();

 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;

-export function initWebSocket(ingameStore: ReturnType<typeof useIngame>) {
-  uState = ingameStore;
-}
 let defaultHandler: HandlerFn | null = null;

 function uuid(): string {
@@ -73,10 +70,6 @@ function stopHeartbeat() {
 }

 function setupSocketHandlers(socket: WebSocket) {
-  if (!uState) {
-    console.error("[WS] WebSocket module not initialized with Pinia store!");
-    return;
-  }
  socket.onmessage = async (raw) => {
    console.debug("[WS] MESSAGE:", raw.data);

@@ -107,9 +100,7 @@ function setupSocketHandlers(socket: WebSocket) {
    }

    if (state && stateData) {
-      if(uState) {
-        uState.setIngame(state, stateData);
-      }
+      uState.setIngame(state, stateData);
    }

    // Server event → handler branch
--- a/src/views/CreateGame.vue
+++ b/src/views/CreateGame.vue
@@ -11,6 +11,7 @@ const playerAmount = ref(2);
 const $q = useQuasar();
 const isLoading = ref(false);
 const router = useRouter();
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 const createGameQuasar = async () => {
  if (!lobbyName.value) {
    $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
--- a/src/views/LobbyView.vue
+++ b/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>
--- a/src/views/MainMenuView.vue
+++ b/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">
-        KnockOutWhist
-      </h1>
+      <q-page class="flex justify-start items-center column q-pa-md">
+
+
+          <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>
--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=12
+MINOR=13
 PATCH=0
Author	SHA1	Message	Date
TeamCity	f0623dbfb2	ci: bump version to v0.13.0	2025-12-11 10:02:21 +00:00
lq64	d73b4f396b	feat(ui): FRO-35 Animations (#22 ) 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>	2025-12-11 11:00:49 +01:00
TeamCity	bda06a37cc	ci: bump version to v0.12.1	2025-12-10 23:17:06 +00:00