Library filters sidebar, clickable tags, remove Ready badge
Build & Deploy / build-and-deploy (push) Successful in 59s
Build & Deploy / build-and-deploy (push) Successful in 59s
- GameCard: removed 'Ready' badge from covers (keep '🪟 Win' for
Windows games only — it's informative since they can't be played)
- Library: sidebar with Year + Genre checkbox filter groups
- Each shows up to 5 items with game counts, 'Show all' button
- Active filters shown as removable chips above the grid
- Reset button clears all filters
- Filters reflected in URL hash (#/?genre=FPS&year=1996)
- GameDetail: year and genre tags are now clickable links to
#/?year=1996 or #/?genre=FPS, which opens the Library with that
filter pre-applied
- App.svelte: parses query params from hash and passes to Library
This commit is contained in:
@@ -7,14 +7,20 @@
|
||||
|
||||
let route = $state("/");
|
||||
let gameId = $state(null);
|
||||
let filterGenre = $state("");
|
||||
let filterYear = $state("");
|
||||
|
||||
function parseHash() {
|
||||
const hash = window.location.hash.slice(1) || "/";
|
||||
const [pathPart] = hash.split("?"); // strip query params
|
||||
const [pathPart, qs] = hash.split("?");
|
||||
const parts = pathPart.split("/").filter(Boolean);
|
||||
if (parts.length === 0 || (parts.length === 1 && parts[0] === "")) {
|
||||
route = "/";
|
||||
gameId = null;
|
||||
// Parse filter query params
|
||||
const params = new URLSearchParams(qs || "");
|
||||
filterGenre = params.get("genre") || "";
|
||||
filterYear = params.get("year") || "";
|
||||
} else if (parts[0] === "game" && parts[1]) {
|
||||
route = "/game";
|
||||
gameId = parts[1];
|
||||
@@ -40,7 +46,7 @@
|
||||
|
||||
<main class="container">
|
||||
{#if route === "/"}
|
||||
<Library />
|
||||
<Library genreFilter={filterGenre} yearFilter={filterYear} />
|
||||
{:else if route === "/game" && gameId}
|
||||
<GameDetail id={gameId} />
|
||||
{:else if route === "/play" && gameId}
|
||||
|
||||
Reference in New Issue
Block a user