From 116c6f159052d13870676b19cc33d7fbad58f385 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 26 Jul 2024 04:57:17 +0200
Subject: [PATCH] Finished saving sprite logic

---
 package-lock.json                             | 48 +++++--------------
 package.json                                  |  1 -
 .../partials/sprite/SpriteDetails.vue         | 39 ++++++++-------
 .../sprite/partials/SpriteImagesInput.vue     | 44 ++++++-----------
 src/types.ts                                  |  9 +---
 5 files changed, 46 insertions(+), 95 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 74593f7..734eac7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "socket.io-client": "^4.7.5",
         "universal-cookie": "^6.1.3",
         "vue": "^3.4.33",
-        "vue-draggable-plus": "^0.5.2",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -1773,12 +1772,6 @@
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@types/sortablejs": {
-      "version": "1.15.8",
-      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
-      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
-      "license": "MIT"
-    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -2462,9 +2455,9 @@
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.9",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.9.tgz",
-      "integrity": "sha512-dC1TJMODGM8lxhP6wLToncaDPPNB3biVxxRDuNCYpuXwi70ou7NsGd97KVTJ2omepGId429JZt8oaZKeXbqxwg==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2554,9 +2547,9 @@
       }
     },
     "node_modules/@vueuse/integrations/node_modules/vue-demi": {
-      "version": "0.14.9",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.9.tgz",
-      "integrity": "sha512-dC1TJMODGM8lxhP6wLToncaDPPNB3biVxxRDuNCYpuXwi70ou7NsGd97KVTJ2omepGId429JZt8oaZKeXbqxwg==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2601,9 +2594,9 @@
       }
     },
     "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.9",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.9.tgz",
-      "integrity": "sha512-dC1TJMODGM8lxhP6wLToncaDPPNB3biVxxRDuNCYpuXwi70ou7NsGd97KVTJ2omepGId429JZt8oaZKeXbqxwg==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5679,9 +5672,9 @@
       }
     },
     "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.9",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.9.tgz",
-      "integrity": "sha512-dC1TJMODGM8lxhP6wLToncaDPPNB3biVxxRDuNCYpuXwi70ou7NsGd97KVTJ2omepGId429JZt8oaZKeXbqxwg==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -7208,23 +7201,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/vue-draggable-plus": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.5.2.tgz",
-      "integrity": "sha512-+EWOYOtY6MVbhPpG+H4rjyuWAJiQU2VoLI/ehOCZkz62anrKrGHz5CBL2HDXi01hpNSP9BTDgkBcibhdO9/Jgg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/sortablejs": "^1.15.8"
-      },
-      "peerDependencies": {
-        "@types/sortablejs": "^1.15.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/package.json b/package.json
index 922b5cb..2c21418 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "socket.io-client": "^4.7.5",
     "universal-cookie": "^6.1.3",
     "vue": "^3.4.33",
-    "vue-draggable-plus": "^0.5.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
index a6be1b4..f15733a 100644
--- a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
@@ -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 = []
   }
diff --git a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index 0c1a25b..fe4a38b 100644
--- a/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -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)
diff --git a/src/types.ts b/src/types.ts
index ba9e665..6ab35d4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -161,6 +161,7 @@ export type SpriteAction = {
   spriteId: string
   sprite: Sprite
   action: string
+  sprites: string[]
   origin_x: number
   origin_y: number
   isAnimated: boolean
@@ -168,14 +169,6 @@ export type SpriteAction = {
   frameWidth: number
   frameHeight: number
   frameSpeed: number
-  images: SpriteActionImage[]
-}
-
-export type SpriteActionImage = {
-  id: string
-  spriteActionId: string
-  spriteAction: SpriteAction
-  order: number
 }
 
 export type Chat = {