Depth sort fix attempt

src/components/game/map/partials/PlacedMapObject.vue

@@ -61,7 +61,7 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb
 const imageProps = computed(() => ({
   alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id || mapEditor.selectedMapObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
   tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight),
+  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight, mapObject.value!.originX, mapObject.value!.originY),
   ...calculateObjectPlacement(props.placedMapObject),
   flipX: props.placedMapObject.isRotated,
   texture: mapObject.value!.id,

src/services/mapService.ts

@@ -62,14 +62,34 @@ export function createTileArray(width: number, height: number, tile: string = 'b
   return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
 }
 
-export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
-  const baseDepth = positionX + positionY
-  if (isCharacter) {
-    return baseDepth
-  }
-  return baseDepth + (width + height) / (2 * config.tile_size.width)
+export const calculateIsometricDepth = (
+  positionX: number,
+  positionY: number,
+  width: number = 0,
+  height: number = 0,
+  originX: number = 0,
+  originY: number = 0
+) => {
+  // Base depth calculation using isometric coordinates
+  // We multiply by a large number to ensure enough space between layers
+  const baseDepth = (positionY + positionX) * 1000
+
+  // Calculate the object's bottom-most point considering its dimensions and origin
+  const bottomY = positionY + height - (height * originY)
+  const rightX = positionX + width - (width * originX)
+  
+  // Add position-based offset to ensure objects further down and right appear on top
+  const positionOffset = (bottomY + rightX) * 10
+
+  // For regular objects, consider their size
+  // Larger objects should generally appear behind smaller ones at the same position
+  const sizeOffset = (width + height) * 5
+  
+  // Final depth combines all factors
+  return baseDepth + positionOffset - sizeOffset
 }
 
+
 async function loadTileTextures(tiles: TileT[], scene: Phaser.Scene) {
   // Load each tile into the scene
   for (let tile of tiles) {