feat : lobby

app.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
-import { useUserStore } from '~/store/user.store';
+import { useUserStore } from "~/store/user.store";
+import { useLobbyStore } from "./store/lobby.store";
 const userStore = useUserStore();
+const lobbyStore = useLobbyStore();
 
+userStore.whoami();
+lobbyStore.fetchGames();
+onBeforeMount(() => {
+  lobbyStore.subscribe();
+});
 
-const req = await userStore.whoami()
+onBeforeUnmount(() => {
-
+  lobbyStore.close();
-
+});
-
 </script>
 
 <template>
@@ -14,7 +20,7 @@ const req = await userStore.whoami()
     <NuxtRouteAnnouncer />
     <NuxtLayout>
       <NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
-      <Header />
+      <ConceptHeader />
       <NuxtPage />
     </NuxtLayout>
   </div>

components/conceptHeader.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+const userStore = useUserStore();
+const lobbyStore = useLobbyStore();
+
+const currentGames = computed(() => {
+  const games = Object.values(lobbyStore.games).filter((g) =>
+    g.players.some((p) => p.user.id == userStore.self?.id)
+  );
+  console.log(games);
+  return games;
+});
+</script>
+
+<template>
+  <header>
+    <div id="self">
+      <template v-if="userStore.has_contacted">
+        <ClientOnly>
+          <template v-if="userStore.self && userStore.self.id">
+            <User :id="userStore.self.id"></User>
+            <button>Logout</button>
+          </template>
+          <button v-else>Login</button>
+        </ClientOnly>
+      </template>
+
+      <template v-else> Contacting server... </template>
+    </div>
+
+    <div id="links">
+      <NuxtLink to="/">Home</NuxtLink>
+      <NuxtLink to="/words">Words</NuxtLink>
+    </div>
+
+    <div id="games">
+      <NuxtLink v-for="game of currentGames" :to="'/game/' + game.id"
+        ><div>Back to Current Game</div></NuxtLink
+      >
+    </div>
+  </header>
+</template>
+
+<style lang="css" scoped>
+header,
+header * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+header > * {
+  flex: 1 1 0px;
+}
+
+div#self {
+  gap: 10px;
+  height: 32px;
+}
+
+div#links {
+  flex-grow: 4;
+  gap: 1%;
+}
+
+div#links {
+}
+</style>

components/header.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-
-import { useUserStore } from '~/store/user.store';
-
-const userStore = useUserStore();
-
-</script>
-
-<template>
-    <header>
-        <div id="self">
-            <template v-if="userStore.has_contacted">
-                <ClientOnly>
-                    <template v-if="userStore.self && userStore.self.id">
-                        <User :id="userStore.self.id"></User>
-                        <button>Logout</button>
-                    </template>
-                    <button v-else>Login</button>
-                </ClientOnly>
-            </template>
-
-            <template v-else>
-                Contacting server...
-            </template>
-        </div>
-
-        <div id="links">
-            <NuxtLink to="/">Home</NuxtLink>
-            <NuxtLink to="/words">Words</NuxtLink>
-        </div>
-
-    </header>
-</template>
-
-<style lang="css" scoped>
-header,
-header * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: nowrap;
-}
-
-div#self {
-    height: 32px
-}
-
-div#links {
-    width: 100%;
-    gap: 1%;
-}
-</style>

components/lobby/game.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+export interface Props {
+  id: number;
+}
+
+const loading = ref(false);
+
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
+const props = defineProps<Props>();
+
+const game = lobbyStore.games[props.id];
+</script>
+
+<template>
+  {{ game }}
+  <NuxtLink :to="'/game/' + id"
+    ><input type="button" value="open" :disabled="!userStore.self || loading"
+  /></NuxtLink>
+</template>
+
+<style lang="css" scoped>
+input:disabled {
+  cursor: wait;
+}
+</style>

lobby.events.ts

@@ -1,21 +0,0 @@
-import { GameResponseDTO } from './dto/gameresponse.dto';
-import { PlayerResponseDTO } from './dto/playerresponse.dto';
-
-export class GameCreateEvent extends GameResponseDTO {
-  type: 'create';
-}
-
-export class GameDeleteEvent {
-  type: 'delete';
-  constructor(public id?: number) {}
-}
-export class GameJoinEvent {
-  type: 'joingame';
-  gameId: number;
-  constructor(
-    public player: PlayerResponseDTO,
-    game?: Partial<GameResponseDTO>,
-  ) {
-    this.gameId = game.id;
-  }
-}

