From 104e59f0a6b9faf154b056822af01e5ba5492505 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 24 Jul 2024 22:55:29 +0200
Subject: [PATCH] WIP

---
 .../partials/sprite/SpriteDetails.vue         | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
index 00b21f0..fa96b1a 100644
--- a/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
@@ -20,7 +20,7 @@
             {{ image.name }}
             <div class="ml-auto flex gap-2">
               <label for="upload-asset" class="text-sm bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-1.5 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
-                <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" />
+                <input class="hidden" id="upload-asset" type="file" accept="image/png" @change="(event) => handleImageUpload(event, image)" />
                 Set image
               </label>
               <button class="btn-bordeaux px-4 py-1.5 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="() => spriteImages.splice(spriteImages.indexOf(image), 1)">Remove</button>
@@ -64,6 +64,10 @@
                 <option :value="true">Yes</option>
               </select>
             </div>
+            <div v-if="image.base64">
+              <div class="w-full h-px bg-cyan-200"></div>
+              <img class="max-h-56" :src="`data:image/png;base64,${image.base64}`" />
+            </div>
           </form>
         </template>
       </Accordion>
@@ -84,7 +88,12 @@ const assetManagerStore = useAssetManagerStore()
 const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
 const spriteName = ref('')
-const spriteImages = ref<SpriteImage[]>([])
+
+type uploadSpriteImage = SpriteImage & {
+  base64?: string
+}
+
+const spriteImages = ref<uploadSpriteImage[]>([])
 
 if (!selectedSprite.value) {
   console.error('No sprite selected')
@@ -95,6 +104,18 @@ if (selectedSprite.value) {
   spriteImages.value = selectedSprite.value.spriteImages
 }
 
+function handleImageUpload(event: Event, image: uploadSpriteImage) {
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) return
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    const base64String = e.target?.result as string
+    image.base64 = base64String.split(',')[1] // Remove the data:image/png;base64, prefix
+  }
+  reader.readAsDataURL(file)
+}
+
 function removeSprite() {
   gameStore.connection?.emit('gm:sprite:remove', { sprite: selectedSprite.value?.id }, (response: boolean) => {
     if (!response) {