Saving tile now really works

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -23,7 +23,7 @@ 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 { getTiles, placeTile, setAllTiles, tileToWorldXY } from '@/services/zone'
+import { placeTile, setAllTiles, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
 import type { ZoneObject } from '@/types'
@@ -48,6 +48,7 @@ const zoneData = new Phaser.Tilemaps.MapData({
 
 const tilesetImages: Tileset[] = []
 const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+let zoneTiles = [] as string[][];
 const zoneObjects = ref<ZoneObject[]>([])
 
 /**
@@ -61,7 +62,7 @@ toRaw(assetStore.assets).forEach((asset) => {
 tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
 
 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 exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 0 }, () => 'blank_tile'))
 
 const { objectList } = storeToRefs(zoneEditorStore)
 
@@ -79,6 +80,7 @@ watch(objectList, (newObjects) => {
 function eraser(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
+    zoneTiles[tile.y][tile.x] = 'blank_tile'
   }
 
   if (zoneEditorStore.drawMode === 'object') {
@@ -93,6 +95,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     if (!zoneEditorStore.selectedTile) return
     placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
+    zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile
   }
 
   if (zoneEditorStore.drawMode === 'object') {
@@ -117,26 +120,28 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 function paint(tile: Phaser.Tilemaps.Tile) {
   if (!zoneEditorStore.selectedTile) return
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile)))
+  zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile))
 }
 
 function save() {
-
   if (!zoneEditorStore.zone) return
-console.log(getTiles);
+
-  const tilesArray = []
+  console.log(zoneTiles);
 
   socket.connection.emit('gm:zone_editor:zone:update', {
     zoneId: zoneEditorStore.zone.id,
     name: zoneEditorStore.zone.name,
     width: zoneTilemap.width,
     height: zoneTilemap.height,
-    tiles: tilesArray,
+    tiles: zoneTiles,
     objects: zoneObjects.value
   })
 }
 
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
+  zoneTiles = exampleTilesArray
+
   if (zoneEditorStore.zone) {
     if (zoneEditorStore.zone.tiles) setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
     zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []

src/services/zone.ts

@@ -9,10 +9,6 @@ export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLaye
   return tile
 }
 
-export function getTiles(layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile[] {
-  return layer.getTilesWithin()
-}
-
 export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number) {
   const worldPoint = layer.tileToWorldX(pos_x)
   return worldPoint + config.tile_size.y
@@ -37,12 +33,9 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
 }
 
 export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
-  for (let y = 0; y < zone.height; y++) {
+  tiles.forEach((row, y) => {
-    for (let x = 0; x < zone.width; x++) {
+    row.forEach((tile, x) => {
-      let tileName = tiles[y][x]
+      placeTile(zone, layer, x, y, tile)
-      const tileImg = zone.getTileset(tileName ?? 'blank_tile') as Tileset
+    })
-      if (!tileImg) continue
+  })
-      placeTile(zone, layer, x, y, tileName)
-    }
-  }
 }