forked from noxious/client
idk
This commit is contained in:
@ -80,8 +80,8 @@ if (!selectedObject.value) {
|
||||
if (selectedObject.value) {
|
||||
objectName.value = selectedObject.value.name
|
||||
objectTags.value = selectedObject.value.tags
|
||||
objectOriginX.value = selectedObject.value.origin_x
|
||||
objectOriginY.value = selectedObject.value.origin_y
|
||||
objectOriginX.value = selectedObject.value.originX
|
||||
objectOriginY.value = selectedObject.value.originY
|
||||
objectIsAnimated.value = selectedObject.value.isAnimated
|
||||
objectFrameSpeed.value = selectedObject.value.frameSpeed
|
||||
objectFrameWidth.value = selectedObject.value.frameWidth
|
||||
@ -126,8 +126,8 @@ function saveObject() {
|
||||
id: selectedObject.value.id,
|
||||
name: objectName.value,
|
||||
tags: objectTags.value,
|
||||
origin_x: objectOriginX.value,
|
||||
origin_y: objectOriginY.value,
|
||||
originX: objectOriginX.value,
|
||||
originY: objectOriginY.value,
|
||||
isAnimated: objectIsAnimated.value,
|
||||
frameSpeed: objectFrameSpeed.value,
|
||||
frameWidth: objectFrameWidth.value,
|
||||
@ -147,8 +147,8 @@ watch(selectedObject, (object: Object | null) => {
|
||||
if (!object) return
|
||||
objectName.value = object.name
|
||||
objectTags.value = object.tags
|
||||
objectOriginX.value = object.origin_x
|
||||
objectOriginY.value = object.origin_y
|
||||
objectOriginX.value = object.originX
|
||||
objectOriginY.value = object.originY
|
||||
objectIsAnimated.value = object.isAnimated
|
||||
objectFrameSpeed.value = object.frameSpeed
|
||||
objectFrameWidth.value = object.frameWidth
|
||||
|
||||
@ -30,11 +30,11 @@
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-x">Origin X</label>
|
||||
<input v-model.number="action.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
<input v-model.number="action.originX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-y">Origin Y</label>
|
||||
<input v-model.number="action.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
<input v-model.number="action.originY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="is-animated">Is animated</label>
|
||||
@ -124,8 +124,8 @@ function saveSprite() {
|
||||
return {
|
||||
action: action.action,
|
||||
sprites: action.sprites,
|
||||
origin_x: action.origin_x,
|
||||
origin_y: action.origin_y,
|
||||
originX: action.originX,
|
||||
originY: action.originY,
|
||||
isAnimated: action.isAnimated,
|
||||
isLooping: action.isLooping,
|
||||
frameSpeed: action.frameSpeed,
|
||||
@ -153,8 +153,8 @@ function addNewImage() {
|
||||
sprite: selectedSprite.value,
|
||||
action: 'new_action',
|
||||
sprites: [],
|
||||
origin_x: 0,
|
||||
origin_y: 0,
|
||||
originX: 0,
|
||||
originY: 0,
|
||||
isAnimated: false,
|
||||
isLooping: false,
|
||||
frameSpeed: 0,
|
||||
|
||||
@ -1,284 +1,230 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray as any" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<TilemapLayerC :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
|
||||
<Controls :layer="tiles" />
|
||||
|
||||
<Container :depth="2">
|
||||
<Image
|
||||
:tint="zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff"
|
||||
v-for="object in sortedZoneObjects"
|
||||
:key="object.object.id"
|
||||
:x="tileToWorldX(zoneTilemap as any, object.position_x, object.position_y)"
|
||||
:y="tileToWorldY(zoneTilemap as any, object.position_x, object.position_y)"
|
||||
:texture="object.object.id"
|
||||
:originY="Number(object.object.origin_x)"
|
||||
:originX="Number(object.object.origin_y)"
|
||||
:depth="object.depth > 0 ? object.depth : undefined"
|
||||
@pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
|
||||
/>
|
||||
<Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
|
||||
</Container>
|
||||
|
||||
<Container :depth="3">
|
||||
<Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap as any, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
|
||||
<Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
|
||||
</Container>
|
||||
|
||||
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
|
||||
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('move btn clicked')" />
|
||||
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" />
|
||||
<Tiles v-if="zoneEditorStore.isTileListModalShown" />
|
||||
<Objects v-if="zoneEditorStore.isObjectListModalShown" />
|
||||
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
||||
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
|
||||
<TeleportModal v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport'" />
|
||||
<TeleportModal v-if="shouldShowTeleportModal" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
||||
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
||||
import { computed, onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
|
||||
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile } from '@/types'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import config from '@/config'
|
||||
|
||||
// Components
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
|
||||
import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
|
||||
import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
|
||||
import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
|
||||
import { type ZoneEventTile, ZoneEventTileType, type ZoneObject } from '@/types'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue'
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.zone?.width ?? 10,
|
||||
height: zoneEditorStore.zone?.height ?? 10,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode, objectDepth } = storeToRefs(zoneEditorStore)
|
||||
|
||||
const tilesetImages: Tileset[] = []
|
||||
const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
let zoneTiles = [] as string[][]
|
||||
const zoneTilemap = ref(createTilemap())
|
||||
const tiles = ref(createTileLayer())
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
const zoneEventTiles = ref<ZoneEventTile[]>([])
|
||||
const tileArray = ref(createTileArray())
|
||||
|
||||
// Sort zoneObjects by their calculated depth
|
||||
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.width))
|
||||
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.value.width))
|
||||
const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
|
||||
|
||||
let tileCount = 1
|
||||
toRaw(assetStore.assets).forEach((asset) => {
|
||||
if (asset.group !== 'tiles') return
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
|
||||
})
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
|
||||
|
||||
const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
||||
const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 0 }, () => 'blank_tile'))
|
||||
|
||||
const { objectList } = storeToRefs(zoneEditorStore)
|
||||
|
||||
watch(objectList, (newObjects) => {
|
||||
zoneObjects.value = zoneObjects.value.map((object) => {
|
||||
const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
|
||||
if (!newObject) return object
|
||||
return { ...object, object: newObject }
|
||||
function createTilemap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zone.value?.width ?? 10,
|
||||
height: zone.value?.height ?? 10,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
})
|
||||
return new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
}
|
||||
|
||||
function createTileLayer() {
|
||||
const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
|
||||
tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
|
||||
return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y)
|
||||
}
|
||||
|
||||
function createTileArray() {
|
||||
return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
function getObjectImageProps(object: ZoneObject) {
|
||||
return {
|
||||
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
|
||||
x: tileToWorldX(zoneTilemap.value, object.positionX, object.positionY),
|
||||
y: tileToWorldY(zoneTilemap.value, object.positionX, object.positionY),
|
||||
texture: object.object.id,
|
||||
originY: Number(object.object.originX),
|
||||
originX: Number(object.object.originY)
|
||||
}
|
||||
}
|
||||
|
||||
function getEventTileImageProps(tile: ZoneEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(zoneTilemap.value, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(zoneTilemap.value, tile.positionX, tile.positionY),
|
||||
texture: tile.type
|
||||
}
|
||||
}
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.eraserMode === 'tile') {
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
|
||||
zoneTiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => {
|
||||
return object.position_x !== tile.x || object.position_y !== tile.y
|
||||
})
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'blocking tile') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
|
||||
return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
|
||||
})
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'teleport') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
|
||||
return zoneTileEvent.type !== ZoneEventTileType.TELEPORT || zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
|
||||
})
|
||||
if (eraserMode.value === 'tile') {
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile')
|
||||
tileArray.value[tile.y][tile.x] = 'blank_tile'
|
||||
} else if (eraserMode.value === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
|
||||
} else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (zoneEditorStore.selectedTile === null) return
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
|
||||
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
if (zoneEditorStore.selectedObject === null) return
|
||||
|
||||
zoneObjects.value.push({
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
objectId: zoneEditorStore.selectedObject.id,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
depth: zoneEditorStore.objectDepth,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
})
|
||||
|
||||
// remove duplicates based on object, pos x and y
|
||||
zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'blocking tile') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
|
||||
zoneEventTiles.value.push({
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: ZoneEventTileType.BLOCK,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
})
|
||||
|
||||
// remove duplicates based on type, pos x and y
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'teleport') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
|
||||
zoneEventTiles.value.push({
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: ZoneEventTileType.TELEPORT,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
})
|
||||
|
||||
// remove duplicates based on type, pos x and y
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
|
||||
if (drawMode.value === 'tile' && selectedTile.value) {
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, selectedTile.value.id)
|
||||
tileArray.value[tile.y][tile.x] = selectedTile.value.id
|
||||
} else if (drawMode.value === 'object' && selectedObject.value) {
|
||||
addZoneObject(tile)
|
||||
} else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
|
||||
addZoneEventTile(tile)
|
||||
}
|
||||
}
|
||||
|
||||
function paint(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
|
||||
zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
|
||||
function addZoneObject(tile: Phaser.Tilemaps.Tile) {
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
objectId: selectedObject.value!.id,
|
||||
object: selectedObject.value!,
|
||||
depth: objectDepth.value,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
zoneObjects.value = [...new Set([...zoneObjects.value, newObject])]
|
||||
}
|
||||
|
||||
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
type: drawMode.value === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
drawMode.value === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
zoneEventTiles.value = [...new Set([...zoneEventTiles.value, newEventTile])]
|
||||
}
|
||||
|
||||
function paint() {
|
||||
if (!selectedTile.value) return
|
||||
tileArray.value.forEach((row, y) =>
|
||||
row.forEach((_, x) => {
|
||||
placeTile(zoneTilemap.value, tiles.value, x, y, selectedTile.value!.id)
|
||||
tileArray.value[y][x] = selectedTile.value!.id
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
if (!zone.value) return
|
||||
console.log('update')
|
||||
const data = {
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
name: zoneEditorStore.zone.name,
|
||||
width: zoneEditorStore.zone.width,
|
||||
height: zoneEditorStore.zone.height,
|
||||
tiles: zoneTiles,
|
||||
pvp: zoneEditorStore.zone.pvp,
|
||||
zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({
|
||||
id: tile.id,
|
||||
zoneId: tile.zoneId,
|
||||
type: tile.type,
|
||||
position_x: tile.position_x,
|
||||
position_y: tile.position_y
|
||||
})),
|
||||
zoneObjects: toRaw(zoneObjects.value).map((obj) => ({
|
||||
id: obj.id,
|
||||
zoneId: obj.zoneId,
|
||||
objectId: obj.objectId,
|
||||
depth: obj.depth,
|
||||
position_x: obj.position_x,
|
||||
position_y: obj.position_y
|
||||
}))
|
||||
zoneId: zone.value.id,
|
||||
name: zone.value.name,
|
||||
width: zone.value.width,
|
||||
height: zone.value.height,
|
||||
tiles: tileArray.value,
|
||||
pvp: zone.value.pvp,
|
||||
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 }))
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:update', data)
|
||||
|
||||
if (zoneEditorStore.isSettingsModalShown) {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
zoneTiles = exampleTilesArray
|
||||
tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
|
||||
tileArray.value = createTileArray()
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
}
|
||||
|
||||
function updateZoneObjectDepth(depth: number) {
|
||||
zoneObjects.value = zoneObjects.value.map((object) => {
|
||||
if (object.id === zoneEditorStore.selectedZoneObject?.id) {
|
||||
return { ...object, depth }
|
||||
}
|
||||
return object
|
||||
})
|
||||
zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
|
||||
}
|
||||
|
||||
function deleteZoneObject(objectId: string) {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
|
||||
}
|
||||
|
||||
function handleMove() {
|
||||
console.log('move btn clicked')
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
zoneTiles = exampleTilesArray
|
||||
tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
|
||||
|
||||
if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
|
||||
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
|
||||
zoneTiles = zoneEditorStore.zone.tiles
|
||||
|
||||
const currentZoneWidth = zoneEditorStore.zone.width ?? 0
|
||||
const currentZoneHeight = zoneEditorStore.zone.height ?? 0
|
||||
|
||||
for (let y = 0; y < currentZoneHeight; y++) {
|
||||
zoneTiles[y] = zoneTiles[y] || []
|
||||
for (let x = 0; x < currentZoneWidth; x++) {
|
||||
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'
|
||||
}
|
||||
}
|
||||
|
||||
zoneTiles.forEach((row, y) => {
|
||||
row.forEach((tileId, x) => {
|
||||
placeTile(zoneTilemap, tiles, x, y, tileId)
|
||||
})
|
||||
})
|
||||
if (zone.value?.tiles) {
|
||||
setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
|
||||
tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
|
||||
}
|
||||
|
||||
zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []
|
||||
zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
|
||||
zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
|
||||
zoneObjects.value = zone.value?.zoneObjects ?? []
|
||||
|
||||
// Center camera
|
||||
const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
tiles.destroy()
|
||||
zoneTilemap.removeAllLayers()
|
||||
zoneTilemap.destroy()
|
||||
tiles.value.destroy()
|
||||
zoneTilemap.value.removeAllLayers()
|
||||
zoneTilemap.value.destroy()
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
|
||||
// center camera
|
||||
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isObjectListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="260">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="260">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg">Objects</h3>
|
||||
<div class="flex">
|
||||
@ -9,10 +9,10 @@
|
||||
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
|
||||
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
|
||||
<!-- <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
|
||||
<!-- <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,16 +9,16 @@
|
||||
<form method="post" @submit.prevent="" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="form-field-half">
|
||||
<label for="name">X</label>
|
||||
<input class="input-cyan" v-model="x" name="name" id="name" type="number" />
|
||||
<label for="positionX">Position X</label>
|
||||
<input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Y</label>
|
||||
<input class="input-cyan" v-model="y" name="name" id="name" type="number" />
|
||||
<label for="positionY">Position Y</label>
|
||||
<input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="zoneId">Zone to teleport to</label>
|
||||
<select v-model="zoneId" class="input-cyan" name="zoneId" id="zoneId">
|
||||
<label for="toZoneId">Zone to teleport to</label>
|
||||
<select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
|
||||
<option :value="0">Select zone</option>
|
||||
<option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
|
||||
</select>
|
||||
@ -50,31 +50,31 @@ function fetchZones() {
|
||||
})
|
||||
}
|
||||
|
||||
const x = ref(zoneEditorStore.teleportSettings.x)
|
||||
const y = ref(zoneEditorStore.teleportSettings.y)
|
||||
const zoneId = ref(zoneEditorStore.teleportSettings.zoneId)
|
||||
const toPositionX = ref(zoneEditorStore.teleportSettings.toPositionX)
|
||||
const toPositionY = ref(zoneEditorStore.teleportSettings.toPositionY)
|
||||
const toZoneId = ref(zoneEditorStore.teleportSettings.toZoneId)
|
||||
|
||||
watch(zoneId, (value) => {
|
||||
watch(toZoneId, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: x.value,
|
||||
y: y.value,
|
||||
zoneId: value
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: toPositionY.value,
|
||||
toZoneId: value
|
||||
})
|
||||
})
|
||||
|
||||
watch(x, (value) => {
|
||||
watch(toPositionX, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: value,
|
||||
y: y.value,
|
||||
zoneId: zoneId.value
|
||||
toPositionX: value,
|
||||
toPositionY: toPositionY.value,
|
||||
toZoneId: toZoneId.value
|
||||
})
|
||||
})
|
||||
|
||||
watch(y, (value) => {
|
||||
watch(toPositionY, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: x.value,
|
||||
y: value,
|
||||
zoneId: zoneId.value
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: value,
|
||||
toZoneId: toZoneId.value
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isTileListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="600">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="600">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg">Tiles</h3>
|
||||
<div class="flex">
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
|
||||
{{ zoneEditorStore.drawMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
@ -35,10 +35,10 @@
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
|
||||
{{ zoneEditorStore.eraserMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
@ -120,12 +120,12 @@ function setEraserMode(value: string) {
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function drawTile(pointer: Phaser.Input.Pointer) {
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
|
||||
return
|
||||
}
|
||||
|
||||
if (pointer.event.altKey) {
|
||||
if (pointer.event.shiftKey) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -152,10 +152,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
|
||||
|
||||
function drawTiles(pointer: Phaser.Input.Pointer) {
|
||||
if (!pointer.isDown) return
|
||||
drawTile(pointer)
|
||||
clickTile(pointer)
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, drawTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
|
||||
onMounted(() => {
|
||||
@ -163,11 +163,21 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
function handlePencilClick() {
|
||||
zoneEditorStore.setTool('pencil')
|
||||
selectPencilOpen.value = !selectPencilOpen.value
|
||||
}
|
||||
|
||||
function handleEraserClick() {
|
||||
zoneEditorStore.setTool('eraser')
|
||||
selectEraserOpen.value = !selectEraserOpen.value
|
||||
}
|
||||
|
||||
// Key bindings
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
Reference in New Issue
Block a user