[a] fuse.js for fuzzy search

package.json

@@ -14,6 +14,7 @@
     "@sveltejs/adapter-node": "^1.2.4",
     "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/kit": "^1.20.5",
+    "fuse.js": "^7.0.0",
     "nprogress": "^0.2.0",
     "sass": "^1.62.0",
     "svelte": "^3.54.0",

src/lib/modules/ModCards.svelte

@@ -1,5 +1,6 @@
 <script>
   import { afterUpdate, onMount } from "svelte";
+  import Fuse from "fuse.js"; // Import Fuse.js
   import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
   import IconClose from 'svelte-material-icons/Close.svelte';
 
@@ -12,7 +13,7 @@
 
   let searchQueryInput = (event) => {
     clearTimeout(timeout);
-    timeout = setTimeout(checkOverflow, 0);
+    timeout = setTimeout(checkOverflow, 300); // Debounced input handling
   };
 
   function checkOverflow() {
@@ -35,6 +36,15 @@
     const response = await fetch(`/assets/json/${file}`);
     const data = await response.json();
     mods = data;
+    // Create Fuse instances for fuzzy search
+    fuseMods = new Fuse(mods.mods, {
+      keys: ["name", "description"],
+      threshold: 0.4 // Adjust the threshold as needed
+    });
+    fuseOptionalMods = new Fuse(mods.optional_mods, {
+      keys: ["name", "description"],
+      threshold: 0.4 // Adjust the threshold as needed
+    });
   }
 
   onMount(async () => {
@@ -47,22 +57,23 @@
     loading = false;
   });
 
-  function search(query, mods) {
-    const regex = new RegExp(query, "i");
-    return mods.filter(
-      (mod) => regex.test(mod.name) || regex.test(mod.description),
-    );
+  let fuseMods, fuseOptionalMods;
+
+  function search(query, mods, fuse) {
+    if (!query) return mods;
+    const results = fuse.search(query);
+    return results.map(result => result.item);
   }
 
   function clearInput() {
     clearTimeout(timeout);
-    timeout = setTimeout(checkOverflow, 0);
     searchQuery = "";
+    setTimeout(checkOverflow, 300); // Debounced overflow check
   }
 
   function handleFileChange(event) {
     selectedFile = event.target.value;
-    fetchData(selectedFile);
+    fetchData(selectedFile).then(() => checkOverflow());
   }
 
   afterUpdate(() => {
@@ -70,7 +81,7 @@
     removeOverflow();
     checkOverflow();
     loading = false;
-  })
+  });
 </script>
 
 <div class="search-container" role="group">
@@ -83,7 +94,7 @@
   </select>
 </div>
 <div class="results-bar">
-  <p>Results: {search(searchQuery, mods.mods).length + search(searchQuery, mods.optional_mods).length}</p>
+  <p>Results: {search(searchQuery, mods.mods, fuseMods).length + search(searchQuery, mods.optional_mods, fuseOptionalMods).length}</p>
   <a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
 </div>
 
@@ -91,12 +102,12 @@
 
 {#if loading}
   <p>Loading...</p>
-{:else if search(searchQuery, mods.mods).length === 0 && search(searchQuery, mods.optional_mods).length === 0}
+{:else if search(searchQuery, mods.mods, fuseMods).length === 0 && search(searchQuery, mods.optional_mods, fuseOptionalMods).length === 0}
   <p>⚠️ No results found.</p>
 {:else}
   <div class="grid" id="mods">
-    {#each Array(Math.ceil(search(searchQuery, mods.mods).length / 3)) as _, index}
-      {#each search(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
+    {#each Array(Math.ceil(search(searchQuery, mods.mods, fuseMods).length / 3)) as _, index}
+      {#each search(searchQuery, mods.mods, fuseMods).slice(index * 3, (index + 1) * 3) as mod}
         <a
           role="button"
           class="mod-card card contrast"
@@ -104,7 +115,7 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
+          <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
           <div class="mod-card-text-ct">
             <p class="mod-card-name">{mod.name}</p>
             <p class="mod-card-desc">{mod.description}</p>
@@ -115,11 +126,10 @@
   </div>
 
   <details open>
-    <!-- svelte-ignore a11y-no-redundant-roles -->
     <summary role="button" class="secondary">Optional Mods</summary>
     <div class="grid" id="optional-mods">
-      {#each Array(Math.ceil(search(searchQuery, mods.optional_mods).length / 3)) as _, index}
-        {#each search(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
+      {#each Array(Math.ceil(search(searchQuery, mods.optional_mods, fuseOptionalMods).length / 3)) as _, index}
+        {#each search(searchQuery, mods.optional_mods, fuseOptionalMods).slice(index * 3, (index + 1) * 3) as mod}
           <a
             role="button"
             class="mod-card card contrast"
@@ -127,7 +137,7 @@
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
+            <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
             <div class="mod-card-text-ct">
               <p class="mod-card-name">{mod.name}</p>
               <p class="mod-card-desc">{mod.description}</p>
@@ -164,7 +174,6 @@
     width: 100%;
     display: flex;
     align-items: center;
-    // text-align: right;
     p {
       margin: 0;
     }
@@ -180,10 +189,10 @@
   .mod-card {
     display: flex;
     justify-content: center;
-    // align-items: center;
-    padding: 0.5em 1em 0.5em 1em;
+    padding: 0.5em 1em;
     max-height: 6em;
     overflow: hidden;
+    transition: max-height 0.3s ease-in-out; // Smooth transition
 
     img.mod-card-logo {
       height: 4em;
@@ -212,8 +221,6 @@
   }
 
   :global(.overflowing) {
-    transition: max-height 0.5s ease-in-out;
-    max-height: 6em;
     position: relative;
     
     &::after {
@@ -226,6 +233,7 @@
       right: 0em;
       z-index: 1;
       transition: opacity 0.25s ease-in-out;
+      background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8));
     }
 
     &:hover {

yarn.lock

@@ -430,6 +430,11 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"