183 lines
6.8 KiB
Vue
183 lines
6.8 KiB
Vue
<template>
|
|
<div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
|
|
<img src="/assets/profile-ui-box-outer.svg" class="absolute w-full h-full" />
|
|
<img src="/assets/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
|
|
<div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
|
|
<span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
|
|
<button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
|
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
|
</button>
|
|
</div>
|
|
<div class="py-4 px-6 flex flex-col gap-7 relative z-10">
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<p class="text-sm m-0 font-bold text-white tracking-wide">{{ gameStore.character?.name }}</p>
|
|
<span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
|
|
</div>
|
|
<a class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-small.svg')] bg-no-repeat block w-8 h-8 relative">
|
|
<img class="group-hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="flex flex-col gap-0.5">
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
|
|
</div>
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
|
|
</div>
|
|
<div class="flex gap-0.5 items-end">
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
|
|
</div>
|
|
<div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto"/>
|
|
<div class="flex flex-col items-end gap-0.5">
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
|
|
</div>
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
|
|
</div>
|
|
<div class="flex gap-0.5 items-end">
|
|
<div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
|
|
</div>
|
|
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
|
|
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
|
|
const gameStore = useGameStore()
|
|
|
|
let startX = 0
|
|
let startY = 0
|
|
let initialX = 0
|
|
let initialY = 0
|
|
let modalPositionX = 0
|
|
let modalPositionY = 0
|
|
let modalWidth = 277
|
|
let modalHeight = 473
|
|
|
|
const width = ref(modalWidth)
|
|
const height = ref(modalHeight)
|
|
const x = ref(0)
|
|
const y = ref(0)
|
|
const isDragging = ref(false)
|
|
|
|
const modalStyle = computed(() => ({
|
|
top: `${y.value}px`,
|
|
left: `${x.value}px`,
|
|
width: `${width.value}px`,
|
|
height: `${height.value}px`,
|
|
maxWidth: '100vw',
|
|
maxHeight: '100vh'
|
|
}))
|
|
|
|
function startDrag(event: MouseEvent) {
|
|
isDragging.value = true
|
|
startX = event.clientX
|
|
startY = event.clientY
|
|
initialX = x.value
|
|
initialY = y.value
|
|
event.preventDefault()
|
|
}
|
|
|
|
function drag(event: MouseEvent) {
|
|
if (!isDragging.value) return
|
|
const dx = event.clientX - startX
|
|
const dy = event.clientY - startY
|
|
x.value = initialX + dx
|
|
y.value = initialY + dy
|
|
adjustPosition()
|
|
}
|
|
|
|
function stopDrag() {
|
|
isDragging.value = false
|
|
}
|
|
|
|
function adjustPosition() {
|
|
x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
|
|
y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
|
|
}
|
|
|
|
function initializePosition() {
|
|
width.value = Math.min(modalWidth, window.innerWidth)
|
|
height.value = Math.min(modalHeight, window.innerHeight)
|
|
if (modalPositionX !== 0 && modalPositionY !== 0) {
|
|
console.log(modalPositionX)
|
|
console.log(modalPositionY)
|
|
x.value = modalPositionX
|
|
y.value = modalPositionY
|
|
} else {
|
|
x.value = (window.innerWidth - width.value) / 2
|
|
y.value = (window.innerHeight - height.value) / 2
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => gameStore.uiSettings.isCharacterProfileOpen,
|
|
(value) => {
|
|
gameStore.uiSettings.isCharacterProfileOpen = value
|
|
if (value) {
|
|
initializePosition()
|
|
}
|
|
}
|
|
)
|
|
|
|
watch(
|
|
() => modalWidth,
|
|
(value) => {
|
|
width.value = Math.min(value, window.innerWidth)
|
|
}
|
|
)
|
|
|
|
watch(
|
|
() => modalHeight,
|
|
(value) => {
|
|
height.value = Math.min(value, window.innerHeight)
|
|
}
|
|
)
|
|
|
|
watch(
|
|
() => modalPositionX,
|
|
(value) => {
|
|
x.value = value
|
|
}
|
|
)
|
|
|
|
watch(
|
|
() => modalPositionY,
|
|
(value) => {
|
|
y.value = value
|
|
}
|
|
)
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('mousemove', drag)
|
|
window.addEventListener('mouseup', stopDrag)
|
|
initializePosition()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('mousemove', drag)
|
|
window.removeEventListener('mouseup', stopDrag)
|
|
})
|
|
</script> |