Worked on pathfinding, character animation & rotation, few enhancements

package-lock.json

@@ -657,9 +657,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.0.tgz",
-      "integrity": "sha512-ubALThHQy4GCf6mbb+5ZRNmLLCI7bJ3f8Q6LHBSRlSKSWj5a7dSUzJBLv3VuIhFrFPgjF4IzPF567YG/HSCdZA==",
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.1.tgz",
+      "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,7 +64,9 @@ const charTexture = computed(() => {
   return `${spriteId}-idle_left_down` // Default fallback
 })
 
-watch(() => props.character, (newCharacter) => {
+watch(
+  () => props.character,
+  (newCharacter) => {
     if (newCharacter) {
       console.log('Character updated:', newCharacter)
       console.log('Rotation:', newCharacter.rotation)
@@ -69,7 +74,9 @@ watch(() => props.character, (newCharacter) => {
     } else {
       console.log('Character is null or undefined')
     }
-}, { deep: true })
+  },
+  { deep: true }
+)
 
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)

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'
 

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

@@ -118,7 +118,8 @@ function saveSprite() {
   const updatedSprite = {
     id: selectedSprite.value.id,
     name: spriteName.value,
-    spriteActions: spriteActions.value?.map((action) => {
+    spriteActions:
+      spriteActions.value?.map((action) => {
         return {
           action: action.action,
           sprites: action.sprites,
@@ -128,7 +129,7 @@ function saveSprite() {
           isLooping: action.isLooping,
           frameSpeed: action.frameSpeed,
           frameWidth: action.frameWidth,
-        frameHeight: action.frameHeight,
+          frameHeight: action.frameHeight
         }
       }) ?? []
   }
@@ -161,7 +162,7 @@ function addNewImage() {
     isLooping: false,
     frameSpeed: 0,
     frameWidth: 0,
-    frameHeight: 0,
+    frameHeight: 0
   }
 
   if (!spriteActions.value) {

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(
-  scene: Phaser.Scene,
-  layer: Phaser.Tilemaps.TilemapLayer,
-  waypoint: Ref<{ visible: boolean; x: number; y: number }>,
-  camera: Ref<Phaser.Cameras.Scene2D.Camera>,
-  isDragging: Ref<boolean>
-) {
+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>) {
   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) {

src/config.ts

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