From 8bbfb867ae2ac2b0fd18b421285c3245f87f23e0 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 11 Jul 2024 18:42:06 +0200
Subject: [PATCH] Added key bindings to zone editor

---
 .../utilities/zoneEditor/Toolbar.vue          | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index 924ff96..5077a52 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -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" />
+          <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>
         </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" />
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2': 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" />
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2': 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" />
+          <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>
         </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" />
+          <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>
         </button>
       </div>
 
@@ -151,4 +151,30 @@ onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 })
+
+
+// Key bindings
+const keyDown = (event: KeyboardEvent) => {
+  if (event.key === 'm') {
+    zoneEditorStore.setTool('move')
+  }
+
+  if (event.key === 'p') {
+    zoneEditorStore.setTool('pencil')
+  }
+
+  if (event.key === 'e') {
+    zoneEditorStore.setTool('eraser')
+  }
+
+  if (event.key === 'b') {
+    zoneEditorStore.setTool('paint')
+  }
+
+  if (event.key === 's') {
+    zoneEditorStore.toggleSettingsModal()
+  }
+}
+
+addEventListener('keydown', keyDown)
 </script>