TS improvements, WIP loading map objects in game map, WIP loading tile textures

src/components/game/map/MapTiles.vue

@@ -1,39 +1,38 @@
 <template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import type { UUID } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray, setLayerTiles } from '@/services/mapService'
+import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount, shallowRef } from 'vue'
+import { onMounted } from 'vue'
 
-const emit = defineEmits(['tileMap:create'])
 const scene = useScene()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+const props = defineProps<{
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: Phaser.Tilemaps.TilemapLayer
+}>()
 
 loadTileTexturesFromMapTileArray(mapStore.mapId as UUID, scene)
   .then(() => mapStorage.get(mapStore.mapId))
   .then((mapData) => {
     if (!mapData || !mapData?.tiles) return
-    tileMap.value = createTileMap(scene, mapData)
-    emit('tileMap:create', tileMap.value)
-    tileLayer.value = createTileLayer(tileMap.value, mapData)
-    setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
   })
   .catch((error) => console.error('Failed to initialize map:', error))
 
-onBeforeUnmount(() => {
-  if (!tileMap.value) return
-  tileMap.value.destroyLayer('tiles')
-  tileMap.value.removeAllLayers()
-  tileMap.value.destroy()
+onMounted(async () => {
+  if (!mapStore.mapId) return
+
+  const map = await mapStorage.get(mapStore.mapId)
+  if (!map) return
+
+  placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
 })
 </script>