Removed comment, updated types for sprite actions, minor modal component improvement, added components for better sprite management

src/application/types.ts

@@ -216,11 +216,19 @@ export type Sprite = {
   characterTypes: CharacterType[]
 }
 
+export interface SpriteImage {
+  url: string
+  offset: {
+    x: number
+    y: number
+  }
+}
+
 export type SpriteAction = {
   id: UUID
   sprite: Sprite
   action: string
-  sprites: string[]
+  sprites: SpriteImage[]
   originX: number
   originY: number
   frameWidth: number

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

@@ -21,10 +21,13 @@
       <button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
       <Accordion v-for="action in spriteActions" :key="action.id">
         <template #header>
-          <div class="flex justify-between items-center">
+          <div class="flex items-center">
             {{ action.action }}
+            <div class="ml-auto space-x-2">
+              <button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.prevent="openPreviewModal(action)">View</button>
               <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
             </div>
+          </div>
         </template>
         <template #content>
           <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveSprite">
@@ -50,6 +53,22 @@
           </form>
         </template>
       </Accordion>
+      <Modal :is-modal-open="isModalOpen" :modal-width="300" :modal-height="420" :bg-style="'none'" @modal:close="isModalOpen = false">
+        <template #modalHeader>
+          <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
+        </template>
+        <template #modalBody>
+          <div class="m-4 flex flex-col gap-4">
+            <div v-if="selectedAction" class="flex flex-col items-center">
+              <SpritePreview :sprites="selectedAction.sprites" :frame-rate="previewFps" />
+              <div class="w-full mt-4">
+                <label class="block mb-2 text-white">Frame Rate: {{ previewFps }} FPS</label>
+                <input type="range" v-model.number="previewFps" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updatePreviewFps" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </Modal>
     </div>
   </div>
 </template>
@@ -58,7 +77,9 @@
 import type { Sprite, SpriteAction } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
+import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
 import Accordion from '@/components/utilities/Accordion.vue'
+import Modal from '@/components/utilities/Modal.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -176,6 +197,30 @@ watch(selectedSprite, (sprite: Sprite | null) => {
   spriteActions.value = sortSpriteActions(sprite.spriteActions)
 })
 
+// View sprite modal logic
+const isModalOpen = ref(false)
+const selectedAction = ref<SpriteAction | null>(null)
+const previewFps = ref(0)
+
+function openPreviewModal(action: SpriteAction) {
+  selectedAction.value = action
+  previewFps.value = action.frameRate || 0
+  isModalOpen.value = true
+}
+
+watch(isModalOpen, (newValue) => {
+  if (!newValue) {
+    selectedAction.value = null
+    previewFps.value = 0
+  }
+})
+
+function updatePreviewFps() {
+  if (selectedAction.value) {
+    selectedAction.value.frameRate = previewFps.value
+  }
+}
+
 onMounted(() => {
   if (!selectedSprite.value) return
 })

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

@@ -1,19 +1,43 @@
 <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" 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" />
       <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">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
-        <button class="bg-blue-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="Scope image">
+        <button @click.stop="openOffsetModal(index)" class="bg-blue-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="Scope image">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg width="50px" height="50px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            <path d="M8.29289 3.70711L1 11V15H5L12.2929 7.70711L8.29289 3.70711Z" fill="white" />
+            <path d="M9.70711 2.29289L13.7071 6.29289L15.1716 4.82843C15.702 4.29799 16 3.57857 16 2.82843C16 1.26633 14.7337 0 13.1716 0C12.4214 0 11.702 0.297995 11.1716 0.828428L9.70711 2.29289Z" fill="white" />
           </svg>
         </button>
       </div>
+
+      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
+        <template #modalHeader>
+          <h3 class="m-0 font-medium shrink-0 text-white">Action offset</h3>
+        </template>
+        <template #modalBody>
+          <div class="m-4">
+            <form method="post" @submit.prevent="saveOffset(index)" class="inline">
+              <div class="gap-2.5 flex flex-wrap">
+                <div class="form-field-half">
+                  <label for="offsetX">Offset X</label>
+                  <input class="input-field max-w-64" v-model="tempOffset.x" name="offsetX" id="offsetX" type="number" />
+                </div>
+                <div class="form-field-half">
+                  <label for="offsetY">Offset Y</label>
+                  <input class="input-field max-w-64" v-model="tempOffset.y" name="offsetY" id="offsetY" type="number" />
+                </div>
+              </div>
+              <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+            </form>
+          </div>
+        </template>
+      </Modal>
     </div>
     <div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -25,10 +49,19 @@
 </template>
 
 <script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
 import { ref } from 'vue'
 
