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

typo fix

Browse Source
This commit is contained in:
Dennis Postma 2024-07-25 21:14:46 +02:00
parent a14f21fdc6
commit ccc40b0abb
3 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,6 @@
<input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" /> <input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
</div> </div>
<div class="w-full flex mb-5 gap-2"> <div class="w-full flex mb-5 gap-2">
<!-- Component with images in base64 format, ordered -->
<SpriteActionsInput v-model="action.images" /> <SpriteActionsInput v-model="action.images" />
</div> </div>
</form> </form>

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

@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<div v-for="(image, index) in images" :key="image.id" class="min-h-24 min-w-24 p-3 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)"> <div v-for="(image, index) in images" :key="image.id" class="min-h-24 min-w-24 p-3 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.base64" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" /> <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-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"> <button @click.stop="deleteImage(image.id)" 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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@ -19,14 +19,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import type { SpriteActionImage } from '@/types'
interface ImageItem {
id: string
base64: string
}
interface Props { interface Props {
modelValue: ImageItem[] modelValue: SpriteActionImage[]
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -34,10 +30,10 @@ const props = withDefaults(defineProps<Props>(), {
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: ImageItem[]): void (e: 'update:modelValue', value: SpriteActionImage[]): void
}>() }>()
const images = ref<ImageItem[]>(props.modelValue) const images = ref<SpriteActionImage[]>(props.modelValue)
const fileInput = ref<HTMLInputElement | null>(null) const fileInput = ref<HTMLInputElement | null>(null)
const draggedIndex = ref<number | null>(null) const draggedIndex = ref<number | null>(null)
@ -72,9 +68,11 @@ const handleFiles = (files: FileList) => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
if (typeof e.target?.result === 'string') { if (typeof e.target?.result === 'string') {
const newImage: ImageItem = { const newImage: SpriteActionImage = {
id: Date.now().toString() + Math.random().toString(36).substring(2, 15), id: Date.now().toString() + Math.random().toString(36).substring(2, 15),
base64: e.target.result base64: e.target.result,
url: '',
file: file
} }
updateImages([...images.value, newImage]) updateImages([...images.value, newImage])
} }
@ -84,7 +82,7 @@ const handleFiles = (files: FileList) => {
}) })
} }
const updateImages = (newImages: ImageItem[]) => { const updateImages = (newImages: SpriteActionImage[]) => {
images.value = newImages images.value = newImages
emit('update:modelValue', newImages) emit('update:modelValue', newImages)
} }

2
src/types.ts
View File

@ -152,7 +152,7 @@ export type Sprite = {
name: string name: string
createdAt: Date createdAt: Date
updatedAt: Date updatedAt: Date
spriteActions: spriteAction[] spriteActions: SpriteAction[]
characterTypes: CharacterType[] characterTypes: CharacterType[]
} }