noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprite manager front- and backend logics

Browse Source
This commit is contained in:
Dennis Postma
2024-07-24 22:32:14 +02:00
parent 026165cff3
commit ffe97312c9
18 changed files with 242 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/utilities/Accordion.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="border border-gray-300 rounded mb-4">
<button @click="toggle" class="w-full p-3 bg-gray-100 rounded hover:bg-gray-200 text-left cursor-pointer transition-colors duration-200 ease-in-out">
{{ props.title }}
</button>
<div @click="toggle" class="w-[98%] p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-left text-white font-default cursor-pointer transition-colors duration-200 ease-in-out">
<slot name="header" />
</div>
<transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
<div v-if="isOpen" class="p-3 overflow-hidden">
<slot></slot>
<slot name="content" />
</div>
</transition>
</div>
@ -19,8 +19,4 @@ const isOpen = ref(false)
const toggle = () => {
isOpen.value = !isOpen.value
}
const props = defineProps({
title: String
})
</script>

2
src/components/utilities/GmPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="gameStore.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650">
<Modal :isModalOpen="gameStore.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0">GM Panel</h3>
<div class="flex gap-1.5 flex-wrap">

42
src/components/utilities/Modal.vue
View File

@ -4,6 +4,9 @@
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
<slot name="modalHeader" />
<div class="flex gap-2.5">
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
</button>
<button @click="close" v-if="closable" class="w-5 h-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>
@ -11,7 +14,7 @@
</div>
<div class="overflow-hidden grow">
<slot name="modalBody" />
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
</div>
<div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
<slot name="modalFooter" />
@ -36,6 +39,10 @@ const props = defineProps({
type: Boolean,
default: true
},
canFullScreen: {
type: Boolean,
default: false
},
modalWidth: {
type: Number,
default: 500
@ -58,6 +65,7 @@ const minWidth = ref(200)
const minHeight = ref(100)
const isResizing = ref(false)
const isDragging = ref(false)
const isFullScreen = ref(false)
let startX = 0
let startY = 0
@ -65,12 +73,13 @@ let initialX = 0
let initialY = 0
let startWidth = 0
let startHeight = 0
let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
const modalStyle = computed(() => ({
top: `${y.value}px`,
left: `${x.value}px`,
width: `${width.value}px`,
height: `${height.value}px`,
top: isFullScreen.value ? '0' : `${y.value}px`,
left: isFullScreen.value ? '0' : `${x.value}px`,
width: isFullScreen.value ? '100vw' : `${width.value}px`,
height: isFullScreen.value ? '100vh' : `${height.value}px`,
maxWidth: '100vw',
maxHeight: '100vh'
}))
@ -80,6 +89,7 @@ function close() {
}
function startResize(event: MouseEvent) {
if (isFullScreen.value) return
isResizing.value = true
startWidth = width.value - event.clientX
startHeight = height.value - event.clientY
@ -87,7 +97,7 @@ function startResize(event: MouseEvent) {
}
function resizeModal(event: MouseEvent) {
if (!isResizing.value) return
if (!isResizing.value || isFullScreen.value) return
const newWidth = Math.min(startWidth + event.clientX, window.innerWidth)
const newHeight = Math.min(startHeight + event.clientY, window.innerHeight)
width.value = Math.max(newWidth, minWidth.value)
@ -100,6 +110,7 @@ function stopResize() {
}
function startDrag(event: MouseEvent) {
if (isFullScreen.value) return
isDragging.value = true
startX = event.clientX
startY = event.clientY
@ -109,7 +120,7 @@ function startDrag(event: MouseEvent) {
}
function drag(event: MouseEvent) {
if (!isDragging.value) return
if (!isDragging.value || isFullScreen.value) return
const dx = event.clientX - startX
const dy = event.clientY - startY
x.value = initialX + dx
@ -122,11 +133,13 @@ function stopDrag() {
}
function adjustPosition() {
if (isFullScreen.value) return
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 handleResize() {
if (isFullScreen.value) return
width.value = Math.min(width.value, window.innerWidth)
height.value = Math.min(height.value, window.innerHeight)
adjustPosition()
@ -139,6 +152,21 @@ function initializePosition() {
y.value = (window.innerHeight - height.value) / 2
}
function toggleFullScreen() {
if (isFullScreen.value) {
// Exit full-screen
x.value = preFullScreenState.x
y.value = preFullScreenState.y
width.value = preFullScreenState.width
height.value = preFullScreenState.height
isFullScreen.value = false
} else {
// Enter full-screen
preFullScreenState = { x: x.value, y: y.value, width: width.value, height: height.value }
isFullScreen.value = true
}
}
watch(
() => props.isModalOpen,
(value) => {

86
src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -14,40 +14,58 @@
</div>
<div class="m-2.5 px-2.5 block">
<button class="btn-cyan px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24 mb-5" type="button" @click.prevent="addNewImage">New IMG</button>
<Accordion v-for="image in spriteImages" :key="image.id" :title="image.name">
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input v-model="image.name" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
<Accordion v-for="image in spriteImages" :key="image.id">
<template #header>
<div class="flex items-center">
{{ image.name }}
<div class="ml-auto flex gap-2">
<label for="upload-asset" class="text-sm bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-1.5 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" />
Set image
</label>
<button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteImages.splice(spriteImages.indexOf(image), 1)">Remove</button>
</div>
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input v-model.number="image.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input v-model.number="image.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
<input v-model.number="image.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
<input v-model.number="image.frameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
<input v-model.number="image.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="is-looping">Is looping</label>
<select v-model="image.isLooping" class="input-cyan" name="is-looping">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
</form>
</template>
<template #content>
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input v-model="image.name" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="action">Action</label>
<input v-model="image.action" class="input-cyan" type="text" name="action" placeholder="Action" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input v-model.number="image.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input v-model.number="image.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
<input v-model.number="image.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
<input v-model.number="image.frameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
</div>
<div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
<input v-model.number="image.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="is-looping">Is looping</label>
<select v-model="image.isLooping" class="input-cyan" name="is-looping">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
</form>
</template>
</Accordion>
</div>
</div>
@ -106,7 +124,7 @@ function saveSprite() {
const updatedSprite = {
id: selectedSprite.value.id,
name: spriteName.value,
spriteImages: selectedSprite.value.spriteImages
spriteImages: spriteImages.value
}
gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {