101 lines
3.2 KiB
Vue
101 lines
3.2 KiB
Vue
<template>
|
|
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { MapEventTileType, type MapEventTile, type Map as MapT } from '@/application/types'
|
|
import { uuidv4 } from '@/application/utilities'
|
|
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
|
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
import { Image, useScene } from 'phavuer'
|
|
import { shallowRef } from 'vue'
|
|
|
|
const mapEditor = useMapEditorComposable()
|
|
|
|
defineExpose({ handlePointer })
|
|
|
|
const props = defineProps<{
|
|
tileMap: Phaser.Tilemaps.Tilemap
|
|
}>()
|
|
|
|
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
|
|
|
function getImageProps(tile: MapEventTile) {
|
|
return {
|
|
x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
|
|
y: tileToWorldY(props.tileMap, tile.positionX, tile.positionY),
|
|
texture: tile.type,
|
|
depth: 999
|
|
}
|
|
}
|
|
|
|
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
|
|
if (!tileLayer.value) return
|
|
|
|
// Check if there is a tile
|
|
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
|
if (!tile) return
|
|
|
|
// Check if event tile already exists on position
|
|
const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
|
if (existingEventTile) return
|
|
|
|
// If teleport, check if there is a selected map
|
|
if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMapId) return
|
|
|
|
const newEventTile = {
|
|
id: uuidv4(),
|
|
mapId: map?.id,
|
|
map: map?.id,
|
|
type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
|
|
positionX: tile.x,
|
|
positionY: tile.y,
|
|
teleport:
|
|
mapEditor.drawMode.value === 'teleport'
|
|
? {
|
|
toMap: mapEditor.teleportSettings.value.toMapId,
|
|
toPositionX: mapEditor.teleportSettings.value.toPositionX,
|
|
toPositionY: mapEditor.teleportSettings.value.toPositionY,
|
|
toRotation: mapEditor.teleportSettings.value.toRotation
|
|
}
|
|
: undefined
|
|
}
|
|
|
|
map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
|
|
}
|
|
|
|
function erase(pointer: Phaser.Input.Pointer, map: MapT) {
|
|
if (!tileLayer.value) return
|
|
// Check if there is a tile
|
|
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
|
if (!tile) return
|
|
|
|
// Check if event tile already exists on position
|
|
const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
|
if (!existingEventTile) return
|
|
|
|
// Remove existing event tile
|
|
map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
|
}
|
|
|
|
function handlePointer(pointer: Phaser.Input.Pointer) {
|
|
const map = mapEditor.currentMap.value
|
|
if (!map) return
|
|
|
|
// Check if left mouse button is pressed
|
|
if (!pointer.isDown) return
|
|
|
|
// Check if shift is not pressed, this means we are moving the camera
|
|
if (pointer.event.shiftKey) return
|
|
|
|
switch (mapEditor.tool.value) {
|
|
case 'pencil':
|
|
pencil(pointer, map)
|
|
break
|
|
case 'eraser':
|
|
erase(pointer, map)
|
|
break
|
|
}
|
|
}
|
|
</script>
|