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

Toolbar improvements

Browse Source
This commit is contained in:
Dennis Postma
2024-07-11 19:22:06 +02:00
parent 2cda650eca
commit c0571120f7
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -3,13 +3,13 @@
<div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] 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="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'move' }">(M)</span>
<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-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'pencil' }">(P)</span>
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }}
@ -36,7 +36,7 @@
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'eraser' }">(E)</span>
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }}
@ -63,13 +63,13 @@
<div class="w-[1px] 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="zoneEditorStore.setTool('paint')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'paint' }">(B)</span>
<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>
<div class="w-[1px] bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2': zoneEditorStore.tool !== 'settings' }">(S)</span>
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'settings' }">(Z)</span>
</button>
</div>
@ -84,7 +84,7 @@
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useScene } from 'phavuer'
import { getTile } from '@/services/zone'
import { useZoneEditorStore } from '@/stores/zoneEditor'
@ -147,14 +147,21 @@ function drawTiles(pointer: Phaser.Input.Pointer) {
scene.input.on(Phaser.Input.Events.POINTER_UP, drawTile)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onMounted(() => {
addEventListener('keydown', initKeyShortcuts)
});
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
removeEventListener('keydown', initKeyShortcuts)
})
// Key bindings
const keyDown = (event: KeyboardEvent) => {
function initKeyShortcuts (event: KeyboardEvent) {
if (!zoneEditorStore.zone) return
if (event.key === 'm') {
zoneEditorStore.setTool('move')
}
@ -171,10 +178,9 @@ const keyDown = (event: KeyboardEvent) => {
zoneEditorStore.setTool('paint')
}
if (event.key === 's') {
if (event.key === 'z') {
console.log('settings')
zoneEditorStore.toggleSettingsModal()
}
}
addEventListener('keydown', keyDown)
</script>