Feat : EXPERIMENTAL : add SSR

components/AnimatedBackground.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
   ready: [];
 }>();
 
-const worker = new ShaderWorker();
+let worker: Worker;
 
 const canvas = ref<HTMLCanvasElement | null>(null);
 const canvas_resize_temp = ref<HTMLCanvasElement | null>(null);
@@ -136,6 +136,7 @@ watch([_colorEnd, _colorStart], () => {
 });
 
 onMounted(async () => {
+  worker = new ShaderWorker();
   recolorShader();
   await initShader();
   window.addEventListener("resize", resizeShader, true);

netcode/index.ts

@@ -13,7 +13,10 @@ export async function getLobby() {
   const config = useRuntimeConfig();
   const req = await useFetch<Array<Game>>(config.public.endpoint + "/games", {
     credentials: "include",
+    server: false,
   });
+  // await req.execute();
+  await req.execute();
   if (req.data.value == null) {
     throw new Error("Lobby answer is empty");
   }

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  ssr: false,
+  ssr: true,
   runtimeConfig: {
     public: {
       endpoint: process.env.NUXT_PUBLIC_ENDPOINT, // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable
@@ -12,4 +12,9 @@ export default defineNuxtConfig({
   vue: {
     runtimeCompiler: true,
   },
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+    },
+  },
 });

pages/game/[id].vue

@@ -49,7 +49,7 @@ const containers = computed<Record<string, Container>>(() => ({
   ),
 }));
 
-const eventSource = subscribe(`/games/${gameId}/subscribe`);
+let eventSource: EventSource;
 
 const actions = ref<(() => Promise<any>)[]>([]);
 
@@ -68,202 +68,213 @@ async function execAction(callback: () => Promise<any>) {
   }
 }
 
-eventSource.addEventListener("message", async (message) => {
-  const current_game = game.value;
-  if (!current_game) {
-    throw new Error("game not found");
-  }
-  const data = JSON.parse(message.data);
-  console.log(data);
-  if (data.type == "start") {
-    throw new Error("not implemented");
-  } else if (data.type == "populateContainer") {
-    queueAction(async () => {
-      // await containerEvents.get(data.container)?.startAnimation();
-    });
-    const fromContainer = containers.value[data.container._id as string];
-    queueAction(async () => {
-      for (const card of data.container.cards) {
-        playSound("/sounds/distribute.mp3");
-        fromContainer.cards.push(card);
-        await delay(settingsStore.animationSpeed);
+onMounted(() => {
+  eventSource = subscribe(`/games/${gameId}/subscribe`);
+  eventSource.addEventListener("message", async (message) => {
+    const current_game = game.value;
+    if (!current_game) {
+      throw new Error("game not found");
+    }
+    const data = JSON.parse(message.data);
+    console.log(data);
+    if (data.type == "start") {
+      throw new Error("not implemented");
+    } else if (data.type == "populateContainer") {
+      queueAction(async () => {
+        // await containerEvents.get(data.container)?.startAnimation();
+      });
+      const fromContainer = containers.value[data.container._id as string];
+      queueAction(async () => {
+        for (const card of data.container.cards) {
+          playSound("/sounds/distribute.mp3");
+          fromContainer.cards.push(card);
+          await delay(settingsStore.animationSpeed);
+        }
+      });
+      queueAction(async () => {
+        // await containerEvents.get(data.container)?.endAnimation();
+      });
+    } else if (data.type == "shuffleContainer") {
+      queueAction(async () => {
+        playSound("/sounds/shuffle.mp3");
+        const container = containers.value[data.container as string];
+        container.shuffling = true;
+        await delay(settingsStore.animationSpeed * 2);
+        container.shuffling = false;
+        await delay(settingsStore.animationSpeed * 2);
+      });
+    } else if (data.type == "distributeCards") {
+      // containerEvents.get(data.from)?.getCardsPosition(data.cards)
+
+      queueAction(async () => {
+        // containerEvents.get(data.from)?.startAnimation();
+        // containerEvents.get(data.to)?.startAnimation();
+      });
+
+      const fromContainer = containers.value[data.from as string];
+      const toContainer = containers.value[data.to as string];
+      for (const card of data.cards) {
+        queueAction(async () => {
+          const index = fromContainer.cards.findIndex(
+            (c) => !c || c._id == card._id
+          );
+          fromContainer.cards.splice(index, 1);
+          await delay(settingsStore.animationSpeed);
+        });
+
+        queueAction(async () => {
+          playSound("/sounds/distribute.mp3");
+          toContainer.cards.push(card);
+          await delay(settingsStore.animationSpeed);
+        });
       }
-    });
-    queueAction(async () => {
-      // await containerEvents.get(data.container)?.endAnimation();
-    });
-  } else if (data.type == "shuffleContainer") {
-    queueAction(async () => {
-      playSound("/sounds/shuffle.mp3");
-      const container = containers.value[data.container as string];
-      container.shuffling = true;
-      await delay(settingsStore.animationSpeed * 2);
-      container.shuffling = false;
-      await delay(settingsStore.animationSpeed * 2);
-    });
-  } else if (data.type == "distributeCards") {
-    // containerEvents.get(data.from)?.getCardsPosition(data.cards)
-
-    queueAction(async () => {
-      // containerEvents.get(data.from)?.startAnimation();
-      // containerEvents.get(data.to)?.startAnimation();
-    });
-
-    const fromContainer = containers.value[data.from as string];
-    const toContainer = containers.value[data.to as string];
-    for (const card of data.cards) {
+      queueAction(async () => {
+        // containerEvents.get(data.from)?.endAnimation();
+        // containerEvents.get(data.to)?.endAnimation();
+        await delay(settingsStore.animationSpeed * 2);
+      });
+    } else if (data.type == "endTurn") {
+      queueAction(async () => {
+        current_game.currentTurn = data.currentTurn;
+        await delay(settingsStore.animationSpeed);
+        const playingPlayer = current_game.teams.find(
+          (t) => t._id == current_game.currentTurn.currentTeam
+        )?.players[0];
+        if (playingPlayer) {
+          focusPlayer(playingPlayer);
+          await delay(settingsStore.animationSpeed);
+        }
+      });
+    } else if (data.type == "lockCard") {
+      queueAction(async () => {
+        playSound("/sounds/lock.mp3");
+        current_game.currentTurn.cardsLocked.push(data.card);
+        await delay(settingsStore.animationSpeed);
+      });
+    } else if (data.type == "destroyCard") {
+      const fromContainer = containers.value[data.from as string];
       queueAction(async () => {
         const index = fromContainer.cards.findIndex(
-          (c) => !c || c._id == card._id
+          (c) => !c || c._id == data.card
         );
         fromContainer.cards.splice(index, 1);
         await delay(settingsStore.animationSpeed);
       });
 
       queueAction(async () => {
-        playSound("/sounds/distribute.mp3");
-        toContainer.cards.push(card);
+        playSound("/sounds/destroy.mp3");
         await delay(settingsStore.animationSpeed);
       });
-    }
-    queueAction(async () => {
-      // containerEvents.get(data.from)?.endAnimation();
-      // containerEvents.get(data.to)?.endAnimation();
-      await delay(settingsStore.animationSpeed * 2);
-    });
-  } else if (data.type == "endTurn") {
-    queueAction(async () => {
-      current_game.currentTurn = data.currentTurn;
-      await delay(settingsStore.animationSpeed);
-      const playingPlayer = current_game.teams.find(
-        (t) => t._id == current_game.currentTurn.currentTeam
-      )?.players[0];
-      if (playingPlayer) {
-        focusPlayer(playingPlayer);
+    } else if (data.type == "joinGame") {
+      queueAction(async () => {
+        playSound("/sounds/teleport.mp3");
+        current_game.teams.push(data.team);
+      });
+    } else if (data.type == "lockEffect") {
+      queueAction(async () => {
+        current_game.currentTurn.lockedEffects.push(data.effect);
         await delay(settingsStore.animationSpeed);
-      }
-    });
-  } else if (data.type == "lockCard") {
-    queueAction(async () => {
-      playSound("/sounds/lock.mp3");
-      current_game.currentTurn.cardsLocked.push(data.card);
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "destroyCard") {
-    const fromContainer = containers.value[data.from as string];
-    queueAction(async () => {
-      const index = fromContainer.cards.findIndex(
-        (c) => !c || c._id == data.card
-      );
-      fromContainer.cards.splice(index, 1);
-      await delay(settingsStore.animationSpeed);
-    });
-
-    queueAction(async () => {
-      playSound("/sounds/destroy.mp3");
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "joinGame") {
-    queueAction(async () => {
-      playSound("/sounds/teleport.mp3");
-      current_game.teams.push(data.team);
-    });
-  } else if (data.type == "lockEffect") {
-    queueAction(async () => {
-      current_game.currentTurn.lockedEffects.push(data.effect);
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "unlockEffect") {
-    queueAction(async () => {
-      const effectIndex = current_game.currentTurn.lockedEffects.indexOf(
-        data.effect
-      );
-      current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "currentTurn.updateGold") {
-    queueAction(async () => {
-      console.log(`adding gold amount : ` + data.operation);
-      current_game.currentTurn.gold = data.gold;
-    });
-  } else if (data.type == "currentTurn.updateDamage") {
-    queueAction(async () => {
-      console.log(`adding damage amount : ` + data.operation);
-      current_game.currentTurn.damage = data.damage;
-    });
-  } else if (data.type == "currentTurn.addToken") {
-    queueAction(async () => {
-      current_game.currentTurn.tokens.push(data.token);
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "currentTurn.useToken") {
-    queueAction(async () => {
-      const index = current_game.currentTurn.tokens.findIndex(
-        (t) => t._id == data.tokenId
-      );
-      current_game.currentTurn.tokens.splice(index, 1);
-      await delay(settingsStore.animationSpeed);
-    });
-  } else if (data.type == "team.updateHealth") {
-    queueAction(async () => {
-      const team = game.value?.teams.find((t) => t._id == data.team);
-      if (!team) {
-        throw new Error("Team not found");
-      }
-      console.log(`adding health amount : ` + data.operation);
-      team.health = data.health;
-    });
-  } else if (data.type == "player.addFuckUMarker") {
-    queueAction(async () => {
-      console.log(`adding fuckUMarkers : ` + data.operation);
-      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
-      if (!targetPlayer) {
-        throw new Error("Cannot add fuckU Markers : player not found");
-      }
-      targetPlayer.fuckUMarkers = data.fuckUMarkers;
-    });
-  } else if (data.type == "player.removeFuckUMarker") {
-    queueAction(async () => {
-      console.log(`adding fuckUMarkers : ` + data.operation);
-      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
-      if (!targetPlayer) {
-        throw new Error("Cannot remove fuckU Markers : player not found");
-      }
-      targetPlayer.fuckUMarkers = data.fuckUMarkers;
-    });
-  } else if (data.type == "player.addDiscardMarker") {
-    queueAction(async () => {
-      console.log(`adding discardMarkers : ` + data.operation);
-      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
-      if (!targetPlayer) {
-        throw new Error("Cannot add discard Markers : player not found");
-      }
-      targetPlayer.discardMarkers = data.discardMarkers;
-    });
-  } else if (data.type == "player.removeDiscardMarker") {
-    queueAction(async () => {
-      console.log(`adding fuckUMarkers : ` + data.operation);
-      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
-      if (!targetPlayer) {
-        throw new Error("Cannot remove discard Markers : player not found");
-      }
-      targetPlayer.discardMarkers = data.discardMarkers;
-    });
-  } else if (data.type == "killTeam") {
-    queueAction(async () => {
-      const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
-      if (!index) {
-        console.error("team index not found. Desyncs might happen");
-        await refresh();
-        return;
-      }
-      game.value?.teams.splice(index, 1);
-    });
-  } else if (data.type == "endGame") {
-    queueAction(async () => {
-      alert("game Ended");
-    });
-  }
+      });
+    } else if (data.type == "unlockEffect") {
+      queueAction(async () => {
+        const effectIndex = current_game.currentTurn.lockedEffects.indexOf(
+          data.effect
+        );
+        current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
+        await delay(settingsStore.animationSpeed);
+      });
+    } else if (data.type == "currentTurn.updateGold") {
+      queueAction(async () => {
+        console.log(`adding gold amount : ` + data.operation);
+        current_game.currentTurn.gold = data.gold;
+      });
+    } else if (data.type == "currentTurn.updateDamage") {
+      queueAction(async () => {
+        console.log(`adding damage amount : ` + data.operation);
+        current_game.currentTurn.damage = data.damage;
+      });
+    } else if (data.type == "currentTurn.addToken") {
+      queueAction(async () => {
+        current_game.currentTurn.tokens.push(data.token);
+        await delay(settingsStore.animationSpeed);
+      });
+    } else if (data.type == "currentTurn.useToken") {
+      queueAction(async () => {
+        const index = current_game.currentTurn.tokens.findIndex(
+          (t) => t._id == data.tokenId
+        );
+        current_game.currentTurn.tokens.splice(index, 1);
+        await delay(settingsStore.animationSpeed);
+      });
+    } else if (data.type == "team.updateHealth") {
+      queueAction(async () => {
+        const team = game.value?.teams.find((t) => t._id == data.team);
+        if (!team) {
+          throw new Error("Team not found");
+        }
+        console.log(`adding health amount : ` + data.operation);
+        team.health = data.health;
+      });
+    } else if (data.type == "player.addFuckUMarker") {
+      queueAction(async () => {
+        console.log(`adding fuckUMarkers : ` + data.operation);
+        const targetPlayer = playerList.value.find(
+          (p) => p._id == data.playerId
+        );
+        if (!targetPlayer) {
+          throw new Error("Cannot add fuckU Markers : player not found");
+        }
+        targetPlayer.fuckUMarkers = data.fuckUMarkers;
+      });
+    } else if (data.type == "player.removeFuckUMarker") {
+      queueAction(async () => {
+        console.log(`adding fuckUMarkers : ` + data.operation);
+        const targetPlayer = playerList.value.find(
+          (p) => p._id == data.playerId
+        );
+        if (!targetPlayer) {
+          throw new Error("Cannot remove fuckU Markers : player not found");
+        }
+        targetPlayer.fuckUMarkers = data.fuckUMarkers;
+      });
+    } else if (data.type == "player.addDiscardMarker") {
+      queueAction(async () => {
+        console.log(`adding discardMarkers : ` + data.operation);
+        const targetPlayer = playerList.value.find(
+          (p) => p._id == data.playerId
+        );
+        if (!targetPlayer) {
+          throw new Error("Cannot add discard Markers : player not found");
+        }
+        targetPlayer.discardMarkers = data.discardMarkers;
+      });
+    } else if (data.type == "player.removeDiscardMarker") {
+      queueAction(async () => {
+        console.log(`adding fuckUMarkers : ` + data.operation);
+        const targetPlayer = playerList.value.find(
+          (p) => p._id == data.playerId
+        );
+        if (!targetPlayer) {
+          throw new Error("Cannot remove discard Markers : player not found");
+        }
+        targetPlayer.discardMarkers = data.discardMarkers;
+      });
+    } else if (data.type == "killTeam") {
+      queueAction(async () => {
+        const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
+        if (!index) {
+          console.error("team index not found. Desyncs might happen");
+          await refresh();
+          return;
+        }
+        game.value?.teams.splice(index, 1);
+      });
+    } else if (data.type == "endGame") {
+      queueAction(async () => {
+        alert("game Ended");
+      });
+    }
+  });
 });
 
 const playerList = computed(() =>

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();
 });

pages/test.vue

@@ -1,3 +0,0 @@
-<script setup lang="ts"></script>
-
-<template></template>

services/loadCards.ts

@@ -1,7 +1,5 @@
 import type { App, Component, DefineComponent } from "vue";
 
-import { getCurrentInstance } from "vue";
-
 export const cards = {} as Record<string, Component>;
 
 export async function compileCards(app: App<any>) {
@@ -41,28 +39,41 @@ export async function compileCards(app: App<any>) {
     Object.entries(svgs).map(async ([k, v]) => {
       const regex = /([\d]+)(?=\.svg)/gm;
       const url = (v as any).default as string;
-      let template = await (await fetch(url)).text();
-      let arrayTemplate = template.split("\n");
-      arrayTemplate.splice(0, 1);
-      template = arrayTemplate.join("\n");
+      try {
+        let template: string;
+        if (process.dev && !process.client) {
+          template = (await import(k + "?raw" /* @vite-ignore */)).default;
+        } else {
+          template = await (await fetch(url)).text();
+        }
 
-      return [
-        Number(k.match(regex)![0]).toString(),
-        markRaw(
-          defineAsyncComponent({
-            loader: async () =>
-              defineComponent({
-                props: ["used_effects_indexes", "card"],
-                methods: {
-                  effectClick(effect: number) {
-                    this.$emit("effectClick", effect);
+        let arrayTemplate = template.split("\n");
+        arrayTemplate.splice(0, 1);
+        template = arrayTemplate.join("\n");
+        return [
+          Number(k.match(regex)![0]).toString(),
+          markRaw(
+            defineAsyncComponent({
+              loader: async () =>
+                defineComponent({
+                  props: ["used_effects_indexes", "card"],
+                  methods: {
+                    effectClick(effect: number) {
+                      this.$emit("effectClick", effect);
+                    },
                   },
-                },
-                template: template,
-              }),
-          })
-        ),
-      ];
+                  template: template,
+                }),
+            })
+          ),
+        ];
+      } catch (e) {
+        console.error(e, k);
+        return [];
+      }
+      // let arrayTemplate = template.split("\n");
+      // arrayTemplate.splice(0, 1);
+      // template = arrayTemplate.join("\n");
     })
   );