feat : lobby

pages/index.vue

@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { subscribe } from "~/netcode";
-import { getGames } from "~/service/game.service";
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
 
-let eventSource: EventSource;
+const loading = ref(false);
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
 
-const games = await getGames();
-
-onBeforeMount(() => {
-  eventSource = subscribe(`/games/subscribe`);
-  eventSource.addEventListener("message", async (message) => {
-    console.log(message);
-  });
-});
-
-onUnmounted(() => {
-  if (eventSource) {
-    eventSource.close();
+async function createGame() {
+  if (loading.value) {
+    return;
   }
-});
+  loading.value = true;
+  await lobbyStore.createGame().catch((e) => {
+    if (e.data.statusCode == 400) {
+      console.error("Owned game limit reached");
+    } else {
+      console.log(e);
+    }
+  });
+}
 </script>
 
 <template>
-  <div v-for="game in games" :key="game.id"></div>
-  <input type="button" value="Create Game" />
+  <LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
+  <input
+    type="button"
+    value="Create Game"
+    @click="createGame"
+    :disabled="!userStore.self"
+  />
 </template>
+
+<style lang="css" scoped>
+input:disabled {
+  cursor: wait;
+}
+</style>