Worked on dynamic texture loading

src/components/zone/ZoneTiles.vue

@@ -0,0 +1,64 @@
+<template>
+  <Controls :layer="tiles" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useScene } from 'phavuer'
+import { useZoneStore } from '@/stores/zoneStore'
+import { onBeforeMount, onBeforeUnmount } from 'vue'
+import { setLayerTiles } from '@/composables/zoneComposable'
+import Controls from '@/components/utilities/Controls.vue'
+
+const emit = defineEmits(['tilemap:create'])
+
+const zoneStore = useZoneStore()
+const scene = useScene()
+const zoneTilemap = createTilemap()
+const tiles = createTileLayer()
+
+function createTilemap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneStore.zone?.width,
+    height: zoneStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tilemap:create', tilemap)
+  return tilemap
+}
+
+function createTileLayer() {
+  const tilesFromZone = zoneStore.zone?.tiles || []
+  const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
+
+  const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
+    return zoneTilemap.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(zoneTilemap.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 = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+onBeforeMount(() => {
+  if (!zoneStore.zone?.tiles) {
+    return
+  }
+  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
+})
+
+onBeforeUnmount(() => {
+  zoneTilemap.destroyLayer('tiles')
+  zoneTilemap.removeAllLayers()
+  zoneTilemap.destroy()
+})
+</script>