Added temp. offset logic for easier sprite management

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

@@ -48,12 +48,24 @@
               <input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
             </div>
             <div class="form-field-full">
-              <SpriteActionsInput v-model="action.sprites" />
+              <SpriteActionsInput 
+                v-model="action.sprites" 
+                @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" 
+              />
             </div>
           </form>
         </template>
       </Accordion>
-      <SpritePreview v-if="selectedAction" :sprites="selectedAction.sprites" :frame-rate="selectedAction.frameRate" :is-modal-open="isModalOpen" @update:frame-rate="updateFrameRate" @update:is-modal-open="isModalOpen = $event" />
+      <SpritePreview 
+        v-if="selectedAction" 
+        :sprites="selectedAction.sprites" 
+        :frame-rate="selectedAction.frameRate" 
+        :is-modal-open="isModalOpen" 
+        :temp-offset-index="tempOffsetData.index" 
+        :temp-offset="tempOffsetData.offset" 
+        @update:frame-rate="updateFrameRate" 
+        @update:is-modal-open="isModalOpen = $event" 
+      />
     </div>
   </div>
 </template>
@@ -187,6 +199,17 @@ function updateFrameRate(value: number) {
   }
 }
 
+const tempOffsetData = ref<{ index: number | undefined; offset: { x: number; y: number } | undefined }>({ 
+  index: undefined, 
+  offset: undefined 
+})
+
+function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x: number; y: number }) {
+  if (selectedAction.value === action) {
+    tempOffsetData.value = { index, offset }
+  }
+}
+
 watch(selectedSprite, (sprite: Sprite | null) => {
   if (!sprite) return
   spriteName.value = sprite.name

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue

@@ -1,7 +1,10 @@
 <template>
   <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-300 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" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
+      <img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
+      <div v-if="image.dimensions" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">
+        {{ image.dimensions.width }}x{{ image.dimensions.height }}
+      </div>
       <div class="absolute top-1 left-1 flex-row space-y-1">
         <button @click.stop="deleteImage(index)" class="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">
@@ -50,7 +53,7 @@
 
 <script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 interface SpriteImage {
   url: string
@@ -58,6 +61,10 @@ interface SpriteImage {
     x: number
     y: number
   }
+  dimensions?: {
+    width: number
+    height: number
+  }
 }
 
 interface Props {
@@ -71,6 +78,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (e: 'update:modelValue', value: SpriteImage[]): void
   (e: 'close'): void
+  (e: 'tempOffsetChange', index: number, offset: { x: number, y: number }): void
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)
@@ -162,4 +170,25 @@ const saveOffset = (index: number) => {
   updateImages(newImages)
   closeOffsetModal()
 }
+
+const onOffsetChange = () => {
+  if (selectedImageIndex.value !== null) {
+    emit('tempOffsetChange', selectedImageIndex.value, tempOffset.value)
+  }
+}
+
+watch(tempOffset, onOffsetChange, { deep: true })
+
+const updateImageDimensions = (event: Event, index: number) => {
+  const img = event.target as HTMLImageElement
+  const newImages = [...props.modelValue]
+  newImages[index] = {
+    ...newImages[index],
+    dimensions: {
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    }
+  }
+  updateImages(newImages)
+}
 </script>

src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue

@@ -16,7 +16,7 @@
             }"
           >
             <img
-              v-for="(sprite, index) in sprites"
+              v-for="(sprite, index) in spritesWithTempOffset"
               :key="index"
               :src="sprite.url"
               alt="Sprite"
@@ -62,12 +62,14 @@
 <script setup lang="ts">
 import type { SpriteImage } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   sprites: SpriteImage[]
   frameRate: number
   isModalOpen?: boolean
+  tempOffsetIndex?: number
+  tempOffset?: { x: number, y: number }
 }>()
 
 const emit = defineEmits<{
@@ -82,6 +84,15 @@ const localFrameRate = ref(props.frameRate)
 const zoomLevel = ref(100)
 let animationInterval: number | null = null
 
+const spritesWithTempOffset = computed(() => {
+  return props.sprites.map((sprite, index) => {
+    if (index === props.tempOffsetIndex && props.tempOffset) {
+      return { ...sprite, offset: props.tempOffset }
+    }
+    return sprite
+  })
+})
+
 function updateContainerSize(event: Event) {
   const img = event.target as HTMLImageElement
   maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)