+interface SpriteImage {
+  url: string
+  offset: {
+    x: number
+    y: number
+  }
+}
+
 interface Props {
-  modelValue: string[]
+  modelValue: SpriteImage[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,11 +69,14 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string[]): void
+  (e: 'update:modelValue', value: SpriteImage[]): void
+  (e: 'close'): void
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const draggedIndex = ref<number | null>(null)
+const selectedImageIndex = ref<number | null>(null)
+const tempOffset = ref({ x: 0, y: 0 })
 
 const triggerFileInput = () => {
   fileInput.value?.click()
@@ -61,19 +97,25 @@ const onDrop = (event: DragEvent) => {
 
 const handleFiles = (files: FileList) => {
   Array.from(files).forEach((file) => {
-    if (file.type.startsWith('image/')) {
+    if (!file.type.startsWith('image/')) {
+      return
+    }
+
     const reader = new FileReader()
     reader.onload = (e) => {
       if (typeof e.target?.result === 'string') {
-          updateImages([...props.modelValue, e.target.result])
+        const newImage: SpriteImage = {
+          url: e.target.result,
+          offset: { x: 0, y: 0 }
+        }
+        updateImages([...props.modelValue, newImage])
       }
     }
     reader.readAsDataURL(file)
-    }
   })
 }
 
-const updateImages = (newImages: string[]) => {
+const updateImages = (newImages: SpriteImage[]) => {
   emit('update:modelValue', newImages)
 }
 
@@ -101,4 +143,23 @@ const drop = (event: DragEvent, dropIndex: number) => {
   }
   draggedIndex.value = null
 }
+
+const openOffsetModal = (index: number) => {
+  selectedImageIndex.value = index
+  tempOffset.value = { ...props.modelValue[index].offset }
+}
+
+const closeOffsetModal = () => {
+  selectedImageIndex.value = null
+}
+
+const saveOffset = (index: number) => {
+  const newImages = [...props.modelValue]
+  newImages[index] = {
+    ...newImages[index],
+    offset: { ...tempOffset.value }
+  }
+  updateImages(newImages)
+  closeOffsetModal()
+}
 </script>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="relative">
+    <div
+      class="sprite-container bg-gray-800"
+      :style="{
+        width: `${maxWidth}px`,
+        height: `${maxHeight}px`,
+        position: 'relative',
+        overflow: 'hidden'
+      }"
+    >
+      <img
+        v-for="(sprite, index) in sprites"
+        :key="index"
+        :src="sprite.url"
+        alt="Sprite"
+        :style="{
+          position: 'absolute',
+          left: `${sprite.offset?.x || 0}px`,
+          bottom: `${sprite.offset?.y || 0}px`,
+          display: currentFrame === index ? 'block' : 'none'
+        }"
+        @load="updateContainerSize"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SpriteImage } from '@/application/types'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  sprites: SpriteImage[]
+  frameRate: number
+}>()
+
+const currentFrame = ref(0)
+const maxWidth = ref(250)
+const maxHeight = ref(250)
+let animationInterval: number | null = null
+
+function updateContainerSize(event: Event) {
+  const img = event.target as HTMLImageElement
+  maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)
+  maxHeight.value = Math.max(maxHeight.value, img.naturalHeight)
+}
+
+function updateAnimation() {
+  stopAnimation()
+  if (props.frameRate <= 0 || props.sprites.length === 0) {
+    currentFrame.value = 0
+    return
+  }
+
+  animationInterval = window.setInterval(() => {
+    currentFrame.value = (currentFrame.value + 1) % props.sprites.length
+  }, 1000 / props.frameRate)
+}
+
+function stopAnimation() {
+  if (animationInterval) {
+    clearInterval(animationInterval)
+    animationInterval = null
+  }
+}
+
+watch(() => props.frameRate, updateAnimation, { immediate: true })
+watch(() => props.sprites, updateAnimation, { immediate: true })
+
+onMounted(() => {
+  updateAnimation()
+})
+
+onUnmounted(() => {
+  stopAnimation()
+})
+</script>
+
+<style scoped>
+.sprite-container {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+</style>

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

@@ -13,11 +13,11 @@
             </div>
             <div class="form-field-half">
               <label for="name">Width</label>
-              <input class="input-field max-w-64" v-model="width" name="name" id="name" type="number" />
+              <input class="input-field max-w-64" v-model="width" name="width" id="width" type="number" />
             </div>
             <div class="form-field-half">
               <label for="name">Height</label>
-              <input class="input-field max-w-64" v-model="height" name="name" id="name" type="number" />
+              <input class="input-field max-w-64" v-model="height" name="height" id="height" type="number" />
             </div>
             <div class="form-field-full">
               <label for="name">PVP enabled</label>

src/components/utilities/Modal.vue

@@ -17,7 +17,7 @@
           <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="isModalOpenRef = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
@@ -81,7 +81,6 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<{
   'modal:open': []
   'modal:close': []
-  'character:create': []
 }>()
 
 defineExpose({
@@ -157,6 +156,11 @@ function drag(event: MouseEvent) {
   y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
+function closeModal() {
+  isModalOpenRef.value = false
+  emit('modal:close')
+}
+
 function toggleFullScreen() {
   if (isFullScreen.value) {
     Object.assign({ x, y, width, height }, preFullScreenState)

src/composables/gameComposable.ts

@@ -59,7 +59,6 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
   if (!sprite_id) return false
 
-  // @TODO: Fix this
   const spriteStorage = new SpriteStorage()
   const sprite = await spriteStorage.get(sprite_id)