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

Finished saving sprite logic

Browse Source
This commit is contained in:
Dennis Postma
2024-07-26 04:57:17 +02:00
parent 095144fa8f
commit 116c6f1590
5 changed files with 46 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,26 +43,26 @@
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-half">
<div class="form-field-half" v-if="action.isAnimated">
<label for="is-looping">Is looping</label>
<select v-model="action.isLooping" class="input-cyan" name="is-looping">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
</div>
<div class="form-field-full">
<div class="form-field-full" v-if="action.isAnimated">
<label for="frame-speed">Frame speed</label>
<input v-model.number="action.frameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
</div>
<div class="form-field-half">
<div class="form-field-half" v-if="action.isAnimated">
<label for="frame-width">Frame width</label>
<input v-model.number="action.frameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
</div>
<div class="form-field-half">
<div class="form-field-half" v-if="action.isAnimated">
<label for="frame-height">Frame height</label>
<input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div>
<SpriteActionsInput v-model="action.images" />
<SpriteActionsInput v-model="action.sprites" />
</form>
</template>
</Accordion>
@ -124,18 +124,19 @@ function saveSprite() {
const updatedSprite = {
id: selectedSprite.value.id,
name: spriteName.value,
spriteActions: spriteActions.value.map((action) => {
spriteActions: spriteActions.value?.map((action) => {
return {
action: action.action,
sprites: action.sprites,
origin_x: action.origin_x,
origin_y: action.origin_y,
isAnimated: action.isAnimated,
isLooping: action.isLooping,
frameSpeed: action.frameSpeed,
frameWidth: action.frameWidth,
frameHeight: action.frameHeight,
isAnimated: action.isAnimated,
isLooping: action.isLooping
}
})
}) ?? []
}
gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {
@ -147,30 +148,28 @@ function saveSprite() {
})
}
function uuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
}
function addNewImage() {
if (!selectedSprite.value) return
function uuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
}
const newImage: SpriteAction = {
id: uuidv4(), // Temporary ID, should be replaced by server-generated ID
spriteId: selectedSprite.value.id,
sprite: selectedSprite.value,
action: 'new_action',
sprites: [],
origin_x: 0,
origin_y: 0,
isAnimated: false,
isLooping: false,
frameSpeed: 0,
frameWidth: 0,
frameHeight: 0,
isAnimated: false,
spriteId: selectedSprite.value.id,
sprite: selectedSprite.value,
isLooping: false
}
console.log(newImage)
// spriteimages value can be undefined
if (!spriteActions.value) {
spriteActions.value = []
}

44
src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="w-full flex flex-wrap gap-3">
<div v-for="(image, index) in images" :key="image.id" class="flex items-center justify-center h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
<img :src="image.url || image.base64" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
<button @click.stop="deleteImage(image.id)" class="absolute top-1 right-1 bg-red text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100" aria-label="Delete image">
<div class="flex flex-wrap gap-3">
<div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
<img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
<button @click.stop="deleteImage(index)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
@ -14,15 +14,14 @@
</svg>
</div>
</div>
<input type="file" ref="fileInput" @change="onFileChange" multiple accept="image/*" class="hidden" />
<input type="file" ref="fileInput" @change="onFileChange" multiple accept="image/png" class="hidden" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { SpriteActionImage } from '@/types'
import { ref } from 'vue'
interface Props {
modelValue: SpriteActionImage[]
modelValue: string[]
}
const props = withDefaults(defineProps<Props>(), {
@ -30,21 +29,12 @@ const props = withDefaults(defineProps<Props>(), {
})
const emit = defineEmits<{
(e: 'update:modelValue', value: SpriteActionImage[]): void
(e: 'update:modelValue', value: string[]): void
}>()
const images = ref<SpriteActionImage[]>(props.modelValue)
const fileInput = ref<HTMLInputElement | null>(null)
const draggedIndex = ref<number | null>(null)
watch(
() => props.modelValue,
(newValue) => {
images.value = newValue
},
{ deep: true }
)
const triggerFileInput = () => {
fileInput.value?.click()
}
@ -68,13 +58,7 @@ const handleFiles = (files: FileList) => {
const reader = new FileReader()
reader.onload = (e) => {
if (typeof e.target?.result === 'string') {
const newImage: SpriteActionImage = {
id: Date.now().toString() + Math.random().toString(36).substring(2, 15),
base64: e.target.result,
url: '',
file: file
}
updateImages([...images.value, newImage])
updateImages([...props.modelValue, e.target.result])
}
}
reader.readAsDataURL(file)
@ -82,13 +66,13 @@ const handleFiles = (files: FileList) => {
})
}
const updateImages = (newImages: SpriteActionImage[]) => {
images.value = newImages
const updateImages = (newImages: string[]) => {
emit('update:modelValue', newImages)
}
const deleteImage = (id: string) => {
const newImages = images.value.filter((img) => img.id !== id)
const deleteImage = (index: number) => {
const newImages = [...props.modelValue]
newImages.splice(index, 1)
updateImages(newImages)
}
@ -103,7 +87,7 @@ const dragStart = (event: DragEvent, index: number) => {
const drop = (event: DragEvent, dropIndex: number) => {
event.preventDefault()
if (draggedIndex.value !== null && draggedIndex.value !== dropIndex) {
const newImages = [...images.value]
const newImages = [...props.modelValue]
const [reorderedItem] = newImages.splice(draggedIndex.value, 1)
newImages.splice(dropIndex, 0, reorderedItem)
updateImages(newImages)