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

Map editor ui fixes, switching back to game from map editor, draw/tap checkbox, and partial restoration of tile picker function

Browse Source
This commit is contained in:
Andrei 2025-01-27 14:33:29 -06:00
parent 9e652868ca
commit 6bede8c44e
7 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -2,7 +2,7 @@
<Debug />
<Notifications />
<BackgroundImageLoader />
<GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.active.value = true"/>
<GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive"/>
<component :is="currentScreen" />
</template>

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

@ -30,9 +30,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
// Check if shift is not pressed, this means we are moving the camera
if (pointer.event.shiftKey) return
// Check if alt is pressed
if (pointer.event.altKey) return
// Check if draw mode is tile
switch (mapEditor.drawMode.value) {
case 'tile':

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

@ -111,10 +111,15 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
let map = mapEditor.currentMap.value
if (!map) return
console.log("herer")
if (!tileMap.value || !tileLayer.value) return
// Check if there is a tile
const tile = getTile(tileLayer.value!, pointer.worldX, pointer.worldY)
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
if (!tile) return
console.log(tile.index)
// Select the tile
mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
}
@ -145,7 +150,11 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
if (pointer.event.shiftKey) return
// Check if alt is pressed
if (pointer.event.altKey) return
if (pointer.event.altKey) {
tilePicker(pointer);
return
}
// Check if draw mode is tile
switch (mapEditor.tool.value) {
case 'pencil':
@ -157,9 +166,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
case 'paint':
paint(pointer)
break
case 'tile picker':
tilePicker(pointer)
break
}
}

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

@ -58,7 +58,8 @@ const mapObjectList = ref<MapObject[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
open: () => modalRef.value?.open(),
close: () => modalRef.value?.close()
})
const uniqueTags = computed(() => {

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

@ -99,7 +99,8 @@ const tiles = ref<Tile[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
open: () => modalRef.value?.open(),
close: () => modalRef.value?.close()
})
const uniqueTags = computed(() => {

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

@ -47,7 +47,7 @@
Tile
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object'); setEraserMode">
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setEraserMode">
Map object
<div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
</span>
@ -69,6 +69,11 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><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 class="w-px bg-cyan"></div>
<label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
<input type="checkbox">
</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">
@ -89,7 +94,7 @@ import { useScene } from 'phavuer'
const mapEditor = useMapEditorComposable()
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list'])
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
// track when clicked outside of toolbar items
const toolbar = ref(null)
@ -105,8 +110,12 @@ defineExpose({tileListShown, mapObjectListShown})
// drawMode
function setDrawMode(value: string) {
if (value === 'tile') emit('open-tile-list')
if (value === 'map_object') emit('open-map-object-list')
if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil') {
emit('close-lists')
if (value === 'tile') emit('open-tile-list')
if (value === 'map_object') emit('open-map-object-list')
}
mapEditor.setDrawMode(value)
selectPencilOpen.value = false
@ -136,7 +145,7 @@ function handleClick(tool: string) {
}
function cycleToolMode(tool: 'pencil' | 'eraser') {
const modes = ['tile', 'object', 'teleport', 'blocking tile']
const modes = ['tile', 'map_object', 'teleport', 'blocking tile']
const currentIndex = modes.indexOf(mapEditor.drawMode.value)
const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]

10
src/components/screens/MapEditor.vue
View File

@ -5,11 +5,11 @@
<div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
<div v-else>
<Map :key="mapEditor.currentMap.value?.id" />
<Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open()" @open-settings="mapSettingsModal?.open()"
@close-editor="$emit('close-editor')"
@open-tile-list="tileModal?.open()"
@open-map-object-list="objectModal?.open()"/>
<MapList ref="mapModal" @open-create-map="mapSettingsModal?.open()"/>
<Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open"
@close-editor="mapEditor.toggleActive" @close-lists="tileModal?.close" @closeLists="objectModal?.close"
@open-tile-list="tileModal?.open"
@open-map-object-list="objectModal?.open"/>
<MapList ref="mapModal" @open-create-map="mapSettingsModal?.open"/>
<TileList ref="tileModal"/>
<ObjectList ref="objectModal"/>
<MapSettings ref="mapSettingsModal" />