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

package-lock.json

@@ -5630,9 +5630,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.45",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5650,8 +5650,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"

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)

src/composables/useCameraControls.ts

@@ -5,35 +5,17 @@ export function useCameraControls(scene: Phaser.Scene): any {
   const gameStore = useGameStore()
   const camera = ref(scene.cameras.main)
   const isDragging = ref(false)
-  let pointerDownTimer: number | null | NodeJS.Timeout = null
-  let pointerUpTimer: number | null | NodeJS.Timeout = null
-
-  const DRAG_DELAY = 150
-  const MOVE_RESET_DELAY = 100
 
   function onPointerDown(pointer: Phaser.Input.Pointer) {
     if (pointer.event instanceof MouseEvent || pointer.event.shiftKey) {
-      pointerDownTimer = setTimeout(() => {
-        isDragging.value = true
-        gameStore.setMovingCamera(true)
-      }, DRAG_DELAY)
+      isDragging.value = true
+      gameStore.setMovingCamera(true)
     }
   }
 
   function onPointerUp() {
-    if (pointerDownTimer) {
-      clearTimeout(pointerDownTimer)
-      pointerDownTimer = null
-    }
     isDragging.value = false
-
-    if (pointerUpTimer) {
-      clearTimeout(pointerUpTimer)
-    }
-
-    pointerUpTimer = setTimeout(() => {
-      gameStore.setMovingCamera(false)
-    }, MOVE_RESET_DELAY)
+    gameStore.setMovingCamera(false)
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',

src/screens/Game.vue

@@ -27,7 +27,7 @@
     <div v-if="zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
-          <ZoneEditor v-if="isLoaded" :key="zoneEditorStore.zone?.id ?? 0" />
+          <ZoneEditor v-if="isLoaded" :key="JSON.stringify(zoneEditorStore.zone)" />
         </Scene>
       </Game>
     </div>

src/stores/zoneEditor.ts

@@ -27,6 +27,12 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
     isSettingsModalShown: false,
+    zoneSettings: {
+      name: '',
+      width: 0,
+      height: 0,
+      pvp: false
+    },
     teleportSettings: {
       toZoneId: 0,
       toPositionX: 0,
@@ -38,28 +44,21 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       if (this.active) this.reset()
       this.active = !this.active
     },
-    setZone(zone: Zone) {
+    setZone(zone: Zone | null) {
       this.zone = zone
     },
     setZoneName(name: string) {
-      if (this.zone) {
-        this.zone.name = name
-      }
+      this.zoneSettings.name = name
     },
     setZoneWidth(width: number) {
-      if (this.zone) {
-        this.zone.width = width
-      }
+      this.zoneSettings.width = width
     },
     setZoneHeight(height: number) {
-      if (this.zone) {
-        this.zone.height = height
-      }
+      this.zoneSettings.height = height
     },
     setZonePvp(pvp: boolean) {
-      if (this.zone) {
-        this.zone.pvp = pvp
-      }
+      if (!this.zone) return
+      this.zone.pvp = pvp
     },
     setTool(tool: string) {
       this.tool = tool
@@ -86,9 +85,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.selectedObject = object
     },
     setSelectedZoneObject(zoneObject: ZoneObject | null) {
-      const gameStore = useGameStore() // Access the gameStore
-      if (gameStore.isMovingCamera) return // Step 2: Check isMovingCamera before proceeding
-
       this.selectedZoneObject = zoneObject
     },
     setObjectDepth(depth: number) {
@@ -108,6 +104,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.teleportSettings = teleportSettings
     },
     reset() {
+      // this.zone = null
       this.zoneList = []
       this.tileList = []
       this.objectList = []