51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import goStore from '~/netcode';
|
|
|
|
export interface Props {
|
|
card_id: number | undefined
|
|
}
|
|
|
|
const settingsStore = useSettingsStore()
|
|
const props = defineProps<Props>()
|
|
|
|
const card: Ref<Element | null> = ref(null)
|
|
|
|
const x = computed(() => {
|
|
const bounds = card.value?.getBoundingClientRect()
|
|
let offset = 1
|
|
if (!bounds) { return 0 }
|
|
if ((bounds.width + goStore.clientMouseX) > (window.visualViewport?.width ?? Infinity)) {
|
|
offset = - (bounds.width + 1)
|
|
}
|
|
return goStore.clientMouseX + offset
|
|
})
|
|
const y = computed(() => {
|
|
const bounds = card.value?.getBoundingClientRect()
|
|
let offset = 1
|
|
if (!bounds) { return 0 }
|
|
if ((bounds.height + goStore.clientMouseY) > (window.visualViewport?.height ?? Infinity)) {
|
|
offset = - (bounds.height + 1)
|
|
}
|
|
return goStore.clientMouseY + offset
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`card_overlay`" :style="`top: ${y}px; left: ${x}px`" ref="card">
|
|
<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_overlay {
|
|
/* display: none; */
|
|
position: fixed;
|
|
z-index: 999;
|
|
display: flex;
|
|
pointer-events: none;
|
|
}
|
|
</style> |