From e0ece631d3f716e6acde08a887c8ec7d78b99935 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 29 Dec 2024 22:06:57 +0100
Subject: [PATCH] SSE on words

---
 components/user.vue              | 33 ++++++++++++++++----------------
 netcode/handlers/word.handler.ts | 33 ++++++++++++++++++++++++++++++++
 pages/index.vue                  | 21 +++++++++++++++++++-
 pages/words.vue                  | 25 ++++++++++++++++++------
 service/game.service.ts          | 13 +++++++++++++
 service/user.service.ts          | 15 ---------------
 store/lobby.store.ts             | 25 ++++++++++++++++++++++++
 word.events.ts                   | 26 -------------------------
 8 files changed, 126 insertions(+), 65 deletions(-)
 create mode 100644 netcode/handlers/word.handler.ts
 create mode 100644 service/game.service.ts
 delete mode 100644 service/user.service.ts
 create mode 100644 store/lobby.store.ts
 delete mode 100644 word.events.ts

diff --git a/components/user.vue b/components/user.vue
index 345b371..5223449 100644
--- a/components/user.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/netcode/handlers/word.handler.ts b/netcode/handlers/word.handler.ts
new file mode 100644
index 0000000..5bb3d76
--- /dev/null
+++ b/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
+  },
+};
diff --git a/pages/index.vue b/pages/index.vue
index c22f420..eb3d181 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/pages/words.vue b/pages/words.vue
index c5aacb8..7c90638 100644
--- a/pages/words.vue
+++ b/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>
diff --git a/service/game.service.ts b/service/game.service.ts
new file mode 100644
index 0000000..2aa5674
--- /dev/null
+++ b/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
+}
diff --git a/service/user.service.ts b/service/user.service.ts
deleted file mode 100644
index 97fffea..0000000
--- a/service/user.service.ts
+++ /dev/null
@@ -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
-}
diff --git a/store/lobby.store.ts b/store/lobby.store.ts
new file mode 100644
index 0000000..a8cf455
--- /dev/null
+++ b/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
+        },
+    },
+});
\ No newline at end of file
diff --git a/word.events.ts b/word.events.ts
deleted file mode 100644
index 7a901c1..0000000
--- a/word.events.ts
+++ /dev/null
@@ -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) {}
-}