npm run format

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -11,12 +11,7 @@
     <Controls :layer="tiles as TilemapLayer" />
 
     <Container :depth="2">
-      <Image
+      <Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
-        v-for="object in zoneObjects"
-        :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)"
-        :key="object.id" v-bind="getObjectImageProps(object)"
-        @pointerup="() => setSelectedZoneObject(object)"
-      />
     </Container>
 
     <Container :depth="3">
@@ -34,15 +29,7 @@ import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
-import {
+import { calculateIsometricDepth, placeTile, setAllTiles, sortByDepth, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
-  calculateIsometricDepth,
-  placeTile,
-  setAllTiles,
-  sortByDepth,
-  sortByIsometricDepth,
-  tileToWorldX,
-  tileToWorldY
-} from '@/services/zone'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'

src/components/zone/Characters.vue

@@ -1,11 +1,5 @@
 <template>
-  <Character
+  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" :depth="calculateIsometricDepth(item.positionX, item.positionY, 0)" />
-    v-for="item in zoneStore.characters"
-    :key="item.id"
-    :layer="tilemap"
-    :character="item"
-    :depth="calculateIsometricDepth(item.positionX, item.positionY, 0)"
-  />
 </template>
 
 <script setup lang="ts">

src/components/zone/Objects.vue

@@ -1,9 +1,5 @@
 <template>
-  <Image
+  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" />
-    v-for="object in zoneStore.zone?.zoneObjects"
-    :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)"
-    :key="object.id" v-bind="getObjectImageProps(object)"
-  />
 </template>
 
 <script setup lang="ts">

src/services/zone.ts

@@ -73,7 +73,10 @@ export const initializeZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps
 }
 
 export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.TilemapLayer, zone: Zone) => {
-  if (zone.tiles) {
+  if (!zone.tiles) {
+    return []
+  }
+
   setAllTiles(zoneTilemap, tiles, zone.tiles)
   const zoneTiles = zone.tiles
 
@@ -93,23 +96,20 @@ export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.Til
   })
 
   return zoneTiles
-  }
-  return []
 }
 
 export const calculateIsometricDepth = (x: number, y: number, height: number = 0) => {
-  // Adjust these values as needed for your specific isometric projection
+  // const isoX = x - y;
-  const isoX = x - y;
+  const isoY = (x + y) / 2
-  const isoY = (x + y) / 2;
+  return isoY - height * 0.1 // Subtract height to make taller objects appear behind shorter ones
-  return isoY - height * 0.1;  // Subtract height to make taller objects appear behind shorter ones
 }
 
 export const sortByIsometricDepth = <T extends { positionX: number; positionY: number; object?: { height?: number } }>(items: T[]) => {
   return [...items].sort((a, b) => {
-    const aHeight = a.object?.height || 0;
+    const aHeight = a.object?.height || 0
-    const bHeight = b.object?.height || 0;
+    const bHeight = b.object?.height || 0
-    return calculateIsometricDepth(a.positionX, a.positionY, aHeight) - calculateIsometricDepth(b.positionX, b.positionY, bHeight);
+    return calculateIsometricDepth(a.positionX, a.positionY, aHeight) - calculateIsometricDepth(b.positionX, b.positionY, bHeight)
-  });
+  })
 }
 
 // Redundant, but left here for reference