Merge remote-tracking branch 'origin/main' into feature/#321

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

@@ -48,23 +48,20 @@
               <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" 
-                @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" 
-              />
+              <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" 
-        :temp-offset-index="tempOffsetData.index" 
-        :temp-offset="tempOffsetData.offset" 
-        @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>
@@ -199,9 +196,9 @@ function updateFrameRate(value: number) {
   }
 }
 
-const tempOffsetData = ref<{ index: number | undefined; offset: { x: number; y: number } | undefined }>({ 
-  index: undefined, 
-  offset: undefined 
+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 }) {

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

@@ -2,9 +2,7 @@
   <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" @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 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">
@@ -78,7 +76,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
+  (e: 'tempOffsetChange', index: number, offset: { x: number; y: number }): void
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)

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

@@ -39,15 +39,7 @@
           </div>
           <div class="flex flex-col">
             <label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
-            <input 
-              type="range" 
-              v-model.number="currentFrame" 
-              :min="0" 
-              :max="sprites.length - 1" 
-              step="1" 
-              class="w-full accent-cyan-500" 
-              @input="stopAnimation"
-            />
+            <input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
           </div>
           <div class="flex flex-col">
             <label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
@@ -69,7 +61,7 @@ const props = defineProps<{
   frameRate: number
   isModalOpen?: boolean
   tempOffsetIndex?: number
-  tempOffset?: { x: number, y: number }
+  tempOffset?: { x: number; y: number }
 }>()
 
 const emit = defineEmits<{

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -31,14 +31,14 @@
                       @click="openGroup(group)"
                       @load="() => processTile(group.parent)"
                       :class="{
-                    'border-cyan shadow-lg': isActiveTile(group.parent),
-                    'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
-                  }"
+                        'border-cyan shadow-lg': isActiveTile(group.parent),
+                        'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
+                      }"
                     />
                     <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
                     <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-                  {{ group.children.length + 1 }}
-                </span>
+                      {{ group.children.length + 1 }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -56,9 +56,9 @@
                     :alt="selectedGroup.parent.name"
                     @click="selectTile(selectedGroup.parent.id)"
                     :class="{
-                  'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
-                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
-                }"
+                      'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
+                      'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+                    }"
                   />
                   <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
                 </div>
@@ -69,9 +69,9 @@
                     :alt="childTile.name"
                     @click="selectTile(childTile.id)"
                     :class="{
-                  'border-cyan shadow-lg': isActiveTile(childTile),
-                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-                }"
+                      'border-cyan shadow-lg': isActiveTile(childTile),
+                      'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                    }"
                   />
                   <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
                 </div>