121 lines
2.7 KiB
Vue
121 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { Card } from '~/netcode/Card';
|
|
|
|
|
|
export interface Props {
|
|
data: Card | null | undefined
|
|
locked?: boolean
|
|
wrapped?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
wrapped: () => false,
|
|
})
|
|
|
|
|
|
const emit = defineEmits(["click"])
|
|
|
|
const buttonsElement = ref<HTMLElement | null>(null)
|
|
const rightClicked = ref(false)
|
|
|
|
function cardClick() {
|
|
if (!props.data) return
|
|
emit("click")
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
const rotation = ref(0)
|
|
|
|
onBeforeUpdate(() => {
|
|
rotation.value = Math.random() > .5 ? 2 : -2
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<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">
|
|
<div id="contextMenuButtons" ref="buttonsElement">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
transition: 0.025s rotate linear;
|
|
transition: max-width .125s linear;
|
|
max-width: 256px;
|
|
}
|
|
|
|
.card.active {
|
|
cursor: pointer
|
|
}
|
|
|
|
.card_image {
|
|
max-height: 250px;
|
|
transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
transition: margin .125s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
transition: transform .125s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
margin-top: 15px;
|
|
margin-bottom: 0px
|
|
}
|
|
|
|
.card_image.outlined {
|
|
outline: 2px solid red;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.card_image.locked {
|
|
/* filter: brightness(0.5); */
|
|
filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
|
|
margin-top: 0px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card.wrapped {
|
|
max-width: 10px;
|
|
}
|
|
|
|
.card.wrapped:last-child {
|
|
max-width: 256px;
|
|
}
|
|
|
|
.card_image {
|
|
max-height: 250px;
|
|
}
|
|
|
|
.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>
|