Finished automatic depth sorting

src/components/World.vue

@@ -1,87 +1,74 @@
 <template>
-  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray as any" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="tiles" />
 
   <Container :depth="2">
-    <Image
+    <template v-for="item in sortedItems" :key="item.id">
-      v-for="object in zoneObjects"
+      <Image
-      :depth="object.depth"
+        v-if="item.type === 'object'"
-      :key="object.object.id"
+        :x="tileToWorldX(zoneTilemap as any, item.position_x, item.position_y)"
-      :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
+        :y="tileToWorldY(zoneTilemap as any, item.position_x, item.position_y)"
-      :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
+        :texture="item.object.id"
-      :texture="object.object.id"
+        :originY="Number(item.object.origin_x)"
-      :originY="Number(object.object.origin_x)"
+        :originX="Number(item.object.origin_y)"
-      :originX="Number(object.object.origin_y)"
+        :depth="item.depth"
-    />
+      />
-    <Character :layer="zoneTilemap" v-for="character in zoneStore.characters" :key="character.id" :character="character" />
+      <Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
-  </Container>
+    </template>
-
-  <Container :depth="3">
-    <Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
   </Container>
 </template>
 
 <script setup lang="ts">
 import config from '@/config'
 import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
-import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
-import type { Zone, ZoneEventTile, ZoneObject, Character as CharacterT } from '@/types'
+import type { Zone, ZoneObject, Character as CharacterT } from '@/types'
-import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { useZoneStore } from '@/stores/zone'
 import Character from '@/components/sprites/Character.vue'
