From bdc566e30faadf4a821d3a88e5d2fe0a68792727 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 4 Nov 2024 23:44:34 +0100
Subject: [PATCH] #236: Fixed clear button in map editor

---
 .../gameMaster/zoneEditor/ZoneEditor.vue           |  2 ++
 .../zoneEditor/zonePartials/ZoneTiles.vue          | 14 +++++++++++++-
 src/stores/zoneEditorStore.ts                      | 11 ++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index 99f960d..cbefc96 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@@ -38,8 +38,10 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 function clear() {
   if (!zoneEditorStore.zone) return
 
+  // Clear objects, event tiles and tiles
   zoneEditorStore.zone.zoneObjects = []
   zoneEditorStore.zone.zoneEventTiles = []
+  zoneEditorStore.triggerClearTiles()
 }
 
 function save() {
diff --git a/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue b/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
index 20075a7..b4673c1 100644
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
@@ -6,7 +6,7 @@
 import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/gameStore'
@@ -175,6 +175,18 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
 }
 
+watch(
+  () => zoneEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && zoneEditorStore.zone) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      zoneEditorStore.zone.tiles = blankTiles
+      zoneEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
 onMounted(() => {
   if (!zoneEditorStore.zone?.tiles) {
     return
diff --git a/src/stores/zoneEditorStore.ts b/src/stores/zoneEditorStore.ts
index dfe343e..0d542e6 100644
--- a/src/stores/zoneEditorStore.ts
+++ b/src/stores/zoneEditorStore.ts
@@ -12,7 +12,7 @@ export type TeleportSettings = {
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => {
     return {
-      active: false,
+      active: true,
       zone: null as Zone | null,
       tool: 'move',
       drawMode: 'tile',
@@ -27,6 +27,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       isZoneListModalShown: false,
       isCreateZoneModalShown: false,
       isSettingsModalShown: false,
+      shouldClearTiles: false,
       zoneSettings: {
         name: '',
         width: 0,
@@ -106,6 +107,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setTeleportSettings(teleportSettings: TeleportSettings) {
       this.teleportSettings = teleportSettings
     },
+    triggerClearTiles() {
+      this.shouldClearTiles = true
+    },
+
+    resetClearTilesFlag() {
+      this.shouldClearTiles = false
+    },
     reset(resetZone = false) {
       if (resetZone) this.zone = null
       this.zoneList = []
@@ -118,6 +126,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false
       this.isCreateZoneModalShown = false
+      this.shouldClearTiles = false
     }
   }
 })