Finished automatic depth sorting

src/services/zone.ts

@@ -2,6 +2,7 @@ import config from '@/config'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
+import type { Zone } from '@/types'
 
 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -40,3 +41,72 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
     })
   })
 }
+
+export const createZoneData = (width: number, height: number, tileWidth: number, tileHeight: number) => {
+  return new Phaser.Tilemaps.MapData({
+    width,
+    height,
+    tileWidth,
+    tileHeight,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+}
+
+export const createTilesetImages = (zoneTilemap: Tilemap, assets: any[], tileSize: { x: number; y: number }) => {
+  const tilesetImages: Tileset[] = []
+  let tileCount = 1
+
+  assets.forEach((asset) => {
+    if (asset.group !== 'tiles') return
+    tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, tileSize.x, tileSize.y, 0, 0, tileCount++) as Tileset)
+  })
+  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', tileSize.x, tileSize.y, 0, 0, 0) as Tileset)
+
+  return tilesetImages
+}
+
+export const initializeZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, width: number, height: number) => {
+  const exampleTilesArray = Array.from({ length: width }, () => Array.from({ length: height }, () => 'blank_tile'))
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
+  return exampleTilesArray
+}
+
+export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, zone: Zone) => {
+  if (zone.tiles) {
+    setAllTiles(zoneTilemap, tiles, zone.tiles)
+    const zoneTiles = zone.tiles
+
+    // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
+    for (let y = 0; y < zone.height; y++) {
+      zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
+      for (let x = 0; x < zone.width; x++) {
+        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
+      }
+    }
+
+    // Update the tilemap with any new 'blank_tile' entries
+    zoneTiles.forEach((row, y) => {
+      row.forEach((tileId, x) => {
+        placeTile(zoneTilemap, tiles, x, y, tileId)
+      })
+    })
+
+    return zoneTiles
+  }
+  return []
+}
+
+export const calculateDepth = (x: number, y: number, mapWidth: number) => {
+  return y * mapWidth + x
+}
+
+export const sortByDepth = <T extends { position_x: number; position_y: number } | { x: number; y: number }>(items: T[], mapWidth: number) => {
+  return [...items].sort((a, b) => {
+    const aX = 'position_x' in a ? a.position_x : a.x
+    const aY = 'position_y' in a ? a.position_y : a.y
+    const bX = 'position_x' in b ? b.position_x : b.x
+    const bY = 'position_y' in b ? b.position_y : b.y
+    return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth)
+  })
+}