SSE on words

components/user.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
-import { fetchUser } from '~/service/user.service';
-import { useUserStore } from '~/store/user.store';
-
+import { useUserStore } from "~/store/user.store";
 
 export interface Props {
-    id: string;
+  id: string;
 }
 
 const userStore = useUserStore();
-const props = defineProps<Props>()
-
-const user = await userStore.fetchUser(props.id)
+const props = defineProps<Props>();
 
+const user = await userStore.fetchUser(props.id);
 </script>
 
 <template>
-    <div class="user">
-        <img class="user-avatar" :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`">
-        {{ user?.username }}
-    </div>
-
+  <div class="user">
+    <img
+      class="user-avatar"
+      :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`"
+    />
+    {{ user?.username }}
+  </div>
 </template>
 
 <style lang="css">
 div.user {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 img.user-avatar {
-    height: 32px;
-    border-radius: 50%;
+  height: 32px;
+  border-radius: 50%;
 }
-</style>
+</style>

netcode/handlers/word.handler.ts

@@ -0,0 +1,33 @@
+import { useWordStore } from "~/store/word.store";
+import {
+  WordCreateEvent,
+  WordDeleteEvent,
+  WordDisableEvent,
+  WordEditEvent,
+  WordEnableEvent,
+} from "../events/word.events";
+
+
+
+export const handlers = {
+  create: (event: WordCreateEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.word.id] = event.word
+  },
+  edit: (event: WordEditEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.word.id].value = event.word.value
+  },
+  delete: (event: WordDeleteEvent) => {
+    const wordStore = useWordStore();
+    delete wordStore.words[event.id]
+  },
+  enable: (event: WordEnableEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.id].enabled = true
+  },
+  disable: (event: WordDisableEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.id].enabled = false
+  },
+};

pages/index.vue

@@ -1,7 +1,26 @@
 <script setup lang="ts">
+import { subscribe } from "~/netcode";
+import { getGames } from "~/service/game.service";
 
+let eventSource: EventSource;
+
+const games = await getGames();
+
+onBeforeMount(() => {
+  eventSource = subscribe(`/games/subscribe`);
+  eventSource.addEventListener("message", async (message) => {
+    console.log(message);
+  });
+});
+
+onUnmounted(() => {
+  if (eventSource) {
+    eventSource.close();
+  }
+});
 </script>
 
 <template>
-    Hello
+  <div v-for="game in games" :key="game.id"></div>
+  <input type="button" value="Create Game" />
 </template>

pages/words.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { subscribe } from "~/netcode";
+import { handlers } from "~/netcode/handlers/word.handler";
 import { useWordStore } from "~/store/word.store";
 
 const newWord = ref("");
@@ -27,12 +29,23 @@ async function createWord(e: Event) {
   }
 }
 
-// watch(wordInput, (e) =>
-//   setInterval(() => {
-//     // e.focus();
-//     console.log(wordInput.value);
-//   }, 1000)
-// );
+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);
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (eventSource) {
+    eventSource.close();
+  }
+});
 </script>
 
 <template>

service/game.service.ts

@@ -0,0 +1,13 @@
+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
+}

service/user.service.ts

@@ -1,15 +0,0 @@
-import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
-
-export async function fetchUser(id: string) {
-    const config = useRuntimeConfig();
-    const data = await useFetch<UserResponseDTO>(config.public.endpoint + `/users/` + id, {
-        credentials: "include",
-    }).then(_d => {
-        if (_d.data.value) {
-            _d.data.value = new UserResponseDTO(_d.data.value)
-        }
-        return _d
-    })
-
-    return data
-}

store/lobby.store.ts

@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
+
+export const useLobbyStore = defineStore("lobby", {
+    state: () => ({
+        games: {} as Record<string, GameResponseDTO,
+    }),
+    actions: {
+        async fetchGames() {
+            const config = useRuntimeConfig();
+            const data = await useFetch<GameResponseDTO[]>(config.public.endpoint + `/users/` + id, {
+                credentials: "include",
+                immediate: true
+            })
+            if(data.data.value){
+                for(const game of data.data.value){
+                    this.games[game.id]  = game
+                } 
+            }
+           
+            return data.data
+        },
+    },
+});

word.events.ts

@@ -1,26 +0,0 @@
-import { WordResponseDTO } from './dto/wordresponse.dto';
-
-export class WordCreateEvent {
-  type: 'create';
-  constructor(public word: WordResponseDTO) {}
-}
-
-export class WordEditEvent {
-  type: 'edit';
-  constructor(public word: WordResponseDTO) {}
-}
-
-export class WordDeleteEvent {
-  type: 'delete';
-  constructor(public id: number) {}
-}
-
-export class WordEnableEvent {
-  type: 'enable';
-  constructor(public id: number) {}
-}
-
-export class WordDisableEvent {
-  type: 'disable';
-  constructor(public id: number) {}
-}