Added depth logics for objects

src/components/utilities/zoneEditor/Objects.vue

@@ -17,8 +17,8 @@
               />
             </div>
             <div>
-              <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
+              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>
-              <input @mousedown.stop class="input-cyan" type="number" name="z-index" placeholder="Z-index" />
+              <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />
             </div>
           </div>
         </div>
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
@@ -58,6 +58,11 @@ const socket = useSocketStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
+const objectDepth = ref(0)
+
+watch(objectDepth, (depth) => {
+  zoneEditorStore.setObjectDepth(depth)
+})
 
 const filteredObjects = computed(() => {
   if (!searchQuery.value) {
@@ -69,6 +74,8 @@ const filteredObjects = computed(() => {
 })
 
 onMounted(async () => {
+  zoneEditorStore.setObjectDepth(0)
+
   isModalOpen.value = true
   socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
     zoneEditorStore.setObjectList(response)

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -3,7 +3,7 @@
   <Controls :layer="tiles" />
 
   <Container :depth="2">
-    <Image v-for="object in zoneObjects" :key="object.object.id" :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)" :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
+    <Image v-for="object in zoneObjects" :depth="object.depth" :key="object.object.id" :x="tileToWorldX(zoneTilemap, object.position_x, object.position_y)" :y="tileToWorldY(zoneTilemap, object.position_x, object.position_y)" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
   </Container>
 
   <Container :depth="3">
@@ -122,6 +122,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
       zone: zoneEditorStore.zone,
       objectId: zoneEditorStore.selectedObject.id,
       object: zoneEditorStore.selectedObject,
+      depth: zoneEditorStore.objectDepth,
       position_x: tile.x,
       position_y: tile.y
     })

src/stores/zoneEditor.ts

@@ -11,6 +11,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     objectList: [] as Object[],
     selectedTile: '',
     selectedObject: null as Object | null,
+    objectDepth: 0,
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
     isSettingsModalShown: false
@@ -40,6 +41,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setSelectedObject(object: any) {
       this.selectedObject = object
     },
+    setObjectDepth(depth: number) {
+      this.objectDepth = depth
+    },
     toggleSettingsModal() {
       this.isSettingsModalShown = !this.isSettingsModalShown
     },
@@ -57,6 +61,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.drawMode = 'tile'
       this.selectedTile = ''
       this.selectedObject = null
+      this.objectDepth = 0
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false
       this.isCreateZoneModalShown = false

src/types.ts

@@ -90,6 +90,7 @@ export type ZoneObject = {
   zone: Zone
   objectId: string
   object: Object
+  depth: number
   position_x: number
   position_y: number
 }