Feat : EXPERIMENTAL : add SSR

2024-07-21 19:01:07 +02:00
parent ba48570833
commit cfbaeca52b
7 changed files with 268 additions and 235 deletions
@@ -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(() =>
@@ -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();
 });
@@ -1,3 +0,0 @@
-<script setup lang="ts"></script>
-
-<template></template>