Add selecting multiple crops in contest summary

src/components/stats/jacob/contest-list.svelte

@@ -7,10 +7,10 @@
 
 	interface Props {
 		contests: NonNullable<components['schemas']['JacobDataDto']['contests']>;
-		remining?: number;
+		remaining?: number;
 	}
 
-	let { contests, remining = 0 }: Props = $props();
+	let { contests, remaining = 0 }: Props = $props();
 </script>
 
 <ScrollArea orientation="vertical" class="h-96">
@@ -19,10 +19,10 @@
 			<Contest {contest} class="" />
 		{/each}
 	</div>
-	{#if remining > 0}
+	{#if remaining > 0}
 		<div class="mt-4 flex flex-col items-center justify-center gap-2">
 			<p>
-				<span class="text-lg font-semibold">{remining.toLocaleString()}</span>
+				<span class="text-lg font-semibold">{remaining.toLocaleString()}</span>
 				<span>not shown</span>
 			</p>
 			<Button href={page.url.pathname + '/contests'} variant="outline">View All</Button>

src/components/stats/jacob/crop-stats.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { components } from '$lib/api/api';
-	import CropSelector from '../contests/crop-selector.svelte';
+	import CropSelector from '$comp/stats/contests/crop-selector.svelte';
 	import { DEFAULT_SELECTED_CROPS, getSelectedCrops } from '$lib/stores/selectedCrops';
-	import CropMedalCounts from './crop-medal-counts.svelte';
+	import CropMedalCounts from '$comp/stats/jacob/crop-medal-counts.svelte';
 	import { CROP_TO_ELITE_CROP } from '$lib/constants/crops';
 	import { Crop, getCropFromName } from 'farming-weight';
 	import { onMount } from 'svelte';
-	import ContestList from './contest-list.svelte';
+	import ContestList from '$comp/stats/jacob/contest-list.svelte';
+
+	type CropStats = components['schemas']['JacobDataDto']['stats'];
 
 	interface Props {
 		jacob: components['schemas']['JacobDataDto'] | undefined;
@@ -26,16 +28,67 @@
 	);
 
 	const selectedCrops = getSelectedCrops();
-	const crop = $derived(Object.entries($selectedCrops).find(([, value]) => value)?.[0] ?? initalCrop);
-	const cropKey = $derived(CROP_TO_ELITE_CROP[getCropFromName(crop) ?? Crop.Wheat]);
-	const cropStats = $derived(jacob?.stats?.crops?.[cropKey as keyof typeof jacob.stats.crops] ?? {});
+	const crops = $derived(
+		Object.entries($selectedCrops)
+			.filter(([, value]) => value)
+			.map(([key]) => key)
+	);
 
-	const contests = $derived(contestsByCrop[crop] ?? []);
+	const contests = $derived(
+		crops.length === 0 ? Object.values(contestsByCrop).flat() : crops.flatMap((c) => contestsByCrop[c] ?? [])
+	);
 
 	const recentContests = $derived(
 		contests?.sort((a, b) => (b?.timestamp ?? 0) - (a?.timestamp ?? 0)).slice(0, 30) ?? []
 	);
 
+	const MEDAL_TYPES = ['diamond', 'platinum', 'gold', 'silver', 'bronze'] as const;
+
+	const allCropStats = $derived((crop: string) => {
+		const cropKey = CROP_TO_ELITE_CROP[getCropFromName(crop) ?? Crop.Wheat] as keyof CropStats;
+		return (
+			jacob?.stats?.crops?.[cropKey] ??
+			({
+				participations: 0,
+				firstPlaceScores: 0,
+				medals: {},
+			} as components['schemas']['JacobCropStatsDto'])
+		);
+	});
+
+	type ReducedCropStats = {
+		participations: 0;
+		firstPlaceScores: 0;
+		medals: Record<(typeof MEDAL_TYPES)[number], number>;
+	};
+
+	const combineCropStats = $derived((crops: components['schemas']['JacobCropStatsDto'][]) => {
+		return crops.reduce<ReducedCropStats>(
+			(acc, crop) => {
+				acc.participations += crop.participations ?? 0;
+				acc.firstPlaceScores += crop.firstPlaceScores ?? 0;
+
+				MEDAL_TYPES.forEach((type) => {
+					acc.medals[type] ??= 0;
+					acc.medals[type] += (crop.medals as Record<typeof type, number>)?.[type] ?? 0;
+				});
+
+				return acc;
+			},
+			{
+				participations: 0,
+				firstPlaceScores: 0,
+				medals: { diamond: 0, platinum: 0, gold: 0, silver: 0, bronze: 0 },
+			}
+		);
+	});
+
+	const selectedCropsStats = $derived(
+		crops.length === 0
+			? combineCropStats(Object.values(jacob?.stats?.crops ?? {}))
+			: combineCropStats(crops.map((c) => allCropStats(c)))
+	);
+
 	onMount(() => {
 		if (initalCrop) {
 			selectedCrops.set({ ...DEFAULT_SELECTED_CROPS, [initalCrop]: true });
@@ -44,25 +97,27 @@
 </script>
 
 <div class="flex flex-1 flex-col items-center justify-center gap-4">
-	<CropSelector radio={true} />
+	<CropSelector />
 
 	<div class="flex flex-col items-center justify-center gap-4">
 		<div class="flex flex-col items-center gap-2">
-			<CropMedalCounts stats={cropStats} />
+			<CropMedalCounts stats={selectedCropsStats} />
 			<div class="flex flex-wrap gap-2">
 				<div class="flex flex-col items-center rounded-md bg-primary-foreground p-2">
 					<span
-						><span class="text-lg font-semibold">{cropStats.participations?.toLocaleString()}</span> Participations</span
+						><span class="text-lg font-semibold">{selectedCropsStats.participations?.toLocaleString()}</span
+						> Participations</span
 					>
 				</div>
 				<div class="flex flex-col items-center rounded-md bg-primary-foreground p-2">
 					<span
-						><span class="text-lg font-semibold">{cropStats.firstPlaceScores?.toLocaleString()}</span> First
-						Place Scores</span
+						><span class="text-lg font-semibold"
+							>{selectedCropsStats.firstPlaceScores?.toLocaleString()}</span
+						> First Place Scores</span
 					>
 				</div>
 			</div>
 		</div>
-		<ContestList contests={recentContests} remining={contests.length - recentContests.length} />
+		<ContestList contests={recentContests} remaining={contests.length - recentContests.length} />
 	</div>
 </div>