games: per-game pages, games.library table, games group in header/tiles/start

src/routes/projects/game-tracker/+page.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import Gamepad2 from 'lucide-svelte/icons/gamepad-2';
+	import SpottingSwitcher from '#lib/components/SpottingSwitcher.svelte';
+	import { gameTrackers } from '#lib/projects.js';
 	import GameLogo from '#lib/game-tracker/GameLogo.svelte';
 	import ProgressMeter from '#lib/game-tracker/ProgressMeter.svelte';
 	import type { PageProps } from './$types';
@@ -20,6 +23,14 @@
 				href={resolve('projects/game-tracker/credits')}>Artwork credits</a
 			>{/if}
 	</div>
+	<!-- Every game I play: one page each (same chips as the header flyout and tiles). -->
+	<SpottingSwitcher
+		items={gameTrackers}
+		home="/projects/game-tracker"
+		label="games"
+		homeIcon={Gamepad2}
+		class="mb-4"
+	/>
 	<div
 		class="mb-4 grid grid-cols-2 gap-3 rounded-xl border bg-card p-3 lg:grid-cols-4"
 		aria-label="Your completion dashboard"

src/routes/sitemap.xml/+server.ts

@@ -4,6 +4,7 @@ import { blogArticles, bookWorks } from '#lib/server/db/schema/index.js';
 import { SITE_ORIGIN } from '#lib/seo.js';
 import { races } from '#lib/derby/races.js';
 import { COURSES } from '#lib/language-learner/courses/index.js';
+import { gameTrackers } from '#lib/projects.js';
 import { and, eq, isNull, ne } from 'drizzle-orm';
 import type { RequestHandler } from './$types';
 
@@ -28,6 +29,7 @@ const staticPaths = [
 	'/trackers/music',
 	'/trackers/pc',
 	'/projects/game-tracker',
+	...gameTrackers.map((g) => g.href),
 	'/projects/game-tracker/pokemon',
 	'/projects/game-tracker/osu',
 	'/projects/game-tracker/pokemon/locations',

src/routes/start/+page.svelte

@@ -63,6 +63,14 @@
 	});
 
 	const filtering = $derived(linkFilter.trim() !== '');
