Renamed zone > map

src/components/game/map/partials/MapObject.vue

@@ -0,0 +1,41 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.mapObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, PlacedMapObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  mapObject: PlacedMapObject
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.mapObject.positionX, props.mapObject.positionY, props.mapObject.object.frameWidth, props.mapObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  y: tileToWorldY(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  flipX: props.mapObject.isRotated,
+  texture: props.mapObject.object.id,
+  originY: Number(props.mapObject.object.originX),
+  originX: Number(props.mapObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.mapObject.object.id,
+  data: '/assets/objects/' + props.mapObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.mapObject.object.updatedAt,
+  frameWidth: props.mapObject.object.frameWidth,
+  frameHeight: props.mapObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>