Worked on pathfinding, character animation & rotation, few enhancements

package-lock.json

@@ -657,9 +657,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.0",
+      "version": "7.25.1",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.1.tgz",
-      "integrity": "sha512-ubALThHQy4GCf6mbb+5ZRNmLLCI7bJ3f8Q6LHBSRlSKSWj5a7dSUzJBLv3VuIhFrFPgjF4IzPF567YG/HSCdZA==",
+      "integrity": "sha512-LrHHoWq08ZpmmFqBAzN+hUdWwy5zt7FGa/hVwMcOqW6OVtwqaoD5utfuGYU87JYxdZgLUvktAsn37j/sYR9siA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

src/components/World.vue

@@ -65,7 +65,6 @@ const sortedItems = computed(() => {
 
 // Event listeners
 gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
-  console.log('character:zone:join', data)
   zoneStore.addCharacter(data)
 })
 
@@ -74,7 +73,6 @@ gameStore.connection?.on('zone:character:leave', (character_id: number) => {
 })
 
 gameStore.connection?.on('character:moved', (data: CharacterT) => {
-  console.log('character:moved', data)
   zoneStore.updateCharacter(data)
 })
 
@@ -91,9 +89,9 @@ onBeforeMount(() => {
   }
 
   gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId }, (response: TResponse) => {
-    console.log(response)
     zoneStore.setZone(response.zone)
-    zoneStore.setCharacters(response.characters)
+    const uniqueCharacters = [...new Set(response.characters)]
+    zoneStore.setCharacters(uniqueCharacters)
     updateZoneTiles(zoneTilemap, tiles, response.zone)
     zoneObjects.value = response.zone.zoneObjects
   })

src/components/sprites/Character.vue

@@ -24,15 +24,17 @@
       :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
       :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
       :origin-y="1"
+      :flipX="props.character.rotation === 6 || props.character.rotation === 4"
+      :flipY="false"
     />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, Rectangle, Text } from 'phavuer'
+import { Container, Image, Rectangle, RoundRectangle, Text } from 'phavuer'
 import { type Character as CharacterT } from '@/types'
 import { tileToWorldX, tileToWorldY } from '@/services/zone'
-import { ref, watch, computed } from 'vue'
+import { watch, computed } from 'vue'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -44,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const charTexture = computed(() => {
+  console.log('Character texture:', props.character)
   if (!props.character?.characterType?.sprite) {
     console.log('No character type or sprite found')
     return 'idle_left_down'
@@ -61,17 +64,21 @@ const charTexture = computed(() => {
   return `${spriteId}-idle_left_down` // Default fallback
 })
 
-watch(() => props.character, (newCharacter) => {
+watch(
-  if (newCharacter) {
+  () => props.character,
-    console.log('Character updated:', newCharacter)
+  (newCharacter) => {
-    console.log('Rotation:', newCharacter.rotation)
+    if (newCharacter) {
-    console.log('Current texture:', charTexture.value)
+      console.log('Character updated:', newCharacter)
-  } else {
+      console.log('Rotation:', newCharacter.rotation)
-    console.log('Character is null or undefined')
+      console.log('Current texture:', charTexture.value)
-  }
+    } else {
-}, { deep: true })
+      console.log('Character is null or undefined')
+    }
+  },
+  { deep: true }
+)
 
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)
 }
-</script>
+</script>

src/components/utilities/Controls.vue

@@ -5,7 +5,6 @@
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { useCameraControls } from '@/composables/useCameraControls'
 
@@ -27,4 +26,4 @@ const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scen
 
 setupPointerHandlers()
 onBeforeUnmount(cleanupPointerHandlers)
-</script>
+</script>

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

@@ -6,14 +6,14 @@
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-cyan" type="text" name="name" placeholder="New sprite" />
         </div>
-      
+
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="removeSprite">Remove</button>
           <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
         </div>
       </div>
-      
+
       <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>
@@ -118,19 +118,20 @@ function saveSprite() {
   const updatedSprite = {
     id: selectedSprite.value.id,
     name: spriteName.value,
-    spriteActions: spriteActions.value?.map((action) => {
+    spriteActions:
-      return {
+      spriteActions.value?.map((action) => {
-        action: action.action,
+        return {
-        sprites: action.sprites,
+          action: action.action,
-        origin_x: action.origin_x,
+          sprites: action.sprites,
-        origin_y: action.origin_y,
+          origin_x: action.origin_x,
-        isAnimated: action.isAnimated,
+          origin_y: action.origin_y,
-        isLooping: action.isLooping,
+          isAnimated: action.isAnimated,
-        frameSpeed: action.frameSpeed,
+          isLooping: action.isLooping,
-        frameWidth: action.frameWidth,
+          frameSpeed: action.frameSpeed,
-        frameHeight: action.frameHeight,
+          frameWidth: action.frameWidth,
-      }
+          frameHeight: action.frameHeight
-    }) ?? []
+        }
+      }) ?? []
   }
 
   gameStore.connection?.emit('gm:sprite:update', updatedSprite, (response: boolean) => {
@@ -161,7 +162,7 @@ function addNewImage() {
     isLooping: false,
     frameSpeed: 0,
     frameWidth: 0,
-    frameHeight: 0,
+    frameHeight: 0
   }
 
   if (!spriteActions.value) {

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

@@ -94,4 +94,4 @@ const drop = (event: DragEvent, dropIndex: number) => {
   }
   draggedIndex.value = null
 }
-</script>
+</script>

src/composables/useCameraControls.ts

@@ -43,4 +43,4 @@ export function useCameraControls(scene: Phaser.Scene): any {
     camera,
     isDragging
   }
-}
+}

src/composables/usePointerHandlers.ts

@@ -4,13 +4,7 @@ import { getTile, tileToWorldXY } from '@/services/zone'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 
-export function usePointerHandlers(
+export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
-  scene: Phaser.Scene,
-  layer: Phaser.Tilemaps.TilemapLayer,
-  waypoint: Ref<{ visible: boolean; x: number; y: number }>,
-  camera: Ref<Phaser.Cameras.Scene2D.Camera>,
-  isDragging: Ref<boolean>
-) {
   const gameStore = useGameStore()
   const zoneEditorStore = useZoneEditorStore()
 
@@ -68,6 +62,7 @@ export function usePointerHandlers(
   function setupPointerHandlers() {
     scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
     scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
 
     // These are for in-game only, not for in the zone editor
     if (!zoneEditorStore.active) {
@@ -78,6 +73,7 @@ export function usePointerHandlers(
   function cleanupPointerHandlers() {
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
     scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
 
     // These are for in-game only, not for in the zone editor
     if (!zoneEditorStore.active) {
@@ -89,4 +85,4 @@ export function usePointerHandlers(
     setupPointerHandlers,
     cleanupPointerHandlers
   }
-}
+}

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',