noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring of modalShown booleans

Browse Source
This commit is contained in:
Andrei
2025-01-25 23:27:15 -06:00
parent 14aa696197
commit 791830fd6f
23 changed files with 377 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/gameMaster/mapEditor/Map.vue
View File

@ -1,10 +1,12 @@
<template>
<MapTiles @tileMap:create="tileMap = $event" />
<PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<MapTiles ref="mapTiles" :tileMap="tileMap" @tileMap:create="tileMap = $event" />
<PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
<MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
</template>
<script setup lang="ts">
import config from '@/application/config'
import type { Map as MapT } from '@/application/types'
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
@ -14,6 +16,50 @@ import { onMounted, onUnmounted, shallowRef } from 'vue'
const mapEditor = useMapEditorComposable()
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const selectedMap = ref<MapT>()
const mapEditorStore = useMapEditorStore()
const mapEditor = useMapEditorComposable()
const mapTiles = useTemplateRef('mapTiles')
const mapObjects = useTemplateRef('mapObjects')
const eventTiles = useTemplateRef('eventTiles')
const scene = useScene()
function handlePointer(pointer: Phaser.Input.Pointer) {
if (!mapTiles.value || !mapObjects.value || !eventTiles.value) 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
// Check if alt is pressed
if (!pointer.event.altKey) return
// Check if draw mode is tile
switch (mapEditorStore.drawMode) {
case 'tile':
mapTiles.value.handlePointer(pointer)
// case 'map_object':
// mapObjects.value.handlePointer(pointer)
case 'event tile':
eventTiles.value.handlePointer(pointer)
}
}
watch(() => mapEditor.currentMap, async (map) => {
if (!map.value) return
selectedMap.value = map.value
})
onMounted(() => {
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointer)
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointer)
})
onUnmounted(() => {
mapEditor.reset()
})

98
src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
View File

