From 16d830df666fe0ecdc3be9d866f6a21020cc5c78 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 7 Jul 2024 15:42:54 +0200
Subject: [PATCH] Fully finished zone loading logic

---
 .../utilities/zoneEditor/ZoneEditor.vue       | 200 ++++++------------
 src/screens/Game.vue                          |   6 +-
 2 files changed, 65 insertions(+), 141 deletions(-)

diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index d49020f..58825df 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -1,12 +1,10 @@
 <template>
-  <div v-if="isLoaded">
-    <TilemapLayerC :tilemap="zoneTilemap" :tileset="tilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
-    <Controls :layer="tiles" />
+  <TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray" :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>
-  </div>
+  <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'" />
@@ -30,125 +28,54 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import { getTiles, placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import type { Zone, ZoneObject } from '@/types'
+import type { Object } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
 
+type ZoneObject = {
+  id: number
+  object: Object
+  position_x: number
+  position_y: number
+}
+
 const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
-const isLoaded = ref(false)
 
-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)
+const zoneData = new Phaser.Tilemaps.MapData({
+  width: zoneEditorStore.zone?.width ?? 10,
+  height: zoneEditorStore.zone?.height ?? 10,
+  tileWidth: config.tile_size.x,
+  tileHeight: config.tile_size.y,
+  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+  format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
 
-function clearLayer(layer: Phaser.Tilemaps.TilemapLayer) {
-  const width = layer.layer.width;
-  const height = layer.layer.height;
+const tilesetImages: Tileset[] = []
+const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+const zoneObjects = ref<ZoneObject[]>([])
 
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      layer.removeTileAt(x, y, true, true);
-    }
-  }
-}
+/**
+ * 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(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
+})
+tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
 
-function addMapTiles(width: number, height: number) {
-  if (tiles.value) {
-    clearLayer(tiles.value)
-  }
-
-  if (zoneTilemap.value) {
-    zoneTilemap.value?.removeAllLayers()
-  }
-
-  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'))
-}
-
-function initializeTilemap() {
-  isLoaded.value = false;
-
-  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)
-
-  isLoaded.value = true
-}
-
-function resetTilemap() {
-  zoneTilemap.value = null
-  tiles.value = null
-  tilesArray.value = []
-  zoneObjects.value = []
-  tilesetImages.length = 0
-}
+const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 10 }, () => 'blank_tile'))
 
 const { objectList } = storeToRefs(zoneEditorStore)
 
-watch(() => zoneEditorStore.zone, () => {
-  initializeTilemap()
-}, { deep: true })
-
+/**
+ * Watch for object updates and update the zoneObjects
+ */
 watch(objectList, (newObjects) => {
-  if (!zoneEditorStore.zone) return
   zoneObjects.value = zoneObjects.value.map((object) => {
     const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
     if (!newObject) return object
@@ -157,61 +84,54 @@ 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'
+    placeTile(zoneTilemap, tiles, tile.x, tile.y, '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)
+    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.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
+    placeTile(zoneTilemap, 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.value, tile.x, tile.y).position_x,
-    //   position_y: tileToWorldXY(tiles.value, tile.x, tile.y).position_y
-    // })
+    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.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!
-  }))
+  if (!zoneEditorStore.selectedTile) return
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile)))
 }
 
 function save() {
-  if (!zoneEditorStore.zone || !zoneTilemap.value) {
-    console.warn('No zone selected or tilemap not initialized')
-    return
-  }
-  console.log(getTiles(zoneTilemap.value))
+  console.log(getTiles(zoneTilemap))
 }
 
 onBeforeMount(() => {
-  initializeTilemap()
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
 })
 
 onBeforeUnmount(() => {
-  resetTilemap()
-  zoneEditorStore.reset()
+  tiles.destroy()
+  zoneTilemap.removeAllLayers()
+  zoneTilemap.destroy()
+  // zoneEditorStore.reset()
 })
-</script>
\ No newline at end of file
+
+// center camera
+const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
+const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
+scene.cameras.main.centerOn(centerX, centerY)
+</script>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 515a000..3f72b13 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -19,7 +19,7 @@
     </Game>
     <Game :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <ZoneEditor v-if="isLoaded" />
+        <ZoneEditor v-if="isLoaded" :key="zoneEditorStore.zone?.id ?? 0" />
       </Scene>
     </Game>
   </div>
@@ -160,4 +160,8 @@ const createScene = (scene: Phaser.Scene) => {
     })
   })
 }
+
+// watch(() => zoneEditorStore.zone, () => {
+//   isLoaded.value = false
+// }, {deep:true});
 </script>