Replaced walk sound, removed redundant logic, removed emits in favour of using mapEditor directly (less logic), added soundStorage clear to reset cmd

src/App.vue

@@ -2,7 +2,7 @@
   <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive" />
+  <GmPanel v-if="gameStore.character?.role === 'gm'" />
   <component :is="currentScreen" />
 </template>
 
@@ -48,10 +48,9 @@ addEventListener('click', (event) => {
   const classList = ['btn-cyan', 'btn-red', 'btn-indigo', 'btn-empty', 'btn-sound']
   const target = event.target as HTMLElement
   // console.log(target) // Uncomment to log the clicked element
-  if (!classList.some((className) => target.classList.contains(className))) {
+  if (classList.some((className) => target.classList.contains(className))) {
-    return // Only play sound if the clicked element is a button
+    playSound('/assets/sounds/button-click.wav')
   }
-  playSound('/assets/sounds/button-click.wav')
 })
 
 // Watch for "G" key press and toggle the gm panel

src/components/gameMaster/GmPanel.vue

@@ -6,7 +6,7 @@
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
-        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="$emit('open-map-editor')">Map editor</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="mapEditor.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>
@@ -22,8 +22,9 @@ import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
-defineEmits(['open-map-editor'])
+const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
 
 let toggle = ref('asset-manager')

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="isOpen">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
     <div class="flex flex-col gap-2.5 p-2.5">
       <div class="relative flex">
         <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
@@ -44,39 +44,22 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import type { MapObject } from '@/application/types'
-import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { MapObjectStorage } from '@/storage/storages'
 import { liveQuery } from 'dexie'
-import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const isOpen = ref(false)
 const mapObjectStorage = new MapObjectStorage()
-const isModalOpen = ref(false)
 const mapEditor = useMapEditorComposable()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 const mapObjectList = ref<MapObject[]>([])
 
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
 const uniqueTags = computed(() => {
   const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
 })
 
-const filteredMapObjects = computed(() => {
-  return mapObjectList.value.filter((object) => {
-    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
-    return matchesSearch && matchesTags
-  })
-})
-
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter((t) => t !== tag)
@@ -85,10 +68,17 @@ const toggleTag = (tag: string) => {
   }
 }
 
+const filteredMapObjects = computed(() => {
+  return mapObjectList.value.filter((object) => {
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+})
+
 let subscription: any = null
 
 onMounted(() => {
-  isModalOpen.value = true
   subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
     next: (result) => {
       mapObjectList.value = result
@@ -100,8 +90,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  if (subscription) {
+  if (!subscription) return
-    subscription.unsubscribe()
+  subscription.unsubscribe()
-  }
 })
 </script>

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -96,12 +96,6 @@ const tileCategories = ref<Map<string, string>>(new Map())
 const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
 const tiles = ref<Tile[]>([])
 
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
 const uniqueTags = computed(() => {
   const allTags = tiles.value.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))

src/components/utilities/Debug.vue

@@ -1,7 +1,15 @@
 <template></template>
 
 <script setup lang="ts">
-import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
+import {
+  CharacterHairStorage,
+  CharacterTypeStorage,
+  MapObjectStorage,
+  MapStorage,
+  SoundStorage,
+  SpriteStorage,
+  TileStorage
+} from '@/storage/storages'
 import { TextureStorage } from '@/storage/textureStorage'
 import { onMounted, onUnmounted } from 'vue'
 
@@ -12,6 +20,7 @@ const spriteStorage = new SpriteStorage()
 const characterTypeStorage = new CharacterTypeStorage()
 const characterHairStorage = new CharacterHairStorage()
 const textureStorage = new TextureStorage()
+const soundStorage = new SoundStorage()
 
 let currentString = ''
 
@@ -32,6 +41,7 @@ async function handleKeyPress(event: KeyboardEvent) {
     await characterTypeStorage.destroy()
     await characterHairStorage.destroy()
     await textureStorage.destroy()
+    await soundStorage.destroy()
     currentString = '' // Reset
   }