diff --git a/src/components/gameMaster/zoneEditor/Objects.vue b/src/components/gameMaster/zoneEditor/Objects.vue index 33c7d94..f9e8e5e 100644 --- a/src/components/gameMaster/zoneEditor/Objects.vue +++ b/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' diff --git a/src/components/gameMaster/zoneEditor/Tiles.vue b/src/components/gameMaster/zoneEditor/Tiles.vue index f6a5af5..58ab843 100644 --- a/src/components/gameMaster/zoneEditor/Tiles.vue +++ b/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() diff --git a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue index bc8c0b0..eb0c234 100644 --- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue +++ b/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 diff --git a/src/components/zone/Tiles.vue b/src/components/zone/Tiles.vue index 2c43527..6ecffac 100644 --- a/src/components/zone/Tiles.vue +++ b/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(() => { diff --git a/src/composables/zoneComposable.ts b/src/composables/zoneComposable.ts index 1a4b331..d07be63 100644 --- a/src/composables/zoneComposable.ts +++ b/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) {