feat(ui): FRO-34 Lobby

Started Lobby Component

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

@@ -13,10 +13,15 @@ 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>