finally some good fucking code

src/components/zone/partials/ZoneObject.vue

@@ -5,8 +5,12 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { useAssetManager } from '@/utilities/assetManager'
+import {
+  calculateIsometricDepth,
+  loadZoneObjectTexture,
+  tileToWorldX,
+  tileToWorldY
+} from '@/composables/zoneComposable'
 import type { ZoneObject } from '@/types'
 
 const props = defineProps<{
@@ -15,7 +19,6 @@ const props = defineProps<{
 }>()
 
 const scene = useScene()
-const assetManager = useAssetManager
 const isTextureLoaded = ref(false)
 
 const imageProps = computed(() => ({
@@ -28,35 +31,12 @@ const imageProps = computed(() => ({
   originX: Number(props.zoneObject.object.originY)
 }))
 
-const loadTexture = async () => {
-  const textureId = props.zoneObject.object.id
-
-  // Check if the texture is already loaded in Phaser
-  if (scene.textures.exists(textureId)) {
-    isTextureLoaded.value = true
-    return
-  }
-
-  let assetData = await assetManager.getAsset(textureId)
-
-  if (!assetData) {
-    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', props.zoneObject.object.updatedAt)
-    assetData = await assetManager.getAsset(textureId)
-  }
-
-  if (assetData) {
-    return new Promise<void>((resolve) => {
-      scene.textures.addBase64(textureId, assetData.data)
-      scene.textures.once(`addtexture-${textureId}`, () => {
-        isTextureLoaded.value = true
-        resolve()
-      })
-    })
-  }
-}
-
 onMounted(() => {
-  loadTexture().catch((error) => {
+  loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
+    .then((loaded) => {
+      isTextureLoaded.value = loaded
+    })
+    .catch((error) => {
       console.error('Error loading texture:', error)
     })
 })

src/composables/zoneComposable.ts

@@ -3,6 +3,7 @@ import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
+import { useAssetManager } from '@/utilities/assetManager'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -69,3 +70,30 @@ export const calculateIsometricDepth = (x: number, y: number, width: number = 0,
   }
   return baseDepth + (width + height) / (2 * config.tile_size.x)
 }
+
+export async function loadZoneObjectTexture(scene: Phaser.Scene, textureId: string, updatedAt: Date): Promise<boolean> {
+  const assetManager = useAssetManager
+
+  // Check if the texture is already loaded in Phaser
+  if (scene.textures.exists(textureId)) {
+    return true
+  }
+
+  let assetData = await assetManager.getAsset(textureId)
+
+  if (!assetData) {
+    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', updatedAt)
+    assetData = await assetManager.getAsset(textureId)
+  }
+
+  if (assetData) {
+    return new Promise<boolean>((resolve) => {
+      scene.textures.addBase64(textureId, assetData.data)
+      scene.textures.once(`addtexture-${textureId}`, () => {
+        resolve(true)
+      })
+    })
+  }
+
+  return false
+}