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

zoneEditor reactivity fixes

Browse Source
This commit is contained in:
Dennis Postma 2024-09-20 16:59:02 +02:00
parent f3b56ef5fa
commit 1a7546ba4f
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -67,8 +67,8 @@ const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eras
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
let zoneObjects = <ZoneObject[]>[]
let zoneEventTiles = <ZoneEventTile[]>[]
const zoneObjects = ref<ZoneObject[]>([])
const zoneEventTiles = ref<ZoneEventTile[]>([])
let tileArray = createTileArray()
const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
@ -125,9 +125,9 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile')
tileArray[tile.y][tile.x] = 'blank_tile'
} else if (eraserMode.value === 'object') {
zoneObjects = zoneObjects.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
} else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
zoneEventTiles = zoneEventTiles.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
}
}
@ -144,7 +144,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
function addZoneObject(tile: Phaser.Tilemaps.Tile) {
// Check if object already exists on position
const existingObject = zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
if (existingObject) return
const newObject = {
@ -157,12 +157,13 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
positionX: tile.x,
positionY: tile.y
}
zoneObjects = [...new Set([...zoneObjects, newObject])]
// Add new object to zoneObjects
zoneObjects.value = zoneObjects.value.concat(newObject)
}
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
// Check if event tile already exists on position
const existingEventTile = zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
if (existingEventTile) return
const newEventTile = {
@ -181,7 +182,7 @@ function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
}
: undefined
}
zoneEventTiles = [...new Set([...zoneEventTiles, newEventTile])] as any
zoneEventTiles.value = zoneEventTiles.value.concat(newEventTile as any)
}
function paint() {
@ -213,8 +214,8 @@ function save() {
height: zoneEditorStore.zoneSettings.height,
tiles: tileArray,
pvp: zone.value.pvp,
zoneEventTiles: zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
zoneObjects: zoneObjects.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
}
if (zoneEditorStore.isSettingsModalShown) {
@ -237,16 +238,16 @@ function clear() {
}
}
zoneEventTiles = []
zoneObjects = []
zoneEventTiles.value = []
zoneObjects.value = []
}
function updateZoneObjectDepth(depth: number) {
zoneObjects = zoneObjects.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
}
function deleteZoneObject(objectId: string) {
zoneObjects = zoneObjects.filter((object) => object.id !== objectId)
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
}
function handleMove() {
@ -261,8 +262,8 @@ onBeforeMount(async () => {
tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
}
zoneEventTiles = zone.value?.zoneEventTiles ?? []
zoneObjects = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
// Center camera
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
@ -271,8 +272,8 @@ onBeforeMount(async () => {
})
onUnmounted(() => {
zoneEventTiles = []
zoneObjects = []
zoneEventTiles.value = []
zoneObjects.value = []
tiles?.destroy()
zoneTilemap?.removeAllLayers()
zoneTilemap?.destroy()
@ -283,7 +284,7 @@ onUnmounted(() => {
watch(
objectList,
(newObjects) => {
zoneObjects = zoneObjects.map((zoneObject) => {
zoneObjects.value = zoneObjects.value.map((zoneObject) => {
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
if (updatedObject) {
return {