From 15b212160dbd060b82480364b598736d5cf915f2 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 6 Feb 2025 13:46:21 +0100
Subject: [PATCH] Walk improvement

---
 .../partials/SelectedPlacedMapObject.vue      | 13 +++++++------
 .../useCharacterSpriteComposable.ts           | 19 ++++++++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
index b4840e2..40add9d 100644
--- a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+++ b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
@@ -41,12 +41,12 @@
 </template>
 
 <script setup lang="ts">
-import type { Map as MapT, MapObject, PlacedMapObject } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { onMounted, ref } from 'vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject
@@ -77,7 +77,7 @@ const handleDelete = () => {
   emit('delete', props.placedMapObject.id, props.map)
 }
 
-async function handleUpdate () {
+async function handleUpdate() {
   if (!mapObject.value) return
 
   gameStore.connection?.emit(
@@ -86,8 +86,9 @@ async function handleUpdate () {
       id: props.placedMapObject.mapObject as string,
       name: mapObjectName.value,
       originX: mapObjectOriginX.value,
-      originY: mapObjectOriginY.value,
-    }, async (response: boolean) => {
+      originY: mapObjectOriginY.value
+    },
+    async (response: boolean) => {
       if (!response) return
       // Update mapObject in storage
       await mapObjectStorage.update(mapObject.value!.id, {
diff --git a/src/composables/useCharacterSpriteComposable.ts b/src/composables/useCharacterSpriteComposable.ts
index 5e9ab4a..e353724 100644
--- a/src/composables/useCharacterSpriteComposable.ts
+++ b/src/composables/useCharacterSpriteComposable.ts
@@ -1,3 +1,4 @@
+import config from '@/application/config'
 import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/mapService'
@@ -35,9 +36,10 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
       tween.value.stop()
     }
 
-    const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
-    const baseSpeed = 150 // pixels per second
-    const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds
+    const tileDistance = Math.sqrt(Math.pow((newPositionX - currentPositionX.value) / config.tile_size.width, 2) + Math.pow((newPositionY - currentPositionY.value) / config.tile_size.height, 2))
+
+    const baseDuration = 300 // milliseconds per tile
+    const duration = Math.min(baseDuration * tileDistance, baseDuration)
 
     tween.value = tilemap.scene.tweens.add({
       targets: characterContainer.value,
@@ -73,10 +75,13 @@ export function useCharacterSpriteComposable(scene: Phaser.Scene, tilemap: Phase
       characterSprite.value!.setTexture(charTexture.value)
     })
 
-    characterSprite.value.anims.play({
-      key: fullAnimationName,
-      repeat: loop ? -1 : 0
-    }, ignoreIfPlaying)
+    characterSprite.value.anims.play(
+      {
+        key: fullAnimationName,
+        repeat: loop ? -1 : 0
+      },
+      ignoreIfPlaying
+    )
   }
 
   const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {