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>