Added logics for saving zone updates

src/components/utilities/zoneEditor/Toolbar.vue

@@ -34,7 +34,7 @@
       </div>
       <div class="buttons">
         <button class="btn-cyan">Load</button>
-        <button class="btn-cyan">Save</button>
+        <button class="btn-cyan" @click="() => emit('save')">Save</button>
         <button class="btn-cyan" @click="clear">Clear</button>
         <button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button>
       </div>
@@ -56,7 +56,7 @@ const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
-const emit = defineEmits(['move', 'eraser', 'pencil'])
+const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
 
 // drawMode
 const drawMode = ref('tile')

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
-  <Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" />
+  <Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
   <Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
   <Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
@@ -69,6 +69,17 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
 function pencil(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.selectedTile === null) return
   layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
+  zoneEditorStore.updateTile(tile.x, tile.y, zoneEditorStore.selectedTile);
+}
+
+function save() {
+  socket.connection.emit('gm:zone_editor:zone:save', {
+    zoneId: socket.character.zoneId,
+    name: zoneEditorStore.name,
+    width: zoneEditorStore.width,
+    height: zoneEditorStore.height,
+    tiles: zoneEditorStore.tiles,
+  })
 }
 
 onBeforeUnmount(() => {

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -40,7 +40,6 @@ const name = ref(zoneEditorStore.name)
 const width = ref(zoneEditorStore.width)
 const height = ref(zoneEditorStore.height)
 
-
 watch(name, (value) => {
   zoneEditorStore.setName(value)
 })

src/stores/zoneEditor.ts

@@ -30,6 +30,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setTiles(tiles: number[][]) {
       this.tiles = tiles
     },
+    updateTile(x: number, y: number, tile: number) {
+      this.tiles[y][x] = tile
+    },
     setTool(tool: string) {
       this.tool = tool
     },