167 lines
3.8 KiB
Vue
167 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import goStore from '~/netcode';
|
|
import { useSettingsStore } from '~/stores/settingsStore';
|
|
|
|
export interface Props {
|
|
card_id: number | undefined
|
|
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>()
|
|
|
|
function cardClick() {
|
|
if (!props.card_id) return
|
|
emit("click")
|
|
}
|
|
|
|
const rotation = ref(0)
|
|
|
|
function mouseenter(e: Event) {
|
|
goStore.hoveredCard = props.card_id
|
|
}
|
|
function mouseleave(e: Event) {
|
|
goStore.hoveredCard = undefined
|
|
}
|
|
|
|
watch(
|
|
() => props.card_id,
|
|
() => {
|
|
props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
|
|
},
|
|
{ immediate: true })
|
|
|
|
|
|
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 }"
|
|
@contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
|
|
@mouseenter="mouseenter" @mouseleave="mouseleave">
|
|
<div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
|
|
<slot></slot>
|
|
</div>
|
|
<img :class="`card_image`" v-if="props.card_id"
|
|
:src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
|
|
draggable="false">
|
|
|
|
<img :class="`card_image`" v-if="!props.card_id" :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;
|
|
margin-bottom: 0px;
|
|
margin-top: var(--margin-bottom);
|
|
transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 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;
|
|
}
|
|
|
|
.card_image.outlined {
|
|
outline: 2px solid red;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@keyframes unlocked-float {
|
|
from {
|
|
transform: none;
|
|
filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
|
|
}
|
|
|
|
to {
|
|
transform: translateY(calc(var(--margin-bottom)*-.25));
|
|
filter: drop-shadow(calc(var(--margin-bottom)*.3) calc(var(--margin-bottom)*1.5) 1px rgba(0, 0, 0, .60));
|
|
}
|
|
}
|
|
|
|
@keyframes unlocked-rotate {
|
|
from {
|
|
rotate: -2deg;
|
|
}
|
|
|
|
to {
|
|
rotate: 2deg;
|
|
}
|
|
}
|
|
|
|
.card.unlocked {
|
|
margin-top: 0px;
|
|
margin-bottom: var(--margin-bottom);
|
|
filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
|
|
animation: 2s infinite alternate ease-in-out unlocked-float, 3.1s infinite alternate ease-in-out unlocked-rotate;
|
|
animation-delay: var(--random-seed);
|
|
animation-play-state: running;
|
|
}
|
|
|
|
.card:not(.unlocked):hover {
|
|
animation-play-state: paused;
|
|
rotate: none !important;
|
|
}
|
|
|
|
.card.wrapped {
|
|
max-width: 10px;
|
|
}
|
|
|
|
#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>
|
|
#contextMenuButtons>* {
|
|
flex: 1;
|
|
border-radius: 12px;
|
|
min-height: 50px;
|
|
}
|
|
</style> |