+import { createZoneData, createTilesetImages, initializeZoneTiles, updateZoneTiles, calculateDepth, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
 
 const scene = useScene()
 const gameStore = useGameStore()
 const assetStore = useAssetStore()
 const zoneStore = useZoneStore()
 
-const zoneData = new Phaser.Tilemaps.MapData({
+const zoneData = createZoneData(gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10, config.tile_size.x, config.tile_size.y)
-  width: gameStore.character?.zone?.width ?? 10,
-  height: gameStore.character?.zone?.height ?? 10,
-  tileWidth: config.tile_size.x,
-  tileHeight: config.tile_size.y,
-  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-  format: Phaser.Tilemaps.Formats.ARRAY_2D
-})
 
-/**
- * These variables are used to store the tileset images and the tilemap
- * The tilesetImages are used to store the tileset images
- * The zoneTilemap is used to store the tilemap
- * The zoneTiles are used to store the tile data
- * The zoneObjects are used to store the object data
- */
-const tilesetImages: Tileset[] = []
 const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-let zoneTiles = [] as string[][]
+const tilesetImages = createTilesetImages(zoneTilemap, toRaw(assetStore.assets), config.tile_size)
-const zoneObjects = ref<ZoneObject[]>([])
-const zoneEventTiles = ref<ZoneEventTile[]>([])
-
-/**
- * Walk through object and add them to the zone as tilesetImages
- */
-let tileCount = 1
-toRaw(assetStore.assets).forEach((asset) => {
-  if (asset.group !== 'tiles') return
-  tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
-})
-tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
 
 const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
-const exampleTilesArray = Array.from({ length: gameStore.character?.zone?.width ?? 0 }, () => Array.from({ length: gameStore.character?.zone?.height ?? 0 }, () => 'blank_tile'))
+const exampleTilesArray = initializeZoneTiles(zoneTilemap, tiles, gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10)
 
-// Listen for player join events
+const zoneObjects = ref<ZoneObject[]>([])
+
+// Computed property that combines and sorts both objects and characters
+const sortedItems = computed(() => {
+  const objects = zoneObjects.value.map((obj) => ({
+    ...obj,
+    type: 'object' as const,
+    depth: calculateDepth(obj.position_x, obj.position_y, zoneTilemap.width)
+  }))
+
+  const characters = zoneStore.characters.map((char) => ({
+    ...char,
+    type: 'character' as const,
+    depth: calculateDepth(char.position_x, char.position_y, zoneTilemap.width)
+  }))
+
+  return sortByDepth([...objects, ...characters], zoneTilemap.width)
+})
+
+// Event listeners
 gameStore.connection?.on('zone:character:join', (data: CharacterT) => {
   console.log('character:zone:join', data)
   zoneStore.addCharacter(data)
 })
 
-// Listen for user:disconnect
 gameStore.connection?.on('zone:character:leave', (character_id: number) => {
   zoneStore.removeCharacter(character_id)
 })
@@ -92,36 +79,12 @@ gameStore.connection?.on('character:moved', (data: CharacterT) => {
 })
 
 onBeforeMount(() => {
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
+  if (gameStore.character?.zone) {
-  zoneTiles = exampleTilesArray
+    updateZoneTiles(zoneTilemap, tiles, gameStore.character.zone)
-
-  if (gameStore.character?.zone ?? gameStore.character?.zone?.tiles) {
-    setAllTiles(zoneTilemap, tiles, gameStore.character?.zone?.tiles ?? [])
-    zoneTiles = gameStore.character?.zone?.tiles ?? []
-
-    // Determine the current zone dimensions
-    const currentZoneWidth = gameStore.character?.zone?.width ?? 0
-    const currentZoneHeight = gameStore.character?.zone?.height ?? 0
-
-    // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
-    for (let y = 0; y < currentZoneHeight; y++) {
-      zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
-      for (let x = 0; x < currentZoneWidth; 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)
-      })
-    })
   }
 
   zoneObjects.value = gameStore.character?.zone?.zoneObjects ?? []
 
-  // Original
   type TResponse = {
     zone: Zone
     characters: CharacterT[]
@@ -131,13 +94,12 @@ onBeforeMount(() => {
     console.log(response)
     zoneStore.setZone(response.zone)
     zoneStore.setCharacters(response.characters)
-    setAllTiles(zoneTilemap, tiles, response.zone.tiles)
+    updateZoneTiles(zoneTilemap, tiles, response.zone)
     zoneObjects.value = response.zone.zoneObjects
   })
 })
 
 onBeforeUnmount(() => {
-  zoneEventTiles.value = []
   zoneObjects.value = []
   tiles.destroy()
   zoneTilemap.removeAllLayers()

src/components/utilities/Controls.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image :depth="2" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
+  <Image :depth="1" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
 </template>
 
 <script setup lang="ts">

src/components/utilities/assetManager/partials/ObjectDetails.vue

@@ -74,8 +74,8 @@ const objectFrameWidth = ref(0)
 const objectFrameHeight = ref(0)
 
 function updateObjectIsAnimated(event: Event) {
-  const target = event.target as HTMLSelectElement;
+  const target = event.target as HTMLSelectElement
-  objectIsAnimated.value = target.value === 'true';
+  objectIsAnimated.value = target.value === 'true'
 }
 
 if (!selectedObject.value) {

src/components/utilities/assetManager/partials/SpriteList.vue

@@ -66,8 +66,8 @@ const spriteFrameWidth = ref(0)
 const spriteFrameHeight = ref(0)
 
 function updateSpriteIsAnimated(event: Event) {
-  const target = event.target as HTMLSelectElement;
+  const target = event.target as HTMLSelectElement
-  spriteIsAnimated.value = target.value === 'true';
+  spriteIsAnimated.value = target.value === 'true'
 }
 
 if (!selectedSprite.value) {

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,30 +1,30 @@
 <template>
-  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray as any" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="tiles" />
 
   <Container :depth="2">
     <Image
       :tint="zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff"
-      v-for="object in zoneObjects"
+      v-for="object in sortedZoneObjects"
-      :depth="object.depth"
       :key="object.object.id"
-      :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)"
+      :x="tileToWorldX(zoneTilemap as any, object.position_x, object.position_y)"
-      :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)"
+      :y="tileToWorldY(zoneTilemap as any, object.position_x, object.position_y)"
       :texture="object.object.id"
       :originY="Number(object.object.origin_x)"
       :originX="Number(object.object.origin_y)"
+      :depth="object.depth ?? calculateDepth(object.position_x, object.position_y, zoneTilemap.width)"
       @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
     />
   </Container>
 
   <Container :depth="3">
-    <Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
+    <Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap as any, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
   </Container>
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
   <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('lol')" />
-  <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
+  <Tiles v-if="(zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
-  <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
+  <Objects v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'object'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
 </template>
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
 import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
@@ -40,7 +40,7 @@ import Tiles from '@/components/utilities/zoneEditor/partials/Tiles.vue'
 import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
-import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/partials/Objects.vue'
 import type { Zone, ZoneEventTile, ZoneObject } from '@/types'
@@ -67,22 +67,15 @@ const zoneData = new Phaser.Tilemaps.MapData({
   format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
 
-/**
- * These variables are used to store the tileset images and the tilemap
- * The tilesetImages are used to store the tileset images
- * The zoneTilemap is used to store the tilemap
- * The zoneTiles are used to store the tile data
- * The zoneObjects are used to store the object data
- */
 const tilesetImages: Tileset[] = []
 const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
 let zoneTiles = [] as string[][]
 const zoneObjects = ref<ZoneObject[]>([])
 const zoneEventTiles = ref<ZoneEventTile[]>([])
 
-/**
+// Sort zoneObjects by their calculated depth
- * Walk through object and add them to the zone as tilesetImages
+const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.width))
- */
+
 let tileCount = 1
 toRaw(assetStore.assets).forEach((asset) => {
   if (asset.group !== 'tiles') return
@@ -95,9 +88,6 @@ const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0
 
 const { objectList } = storeToRefs(zoneEditorStore)
 
-/**
- * Watch for object updates and update the zoneObjects
- */
 watch(objectList, (newObjects) => {
   zoneObjects.value = zoneObjects.value.map((object) => {
     const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
@@ -113,9 +103,6 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
   }
 
   if (zoneEditorStore.drawMode === 'object') {
-    /**
-     * @TODO : when reloaded in zone editor, these aren't removed
-     */
     zoneObjects.value = zoneObjects.value.filter((object) => {
       return object.position_x !== tile.x || object.position_y !== tile.y
     })
@@ -172,7 +159,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 }
 
 function paint(tile: Phaser.Tilemaps.Tile) {
-  if (zoneEditorStore.selectedTile === null) return
+  if (!zoneEditorStore.selectedTile) return
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
   zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
 }
@@ -203,9 +190,9 @@ function save() {
     }))
   }
 
-  gameStore.connection.emit('gm:zone_editor:zone:update', data)
+  gameStore.connection?.emit('gm:zone_editor:zone:update', data)
 
-  gameStore.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
+  gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
     zoneEditorStore.setZone(response)
   })
 
@@ -242,19 +229,16 @@ onBeforeMount(() => {
     setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
     zoneTiles = zoneEditorStore.zone.tiles
 
-    // Determine the current zone dimensions
     const currentZoneWidth = zoneEditorStore.zone.width ?? 0
     const currentZoneHeight = zoneEditorStore.zone.height ?? 0
 
-    // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
     for (let y = 0; y < currentZoneHeight; y++) {
-      zoneTiles[y] = zoneTiles[y] || [] // Ensure the row exists
+      zoneTiles[y] = zoneTiles[y] || []
       for (let x = 0; x < currentZoneWidth; x++) {
-        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile' // Fill missing tiles with 'blank_tile'
+        zoneTiles[y][x] = zoneTiles[y][x] || '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)

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)
+  })
+}

src/stores/zoneEditor.ts

@@ -21,6 +21,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
   }),
   actions: {
     toggleActive() {
+      if (this.active) this.reset()
       this.active = !this.active
     },
     setZone(zone: Zone) {