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

src/components/lobby/LobbyComponent.vue

@@ -4,31 +4,60 @@ import {useIngame} from "@/composables/useIngame.ts";
 import type {LobbyInfo} from "@/types/GameTypes.ts";
 import {useWebSocket} from "@/composables/useWebsocket.ts";
 import {computed} from "vue";
+import router from "@/router";
+import {useQuasar} from "quasar";
 
 const wb = useWebSocket()
 const ig = useIngame();
+const $q = useQuasar();
+
 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 lobbyName = computed(() => {
+  return `${ig.data?.gameId}`
+});
 
 const handleKickPlayer = (user: User) => {
   if (isHost) {
-    emit('kick-player', user);
+    wb.send("KickPlayer", {playerId: user.id})
   }
 };
 
 const handleStartGame = () => {
   if (isHost) {
-    wb.send("StartGame", {})
+    wb.sendAndWait("StartGame", {})
   }
 };
 
 const handleLeaveGame = (user: User) => {
-  emit('leave-game', user);
+  wb.sendAndWait("LeaveGame", {user: user})
 };
+
+wb.useEvent("SessionClosed", () => {
+  $q.notify({
+    message: `You left the lobby.`,
+    color: "positive"
+  })
+  router.replace("/")
+})
+wb.useEvent("LeftEvent", () => {
+  $q.notify({
+    message: `You left the lobby.`,
+    color: "positive"
+  })
+  router.replace("/")
+})
+
+wb.useEvent("KickEvent", () => {
+  $q.notify({
+    message: `You were kicked from the lobby!`,
+    color: "amber"
+  })
+  router.replace("/")
+})
 const profileIcon = 'person';
 </script>
 
@@ -75,7 +104,7 @@ const profileIcon = 'person';
                   v-if="player.id !== (<LobbyInfo>ig.data).self.id"
                   color="negative"
                   label="Remove"
-                  @click="handleKickPlayer((<LobbyInfo>ig.data).self)"
+                  @click="handleKickPlayer(player)"
                   class="full-width"
                 />
                 <q-btn