Feat : add most token effects

pages/game/[id].vue

@@ -4,6 +4,7 @@ import { subscribe } from "~/netcode";
 import { delay } from "~/netcode/events";
 import { type Container, type Game, type Player } from "~/netcode/interfaces";
 import { playSound } from "~/helpers/audioHelpers";
+import TokenComponent from "~/components/tokens/TokenComponent.vue";
 
 const config = useRuntimeConfig();
 const settingsStore = useSettingsStore();
@@ -211,6 +212,20 @@ eventSource.addEventListener("message", async (message) => {
       console.log(`adding health amount : ` + data.operation);
       team.health = data.health;
     });
+  } 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");
+    });
   }
 });
 
@@ -314,6 +329,12 @@ onUnmounted(() => {
       :fire_gems="game.fireGems"
       :marketStack="game.marketStack"
     ></MarketCards>
+    <div>
+      <TokenComponent
+        :token="t"
+        v-for="t in game.currentTurn.tokens"
+      ></TokenComponent>
+    </div>
     <div id="player_list_container">
       <div id="player_list">
         <PlayerListElement