Use real HF logo, show progress vs 2540-map target, default to grid view, scroll rounds list

src/lib/components/hf-logo.svelte

@@ -6,23 +6,46 @@
 </script>
 
 <svg
-	viewBox="0 0 100 100"
-	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 95 88"
+	fill="none"
 	role="img"
 	aria-label="Hugging Face"
 	class={className}
 >
-	<circle cx="50" cy="48" r="34" fill="#FFD21E" />
-	<ellipse cx="38" cy="44" rx="4.5" ry="6" fill="#1F2937" />
-	<ellipse cx="62" cy="44" rx="4.5" ry="6" fill="#1F2937" />
-	<path
-		d="M32 58 Q50 73 68 58"
-		stroke="#1F2937"
-		stroke-width="4"
-		fill="none"
-		stroke-linecap="round"
-	/>
-	<ellipse cx="14" cy="60" rx="9" ry="11" transform="rotate(-15 14 60)" fill="#FF9D0B" />
-	<ellipse cx="86" cy="60" rx="9" ry="11" transform="rotate(15 86 60)" fill="#FF9D0B" />
+	<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />
+	<path
+		fill="#FF9D0B"
+		d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"
+	/>
+	<path
+		fill="#3A3B45"
+		d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"
+	/>
+	<path
+		fill="#FF323D"
+		d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+	/>
+	<path
+		fill="#3A3B45"
+		fill-rule="evenodd"
+		d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z"
+		clip-rule="evenodd"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"
+	/>
 </svg>

src/lib/components/round-list.svelte

@@ -31,7 +31,7 @@
 	<div class="text-muted-foreground border-b px-2 py-2 text-[10px] font-semibold uppercase tracking-wide">
 		Rounds <span class="text-muted-foreground/50 ml-1">({rounds.length})</span>
 	</div>
-	<ScrollArea class="flex-1">
+	<ScrollArea class="min-h-0 flex-1">
 		<ToggleGroup.Root
 			type="single"
 			value={String(current)}

src/routes/+page.svelte

@@ -8,6 +8,10 @@
 
 	const TICK_RATE = 64;
 	const PERSPECTIVES_PER_ROUND = 10;
+	// Planned dataset scale: 2540 maps total, ~6 hours of footage per map.
+	const TARGET_MAPS = 2540;
+	const HOURS_PER_MAP = 6;
+	const TARGET_HOURS = TARGET_MAPS * HOURS_PER_MAP;
 
 	const totalMaps = $derived(data.matches.length);
 	const totalMatches = $derived(new Set(data.matches.map((m) => m.match_id)).size);
@@ -19,13 +23,7 @@
 		(data.rounds.reduce((acc, r) => acc + (r.round_duration_ticks || 0), 0) / TICK_RATE) *
 			PERSPECTIVES_PER_ROUND
 	);
-	const totalHoursLabel = $derived(
-		totalSeconds > 0
-			? totalSeconds < 3600
-				? `${Math.round(totalSeconds / 60)}m`
-				: `${(totalSeconds / 3600).toFixed(1)}h`
-			: '—'
-	);
+	const totalHours = $derived(totalSeconds / 3600);
 </script>
 
 <Header />
@@ -48,7 +46,9 @@
 			</div>
 			<div class="bg-card rounded-md border p-3">
 				<div class="text-muted-foreground text-xs uppercase tracking-wide">Maps</div>
-				<div class="font-heading mt-0.5 text-2xl tabular-nums">{totalMaps}</div>
+				<div class="font-heading mt-0.5 text-2xl tabular-nums">
+					{totalMaps}<span class="text-muted-foreground/60 text-base font-medium">/{TARGET_MAPS}</span>
+				</div>
 			</div>
 			<div class="bg-card rounded-md border p-3">
 				<div class="text-muted-foreground text-xs uppercase tracking-wide">Rounds</div>
@@ -56,7 +56,11 @@
 			</div>
 			<div class="bg-card rounded-md border p-3">
 				<div class="text-muted-foreground text-xs uppercase tracking-wide">Footage</div>
-				<div class="font-heading mt-0.5 text-2xl tabular-nums">{totalHoursLabel}</div>
+				<div class="font-heading mt-0.5 text-2xl tabular-nums">
+					{totalHours < 1 ? totalHours.toFixed(1) : Math.round(totalHours)}<span
+						class="text-muted-foreground/60 text-base font-medium">h/{TARGET_HOURS}h</span
+					>
+				</div>
 			</div>
 		</div>
 	</section>

src/routes/match/[matchId]/[mapName]/+page.svelte

@@ -71,7 +71,7 @@
 	let preloadedPlayers = $state(new Set<number>());
 
 	let viewMode = $state<'single' | 'grid'>(
-		(page.url.searchParams.get('view') === 'grid' ? 'grid' : 'single')
+		page.url.searchParams.get('view') === 'single' ? 'single' : 'grid'
 	);
 
 	const playerChunks = $derived(
@@ -286,7 +286,7 @@
 		const url = new URL(page.url);
 		url.searchParams.set('round', String(currentRoundNum));
 		url.searchParams.set('player', String(currentPlayer));
-		if (viewMode === 'grid') url.searchParams.set('view', 'grid');
+		if (viewMode === 'single') url.searchParams.set('view', 'single');
 		else url.searchParams.delete('view');
 		goto(url.pathname + '?' + url.searchParams.toString(), {
 			replaceState: true,