feat(ui): FRO-34 Lobby

Started Lobby Component

CHANGELOG.md

@@ -104,8 +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))

package-lock.json

@@ -10,7 +10,6 @@
       "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",
@@ -3273,12 +3272,6 @@
       "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,15 +17,14 @@
   },
   "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",
-    "tsparticles": "~3.9.1",
     "vue": "^3.5.25",
+    "vue-router": "^4.6.3",
+    "tsparticles": "~3.9.1",
+    "@tsparticles/vue3": "~3.0.1",
+    "axios": "^1.13.2",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.6.3"
+    "pinia": "^3.0.4"
   },
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",

src/components/MainMenuBoxes.vue

@@ -39,20 +39,12 @@ const navigateTo = (routeName: string) => {
 </script>
 
 <template>
-  <transition-group
+  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
-    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"
@@ -76,7 +68,7 @@ const navigateTo = (routeName: string) => {
         </q-card-section>
       </q-card>
     </div>
-  </transition-group>
+  </div>
 </template>
 
 <style scoped>
@@ -85,6 +77,7 @@ 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/lobby/LobbyComponent.vue

@@ -0,0 +1,125 @@
+<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>

src/composables/useUserInfo.ts

@@ -20,6 +20,7 @@ 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;

src/main.ts

@@ -12,11 +12,15 @@ 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';
+import {useIngame} from "@/composables/useIngame.ts";
+import {initWebSocket} from "@/services/ws.ts";
+
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
+const ingameStore = useIngame();
+initWebSocket(ingameStore)
 app.use(router)
 app.use(Quasar, {
   plugins: {

src/router/index.ts

@@ -7,7 +7,8 @@ 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({
@@ -50,6 +51,12 @@ const router = createRouter({
       component: LoginView,
       meta: { requiresAuth: false }
     },
+    {
+      path: '/lobby',
+      name: 'lobby',
+      component: LobbyView,
+      meta: {requiresAuth: true }
+    }
   ],
 })
 

src/services/ws.ts

@@ -33,10 +33,13 @@ let ws: WebSocket | null = null;
 
 const pending = new Map<string, PendingEntry>();
 const handlers = new Map<string, HandlerFn>();
-const uState = useIngame();
+let uState: ReturnType<typeof useIngame> | null = null;
 
 let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
 
+export function initWebSocket(ingameStore: ReturnType<typeof useIngame>) {
+  uState = ingameStore;
+}
 let defaultHandler: HandlerFn | null = null;
 
 function uuid(): string {
@@ -70,6 +73,10 @@ 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);
 
@@ -100,7 +107,9 @@ function setupSocketHandlers(socket: WebSocket) {
     }
 
     if (state && stateData) {
-      uState.setIngame(state, stateData);
+      if(uState) {
+        uState.setIngame(state, stateData);
+      }
     }
 
     // Server event → handler branch

src/views/CreateGame.vue

@@ -11,7 +11,6 @@ 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' });

src/views/LobbyView.vue

@@ -0,0 +1,53 @@
+<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>

src/views/MainMenuView.vue

@@ -14,26 +14,10 @@ import UserStatusArea from '../components/User.vue'
     </q-header>
 
     <q-page-container>
-      <q-page class="flex justify-start items-center column q-pa-md">
+      <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>
-          <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=13
+MINOR=12
-PATCH=0
+PATCH=1