Feat : add prepare token

components/CardPreview.vue

@@ -234,8 +234,6 @@ onUnmounted(() => {
     @mouseenter="mouseenter"
     @mouseleave="mouseleave"
   >
-    <div id="overlay"><slot></slot></div>
-
     <template v-if="props.card_id">
       <!-- <svg
         width="180"
@@ -270,7 +268,7 @@ onUnmounted(() => {
         "
         draggable="false"
       />
-      <div></div>
+      <div id="overlay"><slot></slot></div>
     </template>
 
     <img
@@ -301,7 +299,9 @@ onUnmounted(() => {
 
 #overlay {
   position: absolute;
-  z-index: 111;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
 }
 
 .card.unlocked {

components/CardsGrouped.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { delay } from "~/netcode/events";
-import type { Card, Container, PlayingTurn } from "~/netcode/interfaces";
+import type {
+  Card,
+  Container,
+  Effect,
+  PlayingTurn,
+} from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   container: Container;
@@ -8,12 +14,14 @@ export interface Props {
   wrapped?: boolean;
   hidden?: boolean;
   noEffects?: boolean;
+  tokens?: Effect[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   wrapped: () => false,
   hidden: () => false,
   noEffects: () => false,
+  tokens: () => [],
 });
 
 const emit = defineEmits(["cardClick", "effectClick"]);
@@ -34,6 +42,7 @@ const animationSpeed = computed(() => settingsStore.animationSpeed + "ms");
 const shuffleAnimationSpeed = computed(
   () => settingsStore.animationSpeed * 2 + "ms"
 );
+
 function populateContainer() {}
 
 // const rotate = ref(false);
@@ -89,14 +98,16 @@ onUnmounted(() => {
 });
 
 const interval = ref<ReturnType<typeof setInterval>>();
-function startMove() {
-  interval.value = setInterval(() => {
-    props.container.cards.sort((a, b) => Math.random() - 0.5);
-  }, 1000);
-}
-function stopMove() {
-  clearInterval(interval.value);
-}
+// function startMove() {
+//   interval.value = setInterval(() => {
+//     props.container.cards.sort((a, b) => Math.random() - 0.5);
+//   }, 1000);
+// }
+// function stopMove() {
+//   clearInterval(interval.value);
+// }
+
+function useToken(token: Effect, card: Card) {}
 </script>
 
 <template>
@@ -108,8 +119,6 @@ function stopMove() {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
-        @startMove="startMove"
-        @stopMove="stopMove"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"
@@ -126,6 +135,12 @@ function stopMove() {
         },[] as number[])"
         :noEffects="noEffects"
       >
+        <template v-for="t in tokens">
+          <TokenComponent
+            :token="t"
+            @useToken="useToken(t, c)"
+          ></TokenComponent>
+        </template>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->

components/MarketCards.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { buyCard, buyGem } from "~/netcode";
-import type { Container, Game } from "~/netcode/interfaces";
+import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   game: Game;
@@ -27,6 +28,25 @@ function marketCardClick(e: string) {
 function fireGemCardClick(e: string) {
   buyGem(props.game._id);
 }
+
+const marketTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.STACK_NEXT_ACTION_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
+
+const gemsTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
 </script>
 
 <template>
@@ -41,13 +61,16 @@ function fireGemCardClick(e: string) {
       :container="market"
       @cardClick="marketCardClick"
       :noEffects="true"
-    ></CardsGrouped>
+      :tokens="marketTokens"
+    >
+    </CardsGrouped>
     <div class="separator"></div>
     <CardsGrouped
       :container="fire_gems"
       :wrapped="true"
       @cardClick="fireGemCardClick"
       :noEffects="true"
+      :tokens="gemsTokens"
     ></CardsGrouped>
   </div>
 </template>

components/PlayerSlot.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
-import type { Game, Player } from "~/netcode/interfaces";
+import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
 export interface Props {
@@ -37,8 +37,13 @@ const isSelf = computed(
 );
 const isSelfTurn = computed(() => isSelf && isPlayerTurn);
 
+const cardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [CardEffects.SACRIFICE, CardEffects.PREPARE].includes(t.effect)
+  )
+);
+
 const warningText = ref("Effets restants!");
-const turnStore = useTurnStore();
 
 // const make_discard = (target: Player) =>
 //     clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
@@ -172,6 +177,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
         :playingTurn="props.game.currentTurn"
         @cardClick="boardCardClick"
         @effectClick="effectClick"
+        :tokens="cardTokens"
       >
       </CardsGrouped>
 

components/tokens/TokenComponent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Effect } from "~/netcode/interfaces";
+
+type Props = {
+  token: Effect;
+};
+const props = defineProps<Props>();
+
+const emit = defineEmits(["useToken"]);
+
+function onClick(e: MouseEvent) {
+  emit("useToken", props.token);
+}
+</script>
+
+<template>
+  <div @click.stop="onClick" @mousedown.left.stop="" id="token">
+    {{ props.token.effect }}
+  </div>
+</template>
+
+<style scoped>
+#token {
+  width: 50px;
+  height: 50px;
+  background: white;
+  border: 1px solid white;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: 0.2s all;
+  border-radius: 15px;
+}
+
+#token:hover {
+  border: 1px solid red;
+}
+</style>