Merge remote-tracking branch 'origin/feat/BAC-35' into feat/BAC-35

# Conflicts:
#	src/components/lobby/LobbyComponent.vue
#	src/composables/useUserInfo.ts
#	src/main.ts
#	src/router/index.ts
#	src/services/ws.ts

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>