npm update, changes a few things regarding sprite logic

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 = []