@ -1,5 +1,5 @@
<template>
<Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
</template>
<script setup lang="ts">
@ -8,62 +8,55 @@ import { uuidv4 } from '@/application/utilities'
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { Image, useScene } from 'phavuer'
import { onMounted, onUnmounted } from 'vue'
import { type Map as MapT } from "@/application/types"
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { shallowRef, watch } from 'vue'
const scene = useScene()
const mapEditorStore = useMapEditorStore()
const mapEditor = useMapEditorComposable()
defineExpose({handlePointer})
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
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),
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) {
// Check if map is set
if (!mapEditorStore.map) return
// Check if tool is pencil
if (mapEditorStore.tool !== 'pencil') return
// Check if draw mode is blocking tile or teleport
if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') 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
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
if (!tileLayer.value) return
// Check if there is a tile
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if event tile already exists on position
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
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 (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMap) return
if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
const newEventTile = {
id: uuidv4(),
mapId: mapEditorStore.map.id,
map: mapEditorStore.map,
mapId: map?.id,
map: map?.id,
type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
positionX: tile.x,
positionY: tile.y,
teleport:
mapEditorStore.drawMode === 'teleport'
? {
toMap: mapEditorStore.teleportSettings.toMap,
toMap: mapEditorStore.teleportSettings.toMapId,
toPositionX: mapEditorStore.teleportSettings.toPositionX,
toPositionY: mapEditorStore.teleportSettings.toPositionY,
toRotation: mapEditorStore.teleportSettings.toRotation
@ -71,18 +64,26 @@ function pencil(pointer: Phaser.Input.Pointer) {
: undefined
}
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
}
function eraser(pointer: Phaser.Input.Pointer) {
// Check if map is set
if (!mapEditorStore.map) return
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 tool is pencil
if (mapEditorStore.tool !== 'eraser') 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
// Check if draw mode is blocking tile or teleport
if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') 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
@ -90,29 +91,12 @@ function eraser(pointer: Phaser.Input.Pointer) {
// Check if shift is not pressed, this means we are moving the camera
if (pointer.event.shiftKey) return
// Check if there is a tile
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
if (!tile) return
if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
// Check if event tile already exists on position
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
if (!existingEventTile) return
// Remove existing event tile
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
switch (mapEditorStore.tool) {
case 'pencil': pencil(pointer, map)
case 'eraser': erase(pointer, map)
}
}
onMounted(() => {
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)
})
onUnmounted(() => {
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>

175
src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
View File

@ -22,6 +22,8 @@ const tileStorage = new TileStorage()
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
defineExpose({handlePointer})
function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({
width: mapEditor.currentMap.value?.width,
@ -32,9 +34,7 @@ function createTileMap() {
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
emit('tileMap:create', newTileMap)
return newTileMap
return new Phaser.Tilemaps.Tilemap(scene, mapData)
}
async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
@ -55,111 +55,81 @@ async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
return layer
}
function pencil(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return
// Check if map is set
if (!mapEditor.currentMap.value) return
console.log(mapEditor.tool.value)
// Check if tool is pencil
if (mapEditor.tool.value !== 'pencil') return
// Check if draw mode is tile
if (mapEditor.drawMode.value !== 'tile') return
// Check if there is a selected tile
if (!mapEditor.selectedTile.value) return // Changed this line to access .value
// 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
function pencil(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
var map = mapEditor.currentMap.value
if (!map) return
// Check if there is a tile
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
const tile = tileLayer.getTileAtWorldXY(pointer.worldX, pointer.worldY)
if (!tile) return
// Place tile
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
// Adjust mapEditor tiles
mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.selectedTile.value
// Adjust mapEditorStore.map.tiles
tileMap.tiles[tile.y][tile.x] = map.tiles[tile.y][tile.x]
}
function eraser(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return
// Check if map is set
if (!mapEditor.currentMap.value) return
// Check if tool is pencil
if (mapEditor.tool.value !== 'eraser') return
// Check if draw mode is tile
if (mapEditor.eraserMode.value !== 'tile') 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
// Check if alt is pressed
if (pointer.event.altKey) return
function eraser(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
let map = mapEditor.currentMap.value
if (!map) return
// Check if there is a tile
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Place tile
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
// Adjust mapEditor.map.tiles
mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
// Adjust mapEditorStore.map.tiles
map.tiles[tile.y][tile.x] = 'blank_tile'
}
function paint(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return
// Check if map is set
if (!mapEditor.currentMap.value) return
// Check if tool is pencil
if (mapEditor.tool.value !== 'paint') return
// Check if there is a selected tile
if (!mapEditor.selectedTile.value) 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
// Check if alt is pressed
if (pointer.event.altKey) return
function paint(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
// Set new tileArray with selected tile
setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value))
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
// Adjust mapEditor.map.tiles
mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value)
// Adjust mapEditorStore.map.tiles
if (mapEditor.currentMap.value) {
mapEditor.currentMap.value.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
}
}
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
function tilePicker(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return
function tilePicker(pointer: Phaser.Input.Pointer, tileLayer: Phaser.Tilemaps.TilemapLayer) {
let map = mapEditor.currentMap.value
if (!map) return
// Check if map is set
// Check if there is a tile
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Select the tile
mapEditorStore.setSelectedTile(map.tiles[tile.y][tile.x])
}
watch(
() => mapEditorStore.shouldClearTiles,
(shouldClear) => {
if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
const blankTiles = createTileArray(tileLayer.value.width, tileLayer.value.height, 'blank_tile')
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
mapEditor.currentMap.value.tiles = blankTiles
mapEditorStore.resetClearTilesFlag()
}
}
)
function handlePointer(pointer: Phaser.Input.Pointer) {
if (!mapEditor.currentMap.value) return
// Check if tool is pencil
if (mapEditor.tool.value !== 'pencil') return
if (!tileMap.value || !tileLayer.value) return
// Check if draw mode is tile
if (mapEditor.drawMode.value !== 'tile') return
// Check if tool is pencil
if (mapEditorStore.drawMode !== 'tile') return
// Check if there is a selected tile
if (!mapEditorStore.selectedTile) return
// Check if left mouse button is pressed
if (!pointer.isDown) return
@ -170,25 +140,18 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
// Check if alt is pressed
if (!pointer.event.altKey) return
// Check if there is a tile
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
if (!tile) return
// Select the tile
mapEditor.setSelectedTile(mapEditor.currentMap.value.tiles[tile.y][tile.x])
}
watch(
() => mapEditor.shouldClearTiles.value,
(shouldClear) => {
if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
mapEditor.currentMap.value.tiles = blankTiles
mapEditor.resetClearTilesFlag()
}
// Check if draw mode is tile
switch (mapEditorStore.tool) {
case 'pencil':
pencil(pointer, tileMap.value, tileLayer.value)
case 'eraser':
eraser(pointer, tileMap.value, tileLayer.value)
case 'paint':
paint(pointer, tileMap.value, tileLayer.value)
case 'tile picker':
tilePicker(pointer, tileLayer.value)
}
)
}
onMounted(async () => {
if (!mapEditor.currentMap.value?.tiles) return
@ -211,19 +174,9 @@ onMounted(async () => {
}
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
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)
scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
})
onUnmounted(() => {
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)
scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
if (tileMap.value) {
tileMap.value.destroyLayer('tiles')
tileMap.value.removeAllLayers()

6
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue
View File

@ -11,7 +11,7 @@ import { Image, useScene } from 'phavuer'
import { computed } from 'vue'
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
tileMap: Phaser.Tilemaps.Tilemap
placedMapObject: PlacedMapObject
selectedPlacedMapObject: PlacedMapObject | null
movingPlacedMapObject: PlacedMapObject | null
@ -24,8 +24,8 @@ const imageProps = computed(() => ({
alpha: props.movingPlacedMapObject?.id === props.placedMapObject.id ? 0.5 : 1,
tint: props.selectedPlacedMapObject?.id === props.placedMapObject.id ? 0x00ff00 : 0xffffff,
depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
x: tileToWorldX(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
y: tileToWorldY(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
flipX: props.placedMapObject.isRotated,
texture: props.placedMapObject.mapObject.id,
originY: Number(props.placedMapObject.mapObject.originX),

185
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -1,142 +1,87 @@
<template>
<SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
<PlacedMapObject v-for="placedMapObject in mapEditorStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tilemap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
</template>
<script setup lang="ts">
import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
import { getTile } from '@/composables/mapComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { useScene } from 'phavuer'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { ref, watch } from 'vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
const scene = useScene()
const mapEditorStore = useMapEditorStore()
const mapEditor = useMapEditorComposable()
const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
tileMap: Phaser.Tilemaps.Tilemap
}>()
function pencil(pointer: Phaser.Input.Pointer) {
// Check if map is set
if (!mapEditorStore.map) return
// Check if tool is pencil
if (mapEditorStore.tool !== 'pencil') return
// Check if draw mode is map_object
if (mapEditorStore.drawMode !== 'map_object') return
// Check if there is a selected object
if (!mapEditorStore.selectedMapObject) 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
// Check if alt is pressed, this means we are selecting the object
if (pointer.event.altKey) return
defineExpose({handlePointer})
function pencil(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
// Check if there is a tile
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if object already exists on position
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
if (existingPlacedMapObject) return
const newPlacedMapObject = {
const newPlacedMapObject: PlacedMapObjectT = {
id: uuidv4(),
map: mapEditorStore.map,
mapObject: mapEditorStore.selectedMapObject,
depth: 0,
map: map,
mapObject: mapEditorStore.selectedMapObject!,
isRotated: false,
positionX: tile.x,
positionY: tile.y
}
// Add new object to mapObjects
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newPlacedMapObject as PlacedMapObjectT)
map.placedMapObjects.concat(newPlacedMapObject)
}
function eraser(pointer: Phaser.Input.Pointer) {
// Check if map is set
if (!mapEditorStore.map) return
// Check if tool is eraser
if (mapEditorStore.tool !== 'eraser') return
// Check if draw mode is map_object
if (mapEditorStore.eraserMode !== 'map_object') 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
// Check if alt is pressed, this means we are selecting the object
if (pointer.event.altKey) return
function eraser(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
// Check if there is a tile
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if object already exists on position
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
if (!existingPlacedMapObject) return
// Remove existing object
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
}
function objectPicker(pointer: Phaser.Input.Pointer) {
// Check if map is set
if (!mapEditorStore.map) return
// Check if tool is pencil
if (mapEditorStore.tool !== 'pencil') return
// Check if draw mode is map_object
if (mapEditorStore.drawMode !== 'map_object') 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
// If alt is not pressed, return
if (!pointer.event.altKey) return
function objectPicker(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
// Check if there is a tile
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if object already exists on position
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
if (!existingPlacedMapObject) return
// Select the object
mapEditorStore.setSelectedMapObject(existingPlacedMapObject.mapObject)
}
function moveMapObject(id: string) {
// Check if map is set
if (!mapEditorStore.map) return
movingPlacedMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
function moveMapObject(id: string, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
function handlePointerMove(pointer: Phaser.Input.Pointer) {
if (!movingPlacedMapObject.value) return
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
if (!tile) return
movingPlacedMapObject.value.positionX = tile.x
@ -153,11 +98,8 @@ function moveMapObject(id: string) {
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
}
function rotatePlacedMapObject(id: string) {
// Check if map is set
if (!mapEditorStore.map) return
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.map((placedMapObject) => {
function rotatePlacedMapObject(id: string, map: MapT) {
map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
if (placedMapObject.id === id) {
return {
...placedMapObject,
@ -168,11 +110,8 @@ function rotatePlacedMapObject(id: string) {
})
}
function deletePlacedMapObject(id: string) {
// Check if map is set
if (!mapEditorStore.map) return
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((object) => object.id !== id)
function deletePlacedMapObject(id: string, map: MapT) {
map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
selectedPlacedMapObject.value = null
}
@ -185,37 +124,48 @@ function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
}
}
onMounted(() => {
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)
scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
})
function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer) {
const map = mapEditor.currentMap.value
if (!map) return
onUnmounted(() => {
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)
scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
})
if (mapEditorStore.drawMode !== 'map_object') 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
// Check if alt is pressed, this means we are selecting the object
if (pointer.event.altKey) return
// Check if tool is pencil
switch (mapEditorStore.tool) {
case 'pencil':
if (mapEditorStore.selectedMapObject) pencil(pointer, tileMapLayer, map)
case 'eraser':
eraser(pointer, tileMapLayer, map)
case 'object picker':
objectPicker(pointer, tileMapLayer, map)
}
}
// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
watch(
() => mapEditorStore.mapObjectList,
(newMapObjects) => {
if (!mapEditorStore.map) return
() => mapEditor.currentMap.value,
() => {
const map = mapEditor.currentMap.value
if (!map) return
const updatedMapObjects = mapEditorStore.map.placedMapObjects.map((mapObject) => {
const updatedMapObject = newMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
if (updatedMapObject) {
return {
...mapObject,
mapObject: {
...mapObject.mapObject,
originX: updatedMapObject.originX,
originY: updatedMapObject.originY
originX: updatedMapObject.positionX,
originY: updatedMapObject.positionY
}
}
}
@ -223,19 +173,16 @@ watch(
})
// Update the map with the new mapObjects
mapEditorStore.setMap({
...mapEditorStore.map,
placedMapObjects: updatedMapObjects
})
map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
// Update selectedMapObject if it's set
// Update mapObject if it's set
if (mapEditorStore.selectedMapObject) {
const updatedMapObject = newMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
if (updatedMapObject) {
mapEditorStore.setSelectedMapObject({
...mapEditorStore.selectedMapObject,
originX: updatedMapObject.originX,
originY: updatedMapObject.originY
originX: updatedMapObject.positionX,
originY: updatedMapObject.positionY
})
}
}

5
src/components/gameMaster/mapEditor/partials/CreateMap.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isCreateMapModalShown.value" @modal:close="() => mapEditor.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
</template>
@ -47,6 +47,7 @@ const emit = defineEmits(['create'])
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const modalRef = useTemplateRef('modalRef')
const name = ref('')
const width = ref(0)
@ -79,6 +80,6 @@ async function submit() {
})
// Close modal
mapEditor.toggleCreateMapModal()
modalRef.value?.close()
}
</script>

18
src/components/gameMaster/mapEditor/partials/MapList.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="mapEditor.isMapListModalShown.value" @modal:close="() => mapEditor.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
<Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Maps</h3>
</template>
@ -7,7 +7,7 @@
<div class="my-4 mx-auto h-full">
<div class="text-center mb-4 px-2 flex gap-2.5">
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => mapEditor.toggleCreateMapModal()">New</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => $emit('open-create-map')">New</button>
</div>
<div class="overflow-y-auto h-[calc(100%-20px)]">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
@ -25,7 +25,7 @@
</template>
</Modal>
<CreateMap @create="fetchMaps" v-if="mapEditor.isMapListModalShown.value" />
<CreateMap @create="fetchMaps" v-if="modalRef?.isModalOpen" />
</template>
<script setup lang="ts">
@ -35,13 +35,21 @@ import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onMounted, ref } from 'vue'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { onMounted, ref, useTemplateRef } from 'vue'
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const mapList = ref<Map[]>([])
const modalRef = useTemplateRef('modalRef')
defineEmits(['open-create-map'])
defineExpose({
open: () => modalRef.value?.open()
})
onMounted(async () => {
await fetchMaps()
@ -55,7 +63,7 @@ function loadMap(id: UUID) {
gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
mapEditor.loadMap(response)
})
mapEditor.toggleMapListModal()
modalRef.value?.close()
}
async function deleteMap(id: UUID) {

9
src/components/gameMaster/mapEditor/partials/MapObjectList.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isMapObjectListModalShown.value" :modal-width="645" :modal-height="260" @modal:close="() => (mapEditor.isMapObjectListModalShown.value = false)" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="645" :modal-height="260" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Map objects</h3>
</template>
@ -47,7 +47,7 @@ import Modal from '@/components/utilities/Modal.vue'
import { MapObjectStorage } from '@/storage/storages'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { liveQuery } from 'dexie'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
const mapObjectStorage = new MapObjectStorage()
const isModalOpen = ref(false)
@ -55,6 +55,11 @@ const mapEditor = useMapEditorComposable()
const searchQuery = ref('')
const selectedTags = ref<string[]>([])
const mapObjectList = ref<MapObject[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
const uniqueTags = computed(() => {
const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])

7
src/components/gameMaster/mapEditor/partials/MapSettings.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="mapEditor.isSettingsModalShown.value" @modal:close="() => mapEditor.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
</template>
@ -61,6 +61,11 @@ const width = ref(mapEditor.currentMap.value?.width)
const height = ref(mapEditor.currentMap.value?.height)
const pvp = ref(mapEditor.currentMap.value?.pvp)
const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
watch(name, (value) => {
mapEditor.updateProperty('name', value!)

20
src/components/gameMaster/mapEditor/partials/TeleportModal.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="showTeleportModal" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
<Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template>
@ -28,7 +28,7 @@
<label for="toMap">Map to teleport to</label>
<select v-model="toMap" class="input-field" name="toMap" id="toMap">
<option :value="null">Select map</option>
<option v-for="map in mapEditorStore.mapList" :key="map.id" :value="map">{{ map.name }}</option>
<option v-for="map in mapList" :key="map.id" :value="map">{{ map.name }}</option>
</select>
</div>
</div>
@ -43,18 +43,22 @@ import type { Map } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useGameStore } from '@/stores/gameStore'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { computed, onMounted, ref, watch } from 'vue'
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
const showTeleportModal = computed(() => mapEditorStore.tool === 'pencil' && mapEditorStore.drawMode === 'teleport')
const mapEditorStore = useMapEditorStore()
const gameStore = useGameStore()
const mapList = ref<Map[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open(),
})
onMounted(fetchMaps)
function fetchMaps() {
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
mapEditorStore.setMapList(response)
})
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => { mapList.value = response })
}
const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
@ -65,7 +69,7 @@ function useRefTeleportSettings() {
toPositionX: ref(settings.toPositionX),
toPositionY: ref(settings.toPositionY),
toRotation: ref(settings.toRotation),
toMap: ref(settings.toMap)
toMap: ref(settings.toMapId)
}
}
@ -76,7 +80,7 @@ function updateTeleportSettings() {
toPositionX: toPositionX.value,
toPositionY: toPositionY.value,
toRotation: toRotation.value,
toMap: toMap.value
toMapId: toMap.value
})
}
</script>

9
src/components/gameMaster/mapEditor/partials/TileList.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isTileListModalShown.value" :modal-width="645" :modal-height="600" @modal:close="() => (mapEditor.isTileListModalShown.value = false)" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="645" :modal-height="600" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Tiles</h3>
</template>
@ -87,7 +87,7 @@ import Modal from '@/components/utilities/Modal.vue'
import { TileStorage } from '@/storage/storages'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { liveQuery } from 'dexie'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
const tileStorage = new TileStorage()
const mapEditor = useMapEditorComposable()
@ -96,6 +96,11 @@ const selectedTags = ref<string[]>([])
const tileCategories = ref<Map<string, string>>(new Map())
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
const tiles = ref<Tile[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
const uniqueTags = computed(() => {
const allTags = tiles.value.flatMap((tile) => tile.tags || [])

24
src/components/gameMaster/mapEditor/partials/Toolbar.vue
View File

@ -72,10 +72,10 @@
</div>
<div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
<button class="btn-cyan px-3.5" @click="() => mapEditor.toggleMapListModal()">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
<button class="btn-cyan px-3.5" @click="() => mapEditor.toggleActive()">Exit</button>
<button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
</div>
</div>
</div>
@ -84,11 +84,11 @@
<script setup lang="ts">
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { onClickOutside } from '@vueuse/core'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
const mapEditor = useMapEditorComposable()
const emit = defineEmits(['save', 'clear'])
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list'])
// track when clicked outside of toolbar items
const toolbar = ref(null)
@ -97,10 +97,15 @@ const toolbar = ref(null)
let selectPencilOpen = ref(false)
let selectEraserOpen = ref(false)
let tileListShown = ref(false)
let mapObjectListShown = ref(false)
defineExpose({tileListShown, mapObjectListShown})
// drawMode
function setDrawMode(value: string) {
mapEditor.isTileListModalShown.value = value === 'tile'
mapEditor.isMapObjectListModalShown.value = value === 'map_object'
if (value === 'tile') emit('open-tile-list')
if (value === 'map_object') emit('open-map-object-list')
mapEditor.setDrawMode(value)
selectPencilOpen.value = false
@ -108,13 +113,13 @@ function setDrawMode(value: string) {
// drawMode
function setEraserMode(value: string) {
mapEditor.setEraserMode(value)
mapEditorStore.setTool('eraser')
selectEraserOpen.value = false
}
function handleClick(tool: string) {
if (tool === 'settings') {
mapEditor.toggleSettingsModal()
emit('open-settings')
} else {
mapEditor.setTool(tool)
}
@ -125,8 +130,7 @@ function handleClick(tool: string) {
function cycleToolMode(tool: 'pencil' | 'eraser') {
const modes = ['tile', 'object', 'teleport', 'blocking tile']
const currentMode = tool === 'pencil' ? mapEditor.drawMode : mapEditor.eraserMode
const currentIndex = modes.indexOf(currentMode.value)
const currentIndex = modes.indexOf(mapEditorStore.drawMode)
const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]