Major refractor, cleaning and improvements.

src/components/zone/Tiles.vue

@@ -0,0 +1,61 @@
+<template>
+  <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
+  <Controls :layer="tiles" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { TilemapLayer, useScene } from 'phavuer'
+import { useAssetStore } from '@/stores/assets'
+import { useZoneStore } from '@/stores/zone'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { placeTile, setAllTiles } from '@/services/zone'
+import Controls from '@/components/utilities/Controls.vue'
+
+const assetStore = useAssetStore()
+const zoneStore = useZoneStore()
+const scene = useScene()
+
+const { zone } = storeToRefs(zoneStore)
+const zoneTilemap = ref(createTilemap())
+const tiles = ref(createTileLayer())
+const tileArray = ref(createTileArray())
+
+function createTilemap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zone.value?.width,
+    height: zone.value?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+  return new Phaser.Tilemaps.Tilemap(scene, zoneData)
+}
+
+function createTileLayer() {
+  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
+  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y)
+}
+
+function createTileArray() {
+  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
+}
+
+onBeforeMount(() => {
+  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
+
+  if (zone.value?.tiles) {
+    setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
+    tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
+  }
+})
+
+onBeforeUnmount(() => {
+  tiles.value?.destroy()
+  zoneTilemap.value.removeAllLayers()
+  zoneTilemap.value.destroy()
+})
+</script>