Feat : allow buying cards

components/CardPreview.vue

@@ -5,7 +5,8 @@ export interface Props {
   locked?: boolean;
   wrapped?: boolean;
   tilted?: boolean;
-  interactible?: boolean
+  interactible?: boolean;
+  noEffects?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,6 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   tilted: () => true,
   locked: () => true,
   interactible: () => true,
+  noEffects: () => false,
 });
 
 const emit = defineEmits(["click"]);
@@ -74,6 +76,7 @@ onMounted(() => {
       wrapped,
       unlocked: !props.locked,
       zoom: isZooming,
+      no_effects: noEffects || !props.locked,
     }"
     @contextmenu.prevent="false"
     @click.left="cardClick"
@@ -168,7 +171,6 @@ onMounted(() => {
   filter: drop-shadow(
     calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
   );
-  cursor: pointer;
 }
 
 .card.zoom {
@@ -193,10 +195,14 @@ onMounted(() => {
 }
 </style>
 <style>
-.card.unlocked > * {
+.card.no_effects svg > * {
   pointer-events: none;
 }
 
+.card.no_effects {
+  cursor: pointer;
+}
+
 #contextMenuButtons > * {
   flex: 1;
   border-radius: 12px;

components/CardsGrouped.vue

@@ -7,11 +7,13 @@ export interface Props {
   playingTurn?: PlayingTurn;
   wrapped?: boolean;
   hidden?: boolean;
+  noEffects?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   wrapped: () => false,
   hidden: () => false,
+  noEffects: () => false,
 });
 
 const emit = defineEmits(["cardClick"]);
@@ -82,18 +84,17 @@ function endAnimation() {
 //   animationCallbacks.value.push(done);
 // }
 
-
-
 onUnmounted(() => {
   // containerEvents.delete(props.container._id);
 });
 </script>
 
 <template>
-  <div class="cards_container" :class="{ wrapped, rotate:container.shuffling }">
-    <TransitionGroup
-      name="list"
-    >
+  <div
+    class="cards_container"
+    :class="{ wrapped, rotate: container.shuffling }"
+  >
+    <TransitionGroup name="list">
       <CardPreview
         @click="$emit('cardClick', c._id)"
         v-for="c in cards"
@@ -104,6 +105,7 @@ onUnmounted(() => {
         :locked="
           !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
         "
+        :noEffects="noEffects"
       >
       </CardPreview>
     </TransitionGroup>
@@ -126,7 +128,7 @@ onUnmounted(() => {
 
 .list-leave-active {
   position: absolute;
-  height:unset;
+  height: unset;
 }
 
 .rotate {

components/MarketCards.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import type { Container } from "~/netcode/interfaces";
+import { buyCard } from "~/netcode";
+import type { Container, Game } from "~/netcode/interfaces";
 
 export interface Props {
+  game: Game;
   market: Container;
   marketStack: Container;
   fire_gems: Container;
@@ -19,7 +21,7 @@ const authStore = useAuthStore();
 // const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 function marketCardClick(e: string) {
-  console.log(e);
+  buyCard(props.game._id, e);
 }
 
 function fireGemCardClick(e: string) {
@@ -38,12 +40,14 @@ function fireGemCardClick(e: string) {
     <CardsGrouped
       :container="market"
       @cardClick="marketCardClick"
+      :noEffects="true"
     ></CardsGrouped>
     <div class="separator"></div>
     <CardsGrouped
       :container="fire_gems"
       :wrapped="true"
       @cardClick="fireGemCardClick"
+      :noEffects="true"
     ></CardsGrouped>
   </div>
 </template>

components/PlayerStats.vue

@@ -27,7 +27,7 @@ const isTurn = computed(
       {{ team?.health }}
     </span>
   </div>
-  <!-- <div class="turn_icon" v-if="isTurn">
+  <div class="turn_icon" v-if="isTurn">
         <img src="/img/gold.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
             {{ game.currentTurn.gold }}
@@ -38,7 +38,7 @@ const isTurn = computed(
         <span class="turn_icon_number">
             {{ game.currentTurn.damage }}
         </span>
-    </div> -->
+    </div>
   <div class="turn_icon">
     <img src="/img/fuck.svg" class="icon_img" draggable="false" />
     <span class="turn_icon_number">{{