+	// Big groups (games): featured chips first, the rest behind "+N more" (all while filtering).
+	let expandedGroups = $state<Record<string, boolean>>({});
+	type Group = (typeof trackers)[number];
+	const tileChildren = (t: Group) =>
+		filtering || expandedGroups[t.name]
+			? (t.children ?? [])
+			: (t.children ?? []).filter((c) => c.featured ?? true);
+	const hiddenChildren = (t: Group) => (t.children?.length ?? 0) - tileChildren(t).length;
 	// The links filter (f) also narrows the trackers; a group stays if it or a chip matches.
 	const shownTrackers = $derived.by(() => {
 		const q = linkFilter.trim().toLowerCase();
@@ -291,7 +299,7 @@
 			</h2>
 			<ul class="tgrid">
 				{#each shownTrackers as t (t.name)}
-					<li class={{ group: !!t.children }}>
+					<li class={{ group: !!t.children, wide: (t.children?.length ?? 0) > 6 }}>
 						{#if t.children}
 							<!-- Group tile: stretched main link, chips layered above it (no nested <a>). -->
 							<div class="ttile">
@@ -300,11 +308,21 @@
 									<span class="tname">{t.name}</span>
 								</a>
 								<span class="tchips">
-									{#each t.children as c (c.name)}
+									{#each tileChildren(t) as c (c.name)}
 										<a class="tchip" href={c.href} title={c.subtitle}
-											><TrackerIcon name={c.name} class="t-icon size-5" />{c.name}</a
+											><TrackerIcon name={c.icon ?? c.name} class="t-icon size-5" />{c.name}</a
 										>
 									{/each}
+									{#if !filtering && (hiddenChildren(t) > 0 || expandedGroups[t.name])}
+										<button
+											type="button"
+											class="tchip more"
+											aria-expanded={!!expandedGroups[t.name]}
+											onclick={() =>
+												(expandedGroups = { ...expandedGroups, [t.name]: !expandedGroups[t.name] })}
+											>{hiddenChildren(t) > 0 ? `+${hiddenChildren(t)} more` : 'less'}</button
+										>
+									{/if}
 								</span>
 							</div>
 						{:else}
@@ -1039,11 +1057,15 @@
 	.tgrid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+		grid-auto-flow: row dense;
 		gap: 6px;
 	}
 	.tgrid > li.group {
 		grid-column: span 4;
 	}
+	.tgrid > li.group.wide {
+		grid-column: span 6;
+	}
 	.ttile {
 		position: relative;
 		display: flex;
@@ -1122,6 +1144,17 @@
 			border-color 160ms ease,
 			background-color 160ms ease;
 	}
+	button.tchip {
+		padding: 2px 9px;
+		color: var(--site-muted);
+		cursor: pointer;
+		font: inherit;
+		font-size: 12px;
+		font-weight: 500;
+	}
+	button.tchip:hover {
+		color: var(--site-text);
+	}
 	.tchip :global(.t-icon) {
 		border-radius: 999px;
 	}
@@ -1145,6 +1178,14 @@
 			transform: none !important;
 		}
 	}
+	@media (max-width: 1000px) {
+		.tgrid > li.group.wide {
+			grid-column: 1 / -1;
+		}
+		div.ttile {
+			flex-wrap: wrap;
+		}
+	}
 	@media (max-width: 760px) {
 		.tgrid > li.group {
 			grid-column: 1 / -1;

src/routes/trackers/games/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Gamepad2 from 'lucide-svelte/icons/gamepad-2';
+	import SpottingSwitcher from '#lib/components/SpottingSwitcher.svelte';
+	import { gameTrackers } from '#lib/projects.js';
+
+	let { children } = $props();
+</script>
+
+<SpottingSwitcher
+	items={gameTrackers}
+	home="/projects/game-tracker"
+	label="games"
+	homeIcon={Gamepad2}
+/>
+{@render children()}

src/routes/trackers/games/+page.server.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+// The games group's landing page is the game tracker; each game lives at /trackers/games/<slug>.
+export const load: PageServerLoad = () => redirect(307, '/projects/game-tracker');

src/routes/trackers/games/+page.svelte

@@ -0,0 +1 @@
+<!-- Redirects to /projects/game-tracker (see +page.server.ts). -->

src/routes/trackers/games/[slug]/+page.server.ts

@@ -0,0 +1,45 @@
+import { error } from '@sveltejs/kit';
+import { eq, inArray } from 'drizzle-orm';
+import { db } from '#lib/server/db/index.js';
+import { gameLibrary, hardwareSensitivities } from '#lib/server/db/schema/index.js';
+import type { PageServerLoad } from './$types';
+
+// One game from games.library, plus its mouse sensitivity (hardware.sensitivities, matched by
+// name, short name or alias) when there is one.
+export const load: PageServerLoad = async ({ params }) => {
+	const [game] = await db.select().from(gameLibrary).where(eq(gameLibrary.slug, params.slug));
+	if (!game) error(404, 'Not Found');
+	const names = [game.name, game.shortName, ...game.aliases];
+	const [sensitivity] = await db
+		.select({
+			game: hardwareSensitivities.game,
+			cmPer360: hardwareSensitivities.cmPer360,
+			inGameSens: hardwareSensitivities.inGameSens,
+			yaw: hardwareSensitivities.yaw,
+			fov: hardwareSensitivities.fov,
+			notes: hardwareSensitivities.notes
+		})
+		.from(hardwareSensitivities)
+		.where(inArray(hardwareSensitivities.game, names))
+		.limit(1);
+	return {
+		game: {
+			slug: game.slug,
+			name: game.name,
+			shortName: game.shortName,
+			kind: game.kind,
+			status: game.status,
+			platform: game.platform,
+			trackerHref: game.trackerHref,
+			currentRank: game.currentRank,
+			peakRank: game.peakRank,
+			rankLabel: game.rankLabel,
+			notes: game.notes
+		},
+		sensitivity: sensitivity ?? null,
+		seo: {
+			title: `${game.name} · Games`,
+			description: `${game.name} on Stan Runge’s game tracker${game.status === 'main' ? ': my main game right now' : ''}.`
+		}
+	};
+};

src/routes/trackers/games/[slug]/+page.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import ArrowRight from 'lucide-svelte/icons/arrow-right';
+	import TrackerIcon from '#lib/components/TrackerIcon.svelte';
+	import { gameTrackers } from '#lib/projects.js';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	const game = $derived(data.game);
+	const nav = $derived(gameTrackers.find((g) => g.href === `/trackers/games/${game.slug}`));
+	const status: Record<string, string> = {
+		main: 'main game',
+		active: 'actively playing',
+		occasional: 'occasionally',
+		unknown: 'not sure yet'
+	};
+	// "~#40k": ranks are rough positions I gave, so round them.
+	const rank = (n: number) =>
+		n >= 1000 ? `~#${Math.round(n / 1000).toLocaleString('en-GB')}k` : `#${n}`;
+	const hasStats = $derived(
+		game.currentRank != null || game.peakRank != null || !!data.sensitivity
+	);
+</script>
+
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
+	<a
+		href={resolve('/projects/game-tracker')}
+		class="mb-6 inline-flex items-center gap-1 text-sm text-[var(--site-muted)] hover:text-foreground"
+		><ArrowLeft size={14} aria-hidden="true" /> games</a
+	>
+	<h1 class="mb-3 flex items-center gap-3 text-4xl font-semibold tracking-tight sm:text-5xl">
+		<TrackerIcon name={nav?.icon ?? `game-${game.slug}`} class="size-10 sm:size-12" />{game.name}
+	</h1>
+	<div class="mb-10 flex flex-wrap items-center gap-1.5 text-sm">
+		<span class={['badge', `status-${game.status}`]}>{status[game.status]}</span>
+		{#if game.platform}<span class="badge">{game.platform}</span>{/if}
+		{#if game.kind === 'puzzle'}<span class="badge">not a video game</span>{/if}
+		{#if nav?.subtitle && nav.subtitle !== game.name}<span class="ml-1 text-[var(--site-muted)]"
+				>{nav.subtitle}</span
+			>{/if}
+	</div>
+
+	{#if hasStats}
+		<ul class="mb-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+			{#if game.currentRank != null}
+				<li class="stat">
+					<span class="label">current rank</span>
+					<span class="value">{rank(game.currentRank)}</span>
+					{#if game.rankLabel}<span class="hint">{game.rankLabel}</span>{/if}
+				</li>
+			{/if}
+			{#if game.peakRank != null}
+				<li class="stat">
+					<span class="label">peak rank</span>
+					<span class="value">{rank(game.peakRank)}</span>
+					{#if game.rankLabel}<span class="hint">{game.rankLabel}</span>{/if}
+				</li>
+			{/if}
+			{#if data.sensitivity}
+				{@const s = data.sensitivity}
+				<li class="stat">
+					<span class="label">sensitivity</span>
+					<span class="value"
+						>{s.cmPer360 != null
+							? `${s.cmPer360} cm/360°`
+							: s.inGameSens != null
+								? s.inGameSens
+								: 'not set yet'}</span
+					>
+					<a class="hint underline" href={resolve('/trackers/pc')}>on the PC tracker</a>
+				</li>
+			{/if}
+		</ul>
+	{/if}
+
+	{#if game.notes}
+		<p class="mb-8 max-w-2xl whitespace-pre-line text-[var(--site-muted)]">{game.notes}</p>
+	{/if}
+
+	{#if game.trackerHref}
+		<a href={resolve(game.trackerHref as '/')} class="deep inline-flex items-center gap-3 p-4">
+			<TrackerIcon name={nav?.icon ?? `game-${game.slug}`} class="size-8" />
+			<span>
+				<span class="block font-medium">open the full {game.shortName} tracker</span>
+				<span class="block text-sm text-[var(--site-muted)]">progress, goals and history</span>
+			</span>
+			<ArrowRight size={18} aria-hidden="true" class="ml-4 text-[var(--site-muted)]" />
+		</a>
+	{:else if !hasStats && !game.notes}
+		<p class="empty rounded-xl p-6 text-[var(--site-muted)]">
+			Nothing tracked for {game.shortName} yet. Stats, ranks and notes show up here once I add them.
+		</p>
+	{/if}
+</div>
+
+<style>
+	.badge {
+		border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
+		border-radius: 999px;
+		padding: 0.15rem 0.65rem;
+		font-weight: 500;
+	}
+	.status-main {
+		background: var(--foreground);
+		color: var(--background);
+		border-color: var(--foreground);
+	}
+	.status-active {
+		border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
+	}
+	.status-unknown,
+	.status-occasional {
+		color: var(--site-muted);
+	}
+	.stat {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		padding: 1rem 1.1rem;
+		border: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent);
+		border-radius: 0.9rem;
+		background: color-mix(in oklab, var(--foreground) 2%, transparent);
+	}
+	.stat .label {
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--site-muted);
+	}
+	.stat .value {
+		font-size: 1.6rem;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		font-variant-numeric: tabular-nums;
+	}
+	.stat .hint {
+		font-size: 0.8rem;
+		color: var(--site-muted);
+	}
+	.deep,
+	.empty {
+		border: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent);
+		border-radius: 0.9rem;
+		background: color-mix(in oklab, var(--foreground) 2%, transparent);
+	}
+	.deep {
+		outline: none;
+		transition:
+			transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
+			background-color 160ms ease,
+			border-color 160ms ease,
+			box-shadow 160ms ease;
+	}
+	.deep:hover {
+		background: color-mix(in oklab, var(--foreground) 6%, transparent);
+		border-color: color-mix(in oklab, var(--foreground) 22%, transparent);
+		transform: translateY(-2px);
+		box-shadow: 0 12px 28px -16px rgb(0 0 0 / 0.55);
+	}
+	.deep:focus-visible {
+		outline: 2px solid var(--foreground);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.deep,
+		.deep:hover {
+			transition: none;
+			transform: none;
+		}
+	}
+</style>