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,43 +73,43 @@ 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) {
-    setAllTiles(zoneTilemap, tiles, zone.tiles)
+    return []
-    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: any, y: any) => {
-      row.forEach((tileId: any, x: any) => {
-        placeTile(zoneTilemap, tiles, x, y, tileId)
-      })
-    })
-
-    return zoneTiles
   }
-  return []
+
+  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: any, y: any) => {
+    row.forEach((tileId: any, x: any) => {
+      placeTile(zoneTilemap, tiles, x, y, tileId)
+    })
+  })
+
+  return zoneTiles
 }
 
 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