Make zone loading dynamic

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,16 +1,21 @@
 <template>
-  <TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
-  <Controls :layer="tiles" />
+  <div v-if="zoneEditorStore.zone">
+    <TilemapLayerC :tilemap="zoneTilemap" :tileset="tilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+    <Controls :layer="tiles" />
 
-  <Container>
-    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
-  </Container>
+    <Container>
+      <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
+    </Container>
 
-  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
-  <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
-  <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
-  <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
-  <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
+    <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
+    <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
+    <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
+    <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
+    <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
+  </div>
+  <div v-else>
+    No zone selected. Please select a zone to edit.
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -25,31 +30,13 @@ import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
-import { placeTile, tileToWorldXY } from '@/services/zone'
+import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import type { Object } from '@/types'
+import type { Object, Zone, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
 
-const scene = useScene()
-const socket = useSocketStore()
-const zoneEditorStore = useZoneEditorStore()
-const assetStore = useAssetStore()
-
-const zoneData = new Phaser.Tilemaps.MapData({
-  width: zoneEditorStore.width,
-  height: zoneEditorStore.height,
-  tileWidth: config.tile_size.x,
-  tileHeight: config.tile_size.y,
-  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-  format: Phaser.Tilemaps.Formats.ARRAY_2D
-})
-
-const tilesetImages: Tileset[] = []
-const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-const zoneObjects = ref<ZoneObject[]>([])
-
 type ZoneObject = {
   id: number
   object: Object
@@ -57,74 +44,97 @@ type ZoneObject = {
   position_y: number
 }
 
-/**
- * Walk through object and add them to the zone as tilesetImages
- */
-let tileCount = 1
-toRaw(assetStore.assets).forEach((asset) => {
-  if (asset.group !== 'tiles') return
-  tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
+const scene = useScene()
+const socket = useSocketStore()
+const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
+
+const zoneTilemap = ref<Phaser.Tilemaps.Tilemap | null>(null)
+const tiles = ref<TilemapLayer | null>(null)
+const tilesArray = ref<string[][]>([])
+const zoneObjects = ref<ZoneObject[]>([])
+
+const tilesetImages: Tileset[] = []
+
+socket.connection.emit('gm:zone_editor:zone:request', {zoneId: 1}, (response: Zone) => {
+  zoneEditorStore.setZone(response)
 })
-tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
 
-const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
-const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
-
-function eraser(tile: Phaser.Tilemaps.Tile) {
-  if (zoneEditorStore.drawMode === 'tile') {
-    placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
-    zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
-  }
-
-  if (zoneEditorStore.drawMode === 'object') {
-    zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
-  }
-}
-
-function pencil(tile: Phaser.Tilemaps.Tile) {
-  if (zoneEditorStore.drawMode === 'tile') {
-    if (!zoneEditorStore.selectedTile) return
-    placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
-  }
-
-  if (zoneEditorStore.drawMode === 'object') {
-    if (zoneEditorStore.selectedObject === null) return
-    zoneObjects.value.push({
-      id: zoneObjects.value.length + 1,
-      object: zoneEditorStore.selectedObject,
-      position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
-      position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
-    })
-  }
-}
-
-function paint(tile: Phaser.Tilemaps.Tile) {
-  if (!zoneEditorStore.selectedTile) return
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
-}
-
-function save() {
-  if (!zoneEditorStore.name) return
-  socket.connection.emit('gm:zone_editor:zone:update', {
-    zoneId: socket.character.zoneId,
-    name: zoneEditorStore.name,
-    width: zoneEditorStore.width,
-    height: zoneEditorStore.height,
-    tiles: tiles.gidMap,
+function addMapTiles(width: number, height: number) {
+  let tileCount = 1
+  toRaw(assetStore.assets).forEach((asset) => {
+    if (asset.group !== 'tiles') return
+    tilesetImages.push(zoneTilemap.value!.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
   })
+  tilesetImages.push(zoneTilemap.value!.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
+
+  tiles.value = zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+
+  // Initialize tilesArray with the correct dimensions
+  tilesArray.value = Array.from({ length: height }, () => Array.from({ length: width }, () => 'blank_tile'))
 }
 
-// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
-//   tileTilemap = generateTilemap(scene, data.width, data.height);
-//   zoneEditorStore.setName(data.name)
-//   zoneEditorStore.setWidth(data.width)
-//   zoneEditorStore.setHeight(data.height)
-// })
+function initializeTilemap() {
+  if (!zoneEditorStore.zone) {
+    resetTilemap()
+    return
+  }
+
+  const { width, height } = zoneEditorStore.zone
+
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width,
+    height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  zoneTilemap.value = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+
+  // Clear existing tilesetImages
+  tilesetImages.length = 0
+
+  // Reinitialize tilesetImages
+  addMapTiles(width, height)
+
+  // Load tiles from zoneEditorStore
+  zoneEditorStore.zone.tiles.forEach((row, y) => {
+    row.forEach((tileId, x) => {
+      const tileKey = tileId ? assetStore.assets.find(asset => asset.id === tileId)?.key : 'blank_tile'
+      tilesArray.value[y][x] = tileKey || 'blank_tile'
+      placeTile(zoneTilemap.value!, tiles.value!, x, y, tileKey || 'blank_tile')
+    })
+  })
+
+  // Load objects from zoneEditorStore
+  if(zoneEditorStore.zone.zoneObjects) {
+    // zoneObjects.value.push(...zoneEditorStore.zone.zoneObjects)
+  }
+
+  // Center camera
+  const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
+  const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
+  scene.cameras.main.centerOn(centerX, centerY)
+}
+
+function resetTilemap() {
+  zoneTilemap.value = null
+  tiles.value = null
+  tilesArray.value = []
+  zoneObjects.value = []
+  tilesetImages.length = 0
+}
 
 const { objectList } = storeToRefs(zoneEditorStore)
 
+watch(() => zoneEditorStore.zone, () => {
+  initializeTilemap()
+}, { deep: true })
+
 watch(objectList, (newObjects) => {
-  // update objects inside zoneObjects and keep the position
+  if (!zoneEditorStore.zone) return
   zoneObjects.value = zoneObjects.value.map((object) => {
     const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
     if (!newObject) return object
@@ -132,17 +142,62 @@ watch(objectList, (newObjects) => {
   })
 })
 
+function eraser(tile: Phaser.Tilemaps.Tile) {
+  if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
+
+  if (zoneEditorStore.drawMode === 'tile') {
+    placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile')
+    tilesArray.value[tile.y][tile.x] = 'blank_tile'
+  }
+
+  if (zoneEditorStore.drawMode === 'object') {
+    zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles.value!, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles.value!, tile.x, tile.y).position_y)
+  }
+}
+
+function pencil(tile: Phaser.Tilemaps.Tile) {
+  if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value) return
+
+  if (zoneEditorStore.drawMode === 'tile') {
+    if (!zoneEditorStore.selectedTile) return
+    placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, zoneEditorStore.selectedTile)
+    tilesArray.value[tile.y][tile.x] = zoneEditorStore.selectedTile
+  }
+
+  if (zoneEditorStore.drawMode === 'object') {
+    if (zoneEditorStore.selectedObject === null) return
+    zoneObjects.value.push({
+      id: zoneObjects.value.length + 1,
+      object: zoneEditorStore.selectedObject,
+      position_x: tileToWorldXY(tiles.value, tile.x, tile.y).position_x,
+      position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y
+    })
+  }
+}
+
+function paint(tile: Phaser.Tilemaps.Tile) {
+  if (!zoneEditorStore.zone || !zoneTilemap.value || !tiles.value || !zoneEditorStore.selectedTile) return
+
+  tilesArray.value.forEach((row, y) => row.forEach((_, x) => {
+    placeTile(zoneTilemap.value!, tiles.value!, x, y, zoneEditorStore.selectedTile!)
+    tilesArray.value[y][x] = zoneEditorStore.selectedTile!
+  }))
+}
+
+function save() {
+  if (!zoneEditorStore.zone || !zoneTilemap.value) {
+    console.warn('No zone selected or tilemap not initialized')
+    return
+  }
+  console.log(getTiles(zoneTilemap.value))
+}
+
 onBeforeMount(() => {
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
-  socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
+  initializeTilemap()
 })
 
 onBeforeUnmount(() => {
+  resetTilemap()
   zoneEditorStore.reset()
 })
-
-// center camera
-const centerY = (zone.height * zone.tileHeight) / 2
-const centerX = (zone.width * zone.tileWidth) / 2
-scene.cameras.main.centerOn(centerX, centerY)
-</script>
+</script>

src/components/utilities/zoneEditor/ZoneList.vue

@@ -51,9 +51,11 @@ function fetchZones() {
 
 function loadZone(id: number) {
   console.log('loadZone', id)
-  socket.connection.emit('gm:zone_editor:zone:load', { zoneId: id }, () => {
-    zoneEditorStore.toggleZoneListModal()
-  })
+  socket.connection.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
+    console.log('!!zone', response)
+    zoneEditorStore.setZone(response)
+  });
+  zoneEditorStore.toggleZoneListModal()
 }
 
 function deleteZone(id: number) {

src/services/zone.ts

@@ -32,4 +32,17 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
   layer.putTileAt(tileImg.firstgid, x, y)
 }
 
+export function getTiles(zone: Tilemap): string[][] {
+  const tiles = []
+  for (let y = 0; y < zone.height; y++) {
+    const row = []
+    for (let x = 0; x < zone.width; x++) {
+      const tile = zone.getTileAt(x, y)
+      row.push(!tile?.index ? 'blank_tile' : zone.tilesets[tile.index].name)
+    }
+    tiles.push(row)
+  }
+  return tiles
+}
+
 export function generateTilemap(scene: Phaser.Scene, width: number, height: number) {}

src/stores/zoneEditor.ts

@@ -1,19 +1,14 @@
 import { defineStore } from 'pinia'
-import type { Object, ZoneObject } from '@/types'
+import type { Object, ZoneObject, Zone } from '@/types'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
     active: true,
-    name: '',
-    width: 10,
-    height: 10,
+    zone: null as Zone | null,
     tool: 'move',
     drawMode: 'tile',
     tileList: [] as string[],
-    tiles: [] as string[][],
     objectList: [] as Object[],
-    objects: [] as ZoneObject[],
-
     selectedTile: '',
     selectedObject: null as Object | null,
     isZoneListModalShown: false,
@@ -24,14 +19,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     toggleActive() {
       this.active = !this.active
     },
-    setName(name: string) {
-      this.name = name
-    },
-    setWidth(width: number) {
-      this.width = width
-    },
-    setHeight(height: number) {
-      this.height = height
+    setZone(zone: Zone) {
+      this.zone = zone
     },
     setTool(tool: string) {
       this.tool = tool
@@ -42,21 +31,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setTileList(tiles: string[]) {
       this.tileList = tiles
     },
-    setTiles(tiles: string[][]) {
-      this.tiles = tiles
-    },
-    updateTile(x: number, y: number, tile: string) {
-      this.tiles[y][x] = tile
-    },
     setObjectList(objects: Object[]) {
       this.objectList = objects
     },
-    setObjects(objects: ZoneObject[]) {
-      this.objects = objects
-    },
-    updateObject(index: number, object: ZoneObject) {
-      this.objects[index] = object
-    },
     setSelectedTile(tile: string) {
       this.selectedTile = tile
     },
@@ -74,13 +51,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isCreateZoneModalShown = !this.isCreateZoneModalShown
     },
     reset() {
-      this.name = ''
-      this.width = 10
-      this.height = 10
+      this.zone = null
       this.tileList = []
-      this.tiles = []
       this.objectList = []
-      this.objects = []
       this.tool = 'move'
       this.drawMode = 'tile'
       this.selectedTile = ''
@@ -90,10 +63,4 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isCreateZoneModalShown = false
     }
   }
-})
-
-/**
- * Resources:
- * https://www.html5gamedevs.com/topic/21908-phaser-is-there-any-tutorial-on-how-to-do-an-isometric-game/
- * http://murdochcarpenter.com/isometric-starling-part-i/
- */
+})