Worked on pathfinding, character animation & rotation, few enhancements

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) => {
-  if (newCharacter) {
-    console.log('Character updated:', newCharacter)
-    console.log('Rotation:', newCharacter.rotation)
-    console.log('Current texture:', charTexture.value)
-  } else {
-    console.log('Character is null or undefined')
-  }
-}, { deep: true })
+watch(
+  () => props.character,
+  (newCharacter) => {
+    if (newCharacter) {
+      console.log('Character updated:', newCharacter)
+      console.log('Rotation:', newCharacter.rotation)
+      console.log('Current texture:', charTexture.value)
+    } else {
+      console.log('Character is null or undefined')
+    }
+  },
+  { deep: true }
+)
 
 const createText = (text: Phaser.GameObjects.Text) => {
   text.setLetterSpacing(1.5)
 }
-</script>
+</script>