Feat : EXPERIMENTAL : add SSR

pages/lobby.vue

@@ -2,33 +2,13 @@
 // import { playSound } from '~/helpers/audioHelpers';
 import { playSound } from "~/helpers/audioHelpers";
 import { createGame, getLobby, subscribe } from "~/netcode";
-import type { Player } from "~/netcode/interfaces";
+import type { Game, Player } from "~/netcode/interfaces";
 
 const authStore = useAuthStore();
 
-const games = await getLobby();
+let eventSource: EventSource;
 
-const eventSource = subscribe("/games/subscribe");
-
-eventSource.addEventListener("message", (message) => {
-  const data = JSON.parse(message.data);
-  if (data.type == "create") {
-    games.value.push(data);
-  } else if (data.type == "delete") {
-    const index = games.value.findIndex((g) => g._id == data._id);
-    if (index == -1) {
-      throw new Error("Couldn't delete game");
-    }
-    games.value.splice(index, 1);
-  } else if (data.type == "joinGame") {
-    games.value.find((g) => g._id == data.game)?.teams.push(data.team);
-  } else if (data.type == "start") {
-    const targetGame = games.value.find((g) => g._id == data.game);
-    if (targetGame) {
-      targetGame.started = true;
-    }
-  }
-});
+let games = ref<Game[]>([]);
 
 const erika_alive = ref(true);
 const router = useRouter();
@@ -38,6 +18,31 @@ function killErika() {
   erika_alive.value = false;
 }
 
+onBeforeMount(async () => {
+  games.value = (await getLobby()).value;
+  console.log(games.value);
+  eventSource = subscribe("/games/subscribe");
+  eventSource.addEventListener("message", (message) => {
+    const data = JSON.parse(message.data);
+    if (data.type == "create") {
+      games.value.push(data);
+    } else if (data.type == "delete") {
+      const index = games.value.findIndex((g) => g._id == data._id);
+      if (index == -1) {
+        throw new Error("Couldn't delete game");
+      }
+      games.value.splice(index, 1);
+    } else if (data.type == "joinGame") {
+      games.value.find((g) => g._id == data.game)?.teams.push(data.team);
+    } else if (data.type == "start") {
+      const targetGame = games.value.find((g) => g._id == data.game);
+      if (targetGame) {
+        targetGame.started = true;
+      }
+    }
+  });
+});
+
 onUnmounted(() => {
   eventSource.close();
 });