Compare commits

..

5 commits

Author SHA1 Message Date
fd7eca8e27 [c] ignore redundant role=button 2024-06-12 14:07:59 +02:00
517b7d33a2 [d] remove some comments 2024-06-12 14:07:31 +02:00
23a583b0bd [d] remove css line 2024-06-12 14:06:59 +02:00
54070518ac [a] fuse.js for fuzzy search 2024-06-12 14:05:32 +02:00
fa190f9b7d [a] results count in modlist 2024-06-12 13:36:30 +02:00
3 changed files with 44 additions and 23 deletions

View file

@ -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",

View file

@ -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
});
fuseOptionalMods = new Fuse(mods.optional_mods, {
keys: ["name", "description"],
threshold: 0.4
});
}
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">
@ -82,7 +93,8 @@
{/each}
</select>
</div>
<div class="scroll-to-optional">
<div class="results-bar">
<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>
@ -90,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"
@ -103,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>
@ -117,8 +129,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).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"
@ -126,7 +138,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>
@ -159,10 +171,15 @@
}
}
.scroll-to-optional {
.results-bar {
width: 100%;
text-align: right;
display: flex;
align-items: center;
p {
margin: 0;
}
a {
margin-left: auto;
text-decoration: none;
&:hover {
text-decoration: underline;
@ -173,10 +190,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;
@ -205,8 +222,6 @@
}
:global(.overflowing) {
transition: max-height 0.5s ease-in-out;
max-height: 6em;
position: relative;
&::after {

View file

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