fix(CreaturesLibraryPage): fix hash search

rudnovd · Apr 25, 2024 · c56c2ca · c56c2ca
1 parent be96152
commit c56c2ca
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/src/components/creaturesLibrary/CreatureCard.vue b/src/components/creaturesLibrary/CreatureCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="creature.name" class="creature-card" @click="emit('click', creature)">
+  <div :id="creature.name.replaceAll(' ', '')" class="creature-card" @click="emit('click', creature)">
     <div class="creature-image">
       <ObjectPortrait :file="{ name: creature.id, alt: creature.name }" folder="/images/creatures/models" />
     </div>

diff --git a/src/router.ts b/src/router.ts
@@ -29,10 +29,10 @@ const router = createRouter({
   ],
   scrollBehavior(to, _from, savedPosition) {
     return new Promise((resolve) => {
-      if (savedPosition) {
+      if (to.hash) {
+        return document.querySelector(to.hash) ? resolve({ el: to.hash, behavior: 'smooth' }) : undefined
+      } else if (savedPosition) {
         return resolve(savedPosition)
-      } else if (to.hash) {
-        return document.querySelector(to.hash) ? resolve({ el: to.hash }) : undefined
       } else {
         return resolve({ left: 0, top: 0 })
       }

diff --git a/src/views/CreaturesLibraryPage.vue b/src/views/CreaturesLibraryPage.vue
@@ -103,14 +103,15 @@ onUnmounted(() => {
 })
 
 watch(debouncedSearch, (searchValue) => {
-  if (searchValue.length) {
+  if (!searchValue.length) return
+
+  const searchQuery = searchValue.trim().toLowerCase()
     const foundCreature = creatures.value.find((creature: Creature) => {
-      return creature.name.toLowerCase().indexOf(searchValue.trim().toLowerCase()) > -1
+    return creature.name.toLowerCase().includes(searchQuery)
     })
 
     if (foundCreature) {
-      router.replace({ hash: `#${foundCreature.name}` })
-    }
+    router.replace({ hash: `#${foundCreature.name.replaceAll(' ', '')}` })
   }
 })