npm update, changes a few things regarding sprite logic

package-lock.json

@@ -3450,9 +3450,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.0.tgz",
-      "integrity": "sha512-Vb3xHHYnLseK8vlMJQKJYXJ++t4u1/qJ3vykuVrVjvdiOEhYyT1AuP4x03G8EnPmYvYOhe9T+dADTmthjRQMkA==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.1.tgz",
+      "integrity": "sha512-FKbOCOQ5QRB3VlIbl1LZQefWIYwszlBloaXcY2rbfpu9ioJnNh3TK03YtIDKDo3WKBi8u+YV4+Fn2CkEozgf4w==",
       "dev": true,
       "license": "ISC"
     },
@@ -6629,9 +6629,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz",
-      "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
+      "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6949,9 +6949,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz",
-      "integrity": "sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
+      "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7202,9 +7202,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.28.tgz",
-      "integrity": "sha512-hoK0UsKXrXDY9zdpdk+drqOqYHpPhbmfQUJ2mFYK57+l73mQxcYyCteQsolllwGaxhWihT077+OA/FR5ZPTceg==",
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.29.tgz",
+      "integrity": "sha512-58i+ZhUAUpwQ+9h5Hck0D+jr1qbYl4voRt5KffBx8qzELViQ4XdT/Tuo+mzq8u63teAG8K0lLaOiL5ofqW38rg==",
       "dev": true,
       "license": "MIT"
     },

src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue

@@ -63,11 +63,8 @@
               <input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
             </div>
             <div class="w-full flex mb-5 gap-2">
-              <SpriteActionsInput v-model="action.spriteActions" />
-            </div>
-            <div v-if="action.base64">
-              <div class="w-full h-px bg-cyan-200"></div>
-              <img class="max-h-56" :src="`data:image/png;base64,${action.base64}`" />
+<!--              Component with images in base64 format, ordered -->
+              <SpriteActionsInput v-model="action.images" />
             </div>
           </form>
         </template>
@@ -90,12 +87,7 @@ const assetManagerStore = useAssetManagerStore()
 const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
 const spriteName = ref('')
-
-type uploadSpriteAction = spriteAction & {
-  base64?: string
-}
-
-const spriteActions = ref<uploadSpriteAction[]>([])
+const spriteActions = ref<spriteAction[]>([])
 
 if (!selectedSprite.value) {
   console.error('No sprite selected')
@@ -106,6 +98,12 @@ if (selectedSprite.value) {
   spriteActions.value = selectedSprite.value.spriteActions
 }
 
+function getSpriteActionImages(action: spriteAction) {
+  gameStore.connection?.emit('gm:sprite:images:list', { id: selectedSprite.value?.id }, (response: string[]) => {
+    action.images = response
+  })
+}
+
 function removeSprite() {
   gameStore.connection?.emit('gm:sprite:remove', { id: selectedSprite.value?.id }, (response: boolean) => {
     if (!response) {
@@ -135,7 +133,18 @@ function saveSprite() {
   const updatedSprite = {
     id: selectedSprite.value.id,
     name: spriteName.value,
-    spriteActions: spriteActions.value
+    spriteActions: spriteActions.value.map((action) => {
+      return {
+        action: action.action,
+        origin_x: action.origin_x,
+        origin_y: action.origin_y,
+        frameSpeed: action.frameSpeed,
+        frameWidth: action.frameWidth,
+        frameHeight: action.frameHeight,
+        isAnimated: action.isAnimated,
+        isLooping: action.isLooping
+      }
+    })
   }
 
   gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {
@@ -150,8 +159,12 @@ function saveSprite() {
 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: Date.now().toString(), // Temporary ID, should be replaced by server-generated ID
+    id: uuidv4(), // Temporary ID, should be replaced by server-generated ID
     action: 'new_action',
     origin_x: 0,
     origin_y: 0,
@@ -164,6 +177,8 @@ function addNewImage() {
     isLooping: false
   }
 
+  console.log(newImage)
+
   // spriteimages value can be undefined
   if (!spriteActions.value) {
     spriteActions.value = []

src/types.ts

@@ -168,6 +168,7 @@ export type spriteAction = {
   frameWidth: number
   frameHeight: number
   frameSpeed: number
+  images?: string[]
 }
 
 export type Chat = {