middleware/auth.global.ts

@@ -2,18 +2,19 @@ const validPaths = ["/", "/rules", "/test", "/words"];
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const config = useRuntimeConfig();
+  if (to.path.startsWith("/game/")) {
+    return;
+  }
   if (to.path == "/login") {
-    console.log("hey")
     const code = to.query.code;
     if (!code) {
       navigateTo(config.public.discordLoginEndpoint, { external: true });
     } else {
       navigateTo("/login");
     }
-    return
+    return;
   }
 
-
   if (validPaths.includes(to.path)) {
     return;
   }

netcode/handlers/lobby.handler.ts

@@ -0,0 +1,28 @@
+import { useLobbyStore } from "~/store/lobby.store";
+import type { LobbyCreateEvent, LobbyDeleteEvent, LobbyJoinEvent, LobbyLeaveEvent, LobbyStartEvent } from "../events/lobby.events";
+
+
+
+export const handlers = {
+  create: (event: LobbyCreateEvent) => {
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id] = event.game
+  },
+  start: (event:LobbyStartEvent)=>{
+    const lobbyStore = useLobbyStore()
+    lobbyStore.games[event.game.id].started = true
+  },
+  delete:(event: LobbyDeleteEvent)=>{
+    const lobbyStore = useLobbyStore()
+    delete lobbyStore.games[event.id]
+  },
+  join:(event: LobbyJoinEvent)=>{
+    const lobbyStore = useLobbyStore()
+    lobbyStore.games[event.game.id].players.push(event.player)
+  },
+  leave:(event: LobbyLeaveEvent)=>{
+    const lobbyStore = useLobbyStore()
+    const playerIndex = lobbyStore.games[event.game.id].players.findIndex(p=>p.user.id == event.player.user.id)
+    lobbyStore.games[event.game.id].players.splice(playerIndex,1)
+  }
+};

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 { useLobbyStore } from "~/store/lobby.store";
-import { getGames } from "~/service/game.service";
+import { useUserStore } from "~/store/user.store";
 
-let eventSource: EventSource;
+const loading = ref(false);
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
 
