Sorted imports

src/components/game/character/Character.vue

@@ -11,15 +11,16 @@
 <script lang="ts" setup>
 import config from '@/application/config'
 import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
-import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
-import { Container, refObj, Sprite, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import Healthbar from '@/components/game/character/partials/Healthbar.vue'
-import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
+import { Container, refObj, Sprite, useScene } from 'phavuer'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
 // import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
 
 enum Direction {
@@ -137,11 +138,14 @@ watch(
     if (!newValues) return
 
     if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
-      const direction = !oldValues
-        ? Direction.POSITIVE
-        : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
+      const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
       updatePosition(newValues.x, newValues.y, direction)
     }
+
+    // Handle animation updates
+    if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+      updateSprite()
+    }
   },
   { deep: true }
 )

src/components/game/character/partials/CharacterChest.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
 import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
 
 const props = defineProps<{
   zoneCharacter: ZoneCharacter

src/components/game/character/partials/CharacterHair.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
 import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
 
 const props = defineProps<{
   zoneCharacter: ZoneCharacter

src/components/game/character/partials/ChatBubble.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script setup lang="ts">
-import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import type { ZoneCharacter } from '@/application/types'
+import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import { onMounted } from 'vue'
 
 const props = defineProps<{

src/components/game/character/partials/Healthbar.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 import type { ZoneCharacter } from '@/application/types'
+import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 
 const props = defineProps<{
   zoneCharacter: ZoneCharacter

src/components/game/zone/Zone.vue

@@ -5,15 +5,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
-import { useScene } from 'phavuer'
+import type { ZoneCharacter, zoneLoadData } from '@/application/types'
+import Characters from '@/components/game/zone/Characters.vue'
+import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
+import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
-import type { ZoneCharacter, zoneLoadData } from '@/application/types'
-import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
-import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
-import Characters from '@/components/game/zone/Characters.vue'
+import { useScene } from 'phavuer'
+import { onUnmounted, ref } from 'vue'
 
 const scene = useScene()
 const gameStore = useGameStore()

src/components/game/zone/ZoneObjects.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { useZoneStore } from '@/stores/zoneStore'
 import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
+import { useZoneStore } from '@/stores/zoneStore'
 
 const zoneStore = useZoneStore()
 

src/components/game/zone/ZoneTiles.vue

@@ -4,12 +4,12 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useScene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount } from 'vue'
-import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
 import { unduplicateArray } from '@/application/utilities'
+import Controls from '@/components/utilities/Controls.vue'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useScene } from 'phavuer'
+import { onBeforeUnmount } from 'vue'
 
 const emit = defineEmits(['tileMap:create'])
 

src/components/game/zone/partials/ZoneObject.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadTexture } from '@/composables/gameComposable'
 import type { AssetDataT, ZoneObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap