Add Solo Mode, icon system polish, and leaderboard fixes (#18)

* polishing: removing all emojis, patching some leaderboard bugs

* adding solo player mode

* Prevent duplicate solo submissions on timer expiry

* Hide timed-out solo distance in summary

Author: Ammaar-Alam

.gitignore

@@ -8,3 +8,4 @@ picturedata.txt
 node_modules/
 dist/
 .codex/
+*package-lock.json

apps/frontend/src/lib/api/solo.ts

@@ -0,0 +1,39 @@
+import { api } from './client.js';
+
+export interface SoloRound {
+	id: number;
+	imageUrl: string;
+}
+
+export interface SoloGuessResult {
+	distance: number;
+	points: number;
+	actualLat: number;
+	actualLng: number;
+}
+
+export async function getSoloRounds(count: number = 5): Promise<SoloRound[]> {
+	const { data, error } = await api.get<SoloRound[]>(`/api/solo/rounds?count=${count}`);
+	if (error) {
+		console.error('Failed to get solo rounds:', error);
+		return [];
+	}
+	return data ?? [];
+}
+
+export async function submitSoloGuess(
+	pictureId: number,
+	guessLat: number,
+	guessLng: number
+): Promise<SoloGuessResult | null> {
+	const { data, error } = await api.post<SoloGuessResult>('/api/solo/submit', {
+		pictureId,
+		guessLat,
+		guessLng
+	});
+	if (error) {
+		console.error('Failed to submit solo guess:', error);
+		return null;
+	}
+	return data ?? null;
+}

apps/frontend/src/lib/components/ActiveMatchBanner.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Card from './Card.svelte';
 	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
 
 	let {
 		opponent,
@@ -18,7 +19,7 @@
 <Card variant="orange" class="py-6 {className}">
 	<div class="flex flex-col md:flex-row items-center justify-between gap-4">
 		<div class="flex items-center gap-4">
-			<span class="text-4xl">⚔️</span>
+			<Icon name="swords" class="text-4xl" />
 			<div>
 				<div class="font-black text-lg">Your Match is Ready!</div>
 				<div class="text-sm opacity-80">

apps/frontend/src/lib/components/ChallengeCard.svelte

@@ -2,6 +2,7 @@
 	import Button from './Button.svelte';
 	import StatusBadge from './StatusBadge.svelte';
 	import { formatTimeAgo } from '$lib/utils/time';
+	import Icon from './Icon.svelte';
 
 	type ChallengeStatus = 'pending' | 'sent' | 'active';
 
@@ -59,7 +60,7 @@
 	{:else if status === 'active' && onStart}
 		<div class="flex items-center justify-between gap-4 mt-0 flex-wrap">
 			<div class="flex items-center gap-3">
-				<span class="text-2xl">⚔️</span>
+				<Icon name="swords" class="text-2xl" />
 				<div class="text-xs opacity-60">5 rounds • 30s each</div>
 			</div>
 			<div class="flex items-center gap-2">

apps/frontend/src/lib/components/GameModeCard.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import Card from './Card.svelte';
+	import Icon from './Icon.svelte';
+	import type { IconName } from './icons';
 
 	type CardVariant = 'cyan' | 'magenta' | 'lime' | 'orange';
 
 	let {
 		href,
 		variant,
+		icon,
 		emoji,
 		title,
 		description,
@@ -16,7 +19,8 @@
 	}: {
 		href: string;
 		variant: CardVariant;
-		emoji: string;
+		icon?: IconName;
+		emoji?: string;
 		title: string;
 		description: string;
 		stat: string;
@@ -36,7 +40,11 @@
 					<span>Done</span>
 				</div>
 			{/if}
-			<div class="text-5xl mb-6">{emoji}</div>
+			{#if icon}
+				<Icon name={icon} class="text-5xl mb-6" />
+			{:else if emoji}
+				<div class="text-5xl mb-6">{emoji}</div>
+			{/if}
 			<h3 class="text-2xl font-black mb-4">{title}</h3>
 			<p class="opacity-80 mb-6 grow leading-relaxed">
 				{description}

apps/frontend/src/lib/components/Header.svelte

@@ -1,21 +1,41 @@
+<script lang="ts">
+	import Icon from '$lib/components/Icon.svelte';
+</script>
+
 <header class="header-fixed bg-white brutal-border">
 	<div class="w-full h-full px-6 flex items-center justify-between">
 		<a href="/menu">
 			<img src="/logo.png" alt="TigerSpot Logo" class="inline-block w-40" />
 		</a>
 		<nav class="flex items-center gap-6">
-			<a href="/menu" class="font-bold text-sm uppercase hover:text-orange transition-colors"
-				>🏠 Menu</a
+			<a
+				href="/menu"
+				class="font-bold text-sm uppercase hover:text-orange transition-colors inline-flex items-center gap-2"
 			>
-			<a href="/leaderboard" class="font-bold text-sm uppercase hover:text-orange transition-colors"
-				>🏆 Leaderboard</a
+				<Icon name="home" class="text-base" />
+				Menu
+			</a>
+			<a
+				href="/leaderboard"
+				class="font-bold text-sm uppercase hover:text-orange transition-colors inline-flex items-center gap-2"
 			>
-			<a href="/settings" class="font-bold text-sm uppercase hover:text-orange transition-colors"
-				>⚙️ Settings</a
+				<Icon name="trophy" class="text-base" />
+				Leaderboard
+			</a>
+			<a
+				href="/settings"
+				class="font-bold text-sm uppercase hover:text-orange transition-colors inline-flex items-center gap-2"
 			>
-			<a href="/about" class="font-bold text-sm uppercase hover:text-orange transition-colors"
-				>👥 About</a
+				<Icon name="settings" class="text-base" />
+				Settings
+			</a>
+			<a
+				href="/about"
+				class="font-bold text-sm uppercase hover:text-orange transition-colors inline-flex items-center gap-2"
 			>
+				<Icon name="users" class="text-base" />
+				About
+			</a>
 		</nav>
 	</div>
 </header>

apps/frontend/src/lib/components/Icon.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { icons, type IconName } from './icons';
+
+	let {
+		name,
+		title,
+		strokeWidth = 2.5,
+		class: className = '',
+		style: styleProp = ''
+	}: {
+		name: IconName;
+		title?: string;
+		strokeWidth?: number;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const icon = $derived(icons[name]);
+	const svgClass = $derived(`inline-block align-middle ${className}`);
+	const resolvedStrokeWidth = $derived(icon?.strokeWidth ?? strokeWidth);
+</script>
+
+{#if icon}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class={svgClass}
+		viewBox={icon.viewBox ?? '0 0 24 24'}
+		fill={icon.fill ?? 'none'}
+		stroke={icon.stroke ?? 'currentColor'}
+		stroke-width={resolvedStrokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		width="1em"
+		height="1em"
+		style={styleProp}
+		role="img"
+		aria-hidden={!title}
+		focusable="false"
+	>
+		{#if title}
+			<title>{title}</title>
+		{/if}
+		{#each icon.paths ?? [] as path}
+			<path d={path} />
+		{/each}
+		{#each icon.circles ?? [] as circle}
+			<circle cx={circle.cx} cy={circle.cy} r={circle.r} />
+		{/each}
+		{#each icon.rects ?? [] as rect}
+			<rect
+				x={rect.x}
+				y={rect.y}
+				width={rect.width}
+				height={rect.height}
+				rx={rect.rx}
+				ry={rect.ry}
+			/>
+		{/each}
+		{#each icon.lines ?? [] as line}
+			<line x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} />
+		{/each}
+		{#each icon.polylines ?? [] as polyline}
+			<polyline points={polyline} />
+		{/each}
+		{#each icon.polygons ?? [] as polygon}
+			<polygon points={polygon} />
+		{/each}
+	</svg>
+{/if}

apps/frontend/src/lib/components/ImageUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { processImagePreview } from '$lib/api/admin';
+	import Icon from '$lib/components/Icon.svelte';
 
 	interface Props {
 		onSelect?: (
@@ -247,7 +248,7 @@
 	{:else if processing}
 		<!-- Processing image -->
 		<div class="brutal-border border-dashed border-4 p-8 text-center bg-cyan/10 border-cyan">
-			<div class="text-5xl mb-4 animate-pulse">🔄</div>
+			<Icon name="refresh" class="text-5xl mb-4 animate-pulse" />
 			<p class="font-bold text-lg mb-2">Processing image...</p>
 			<p class="text-black/60 text-sm">Extracting GPS data and generating preview</p>
 		</div>
@@ -265,7 +266,7 @@
 			onclick={openFilePicker}
 			onkeydown={(e) => e.key === 'Enter' && openFilePicker()}
 		>
-			<div class="text-5xl mb-4">📸</div>
+			<Icon name="camera" class="text-5xl mb-4" />
 			<p class="font-bold text-lg mb-2">Drop an image here</p>
 			<p class="text-black/60 text-sm mb-4">or click to browse (HEIC supported)</p>
 			<span class="brutal-border brutal-shadow-sm bg-cyan text-white px-4 py-2 font-bold text-sm">