stuffs

src/components/game/map/MapTiles.vue

@@ -1,57 +1,54 @@
 <template>
-  <Controls :layer="tileLayer" :depth="0" />
+  <Controls v-if="isInitialized" :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import config from '@/application/config'
 import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
-import { FlattenMapArray, setLayerTiles } from '@/composables/mapComposable'
+import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { MapStorage } from '@/storage/storages'
+import type { UUID } from '@/application/types'
 
 const emit = defineEmits(['tileMap:create'])
 
 const scene = useScene()
 const mapStore = useMapStore()
-const tileMap = createTileMap()
-const tileLayer = createTileLayer()
+const mapStorage = new MapStorage()
 
-/**
- * A Tilemap is a container for Tilemap data.
- * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
- * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
- */
-function createTileMap() {
-  const mapData = new Phaser.Tilemaps.MapData({
-    width: mapStore.map?.width,
-    height: mapStore.map?.height,
+let tileMap: Phaser.Tilemaps.Tilemap
+let tileLayer: Phaser.Tilemaps.TilemapLayer
+let isInitialized = ref(false)
+
+function createTileMap(mapData: any) {
+  const mapConfig = new Phaser.Tilemaps.MapData({
+    width: mapData?.width,
+    height: mapData?.height,
     tileWidth: config.tile_size.x,
     tileHeight: config.tile_size.y,
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
     format: Phaser.Tilemaps.Formats.ARRAY_2D
   })
 
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
   emit('tileMap:create', newTileMap)
 
   return newTileMap
 }
 
-/**
- * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
- */
-function createTileLayer() {
-  const tilesArray = unduplicateArray(FlattenMapArray(mapStore.map?.tiles ?? []))
+function createTileLayer(mapData: any) {
+  const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
 
   const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
     return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
-  }) as any
+  })
 
   // Add blank tile
   tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)
@@ -59,11 +56,28 @@ function createTileLayer() {
   return layer
 }
 
-setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
+async function initialize() {
+  try {
+    await loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
+    const mapData = await mapStorage.get(mapStore.mapId)
+    tileMap = createTileMap(mapData)
+    tileLayer = createTileLayer(mapData)
+    setLayerTiles(tileMap, tileLayer, mapData?.tiles)
+    isInitialized.value = true
+  } catch (error) {
+    console.error('Failed to initialize map:', error)
+  }
+}
+
+onMounted(() => {
+  initialize()
+})
 
 onBeforeUnmount(() => {
-  tileMap.destroyLayer('tiles')
-  tileMap.removeAllLayers()
-  tileMap.destroy()
+  if (tileMap) {
+    tileMap.destroyLayer('tiles')
+    tileMap.removeAllLayers()
+    tileMap.destroy()
+  }
 })
-</script>
+</script>