feat : lobby

pages/game/[id].vue

@@ -0,0 +1 @@
+<template>Hello</template>

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>

pages/words.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { subscribe } from "~/netcode";
-import { handlers } from "~/netcode/handlers/word.handler";
 import { useWordStore } from "~/store/word.store";
 
 const newWord = ref("");
@@ -11,7 +9,7 @@ await wordStore.fetchWordList();
 const loading = ref(false);
 const wordInput = ref<HTMLInputElement | null>(null);
 
-async function createWord(e: Event) {
+async function createWord() {
   if (loading.value) {
     return;
   }
@@ -29,22 +27,12 @@ async function createWord(e: Event) {
   }
 }
 
-let eventSource: EventSource;
 onBeforeMount(() => {
-  eventSource = subscribe(`/words/subscribe`);
-  eventSource.addEventListener("message", async (message) => {
-    const data = JSON.parse(message.data);
-    const type = data.type as string;
-    if (type in handlers) {
-      handlers[type as keyof typeof handlers](data);
-    }
-  });
+  wordStore.subscribe();
 });
 
 onUnmounted(() => {
-  if (eventSource) {
-    eventSource.close();
-  }
+  wordStore.close();
 });
 </script>