diff --git a/src/components/zone/partials/ZoneObject.vue b/src/components/zone/partials/ZoneObject.vue index e787a05..fbf9df0 100644 --- a/src/components/zone/partials/ZoneObject.vue +++ b/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,36 +31,13 @@ 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) => { - console.error('Error loading texture:', error) - }) + loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt) + .then((loaded) => { + isTextureLoaded.value = loaded + }) + .catch((error) => { + console.error('Error loading texture:', error) + }) }) </script> diff --git a/src/composables/zoneComposable.ts b/src/composables/zoneComposable.ts index 766f2b2..6204483 100644 --- a/src/composables/zoneComposable.ts +++ b/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 +}