Toolbar improvements

src/components/utilities/assetManager/partials/TileDetails.vue

@@ -36,9 +36,9 @@ const tileImageUrl = computed(() => `${config.server_endpoint}/assets/tiles/${se
 
 watch(selectedTile, fetchTileTags)
 
-function fetchTileTags(tile: string) {
+function fetchTileTags() {
-  if (config.development) console.log('P241 selectedTile', tile)
+  if (!selectedTile.value) return
-  socket.connection.emit('gm:tile:tags', { tile }, (response: string[]) => {
+  socket.connection.emit('gm:tile:tags', { selectedTile }, (response: string[]) => {
     tags.value = response
   })
 }

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" /> <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>