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>