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

Unspaghettify code (WIP)

Browse Source
This commit is contained in:
Colin Kallemein 2024-09-21 18:18:46 +02:00
parent ef76ebe508
commit 0a02e261b4
1 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,13 +2,13 @@
<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">
<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="handleMoveClick">
<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="clickOutsideElement" 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">
<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')">
<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="clickOutsideElement" 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">
<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')">
<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 }">
@ -62,7 +62,7 @@
<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 === 'paint' }" @click="handlePaintClick">
<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 === 'paint' }" @click="handleClick('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
</button>
@ -99,7 +99,8 @@ const props = defineProps({
const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
const clickOutsideElement = ref(null)
const clickOutsidePencil = ref(null)
const clickOutsideEraser = ref(null)
// track select state
let selectPencilOpen = ref(false)
@ -171,28 +172,19 @@ onBeforeUnmount(() => {
removeEventListener('keydown', initKeyShortcuts)
})
function handleMoveClick() {
zoneEditorStore.setTool('move')
selectEraserOpen.value = false
selectPencilOpen.value = false
}
function handleClick(tool: string) {
zoneEditorStore.setTool(tool)
function handlePencilClick() {
zoneEditorStore.setTool('pencil')
if(tool === 'pencil') {
selectPencilOpen.value = !selectPencilOpen.value
selectEraserOpen.value = false
}
function handleEraserClick() {
zoneEditorStore.setTool('eraser')
} else if(tool === 'eraser') {
selectEraserOpen.value = !selectEraserOpen.value
selectPencilOpen.value = false
}
function handlePaintClick() {
zoneEditorStore.setTool('paint')
} else {
selectEraserOpen.value = false
selectPencilOpen.value = false
}
}
function handleSettingsClick() {
@ -209,19 +201,19 @@ function initKeyShortcuts(event: KeyboardEvent) {
if (document.activeElement?.tagName === 'INPUT') return
if (event.key === 'm') {
handleMoveClick()
handleClick('move')
}
if (event.key === 'p') {
handlePencilClick()
handleClick('pencil')
}
if (event.key === 'e') {
handleEraserClick()
handleClick('eraser')
}
if (event.key === 'b') {
handlePaintClick()
handleClick('paint')
}
if (event.key === 'z') {
@ -229,7 +221,8 @@ function initKeyShortcuts(event: KeyboardEvent) {
}
}
onClickOutside(clickOutsideElement, event => handleClickOutside())
onClickOutside(clickOutsidePencil, handleClickOutside, {ignore: [clickOutsideEraser]})
onClickOutside(clickOutsideEraser, handleClickOutside, {ignore: [clickOutsidePencil]})
function handleClickOutside() {