imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

More unspaghettification

Browse Source
This commit is contained in:
Colin Kallemein 2024-09-21 19:52:07 +02:00
parent 0a02e261b4
commit 83d9cc1516
1 changed files with 30 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="flex justify-center p-5">
<div class="toolbar fixed bottom-0 m-3 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<div ref="clickOutsideElement" 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-50 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="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
</button>
<div class="w-px bg-cyan"></div>
<button ref="clickOutsidePencil" 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="handleClick('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="handleClick('pencil')">
<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 }">
@ -35,7 +35,7 @@
<div class="w-px bg-cyan"></div>
<button ref="clickOutsideEraser" 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="handleClick('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="handleClick('eraser')">
<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 }">
@ -68,7 +68,7 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleSettingsClick" v-if="zoneEditorStore.zone">
<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="ml-2.5">(Z)</span>
</button>
</div>
@ -99,8 +99,8 @@ const props = defineProps({
const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
const clickOutsidePencil = ref(null)
const clickOutsideEraser = ref(null)
// track when clicked outside of toolbar items
const clickOutsideElement = ref(null)
// track select state
let selectPencilOpen = ref(false)
@ -108,12 +108,9 @@ let selectEraserOpen = ref(false)
// drawMode
function setDrawMode(value: string) {
if (value === 'tile') {
zoneEditorStore.isTileListModalShown = true
}
if (value === 'object') {
zoneEditorStore.isObjectListModalShown = true
}
zoneEditorStore.isTileListModalShown = value === 'tile'
zoneEditorStore.isObjectListModalShown = value === 'object'
zoneEditorStore.setDrawMode(value)
selectPencilOpen.value = false
}
@ -125,21 +122,14 @@ function setEraserMode(value: string) {
}
function clickTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
return
}
if (pointer.event.shiftKey) {
return
}
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
if (pointer.event.shiftKey) return
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
if (!pointer_tile) {
return
}
if (!pointer_tile) return
if (zoneEditorStore.tool === 'eraser') {
emit('eraser', pointer_tile)
@ -173,65 +163,39 @@ onBeforeUnmount(() => {
})
function handleClick(tool: string) {
zoneEditorStore.setTool(tool)
if(tool === 'pencil') {
selectPencilOpen.value = !selectPencilOpen.value
selectEraserOpen.value = false
} else if(tool === 'eraser') {
selectEraserOpen.value = !selectEraserOpen.value
selectPencilOpen.value = false
if(tool === 'settings') {
zoneEditorStore.toggleSettingsModal()
} else {
selectEraserOpen.value = false
selectPencilOpen.value = false
zoneEditorStore.setTool(tool)
}
}
function handleSettingsClick() {
zoneEditorStore.toggleSettingsModal()
selectEraserOpen.value = false
selectPencilOpen.value = false
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
}
// Key bindings
function initKeyShortcuts(event: KeyboardEvent) {
if (!zoneEditorStore.zone) return
// prevent if focussed on composables
// prevent if focused on composables
if (document.activeElement?.tagName === 'INPUT') return
if (event.key === 'm') {
handleClick('move')
}
const keyActions: any = {
'm': 'move',
'p': 'pencil',
'e': 'eraser',
'b': 'paint',
'z': 'settings'
};
if (event.key === 'p') {
handleClick('pencil')
}
if (event.key === 'e') {
handleClick('eraser')
}
if (event.key === 'b') {
handleClick('paint')
}
if (event.key === 'z') {
handleSettingsClick()
if (keyActions.hasOwnProperty(event.key)) {
handleClick(keyActions[event.key]);
}
}
onClickOutside(clickOutsidePencil, handleClickOutside, {ignore: [clickOutsideEraser]})
onClickOutside(clickOutsideEraser, handleClickOutside, {ignore: [clickOutsidePencil]})
onClickOutside(clickOutsideElement, handleClickOutside)
function handleClickOutside() {
if (selectPencilOpen.value) {
selectPencilOpen.value = false
}
if(selectEraserOpen.value) {
selectEraserOpen.value = false
}
selectPencilOpen.value = false
selectEraserOpen.value = false
}
</script>