Bug fixes for updating zone width and height (realtime now), removed redundant code from camera composable, improved zone editor tool modal logics.

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,33 +1,36 @@
 <template>
-  <TilemapLayerC :tilemap="zoneTilemap as Tilemap" :tileset="tileArray as any" :layerIndex="0" :cull-padding="10" />
-  <Controls :layer="tiles as TilemapLayer" />
-
-  <Container :depth="2">
-    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
-  </Container>
-
-  <Container :depth="3">
-    <Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
-  </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="handleMove" />
-  <Tiles v-if="zoneEditorStore.isTileListModalShown" />
-  <Objects v-if="zoneEditorStore.isObjectListModalShown" />
-  <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
-  <TeleportModal v-if="shouldShowTeleportModal" />
+
+  <template v-if="zoneEditorStore.zone">
+    <Tiles />
+    <Objects />
+    <ZoneSettings />
+    <TeleportModal v-if="shouldShowTeleportModal" />
+    <TilemapLayerC :tilemap="zoneTilemap as Tilemap" :tileset="tileArray as any" :layerIndex="0" :cull-padding="10" />
+    <Controls :layer="tiles as TilemapLayer" />
+
+    <Container :depth="2">
+      <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
+    </Container>
+
+    <Container :depth="3">
+      <Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
+    </Container>
+
+    <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" />
+  </template>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeMount, onUnmounted, ref, watch } from 'vue'
 import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
 import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
-import { ZoneEventTileType, type ZoneObject, type ZoneEventTile } from '@/types'
+import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
 
@@ -78,7 +81,9 @@ function createTileLayer() {
 }
 
 function createTileArray() {
-  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
+  return Array.from({ length: zoneTilemap.value.height || 0 }, () =>
+    Array.from({ length: zoneTilemap.value.width || 0 }, () => 'blank_tile')
+  )
 }
 
 function getObjectImageProps(object: ZoneObject) {
@@ -166,36 +171,59 @@ function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
 
 function paint() {
   if (!selectedTile.value) return
-  tileArray.value.forEach((row, y) =>
-    row.forEach((_, x) => {
-      placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, selectedTile.value!.id)
-      tileArray.value[y][x] = selectedTile.value!.id
-    })
-  )
+
+  // Ensure tileArray is initialized with correct dimensions
+  if (!tileArray.value || tileArray.value.length !== zoneTilemap.value.height) {
+    tileArray.value = Array.from({ length: zoneTilemap.value.height }, () =>
+      Array.from({ length: zoneTilemap.value.width }, () => 'blank_tile')
+    )
+  }
+
+  // Set all tiles in the tilemap to the selected tile's id
+  for (let y = 0; y < zoneTilemap.value.height; y++) {
+    if (!tileArray.value[y]) {
+      tileArray.value[y] = Array(zoneTilemap.value.width).fill('blank_tile')
+    }
+    for (let x = 0; x < zoneTilemap.value.width; x++) {
+      placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, selectedTile.value.id)
+      tileArray.value[y][x] = selectedTile.value.id
+    }
+  }
 }
 
 function save() {
   if (!zone.value) return
-  console.log('update')
   const data = {
     zoneId: zone.value.id,
-    name: zone.value.name,
-    width: zone.value.width,
-    height: zone.value.height,
+    name: zoneEditorStore.zoneSettings.name,
+    width: zoneEditorStore.zoneSettings.width,
+    height: zoneEditorStore.zoneSettings.height,
     tiles: tileArray.value,
     pvp: zone.value.pvp,
     zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
     zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
   }
-  gameStore.connection?.emit('gm:zone_editor:zone:update', data)
+
   if (zoneEditorStore.isSettingsModalShown) {
     zoneEditorStore.toggleSettingsModal()
   }
+
+  gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
+    zoneEditorStore.setZone(response)
+  })
 }
 
 function clear() {
-  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, 'blank_tile')))
-  tileArray.value = createTileArray()
+  for (let y = 0; y < zoneTilemap.value.height; y++) {
+    if (!tileArray.value[y]) {
+      tileArray.value[y] = Array(zoneTilemap.value.width).fill('blank_tile')
+    }
+    for (let x = 0; x < zoneTilemap.value.width; x++) {
+      placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, 'blank_tile')
+      tileArray.value[y][x] = 'blank_tile'
+    }
+  }
+
   zoneEventTiles.value = []
   zoneObjects.value = []
 }
@@ -229,7 +257,7 @@ onBeforeMount(() => {
   scene.cameras.main.centerOn(centerX, centerY)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   zoneEventTiles.value = []
   zoneObjects.value = []
   tiles.value?.destroy()
@@ -273,6 +301,7 @@ watch(
 )
 
 const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
+  console.log('setSelectedZoneObject', zoneObject)
   if (!zoneObject) return
   // Check if tool is move or return
   if (zoneEditorStore.tool !== 'move') return

src/components/gameMaster/zoneEditor/partials/ObjectList.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="260">
+    <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
       <template #modalHeader>
         <h3 class="text-lg">Objects</h3>
         <div class="flex">

src/components/gameMaster/zoneEditor/partials/TileList.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="600">
+    <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
       <template #modalHeader>
         <h3 class="text-lg">Tiles</h3>
         <div class="flex">

src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
     </template>
@@ -41,10 +41,15 @@ import { useZoneEditorStore } from '@/stores/zoneEditor.ts'
 
 const zoneEditorStore = useZoneEditorStore()
 
-const name = ref(zoneEditorStore.zone?.name)
-const width = ref(zoneEditorStore.zone?.width)
-const height = ref(zoneEditorStore.zone?.height)
-const pvp = ref(zoneEditorStore.zone?.pvp)
+zoneEditorStore.setZoneName(zoneEditorStore.zone.name)
+zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width)
+zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height)
+zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp)
+
+const name = ref(zoneEditorStore.zoneSettings.name)
+const width = ref(zoneEditorStore.zoneSettings.width)
+const height = ref(zoneEditorStore.zoneSettings.height)
+const pvp = ref(zoneEditorStore.zoneSettings.pvp)
 
 watch(name, (value) => {
   zoneEditorStore.setZoneName(value)