Renamed zone > map
This commit is contained in:
@ -6,7 +6,7 @@
|
||||
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
|
||||
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
|
||||
<button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => mapEditorStore.toggleActive()">Map editor</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
@ -21,11 +21,11 @@
|
||||
import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
let toggle = ref('asset-manager')
|
||||
</script>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,12 +55,12 @@ import type { Object } from '@/application/types'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const selectedObject = computed(() => assetManagerStore.selectedObject)
|
||||
|
||||
@ -106,8 +106,8 @@ function refreshObjectList(unsetSelectedObject = true) {
|
||||
assetManagerStore.setSelectedObject(null)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.active) {
|
||||
zoneEditorStore.setObjectList(response)
|
||||
if (mapEditorStore.active) {
|
||||
mapEditorStore.setObjectList(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -28,12 +28,12 @@ import type { Tile } from '@/application/types'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const selectedTile = computed(() => assetManagerStore.selectedTile)
|
||||
|
||||
@ -73,8 +73,8 @@ function refreshTileList(unsetSelectedTile = true) {
|
||||
assetManagerStore.setSelectedTile(null)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.active) {
|
||||
zoneEditorStore.setTileList(response)
|
||||
if (mapEditorStore.active) {
|
||||
mapEditorStore.setTileList(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
73
src/components/gameMaster/mapEditor/MapEditor.vue
Normal file
73
src/components/gameMaster/mapEditor/MapEditor.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<MapTiles @tileMap:create="tileMap = $event" />
|
||||
<MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
|
||||
<Toolbar @save="save" @clear="clear" />
|
||||
|
||||
<MapList />
|
||||
<TileList />
|
||||
<ObjectList />
|
||||
|
||||
<MapSettings />
|
||||
<TeleportModal />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Map } from '@/application/types'
|
||||
import ObjectList from '@/components/gameMaster/mapEditor/partials/ObjectList.vue'
|
||||
import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
|
||||
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
|
||||
// Components
|
||||
import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
|
||||
import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
|
||||
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
|
||||
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
|
||||
import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/MapObjects.vue'
|
||||
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { onUnmounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
function clear() {
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Clear objects, event tiles and tiles
|
||||
mapEditorStore.map.mapObjects = []
|
||||
mapEditorStore.map.mapEventTiles = []
|
||||
mapEditorStore.triggerClearTiles()
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
const data = {
|
||||
mapId: mapEditorStore.map.id,
|
||||
name: mapEditorStore.mapSettings.name,
|
||||
width: mapEditorStore.mapSettings.width,
|
||||
height: mapEditorStore.mapSettings.height,
|
||||
tiles: mapEditorStore.map.tiles,
|
||||
pvp: mapEditorStore.map.pvp,
|
||||
mapEffects: mapEditorStore.map.mapEffects.map(({ id, mapId, effect, strength }) => ({ id, mapId, effect, strength })),
|
||||
mapEventTiles: mapEditorStore.map.mapEventTiles.map(({ id, mapId, type, positionX, positionY, teleport }) => ({ id, mapId, type, positionX, positionY, teleport })),
|
||||
mapObjects: mapEditorStore.map.mapObjects.map(({ id, mapId, objectId, depth, isRotated, positionX, positionY }) => ({ id, mapId, objectId, depth, isRotated, positionX, positionY }))
|
||||
}
|
||||
|
||||
if (mapEditorStore.isSettingsModalShown) {
|
||||
mapEditorStore.toggleSettingsModal()
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:map_editor:map:update', data, (response: Map) => {
|
||||
mapEditorStore.setMap(response)
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
mapEditorStore.reset()
|
||||
})
|
||||
</script>
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
|
||||
<Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ZoneEventTileType, type ZoneEventTile } from '@/application/types'
|
||||
import { MapEventTileType, type MapEventTile } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function getImageProps(tile: ZoneEventTile) {
|
||||
function getImageProps(tile: MapEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
|
||||
@ -27,14 +27,14 @@ function getImageProps(tile: ZoneEventTile) {
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
|
||||
if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -47,42 +47,42 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (existingEventTile) return
|
||||
|
||||
// If teleport, check if there is a selected zone
|
||||
if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
|
||||
// If teleport, check if there is a selected map
|
||||
if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
mapId: mapEditorStore.map.id,
|
||||
map: mapEditorStore.map,
|
||||
type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
zoneEditorStore.drawMode === 'teleport'
|
||||
mapEditorStore.drawMode === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: zoneEditorStore.teleportSettings.toRotation
|
||||
toMapId: mapEditorStore.teleportSettings.toMapId,
|
||||
toPositionX: mapEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: mapEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: mapEditorStore.teleportSettings.toRotation
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
|
||||
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
if (mapEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
|
||||
if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -95,11 +95,11 @@ function eraser(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (!existingEventTile) return
|
||||
|
||||
// Remove existing event tile
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<Image v-if="gameStore.getLoadedAsset(props.mapObject.object.id)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, PlacedMapObject } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
mapObject: PlacedMapObject
|
||||
selectedMapObject: PlacedMapObject | null
|
||||
movingMapObject: PlacedMapObject | null
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const imageProps = computed(() => ({
|
||||
alpha: props.movingMapObject?.id === props.mapObject.id ? 0.5 : 1,
|
||||
tint: props.selectedMapObject?.id === props.mapObject.id ? 0x00ff00 : 0xffffff,
|
||||
depth: calculateIsometricDepth(props.mapObject.positionX, props.mapObject.positionY, props.mapObject.object.frameWidth, props.mapObject.object.frameHeight),
|
||||
x: tileToWorldX(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
|
||||
flipX: props.mapObject.isRotated,
|
||||
texture: props.mapObject.object.id,
|
||||
originY: Number(props.mapObject.object.originX),
|
||||
originX: Number(props.mapObject.object.originY)
|
||||
}))
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.mapObject.object.id,
|
||||
data: '/assets/objects/' + props.mapObject.object.id + '.png',
|
||||
group: 'objects',
|
||||
updatedAt: props.mapObject.object.updatedAt,
|
||||
frameWidth: props.mapObject.object.frameWidth,
|
||||
frameHeight: props.mapObject.object.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
|
||||
<ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="clickZoneObject(zoneObject)" />
|
||||
<SelectedMapObject v-if="selectedMapObject" :mapObject="selectedMapObject" :movingMapObject="movingMapObject" @move="moveMapObject" @rotate="rotateMapObject" @delete="deleteMapObject" />
|
||||
<MapObject v-for="mapObject in mapEditorStore.map?.mapObjects" :tilemap="tilemap" :mapObject :selectedMapObject :movingMapObject @pointerup="clickMapObject(mapObject)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneObject as ZoneObjectT } from '@/application/types'
|
||||
import type { PlacedMapObject as MapObjectT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
|
||||
import { getTile } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import SelectedMapObject from '@/components/gameMaster/mapEditor/partials/SelectedMapObject.vue'
|
||||
import MapObject from '@/components/gameMaster/mapEditor/mapPartials/MapObject.vue'
|
||||
import { getTile } from '@/composables/mapComposable'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const selectedZoneObject = ref<ZoneObjectT | null>(null)
|
||||
const movingZoneObject = ref<ZoneObjectT | null>(null)
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const selectedMapObject = ref<MapObjectT | null>(null)
|
||||
const movingMapObject = ref<MapObjectT | null>(null)
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.drawMode !== 'object') return
|
||||
if (mapEditorStore.drawMode !== 'object') return
|
||||
|
||||
// Check if there is a selected object
|
||||
if (!zoneEditorStore.selectedObject) return
|
||||
if (!mapEditorStore.selectedObject) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -49,34 +49,34 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
const existingObject = mapEditorStore.map?.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (existingObject) return
|
||||
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
objectId: zoneEditorStore.selectedObject.id,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
mapId: mapEditorStore.map.id,
|
||||
map: mapEditorStore.map,
|
||||
objectId: mapEditorStore.selectedObject.id,
|
||||
object: mapEditorStore.selectedObject,
|
||||
depth: 0,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
|
||||
// Add new object to zoneObjects
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObjectT)
|
||||
// Add new object to mapObjects
|
||||
mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.concat(newObject as MapObjectT)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is eraser
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
if (mapEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.eraserMode !== 'object') return
|
||||
if (mapEditorStore.eraserMode !== 'object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -92,22 +92,22 @@ function eraser(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (!existingObject) return
|
||||
|
||||
// Remove existing object
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
|
||||
mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== existingObject.id)
|
||||
}
|
||||
|
||||
function objectPicker(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.drawMode !== 'object') return
|
||||
if (mapEditorStore.drawMode !== 'object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -123,44 +123,44 @@ function objectPicker(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (!existingObject) return
|
||||
|
||||
// Select the object
|
||||
zoneEditorStore.setSelectedObject(existingObject)
|
||||
mapEditorStore.setSelectedObject(existingObject)
|
||||
}
|
||||
|
||||
function moveZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
function moveMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObjectT
|
||||
movingMapObject.value = mapEditorStore.map.mapObjects.find((object) => object.id === id) as MapObjectT
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (!movingZoneObject.value) return
|
||||
if (!movingMapObject.value) return
|
||||
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
movingZoneObject.value.positionX = tile.x
|
||||
movingZoneObject.value.positionY = tile.y
|
||||
movingMapObject.value.positionX = tile.x
|
||||
movingMapObject.value.positionY = tile.y
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
|
||||
function handlePointerUp() {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
movingZoneObject.value = null
|
||||
movingMapObject.value = null
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
function rotateZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
function rotateMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
|
||||
mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.map((object) => {
|
||||
if (object.id === id) {
|
||||
return {
|
||||
...object,
|
||||
@ -171,20 +171,20 @@ function rotateZoneObject(id: string) {
|
||||
})
|
||||
}
|
||||
|
||||
function deleteZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
function deleteMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
|
||||
selectedZoneObject.value = null
|
||||
mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== id)
|
||||
selectedMapObject.value = null
|
||||
}
|
||||
|
||||
function clickZoneObject(zoneObject: ZoneObjectT) {
|
||||
selectedZoneObject.value = zoneObject
|
||||
function clickMapObject(mapObject: MapObjectT) {
|
||||
selectedMapObject.value = mapObject
|
||||
|
||||
// If alt is pressed, select the object
|
||||
if (scene.input.activePointer.event.altKey) {
|
||||
zoneEditorStore.setSelectedObject(zoneObject.object)
|
||||
mapEditorStore.setSelectedObject(mapObject.object)
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,39 +204,39 @@ onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
|
||||
})
|
||||
|
||||
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
|
||||
// watch mapEditorStore.objectList and update originX and originY of objects in mapObjects
|
||||
watch(
|
||||
() => zoneEditorStore.objectList,
|
||||
() => mapEditorStore.objectList,
|
||||
(newObjects) => {
|
||||
if (!zoneEditorStore.zone) return
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
|
||||
const updatedMapObjects = mapEditorStore.map.mapObjects.map((mapObject) => {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === mapObject.object.id)
|
||||
if (updatedObject) {
|
||||
return {
|
||||
...zoneObject,
|
||||
...mapObject,
|
||||
object: {
|
||||
...zoneObject.object,
|
||||
...mapObject.object,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
}
|
||||
}
|
||||
}
|
||||
return zoneObject
|
||||
return mapObject
|
||||
})
|
||||
|
||||
// Update the zone with the new zoneObjects
|
||||
zoneEditorStore.setZone({
|
||||
...zoneEditorStore.zone,
|
||||
zoneObjects: updatedZoneObjects
|
||||
// Update the map with the new mapObjects
|
||||
mapEditorStore.setMap({
|
||||
...mapEditorStore.map,
|
||||
mapObjects: updatedMapObjects
|
||||
})
|
||||
|
||||
// Update selectedObject if it's set
|
||||
if (zoneEditorStore.selectedObject) {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
|
||||
if (mapEditorStore.selectedObject) {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === mapEditorStore.selectedObject?.id)
|
||||
if (updatedObject) {
|
||||
zoneEditorStore.setSelectedObject({
|
||||
...zoneEditorStore.selectedObject,
|
||||
mapEditorStore.setSelectedObject({
|
||||
...mapEditorStore.selectedObject,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
})
|
||||
@ -6,9 +6,9 @@
|
||||
import config from '@/application/config'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
|
||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
@ -16,7 +16,7 @@ const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const tileMap = createTileMap()
|
||||
const tileLayer = createTileLayer()
|
||||
|
||||
@ -26,16 +26,16 @@ const tileLayer = createTileLayer()
|
||||
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
|
||||
*/
|
||||
function createTileMap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.zone?.width,
|
||||
height: zoneEditorStore.zone?.height,
|
||||
const mapData = new Phaser.Tilemaps.MapData({
|
||||
width: mapEditorStore.map?.width,
|
||||
height: mapEditorStore.map?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
|
||||
emit('tileMap:create', newTileMap)
|
||||
|
||||
return newTileMap
|
||||
@ -62,17 +62,17 @@ function createTileLayer() {
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.drawMode !== 'tile') return
|
||||
if (mapEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
if (!mapEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -85,21 +85,21 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
if (mapEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.eraserMode !== 'tile') return
|
||||
if (mapEditorStore.eraserMode !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -117,19 +117,19 @@ function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Place tile
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'paint') return
|
||||
if (mapEditorStore.tool !== 'paint') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
if (!mapEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -141,22 +141,22 @@ function paint(pointer: Phaser.Input.Pointer) {
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
// Set new tileArray with selected tile
|
||||
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile))
|
||||
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile)
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
mapEditorStore.map.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) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.drawMode !== 'tile') return
|
||||
if (mapEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -172,36 +172,36 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
|
||||
if (!tile) return
|
||||
|
||||
// Select the tile
|
||||
zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
|
||||
mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
|
||||
}
|
||||
|
||||
watch(
|
||||
() => zoneEditorStore.shouldClearTiles,
|
||||
() => mapEditorStore.shouldClearTiles,
|
||||
(shouldClear) => {
|
||||
if (shouldClear && zoneEditorStore.zone) {
|
||||
if (shouldClear && mapEditorStore.map) {
|
||||
const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
|
||||
setLayerTiles(tileMap, tileLayer, blankTiles)
|
||||
zoneEditorStore.zone.tiles = blankTiles
|
||||
zoneEditorStore.resetClearTilesFlag()
|
||||
mapEditorStore.map.tiles = blankTiles
|
||||
mapEditorStore.resetClearTilesFlag()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (!zoneEditorStore.zone?.tiles) {
|
||||
if (!mapEditorStore.map?.tiles) {
|
||||
return
|
||||
}
|
||||
|
||||
// First fill the entire map with blank tiles using current zone dimensions
|
||||
const blankTiles = createTileArray(zoneEditorStore.zone.width, zoneEditorStore.zone.height, 'blank_tile')
|
||||
// First fill the entire map with blank tiles using current map dimensions
|
||||
const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
|
||||
|
||||
// Then overlay the zone tiles, but only within the current zone dimensions
|
||||
const zoneTiles = zoneEditorStore.zone.tiles
|
||||
for (let y = 0; y < zoneEditorStore.zone.height; y++) {
|
||||
for (let x = 0; x < zoneEditorStore.zone.width; x++) {
|
||||
// Then overlay the map tiles, but only within the current map dimensions
|
||||
const mapTiles = mapEditorStore.map.tiles
|
||||
for (let y = 0; y < mapEditorStore.map.height; y++) {
|
||||
for (let x = 0; x < mapEditorStore.map.width; x++) {
|
||||
// Only copy if the source tiles array has this position
|
||||
if (zoneTiles[y] && zoneTiles[y][x] !== undefined) {
|
||||
blankTiles[y][x] = zoneTiles[y][x]
|
||||
if (mapTiles[y] && mapTiles[y][x] !== undefined) {
|
||||
blankTiles[y][x] = mapTiles[y][x]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
|
||||
<Modal :isModalOpen="true" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :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 zone</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
@ -36,23 +36,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Zone } from '@/application/types'
|
||||
import type { Map } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const name = ref('')
|
||||
const width = ref(0)
|
||||
const height = ref(0)
|
||||
|
||||
function submit() {
|
||||
gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
gameStore.connection.emit('gm:map_editor:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
|
||||
mapEditorStore.setMapList(response)
|
||||
})
|
||||
zoneEditorStore.toggleCreateZoneModal()
|
||||
mapEditorStore.toggleCreateMapModal()
|
||||
}
|
||||
</script>
|
||||
61
src/components/gameMaster/mapEditor/partials/MapList.vue
Normal file
61
src/components/gameMaster/mapEditor/partials/MapList.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<CreateMap v-if="mapEditorStore.isCreateMapModalShown" />
|
||||
<Modal :is-modal-open="mapEditorStore.isMapListModalShown" @modal:close="() => mapEditorStore.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Maps</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto">
|
||||
<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="() => mapEditorStore.toggleCreateMapModal()">New</button>
|
||||
</div>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapEditorStore.mapList" :key="map.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
|
||||
<span>{{ map.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Map } from '@/application/types'
|
||||
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
onMounted(async () => {
|
||||
fetchMaps()
|
||||
})
|
||||
|
||||
function fetchMaps() {
|
||||
gameStore.connection?.emit('gm:map_editor:map:list', {}, (response: Map[]) => {
|
||||
mapEditorStore.setMapList(response)
|
||||
})
|
||||
}
|
||||
|
||||
function loadMap(id: number) {
|
||||
gameStore.connection?.emit('gm:map_editor:map:request', { mapId: id }, (response: Map) => {
|
||||
mapEditorStore.setMap(response)
|
||||
})
|
||||
mapEditorStore.toggleMapListModal()
|
||||
}
|
||||
|
||||
function deleteMap(id: number) {
|
||||
gameStore.connection?.emit('gm:map_editor:map:delete', { mapId: id }, () => {
|
||||
fetchMaps()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
|
||||
<Modal :is-modal-open="mapEditorStore.isSettingsModalShown" @modal:close="() => mapEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
|
||||
<div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
|
||||
<div v-for="(effect, index) in mapEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
|
||||
<input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
|
||||
<input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
|
||||
<button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
|
||||
@ -48,59 +48,59 @@
|
||||
|
||||
<script setup>
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const screen = ref('settings')
|
||||
|
||||
zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
|
||||
zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
|
||||
zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
|
||||
zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
|
||||
zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
|
||||
mapEditorStore.setMapName(mapEditorStore.map?.name)
|
||||
mapEditorStore.setMapWidth(mapEditorStore.map?.width)
|
||||
mapEditorStore.setMapHeight(mapEditorStore.map?.height)
|
||||
mapEditorStore.setMapPvp(mapEditorStore.map?.pvp)
|
||||
mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects)
|
||||
|
||||
const name = ref(zoneEditorStore.zoneSettings?.name)
|
||||
const width = ref(zoneEditorStore.zoneSettings?.width)
|
||||
const height = ref(zoneEditorStore.zoneSettings?.height)
|
||||
const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
|
||||
const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
|
||||
const name = ref(mapEditorStore.mapSettings?.name)
|
||||
const width = ref(mapEditorStore.mapSettings?.width)
|
||||
const height = ref(mapEditorStore.mapSettings?.height)
|
||||
const pvp = ref(mapEditorStore.mapSettings?.pvp)
|
||||
const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])
|
||||
|
||||
watch(name, (value) => {
|
||||
zoneEditorStore.setZoneName(value)
|
||||
mapEditorStore.setMapName(value)
|
||||
})
|
||||
|
||||
watch(width, (value) => {
|
||||
zoneEditorStore.setZoneWidth(value)
|
||||
mapEditorStore.setMapWidth(value)
|
||||
})
|
||||
|
||||
watch(height, (value) => {
|
||||
zoneEditorStore.setZoneHeight(value)
|
||||
mapEditorStore.setMapHeight(value)
|
||||
})
|
||||
|
||||
watch(pvp, (value) => {
|
||||
zoneEditorStore.setZonePvp(value)
|
||||
mapEditorStore.setMapPvp(value)
|
||||
})
|
||||
|
||||
watch(
|
||||
zoneEffects,
|
||||
mapEffects,
|
||||
(value) => {
|
||||
zoneEditorStore.setZoneEffects(value)
|
||||
mapEditorStore.setMapEffects(value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const addEffect = () => {
|
||||
zoneEffects.value.push({
|
||||
mapEffects.value.push({
|
||||
id: Date.now().toString(), // Simple unique id generation
|
||||
zoneId: zoneEditorStore.zone?.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
mapId: mapEditorStore.map?.id,
|
||||
map: mapEditorStore.map,
|
||||
effect: '',
|
||||
strength: 1
|
||||
})
|
||||
}
|
||||
|
||||
const removeEffect = (index) => {
|
||||
zoneEffects.value.splice(index, 1)
|
||||
mapEffects.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
|
||||
<Modal :isModalOpen="mapEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (mapEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Objects</h3>
|
||||
</template>
|
||||
@ -25,11 +25,11 @@
|
||||
class="border-2 border-solid max-w-full"
|
||||
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
|
||||
alt="Object"
|
||||
@click="zoneEditorStore.setSelectedObject(object)"
|
||||
@click="mapEditorStore.setSelectedObject(object)"
|
||||
:class="{
|
||||
'cursor-pointer transition-all duration-300': true,
|
||||
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
|
||||
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
|
||||
'border-cyan shadow-lg scale-105': mapEditorStore.selectedObject?.id === object.id,
|
||||
'border-transparent hover:border-gray-300': mapEditorStore.selectedObject?.id !== object.id
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
@ -42,25 +42,25 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { Object, ZoneObject } from '@/application/types'
|
||||
import type { Object, PlacedMapObject } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
|
||||
const allTags = mapEditorStore.objectList.flatMap((obj) => obj.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const filteredObjects = computed(() => {
|
||||
return zoneEditorStore.objectList.filter((object) => {
|
||||
return mapEditorStore.objectList.filter((object) => {
|
||||
const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
|
||||
return matchesSearch && matchesTags
|
||||
@ -78,7 +78,7 @@ const toggleTag = (tag: string) => {
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
|
||||
zoneEditorStore.setObjectList(response)
|
||||
mapEditorStore.setObjectList(response)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -11,23 +11,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneObject } from '@/application/types'
|
||||
import type { PlacedMapObject } from '@/application/types'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneObject: ZoneObject
|
||||
mapObject: PlacedMapObject
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['move', 'rotate', 'delete'])
|
||||
|
||||
const handleMove = () => {
|
||||
emit('move', props.zoneObject.id)
|
||||
emit('move', props.mapObject.id)
|
||||
}
|
||||
|
||||
const handleRotate = () => {
|
||||
emit('rotate', props.zoneObject.id)
|
||||
emit('rotate', props.mapObject.id)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.zoneObject.id)
|
||||
emit('delete', props.mapObject.id)
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
|
||||
<Modal :is-modal-open="showTeleportModal" @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>
|
||||
@ -25,10 +25,10 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="toZoneId">Zone to teleport to</label>
|
||||
<select v-model="toZoneId" class="input-field" 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>
|
||||
<label for="toMapId">Map to teleport to</label>
|
||||
<select v-model="toMapId" class="input-field" name="toMapId" id="toMapId">
|
||||
<option :value="0">Select map</option>
|
||||
<option v-for="map in mapEditorStore.mapList" :key="map.id" :value="map.id">{{ map.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,44 +39,44 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Zone } from '@/application/types'
|
||||
import type { Map } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const showTeleportModal = computed(() => mapEditorStore.tool === 'pencil' && mapEditorStore.drawMode === 'teleport')
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const gameStore = useGameStore()
|
||||
|
||||
onMounted(fetchZones)
|
||||
onMounted(fetchMaps)
|
||||
|
||||
function fetchZones() {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
function fetchMaps() {
|
||||
gameStore.connection?.emit('gm:map_editor:map:list', {}, (response: Map[]) => {
|
||||
mapEditorStore.setMapList(response)
|
||||
})
|
||||
}
|
||||
|
||||
const { toPositionX, toPositionY, toRotation, toZoneId } = useRefTeleportSettings()
|
||||
const { toPositionX, toPositionY, toRotation, toMapId } = useRefTeleportSettings()
|
||||
|
||||
function useRefTeleportSettings() {
|
||||
const settings = zoneEditorStore.teleportSettings
|
||||
const settings = mapEditorStore.teleportSettings
|
||||
return {
|
||||
toPositionX: ref(settings.toPositionX),
|
||||
toPositionY: ref(settings.toPositionY),
|
||||
toRotation: ref(settings.toRotation),
|
||||
toZoneId: ref(settings.toZoneId)
|
||||
toMapId: ref(settings.toMapId)
|
||||
}
|
||||
}
|
||||
|
||||
watch([toPositionX, toPositionY, toRotation, toZoneId], updateTeleportSettings)
|
||||
watch([toPositionX, toPositionY, toRotation, toMapId], updateTeleportSettings)
|
||||
|
||||
function updateTeleportSettings() {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
mapEditorStore.setTeleportSettings({
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: toPositionY.value,
|
||||
toRotation: toRotation.value,
|
||||
toZoneId: toZoneId.value
|
||||
toMapId: toMapId.value
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
|
||||
<Modal :isModalOpen="mapEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (mapEditorStore.isTileListModalShown = false)" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Tiles</h3>
|
||||
</template>
|
||||
@ -85,25 +85,25 @@ import config from '@/application/config'
|
||||
import type { Tile } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const searchQuery = ref('')
|
||||
const selectedTags = ref<string[]>([])
|
||||
const tileCategories = ref<Map<string, string>>(new Map())
|
||||
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
|
||||
|
||||
const uniqueTags = computed(() => {
|
||||
const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
|
||||
const allTags = mapEditorStore.tileList.flatMap((tile) => tile.tags || [])
|
||||
return Array.from(new Set(allTags))
|
||||
})
|
||||
|
||||
const groupedTiles = computed(() => {
|
||||
const groups: { parent: Tile; children: Tile[] }[] = []
|
||||
const filteredTiles = zoneEditorStore.tileList.filter((tile) => {
|
||||
const filteredTiles = mapEditorStore.tileList.filter((tile) => {
|
||||
const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
|
||||
return matchesSearch && matchesTags
|
||||
@ -219,17 +219,17 @@ function closeGroup() {
|
||||
}
|
||||
|
||||
function selectTile(tile: string) {
|
||||
zoneEditorStore.setSelectedTile(tile)
|
||||
mapEditorStore.setSelectedTile(tile)
|
||||
}
|
||||
|
||||
function isActiveTile(tile: Tile): boolean {
|
||||
return zoneEditorStore.selectedTile === tile.id
|
||||
return mapEditorStore.selectedTile === tile.id
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
|
||||
zoneEditorStore.setTileList(response)
|
||||
mapEditorStore.setTileList(response)
|
||||
response.forEach((tile) => processTile(tile))
|
||||
})
|
||||
})
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="flex justify-center p-5">
|
||||
<div class="toolbar fixed bottom-0 left-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">
|
||||
<div ref="toolbar" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
|
||||
<div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'move' }" @click="handleClick('move')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span>
|
||||
</button>
|
||||
|
||||
<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 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="mapEditorStore.tool === 'pencil'">
|
||||
<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" />
|
||||
{{ mapEditorStore.drawMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditorStore.tool === 'pencil'">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile')">
|
||||
Tile
|
||||
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
|
||||
@ -35,12 +35,12 @@
|
||||
|
||||
<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 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="mapEditorStore.tool === 'eraser'">
|
||||
<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" />
|
||||
{{ mapEditorStore.eraserMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('tile')">
|
||||
@ -62,31 +62,31 @@
|
||||
|
||||
<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 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'paint' }" @click="handleClick('paint')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'paint' }">(B)</span>
|
||||
</button>
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
|
||||
</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="() => zoneEditorStore.toggleZoneListModal()">Load</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditorStore.map">Save</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
|
||||
const emit = defineEmits(['save', 'clear'])
|
||||
|
||||
@ -99,24 +99,24 @@ let selectEraserOpen = ref(false)
|
||||
|
||||
// drawMode
|
||||
function setDrawMode(value: string) {
|
||||
zoneEditorStore.isTileListModalShown = value === 'tile'
|
||||
zoneEditorStore.isObjectListModalShown = value === 'object'
|
||||
mapEditorStore.isTileListModalShown = value === 'tile'
|
||||
mapEditorStore.isObjectListModalShown = value === 'object'
|
||||
|
||||
zoneEditorStore.setDrawMode(value)
|
||||
mapEditorStore.setDrawMode(value)
|
||||
selectPencilOpen.value = false
|
||||
}
|
||||
|
||||
// drawMode
|
||||
function setEraserMode(value: string) {
|
||||
zoneEditorStore.setEraserMode(value)
|
||||
mapEditorStore.setEraserMode(value)
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function handleClick(tool: string) {
|
||||
if (tool === 'settings') {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
mapEditorStore.toggleSettingsModal()
|
||||
} else {
|
||||
zoneEditorStore.setTool(tool)
|
||||
mapEditorStore.setTool(tool)
|
||||
}
|
||||
|
||||
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
|
||||
@ -125,7 +125,7 @@ function handleClick(tool: string) {
|
||||
|
||||
function cycleToolMode(tool: 'pencil' | 'eraser') {
|
||||
const modes = ['tile', 'object', 'teleport', 'blocking tile']
|
||||
const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
|
||||
const currentMode = tool === 'pencil' ? mapEditorStore.drawMode : mapEditorStore.eraserMode
|
||||
const currentIndex = modes.indexOf(currentMode)
|
||||
const nextIndex = (currentIndex + 1) % modes.length
|
||||
const nextMode = modes[nextIndex]
|
||||
@ -138,8 +138,8 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
|
||||
}
|
||||
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// prevent if focused on composables
|
||||
if (document.activeElement?.tagName === 'INPUT') return
|
||||
@ -154,7 +154,7 @@ function initKeyShortcuts(event: KeyboardEvent) {
|
||||
|
||||
if (keyActions.hasOwnProperty(event.key)) {
|
||||
const tool = keyActions[event.key]
|
||||
if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
|
||||
if ((tool === 'pencil' || tool === 'eraser') && mapEditorStore.tool === tool) {
|
||||
cycleToolMode(tool)
|
||||
} else {
|
||||
handleClick(tool)
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<ZoneTiles @tileMap:create="tileMap = $event" />
|
||||
<ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
|
||||
<Toolbar @save="save" @clear="clear" />
|
||||
|
||||
<ZoneList />
|
||||
<TileList />
|
||||
<ObjectList />
|
||||
|
||||
<ZoneSettings />
|
||||
<TeleportModal />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Zone } from '@/application/types'
|
||||
import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
|
||||
import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
|
||||
import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
|
||||
// Components
|
||||
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
|
||||
import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
|
||||
import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
|
||||
import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
|
||||
import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
|
||||
import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onUnmounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
function clear() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Clear objects, event tiles and tiles
|
||||
zoneEditorStore.zone.zoneObjects = []
|
||||
zoneEditorStore.zone.zoneEventTiles = []
|
||||
zoneEditorStore.triggerClearTiles()
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
const data = {
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
name: zoneEditorStore.zoneSettings.name,
|
||||
width: zoneEditorStore.zoneSettings.width,
|
||||
height: zoneEditorStore.zoneSettings.height,
|
||||
tiles: zoneEditorStore.zone.tiles,
|
||||
pvp: zoneEditorStore.zone.pvp,
|
||||
zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
|
||||
zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
|
||||
zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.isSettingsModalShown) {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
</script>
|
||||
@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
|
||||
<Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Zones</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto">
|
||||
<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="fetchZones">Refresh</button>
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
|
||||
</div>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
|
||||
<span>{{ zone.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteZone(zone.id)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Zone } from '@/application/types'
|
||||
import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
onMounted(async () => {
|
||||
fetchZones()
|
||||
})
|
||||
|
||||
function fetchZones() {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
|
||||
zoneEditorStore.setZoneList(response)
|
||||
})
|
||||
}
|
||||
|
||||
function loadZone(id: number) {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
zoneEditorStore.toggleZoneListModal()
|
||||
}
|
||||
|
||||
function deleteZone(id: number) {
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
|
||||
fetchZones()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, ZoneObject } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
zoneObject: ZoneObject
|
||||
selectedZoneObject: ZoneObject | null
|
||||
movingZoneObject: ZoneObject | null
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const imageProps = computed(() => ({
|
||||
alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
|
||||
tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
|
||||
depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
|
||||
x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
|
||||
flipX: props.zoneObject.isRotated,
|
||||
texture: props.zoneObject.object.id,
|
||||
originY: Number(props.zoneObject.object.originX),
|
||||
originX: Number(props.zoneObject.object.originY)
|
||||
}))
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.zoneObject.object.id,
|
||||
data: '/assets/objects/' + props.zoneObject.object.id + '.png',
|
||||
group: 'objects',
|
||||
updatedAt: props.zoneObject.object.updatedAt,
|
||||
frameWidth: props.zoneObject.object.frameWidth,
|
||||
frameHeight: props.zoneObject.object.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user