added paint feature

src/components/utilities/zoneEditor/Toolbar.vue

@@ -77,7 +77,7 @@ const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
-const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
+const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save'])
 
 // track select state
 let selectPencilOpen = ref(false)
@@ -91,7 +91,7 @@ function setDrawMode(value: string) {
 }
 
 function drawTile(pointer: Phaser.Input.Pointer) {
-  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') {
+  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
     return
   }
 
@@ -110,6 +110,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
   if (zoneEditorStore.tool === 'pencil') {
     emit('pencil', pointer_tile)
   }
+
+  if (zoneEditorStore.tool === 'paint') {
+    emit('paint', pointer_tile)
+  }
 }
 
 function drawTiles(pointer: Phaser.Input.Pointer) {
@@ -126,7 +130,7 @@ onBeforeUnmount(() => {
 })
 
 function clear() {
-  zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 0)))
+  zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
 }
 </script>
 

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -8,8 +8,8 @@
     <Image v-for="object in zoneObjects" :key="object.id" :texture="object.object" :x="object.position_x" :y="object.position_y" />
   </Container>
 
-  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
-  <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
+  <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'" />
   <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
 </template>
@@ -29,7 +29,6 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import { placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import { randomUUID } from 'crypto'
 
 const scene = useScene()
 const socket = useSocketStore()
@@ -127,6 +126,11 @@ 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(zone, tiles, x, y, zoneEditorStore.selectedTile)))
+}
+
 function save() {
   socket.connection.emit('gm:zone_editor:zone:save', {
     zoneId: socket.character.zoneId,

src/stores/zoneEditor.ts

@@ -6,7 +6,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     name: '',
     width: 10,
     height: 10,
-    tiles: [] as number[][],
+    tiles: [] as string[][],
     objects: [] as number[][],
     tool: 'move',
     drawMode: 'tile',
@@ -27,10 +27,10 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setHeight(height: number) {
       this.height = height
     },
-    setTiles(tiles: number[][]) {
+    setTiles(tiles: string[][]) {
       this.tiles = tiles
     },
-    updateTile(x: number, y: number, tile: number) {
+    updateTile(x: number, y: number, tile: string) {
       this.tiles[y][x] = tile
     },
     setObjects(objects: number[][]) {