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;