diff --git a/src/components/gameMaster/mapEditor/Map.vue b/src/components/gameMaster/mapEditor/Map.vue index 505a2d9..9016b73 100644 --- a/src/components/gameMaster/mapEditor/Map.vue +++ b/src/components/gameMaster/mapEditor/Map.vue @@ -48,7 +48,9 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) { } function handlePointerUp(pointer: Phaser.Input.Pointer) { - + if (mapEditor.drawMode.value === 'tile') { + mapTiles.value?.finalizeCommand() + } } onMounted(() => { diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue index 67420ee..751c667 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue +++ b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue @@ -22,7 +22,27 @@ const tileStorage = new TileStorage() const tileMap = shallowRef() const tileLayer = shallowRef() -defineExpose({ handlePointer }) +defineExpose({ handlePointer, finalizeCommand }) + +//Record of commands +let commandStack: EditorCommand[] = [] +let currentCommand: EditorCommand | null = null + +type EditorCommand = { + operation: 'draw' | 'erase' + tileName?: string, + affectedTiles: TileChangeSet +} + +//It must check if the position is in the set already. Otherwise it will duplicate positions +class TileChangeSet extends Set<{ x: number; y: number }> { + has(value: { x: number; y: number }): boolean { + for (const pos of this) { + if (pos.x === value.x && pos.y === value.y) return true + } + return false + } +} function createTileMap() { const mapData = new Phaser.Tilemaps.MapData({ @@ -73,6 +93,18 @@ function pencil(pointer: Phaser.Input.Pointer) { // Place tile placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value) + if (!currentCommand) { + currentCommand = { + operation: 'draw', + tileName: mapEditor.selectedTile.value, + affectedTiles: new TileChangeSet() + } + } + + if (!currentCommand.affectedTiles.has({ x: tile.x, y: tile.y })) { + currentCommand.affectedTiles.add({ x: tile.x, y: tile.y }) + } + // Adjust mapEditorStore.map.tiles map.tiles[tile.y][tile.x] = mapEditor.selectedTile.value } @@ -90,6 +122,18 @@ function eraser(pointer: Phaser.Input.Pointer) { // Place tile placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile') + if (!currentCommand) { + currentCommand = { + operation: 'erase', + tileName: 'blank_tile', + affectedTiles: new TileChangeSet() + } + } + + if (!currentCommand.affectedTiles.has({ x: tile.x, y: tile.y })) { + currentCommand.affectedTiles.add({ x: tile.x, y: tile.y }) + } + // Adjust mapEditorStore.map.tiles map.tiles[tile.y][tile.x] = 'blank_tile' } @@ -121,6 +165,11 @@ function tilePicker(pointer: Phaser.Input.Pointer) { mapEditor.setSelectedTile(map.tiles[tile.y][tile.x]) } +function finalizeCommand() { + commandStack.push(currentCommand!) + currentCommand = null +} + watch( () => mapEditor.shouldClearTiles, (shouldClear) => {