Feat : add ability to use tokens

components/CardsGrouped.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   tokens: () => [],
 });
 
-const emit = defineEmits(["cardClick", "effectClick"]);
+const emit = defineEmits(["cardClick", "effectClick", "tokenClick"]);
 
 const settingsStore = useSettingsStore();
 
@@ -107,7 +107,9 @@ const interval = ref<ReturnType<typeof setInterval>>();
 //   clearInterval(interval.value);
 // }
 
-function useToken(token: Effect, card: Card) {}
+function tokenClick(token: Effect, card: Card) {
+  emit("tokenClick", { token, card });
+}
 </script>
 
 <template>
@@ -138,7 +140,7 @@ function useToken(token: Effect, card: Card) {}
         <template v-for="t in tokens">
           <TokenComponent
             :token="t"
-            @useToken="useToken(t, c)"
+            @useToken="tokenClick(t, c)"
           ></TokenComponent>
         </template>
       </CardPreview>

components/MarketCards.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { buyCard, buyGem } from "~/netcode";
-import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+} from "~/netcode/interfaces";
 import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
@@ -47,6 +53,10 @@ const gemsTokens = computed(() =>
     ].includes(t.effect)
   )
 );
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
 </script>
 
 <template>
@@ -62,6 +72,7 @@ const gemsTokens = computed(() =>
       @cardClick="marketCardClick"
       :noEffects="true"
       :tokens="marketTokens"
+      @tokenClick="tokenClick"
     >
     </CardsGrouped>
     <div class="separator"></div>
@@ -71,6 +82,7 @@ const gemsTokens = computed(() =>
       @cardClick="fireGemCardClick"
       :noEffects="true"
       :tokens="gemsTokens"
+      @tokenClick="tokenClick"
     ></CardsGrouped>
   </div>
 </template>

components/PlayerSlot.vue

@@ -1,6 +1,19 @@
 <script setup lang="ts">
-import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
-import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
+import {
+  endTurn,
+  joinGame,
+  lockCard,
+  lockEffect,
+  startGame,
+  useToken,
+} from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
 export interface Props {
@@ -119,6 +132,10 @@ function effectClick(cardUUID: string, effectIndex: number) {
 // function check_for_guard(player: Player) {
 //     return player.board.some(c => c.guard === true)
 // }
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id, props.player._id);
+}
 </script>
 
 <template>
@@ -178,6 +195,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
         @cardClick="boardCardClick"
         @effectClick="effectClick"
         :tokens="cardTokens"
+        @tokenClick="tokenClick"
       >
       </CardsGrouped>
 

netcode/index.ts

@@ -124,6 +124,24 @@ export async function buyGem(game: string) {
   );
 }
 
+export async function useToken(
+  game: string,
+  tokenId: string,
+  cardId: string,
+  playerId?: string
+) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/useToken/${tokenId}`, config.public.endpoint)
+      .href,
+    {
+      method: "POST",
+      credentials: "include",
+      body: { cardId, playerId },
+    }
+  );
+}
+
 export async function lockEffect(game: string, effectId: string) {
   const config = useRuntimeConfig();
   await $fetch(

pages/game/[id].vue

@@ -194,6 +194,14 @@ eventSource.addEventListener("message", async (message) => {
       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);