From 15f9e9861e8a53cf81d03a62253a666ca1e83a00 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 31 Jan 2025 01:55:52 +0100
Subject: [PATCH] Zoom

---
 src/application/types.ts                      |   6 +-
 .../partials/sprite/SpriteDetails.vue         |  54 +++------
 .../sprite/partials/SpriteImagesInput.vue     |   3 +-
 .../sprite/partials/SpritePreview.vue         | 110 +++++++++++++-----
 4 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/src/application/types.ts b/src/application/types.ts
index 218ee95..d61527a 100644
--- a/src/application/types.ts
+++ b/src/application/types.ts
@@ -225,8 +225,8 @@ export interface SpriteImage {
 }
 
 export type SpriteAction = {
-  id: UUID
-  sprite: Sprite
+  id: string
+  sprite: string
   action: string
   sprites: SpriteImage[]
   originX: number
@@ -237,7 +237,7 @@ export type SpriteAction = {
 }
 
 export type Chat = {
-  id: UUID
+  id: string
   character: Character
   map: Map
   message: string
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
index 6b6aece..1b25bf4 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@@ -53,33 +53,17 @@
           </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>
+      <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" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Sprite, SpriteAction } from '@/application/types'
+import type { Sprite, SpriteAction, UUID } 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'
@@ -91,6 +75,8 @@ const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
 const spriteName = ref('')
 const spriteActions = ref<SpriteAction[]>([])
+const isModalOpen = ref(false)
+const selectedAction = ref<SpriteAction | null>(null)
 
 if (!selectedSprite.value) {
   console.error('No sprite selected')
@@ -168,8 +154,7 @@ function addNewImage() {
 
   const newImage: SpriteAction = {
     id: uuidv4(),
-    spriteId: selectedSprite.value.id,
-    sprite: selectedSprite.value,
+    sprite: selectedSprite.value.id,
     action: 'new_action',
     sprites: [],
     originX: 0,
@@ -191,36 +176,29 @@ function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
   return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 
+function openPreviewModal(action: SpriteAction) {
+  selectedAction.value = action
+  isModalOpen.value = true
+}
+
+function updateFrameRate(value: number) {
+  if (selectedAction.value) {
+    selectedAction.value.frameRate = value
+  }
+}
+
 watch(selectedSprite, (sprite: Sprite | null) => {
   if (!sprite) return
   spriteName.value = sprite.name
   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
 })
diff --git a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index 14348ca..6e8d7bb 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -18,7 +18,7 @@
 
       <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>
+          <h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
         </template>
         <template #modalBody>
           <div class="m-4">
@@ -159,6 +159,7 @@ const saveOffset = (index: number) => {
     ...newImages[index],
     offset: { ...tempOffset.value }
   }
+  updateImages(newImages)
   closeOffsetModal()
 }
 </script>
diff --git a/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue b/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
index a4c1731..caac77c 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
@@ -1,43 +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>
+  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4 flex gap-8">
+        <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',
+                transform: `scale(${zoomLevel / 100})`,
+                transformOrigin: 'bottom left'
+              }"
+              @load="updateContainerSize"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col justify-center gap-8 flex-1">
+          <div class="flex flex-col">
+            <label class="block mb-2 text-white">Frame Rate: {{ frameRate }} FPS</label>
+            <input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
+          </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"
+            />
+          </div>
+          <div class="flex flex-col">
+            <label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
+            <input type="range" v-model.number="zoomLevel" min="10" max="200" step="10" class="w-full accent-cyan-500" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
 import type { SpriteImage } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   sprites: SpriteImage[]
   frameRate: number
+  isModalOpen?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:frameRate', value: number): void
+  (e: 'update:isModalOpen', value: boolean): void
 }>()
 
 const currentFrame = ref(0)
 const maxWidth = ref(250)
 const maxHeight = ref(250)
+const localFrameRate = ref(props.frameRate)
+const zoomLevel = ref(100)
 let animationInterval: number | null = null
 
 function updateContainerSize(event: Event) {
@@ -65,7 +107,23 @@ function stopAnimation() {
   }
 }
 
-watch(() => props.frameRate, updateAnimation, { immediate: true })
+function updateFrameRate() {
+  emit('update:frameRate', localFrameRate.value)
+}
+
+function closeModal() {
+  emit('update:isModalOpen', false)
+}
+
+watch(
+  () => props.frameRate,
+  (newValue) => {
+    localFrameRate.value = newValue
+    updateAnimation()
+  },
+  { immediate: true }
+)
+
 watch(() => props.sprites, updateAnimation, { immediate: true })
 
 onMounted(() => {