-const games = await getGames();
+async function createGame() {
-
+  if (loading.value) {
-onBeforeMount(() => {
+    return;
-  eventSource = subscribe(`/games/subscribe`);
-  eventSource.addEventListener("message", async (message) => {
-    console.log(message);
-  });
-});
-
-onUnmounted(() => {
-  if (eventSource) {
-    eventSource.close();
   }
-});
+  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>
+  <LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
-  <input type="button" value="Create Game" />
+  <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`);
+  wordStore.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);
-    }
-  });
 });
 
 onUnmounted(() => {
-  if (eventSource) {
+  wordStore.close();
-    eventSource.close();
-  }
 });
 </script>
 

service/game.service.ts

@@ -1,13 +0,0 @@
-import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
-
-export async function getGames() {
-  const config = useRuntimeConfig();
-  const data = await useFetch<GameResponseDTO[]>(
-    config.public.endpoint + `/games`,
-    {
-      credentials: "include",
-      immediate: true,
-    }
-  );
-  return data.data
-}

store/lobby.store.ts

@@ -1,25 +1,55 @@
 import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
 import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
-import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
+import { handlers } from "~/netcode/handlers/lobby.handler";
 
 export const useLobbyStore = defineStore("lobby", {
-    state: () => ({
+  state: () => ({
-        games: {} as Record<string, GameResponseDTO,
+    games: {} as Record<number, GameResponseDTO>,
-    }),
+    eventSource: null as null | EventSource,
-    actions: {
+  }),
-        async fetchGames() {
+  actions: {
-            const config = useRuntimeConfig();
+    async subscribe() {
-            const data = await useFetch<GameResponseDTO[]>(config.public.endpoint + `/users/` + id, {
+      this.eventSource = subscribe(`/games/subscribe`);
-                credentials: "include",
+      this.eventSource.addEventListener("message", async (message) => {
-                immediate: true
+        const data = JSON.parse(message.data);
-            })
+        const type = data.type as string;
-            if(data.data.value){
+        if (type in handlers) {
-                for(const game of data.data.value){
+          handlers[type as keyof typeof handlers](data);
-                    this.games[game.id]  = game
+        }
-                } 
+      });
-            }
-           
-            return data.data
-        },
     },
-});
+    async close() {
+      this.eventSource?.close();
+    },
+    async fetchGames() {
+      const config = useRuntimeConfig();
+      const data = await useFetch<GameResponseDTO[]>(
+        config.public.endpoint + `/games/`,
+        {
+          credentials: "include",
+          immediate: true,
+        }
+      );
+      if (data.data.value) {
+        for (const game of data.data.value) {
+          this.games[game.id] = game;
+        }
+      }
+
+      return data.data;
+    },
+    async createGame() {
+      const config = useRuntimeConfig();
+      const data = await $fetch<GameResponseDTO>(
+        config.public.endpoint + "/games",
+        {
+          method: "POST",
+          credentials: "include",
+        }
+      );
+      this.games[data.id] = data;
+      return data;
+    },
+  },
+});

store/word.store.ts

@@ -1,60 +1,90 @@
 import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
 import { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+import { handlers } from "~/netcode/handlers/word.handler";
 
 export const useWordStore = defineStore("word", {
-    state: () => ({
+  state: () => ({
-        words: {} as Record<string, WordResponseDTO>,
+    words: {} as Record<string, WordResponseDTO>,
-    }),
+    eventSource: null as null | EventSource,
-    actions: {
+  }),
-        async fetchWordList() {
+  actions: {
-            const config = useRuntimeConfig();
+    async subscribe() {
-            const data = await useFetch<WordResponseDTO[]>(config.public.endpoint + `/words/all`, {
+      this.eventSource = subscribe(`/words/subscribe`);
-                credentials: "include",
+      this.eventSource.addEventListener("message", async (message) => {
-            })
+        const data = JSON.parse(message.data);
-            if (data.data.value && !data.error.value) {
+        const type = data.type as string;
-
+        if (type in handlers) {
-                for (const word of data.data.value) {
+          handlers[type as keyof typeof handlers](data);
-                    this.words[word.id] = word
-                }
-            }
-            return data
-        },
-        async enableWord(word: WordResponseDTO) {
-            const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + word.id + "/enable", {
-                credentials: "include",
-                method: "PUT"
-            })
-            word.enabled = true
-            return data
-        },
-        async disableWord(word: WordResponseDTO) {
-            const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/` + word.id + "/disable", {
-                credentials: "include",
-                method: "PUT"
-            })
-            word.enabled = false
-            return data
-        },
-
-        async createWord(value: string) {
-            const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/`, {
-                credentials: "include",
-                body: { value },
-                method: "POST"
-            })
-            this.words[data.id] = data
-            return data
-        },
-        async deleteWord(word: WordResponseDTO){
-            const config = useRuntimeConfig();
-            const data = await $fetch<WordResponseDTO>(config.public.endpoint + `/words/`+word.id, {
-                credentials: "include",
-                method: "DELETE"
-            })
-            delete this.words[word.id]
         }
+      });
     },
-});
+    async close() {
+      this.eventSource?.close();
+    },
+    async fetchWordList() {
+      const config = useRuntimeConfig();
+      const data = await useFetch<WordResponseDTO[]>(
+        config.public.endpoint + `/words/all`,
+        {
+          credentials: "include",
+        }
+      );
+      if (data.data.value && !data.error.value) {
+        for (const word of data.data.value) {
+          this.words[word.id] = word;
+        }
+      }
+      return data;
+    },
+    async enableWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id + "/enable",
+        {
+          credentials: "include",
+          method: "PUT",
+        }
+      );
+      word.enabled = true;
+      return data;
+    },
+    async disableWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id + "/disable",
+        {
+          credentials: "include",
+          method: "PUT",
+        }
+      );
+      word.enabled = false;
+      return data;
+    },
+
+    async createWord(value: string) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/`,
+        {
+          credentials: "include",
+          body: { value },
+          method: "POST",
+        }
+      );
+      this.words[data.id] = data;
+      return data;
+    },
+    async deleteWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id,
+        {
+          credentials: "include",
+          method: "DELETE",
+        }
+      );
+      delete this.words[word.id];
+    },
+  },
+});