diff --git a/src/components/gameMaster/zoneEditor/EventTiles.vue b/src/components/gameMaster/zoneEditor/EventTiles.vue index 4075de7..1091437 100644 --- a/src/components/gameMaster/zoneEditor/EventTiles.vue +++ b/src/components/gameMaster/zoneEditor/EventTiles.vue @@ -25,7 +25,8 @@ function getEventTileImageProps(tile: ZoneEventTile) { } } -function addZoneEventTile(pointer: Phaser.Input.Pointer) { +function pencil(pointer: Phaser.Input.Pointer) { + // Check if zone is set if (!zoneEditorStore.zone) return // Check if tool is pencil @@ -69,13 +70,42 @@ function addZoneEventTile(pointer: Phaser.Input.Pointer) { zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile) } +function eraser(pointer: Phaser.Input.Pointer) { + // Check if zone is set + if (!zoneEditorStore.zone) return + + // Check if tool is pencil + if (zoneEditorStore.tool !== 'eraser') return + + // Check if draw mode is blocking tile or teleport + if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return + + // Check if left mouse button is pressed + if (!pointer.isDown) return + + // Check if there is a tile + const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY) + if (!tile) return + + // Check if event tile already exists on position + const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y) + if (!existingEventTile) return + + // Remove existing event tile + zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id) +} + onBeforeMount(() => { - scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile) - scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile) + scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser) }) onBeforeUnmount(() => { - scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile) - scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile) + scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser) }) </script> diff --git a/src/components/gameMaster/zoneEditor/Objects.vue b/src/components/gameMaster/zoneEditor/Objects.vue index a2fc234..33c7d94 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, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable' +import { calculateIsometricDepth, getTile, placeTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable' import { Image, useScene } from 'phavuer' import { useZoneEditorStore } from '@/stores/zoneEditorStore' import type { ZoneObject } from '@/types' @@ -35,7 +35,8 @@ function getObjectImageProps(object: ZoneObject) { } } -function addZoneObject(pointer: Phaser.Input.Pointer) { +function pencil(pointer: Phaser.Input.Pointer) { + // Check if zone is set if (!zoneEditorStore.zone) return // Check if tool is pencil @@ -73,8 +74,35 @@ function addZoneObject(pointer: Phaser.Input.Pointer) { zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject) } -function moveZoneObject(id: string) { +function eraser(pointer: Phaser.Input.Pointer) { + // Check if zone is set if (!zoneEditorStore.zone) return + + // Check if tool is eraser + if (zoneEditorStore.tool !== 'eraser') return + + // Check if draw mode is object + if (zoneEditorStore.eraserMode !== 'object') return + + // Check if left mouse button is pressed + if (!pointer.isDown) return + + // Check if there is a tile + const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY) + if (!tile) return + + // Check if object already exists on position + const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y) + if (!existingObject) return + + // Remove existing object + zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id) +} + +function moveZoneObject(id: string) { + // Check if zone is set + if (!zoneEditorStore.zone) return + movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject function handlePointerMove(pointer: Phaser.Input.Pointer) { @@ -98,7 +126,9 @@ function moveZoneObject(id: string) { } function rotateZoneObject(id: string) { + // Check if zone is set if (!zoneEditorStore.zone) return + zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => { if (object.id === id) { return { @@ -111,19 +141,25 @@ function rotateZoneObject(id: string) { } function deleteZoneObject(id: string) { + // Check if zone is set if (!zoneEditorStore.zone) return + zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id) selectedZoneObject.value = null } onBeforeMount(() => { - scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject) - scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject) + scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser) }) onBeforeUnmount(() => { - scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject) - scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject) + scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser) }) // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects @@ -132,8 +168,6 @@ watch( (newObjects) => { if (!zoneEditorStore.zone) return - console.log('Updating zone objects') - const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => { const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id) if (updatedObject) { diff --git a/src/components/gameMaster/zoneEditor/Tiles.vue b/src/components/gameMaster/zoneEditor/Tiles.vue index 20cf2ae..f6a5af5 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 { getTile, placeTile, setAllTiles } from '@/composables/zoneComposable' +import { deleteTile, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable' import Controls from '@/components/utilities/Controls.vue' const emit = defineEmits(['tilemap:create']) @@ -21,6 +21,10 @@ const zoneTilemap = createTilemap() const tiles = createTileLayer() let tileArray = createTileArray() +/** + * @TODO : Add delete tile functionality + */ + function createTilemap() { const zoneData = new Phaser.Tilemaps.MapData({ width: zoneEditorStore.zone?.width, @@ -51,7 +55,7 @@ function createTileArray() { return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile')) } -function handleTileClick(pointer: Phaser.Input.Pointer) { +function pencil(pointer: Phaser.Input.Pointer) { // Check if tool is pencil if (zoneEditorStore.tool !== 'pencil') return @@ -71,18 +75,40 @@ function handleTileClick(pointer: Phaser.Input.Pointer) { placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id) } +function eraser(pointer: Phaser.Input.Pointer) { + // Check if zone is set + if (!zoneEditorStore.zone) return + + // Check if tool is pencil + if (zoneEditorStore.tool !== 'eraser') return + + // Check if draw mode is tile + if (zoneEditorStore.eraserMode !== 'tile') return + + // Check if left mouse button is pressed + if (!pointer.isDown) return + + // Check if there is a tile + const tile = getTile(tiles, pointer.worldX, pointer.worldY) + if (!tile) return + + placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile') +} + onBeforeMount(() => { if (!zoneEditorStore.zone?.tiles) { return } setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles) - tileArray = zoneEditorStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) + tileArray = zoneEditorStore.zone.tiles.map((row: any) => row.map((tileId: string) => tileId || 'blank_tile')) - scene.input.on(Phaser.Input.Events.POINTER_MOVE, handleTileClick) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser) }) onBeforeUnmount(() => { - scene.input.off(Phaser.Input.Events.POINTER_MOVE, handleTileClick) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil) + scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser) zoneTilemap.destroyLayer('tiles') zoneTilemap.removeAllLayers()