rename discard to make_discard; put all effects buttons inside their card

components/CardPreview.vue

@@ -38,16 +38,15 @@ watch(
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`" @contextmenu.prevent="false"
-        @click.left="cardClick" :style="`rotate:${rotation}deg;`">
+    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
+        @contextmenu.prevent="false" @click.left="cardClick" :style="`rotate:${rotation}deg;`">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
-        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="props.data"
+        <img :class="`card_image`" v-if="props.data"
             :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
 
-        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="!props.data" :src="'/cards/background.png'"
-            draggable="false">
+        <img :class="`card_image`" v-if="!props.data" :src="'/cards/background.png'" draggable="false">
 
     </div>
 
@@ -84,7 +83,7 @@ watch(
     outline-offset: -2px;
 }
 
-.card_image.locked {
+.card.locked {
     /* filter: brightness(0.5); */
     filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
 }
@@ -111,5 +110,6 @@ watch(
 #contextMenuButtons>* {
     flex: 1;
     border-radius: 10px;
+    min-height: 50px;
 }
 </style>