feat: Update routing and websocket configuration for game state management

src/components/lobby/LobbyComponent.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import type {LobbyInfo} from "@/types/GameTypes.ts";
 import type {User} from "@/types/GameSubTypes.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {LobbyInfo} from "@/types/GameTypes.ts";
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {computed} from "vue";
 
-
-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 wb = useWebSocket()
+const ig = useIngame();
+const maxPlayers = computed(() => (<LobbyInfo>ig.data).maxPlayers);
+const isHost = computed(() => (<LobbyInfo>ig.data).self.host);
+const players = computed(() => {
+  return (<LobbyInfo>ig.data).users;
+})
+const lobbyName = `${ig.data?.gameId}`;
 
 const handleKickPlayer = (user: User) => {
   if (isHost) {
@@ -26,7 +22,7 @@ const handleKickPlayer = (user: User) => {
 
 const handleStartGame = () => {
   if (isHost) {
-    emit('start-game');
+    wb.send("StartGame", {})
   }
 };
 
@@ -44,14 +40,14 @@ const profileIcon = 'person';
       <q-btn
         color="negative"
         label="Exit"
-        @click="handleLeaveGame(props.lobbyInfo.self)"
+        @click="handleLeaveGame((<LobbyInfo>ig.data).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 }}
+        Players: {{ players.length }} / {{ maxPlayers }}
       </div>
     </div>
 
@@ -65,7 +61,7 @@ const profileIcon = 'person';
 
               <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">
+                  {{ player.username }} <q-badge v-if="player.id === (<LobbyInfo>ig.data).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">
@@ -76,10 +72,10 @@ const profileIcon = 'person';
 
               <q-card-actions align="center" v-if="isHost">
                 <q-btn
-                  v-if="player.id !== props.lobbyInfo.self.id"
+                  v-if="player.id !== (<LobbyInfo>ig.data).self.id"
                   color="negative"
                   label="Remove"
-                  @click="handleKickPlayer(props.lobbyInfo.self)"
+                  @click="handleKickPlayer((<LobbyInfo>ig.data).self)"
                   class="full-width"
                 />
                 <q-btn