card locking and event triggering WIP

components/CardPreview.vue

@@ -2,6 +2,7 @@
 
 export interface Props {
     data?: string
+    locked?: boolean
 }
 
 const props = defineProps<Props>()
@@ -24,15 +25,15 @@ function contextmenu(e: MouseEvent) {
 </script>
 
 <template>
-
     <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
         @click.left="cardClick" @click.right="contextmenu">
 
-        <img :class="`card_image ${rightClicked ? 'outlined' : ''}`" v-if="props.data"
-            :src="'/cards/' + cards[props.data].card_id.toString().padStart(3, '0') + '.jpg'">
-        <span v-if="props.data === null">
-            HIDDEN
-        </span>
+        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
+            :src="'/cards/' + cards[props.data]?.card_id.toString().padStart(3, '0') + '.jpg'">
+
+        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`"
+            v-if="props.data === null" :src="'/cards/background.jpg'">
+
     </div>
 
     <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
@@ -53,6 +54,11 @@ function contextmenu(e: MouseEvent) {
     outline-offset: -2px;
 }
 
+.card_image.locked {
+    outline: 2px solid green;
+    outline-offset: -2px;
+}
+
 .card_image {
     max-height: 150px;
 }