Replaced some code vars for consistency, added start of teleport logics

src/components/World.vue

@@ -11,7 +11,7 @@
         :texture="item.object.id"
         :originY="Number(item.object.origin_x)"
         :originX="Number(item.object.origin_y)"
-        :depth="item.depth"
+        :depth="(item.depth > 0 ? item.depth : undefined)"
       />
       <Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
     </template>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -12,7 +12,7 @@
       :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)"
+      :depth="object.depth > 0 ? object.depth : undefined"
       @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
     />
   </Container>
@@ -22,17 +22,18 @@
   </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')" />
+  <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('move btn clicked')" />
   <Tiles v-if="zoneEditorStore.isTileListModalShown" />
   <Objects v-if="zoneEditorStore.isObjectListModalShown" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
+  <TeleportModal v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport'" />
 </template>
 
 <script setup lang="ts">
 import config from '@/config'
 import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, toRaw, 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,15 +41,16 @@ import Tiles from '@/components/utilities/zoneEditor/partials/TileList.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 { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
+import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
-import type { ZoneEventTile, ZoneObject } from '@/types'
+import { type ZoneEventTile, ZoneEventTileType, type ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
+import { uuidv4 } from '@/utilities'
+import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-import { uuidv4 } from '@/utilities'
 
 const scene = useScene()
 const gameStore = useGameStore()
@@ -110,6 +112,12 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
       return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
     })
   }
+
+  if (zoneEditorStore.eraserMode === 'teleport') {
+    zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
+      return zoneTileEvent.type !== ZoneEventTileType.TELEPORT || zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
+    })
+  }
 }
 
 function pencil(tile: Phaser.Tilemaps.Tile) {
@@ -145,7 +153,23 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
       id: uuidv4(),
       zoneId: zoneEditorStore.zone.id,
       zone: zoneEditorStore.zone,
-      type: 'BLOCK',
+      type: ZoneEventTileType.BLOCK,
+      position_x: tile.x,
+      position_y: tile.y
+    })
+
+    // remove duplicates based on type, pos x and y
+    zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
+  }
+
+  if (zoneEditorStore.drawMode === 'teleport') {
+    if (zoneEditorStore.zone === null) return
+
+    zoneEventTiles.value.push({
+      id: uuidv4(),
+      zoneId: zoneEditorStore.zone.id,
+      zone: zoneEditorStore.zone,
+      type: ZoneEventTileType.TELEPORT,
       position_x: tile.x,
       position_y: tile.y
     })

src/components/utilities/zoneEditor/partials/TeleportModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="250" :is-resizable="false">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0">Teleport settings</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-half">
+              <label for="name">X</label>
+              <input class="input-cyan" v-model="x" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="name">Y</label>
+              <input class="input-cyan" v-model="y" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-full">
+              <label for="zoneId">Zone to teleport to</label>
+              <select v-model="zoneId" class="input-cyan" name="zoneId" id="zoneId">
+                <option :value="0">Select zone</option>
+                <option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
+              </select>
+            </div>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
+import { Zone } from '@/types'
+
+const zoneEditorStore = useZoneEditorStore()
+const gameStore = useGameStore()
+
+onMounted(async () => {
+  fetchZones()
+})
+
+function fetchZones() {
+  gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
+    zoneEditorStore.setZoneList(response)
+  })
+}
+
+const x = ref(zoneEditorStore.teleportSettings.x)
+const y = ref(zoneEditorStore.teleportSettings.y)
+const zoneId = ref(zoneEditorStore.teleportSettings.zoneId)
+
+watch(zoneId, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    x: x.value,
+    y: y.value,
+    zoneId: value
+  })
+})
+
+watch(x, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    x: value,
+    y: y.value,
+    zoneId: zoneId.value
+  })
+})
+
+watch(y, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    x: x.value,
+    y: value,
+    zoneId: zoneId.value
+  })
+})
+</script>

src/screens/Game.vue

@@ -131,7 +131,7 @@ const preloadScene = (scene: Phaser.Scene) => {
   })
 
   scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
-  scene.load.image('WARP', '/assets/zone/tp_tile.png')
+  scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('blank_object', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')

src/services/zone.ts

@@ -86,7 +86,7 @@ export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.Til
     }
 
     // Update the tilemap with any new 'blank_tile' entries
-    zoneTiles.forEach((row, y) => {
+    zoneTiles.forEach((row: string[], y: number) => {
       row.forEach((tileId, x) => {
         placeTile(zoneTilemap, tiles, x, y, tileId)
       })

src/stores/zoneEditor.ts

@@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import type { Zone, Object, Tile, ZoneObject } from '@/types'
 
+type TeleportSettings = {
+  x: number
+  y: number
+  zoneId: number
+}
+
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
     active: false,
@@ -20,7 +26,12 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     isObjectListModalShown: false,
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
-    isSettingsModalShown: false
+    isSettingsModalShown: false,
+    teleportSettings: {
+      x: 0,
+      y: 0,
+      zoneId: 0
+    }
   }),
   actions: {
     toggleActive() {
@@ -93,6 +104,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     toggleCreateZoneModal() {
       this.isCreateZoneModalShown = !this.isCreateZoneModalShown
     },
+    setTeleportSettings(teleportSettings: TeleportSettings) {
+      this.teleportSettings = teleportSettings
+    },
     reset() {
       this.zoneList = []
       this.tileList = []

src/types.ts

@@ -72,7 +72,7 @@ export type ZoneObject = {
 
 export enum ZoneEventTileType {
   BLOCK = 'BLOCK',
-  WARP = 'WARP',
+  TELEPORT = 'TELEPORT',
   NPC = 'NPC',
   ITEM = 'ITEM'
 }