Contextual menu for cards

components/CardPreview.vue

@@ -8,32 +8,71 @@ const props = defineProps<Props>()
 
 const cards = useState<{ [key: string]: any }>('cards')
 
+const buttonsElement = ref<HTMLElement | null>(null)
+const rightClicked = ref(false)
+
 function cardClick() {
     if (!props.data) return
     console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
 }
+
+function contextmenu(e: MouseEvent) {
+    if (buttonsElement.value?.childElementCount === 0) { return }
+    buttonsElement.value?.setAttribute("style", `top:${e.clientY + 10}px;left:${e.clientX + 10}px`)
+    rightClicked.value = true
+}
 </script>
 
 <template>
-    <span class="card">
-        <span v-if="props.data" @click="cardClick">
-            {{ cards[props.data]?.name }}
-        </span>
 
+    <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>
+    </div>
 
-        <slot></slot>
-    </span>
-
-
+    <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
+        <div id="contextMenuButtons" ref="buttonsElement">
+            <slot></slot>
+        </div>
+    </div>
 
 </template>
 
 <style scoped>
-.card {
-    border: 1px solid black;
+.card.active {
     cursor: pointer
 }
-</style>
+
+.card_image.outlined {
+    outline: 2px solid red;
+    outline-offset: -2px;
+}
+
+.card_image {
+    max-height: 150px;
+}
+
+.hidden {
+    display: none;
+}
+
+#contextMenu {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    /* background: rgba(0, 0, 0, .5); */
+}
+
+#contextMenuButtons {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+}
+</style>