Better cards stacks and discard view

components/CardPreview.vue

@@ -5,9 +5,13 @@ import type { Card } from '~/netcode/Card';
 export interface Props {
     data: Card | null | undefined
     locked?: boolean
+    wrapped?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    wrapped: () => false,
+})
+
 
 const emit = defineEmits(["click"])
 
@@ -24,17 +28,23 @@ function contextmenu(e: MouseEvent) {
     buttonsElement.value?.setAttribute("style", `top:${e.clientY + 10}px;left:${e.clientX + 10}px`)
     rightClicked.value = true
 }
+
+const rotation = ref(0)
+
+onBeforeUpdate(() => {
+    rotation.value = Math.random() > .5 ? 2 : -2
+})
 </script>
 
 <template>
-    <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
-        @click.left="cardClick" @click.right="contextmenu">
+    <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`"
+        @contextmenu.prevent="false" @click.left="cardClick" @click.right="contextmenu"
+        :style="`rotate:${rotation}deg;`">
         <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
             :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'">
 
         <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="!props.data"
             :src="'/cards/background.png'">
-
     </div>
 
     <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
@@ -46,6 +56,12 @@ function contextmenu(e: MouseEvent) {
 </template>
 
 <style scoped>
+.card {
+    transition: 0.025s rotate linear;
+    transition: max-width .125s linear;
+    max-width: 256px;
+}
+
 .card.active {
     cursor: pointer
 }
@@ -59,6 +75,14 @@ function contextmenu(e: MouseEvent) {
     filter: brightness(0.5);
 }
 
+.card.wrapped {
+    max-width: 10px;
+}
+
+.card.wrapped:last-child {
+    max-width: 256px;
+}
+
 .card_image {
     max-height: 250px;
 }