package.json

@@ -14,7 +14,6 @@
     "@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,6 +1,5 @@
 <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';
 
@@ -13,7 +12,7 @@
 
   let searchQueryInput = (event) => {
     clearTimeout(timeout);
-    timeout = setTimeout(checkOverflow, 300); // Debounced input handling
+    timeout = setTimeout(checkOverflow, 0);
   };
 
   function checkOverflow() {
@@ -36,15 +35,6 @@
     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
-    });
-    fuseOptionalMods = new Fuse(mods.optional_mods, {
-      keys: ["name", "description"],
-      threshold: 0.4
-    });
   }
 
   onMount(async () => {
@@ -57,23 +47,22 @@
     loading = false;
   });
 
-  let fuseMods, fuseOptionalMods;
-
-  function search(query, mods, fuse) {
-    if (!query) return mods;
-    const results = fuse.search(query);
-    return results.map(result => result.item);
+  function search(query, mods) {
+    const regex = new RegExp(query, "i");
+    return mods.filter(
+      (mod) => regex.test(mod.name) || regex.test(mod.description),
+    );
   }
 
   function clearInput() {
     clearTimeout(timeout);
+    timeout = setTimeout(checkOverflow, 0);
     searchQuery = "";
-    setTimeout(checkOverflow, 300); // Debounced overflow check
   }
 
   function handleFileChange(event) {
     selectedFile = event.target.value;
-    fetchData(selectedFile).then(() => checkOverflow());
+    fetchData(selectedFile);
   }
 
   afterUpdate(() => {
@@ -81,7 +70,7 @@
     removeOverflow();
     checkOverflow();
     loading = false;
-  });
+  })
 </script>
 
 <div class="search-container" role="group">
@@ -93,8 +82,7 @@
     {/each}
   </select>
 </div>
-<div class="results-bar">
-  <p>Results: {search(searchQuery, mods.mods, fuseMods).length + search(searchQuery, mods.optional_mods, fuseOptionalMods).length}</p>
+<div class="scroll-to-optional">
   <a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
 </div>
 
@@ -102,12 +90,12 @@
 
 {#if loading}
   <p>Loading...</p>
-{:else if search(searchQuery, mods.mods, fuseMods).length === 0 && search(searchQuery, mods.optional_mods, fuseOptionalMods).length === 0}
+{:else if search(searchQuery, mods.mods).length === 0 && search(searchQuery, mods.optional_mods).length === 0}
   <p>⚠️ No results found.</p>
 {:else}
   <div class="grid" id="mods">
-    {#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}
+    {#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}
         <a
           role="button"
           class="mod-card card contrast"
@@ -115,7 +103,7 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
+          <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
           <div class="mod-card-text-ct">
             <p class="mod-card-name">{mod.name}</p>
             <p class="mod-card-desc">{mod.description}</p>
@@ -129,8 +117,8 @@
     <!-- 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, fuseOptionalMods).length / 3)) as _, index}
-        {#each search(searchQuery, mods.optional_mods, fuseOptionalMods).slice(index * 3, (index + 1) * 3) as mod}
+      {#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}
           <a
             role="button"
             class="mod-card card contrast"
@@ -138,7 +126,7 @@
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
+            <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
             <div class="mod-card-text-ct">
               <p class="mod-card-name">{mod.name}</p>
               <p class="mod-card-desc">{mod.description}</p>
@@ -171,15 +159,10 @@
     }
   }
 
-  .results-bar {
+  .scroll-to-optional {
     width: 100%;
-    display: flex;
-    align-items: center;
-    p {
-      margin: 0;
-    }
+    text-align: right;
     a {
-      margin-left: auto;
       text-decoration: none;
       &:hover {
         text-decoration: underline;
@@ -190,10 +173,10 @@
   .mod-card {
     display: flex;
     justify-content: center;
-    padding: 0.5em 1em;
+    // align-items: center;
+    padding: 0.5em 1em 0.5em 1em;
     max-height: 6em;
     overflow: hidden;
-    transition: max-height 0.3s ease-in-out; // Smooth transition
 
     img.mod-card-logo {
       height: 4em;
@@ -222,6 +205,8 @@
   }
 
   :global(.overflowing) {
+    transition: max-height 0.5s ease-in-out;
+    max-height: 6em;
     position: relative;
     
     &::after {

yarn.lock

@@ -430,11 +430,6 @@ 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"