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

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) => {