front/components/CardPreview.vue

<script setup lang="ts">

export interface Props {
    uuid?: string
    card_id?: number
    locked?: boolean
    wrapped?: boolean
    tilted?: boolean
}


const props = withDefaults(defineProps<Props>(), {
    wrapped: () => false,
    tilted: () => true,
    locked: () => true
})

const emit = defineEmits(["click"])

const settingsStore = useSettingsStore()

const childCount = ref<number>(0)

const card = ref<HTMLElement>()

const extension = computed(() => {
    if (settingsStore.cardStyle == CardStyles.SVG) {
        return ".svg"
    }
    return ".png"
})
function cardClick() {
    if (!props.card_id) return
    emit("click")
}

const isZooming = ref<boolean>(false)

function mouseenter(e: MouseEvent) {
    // User is Right Clicking
    if ((e.buttons & 2) == 2) {
        isZooming.value = true
    }

    // goStore.hoveredCard = props.card_id
}
function mouseleave(e: MouseEvent) {
    isZooming.value = false
}

function rightClickDown(e: MouseEvent) {
    isZooming.value = true
}

function rightClickUp(e: MouseEvent) {
    isZooming.value = false
}

function activateEffect(e: CustomEvent) {
    console.log(e.detail, props.uuid)
}

onMounted(() => {
    card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
})
</script>

<template>
    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked, zoom: isZooming }"
        @contextmenu.prevent="false" @click.left="cardClick" @mousedown.right="rightClickDown"
        @mouseup.right="rightClickUp" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
            <slot></slot>
        </div>
        <template v-if="props.card_id">
            <svg width="180" height="250" v-if="settingsStore.cardStyle == CardStyles.SVG" viewBox="0 0 298 417">
                <use :xlink:href="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + extension + '#card' + props.card_id"
                    @activate_effect="activateEffect($event)">
                </use>
            </svg>
            <img :class="`card_image`" v-else
                :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + extension"
                draggable="false">
        </template>

        <img :class="`card_image`" v-else :src="'/cards/background.png'" draggable="false">

    </div>


</template>

<style scoped>
.card {
    --max-height: 250px;
    --margin-bottom: calc(var(--max-height) * 0.05);
    /* max-width: 256px; */
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    margin-top: var(--margin-bottom);
    transition: all 0.075s cubic-bezier(1, 1.81, .59, 1.42);
    isolation: isolate;
    pointer-events: all;
    max-height: var(--max-height);
}

.card.active {
    cursor: pointer
}

.card_image {
    max-height: var(--max-height);
    z-index: 1;
    height: var(--max-height);
}

.card.wrapped {
    height: 6px;
    margin: 0;
}

.card.wrapped .card_image {
    filter: drop-shadow(.5px .5px .5px gray) drop-shadow(-.5px -.5px .5px gray);
}

.card.unlocked {
    margin-top: 0px;
    margin-bottom: var(--margin-bottom);
    transform: translateY(calc(var(--margin-bottom)*-.25));
    filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
    cursor: pointer;
}

.card.zoom {
    transform: scale(200%);
    z-index: 10;
}

#contextMenuButtons {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    word-break: break-word;
    bottom: 0;
    width: 99%;
    transform: translateY(-0px);
    transition: 0.1s transform cubic-bezier(1, 1.81, .59, 1.42);
}

.card.active:hover #contextMenuButtons {
    transform: translateY(100%);

}
</style>
<style>
.card.unlocked>* {
    pointer-events: none;
}

#contextMenuButtons>* {
    flex: 1;
    border-radius: 12px;
    min-height: 50px;
}

@keyframes gelatine {

    from,
    to {}

    25% {
        transform: scale(1, 1.5);
    }

    50% {
        transform: scale(1.5, 1);
    }

    75% {
        transform: scale(1.1, 1.3);
    }
}

.svg_resource_icon {
    cursor: pointer;
    animation: gelatine 0.3s normal;
    transition: transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg_resource_icon:active {
    animation: none;
}

.svg_resource_icon:hover {
    transform: scale(130%);
}
</style>