Removed unused imports, re-added paint func, more refactor work

src/components/gameMaster/zoneEditor/Objects.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
-import { calculateIsometricDepth, getTile, placeTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -8,7 +8,7 @@ import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { deleteTile, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
+import { createTileArray, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])
@@ -19,7 +19,6 @@ const zoneEditorStore = useZoneEditorStore()
 
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
-let tileArray = createTileArray()
 
 /**
  * @TODO : Add delete tile functionality
@@ -51,10 +50,6 @@ function createTileLayer() {
   return layer
 }
 
-function createTileArray() {
-  return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
-}
-
 function pencil(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   if (zoneEditorStore.tool !== 'pencil') return
@@ -95,20 +90,39 @@ function eraser(pointer: Phaser.Input.Pointer) {
   placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
 }
 
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Set new tileArray with selected tile
+  // tileArr
+  setAllTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
+}
+
 onBeforeMount(() => {
   if (!zoneEditorStore.zone?.tiles) {
     return
   }
   setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-  tileArray = zoneEditorStore.zone.tiles.map((row: any) => row.map((tileId: string) => tileId || 'blank_tile'))
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
 })
 
 onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
 
   zoneTilemap.destroyLayer('tiles')
   zoneTilemap.removeAllLayers()

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -138,7 +138,9 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
 }
 
 function initKeyShortcuts(event: KeyboardEvent) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
+
   // prevent if focused on composables
   if (document.activeElement?.tagName === 'INPUT') return
 

src/components/zone/Tiles.vue

@@ -17,7 +17,6 @@ const scene = useScene()
 
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
-let tileArray = createTileArray()
 
 function createTilemap() {
   const zoneData = new Phaser.Tilemaps.MapData({
@@ -51,16 +50,11 @@ function createTileLayer() {
   return layer
 }
 
-function createTileArray() {
-  return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
-}
-
 onBeforeMount(() => {
   if (!zoneStore.zone?.tiles) {
     return
   }
   setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
-  tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
 })
 
 onBeforeUnmount(() => {

src/composables/zoneComposable.ts

@@ -53,6 +53,10 @@ export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][
   })
 }
 
+export function createTileArray(width: number, height: number, tile: string = 'blank_tile') {
+  return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
+}
+
 export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
   const baseDepth = x + y
   if (isCharacter) {