Map editor fixes (select & move), character sprites are now dynamically loaded and cached, moved repeated code into a composable, updated types

src/components/sprites/Character.vue

@@ -18,12 +18,13 @@
 
 <script lang="ts" setup>
 import config from '@/config'
-import { type ExtendedCharacter } from '@/types'
+import { type ExtendedCharacter, type Sprite as SpriteT } from '@/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadSpriteTextures } from '@/composables/gameComposable'
 
 enum Direction {
   POSITIVE,
@@ -36,6 +37,7 @@ const props = defineProps<{
   character: ExtendedCharacter
 }>()
 
+const isTextureLoaded = ref(false)
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
@@ -181,6 +183,14 @@ watch(
 watch(() => props.character.isMoving, updateSprite)
 watch(() => props.character.rotation, updateSprite)
 
+loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT).then((loaded) => {
+  isTextureLoaded.value = loaded
+  charSprite.value!.setTexture(charTexture.value)
+  charSprite.value!.setFlipX(isFlippedX.value)
+}).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+
 onMounted(() => {
   charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
   charChatContainer.value!.setVisible(false)
@@ -194,10 +204,6 @@ onMounted(() => {
     scene.cameras.main.stopFollow()
   }
 
-  // Set sprite
-  charSprite.value!.setTexture(charTexture.value)
-  charSprite.value!.setFlipX(isFlippedX.value)
-
   updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
 })