src/lib/components/round-list.svelte

<script lang="ts">
	import type { Round } from '$lib/types';
	import { ScrollArea } from '$lib/components/ui/scroll-area';
	import * as ToggleGroup from '$lib/components/ui/toggle-group';

	interface Props {
		rounds: Round[];
		current: number;
		onSelect: (round: number) => void;
	}
	let { rounds, current, onSelect }: Props = $props();

	// CS2 modern format (MR12): regulation = 24 rounds, sides flip at the
	// half (round 13). Overtime is MR3, so sides flip every 3 rounds starting
	// at round 25 (28, 31, 34, ...).
	function isSideSwitchBefore(round: number): boolean {
		if (round <= 1) return false;
		if (round === 13) return true;
		if (round < 25) return false;
		return (round - 25) % 3 === 0;
	}

	function switchLabel(round: number): string {
		if (round === 13) return 'Half';
		if (round === 25) return 'OT';
		return 'Switch';
	}
</script>

<div class="flex h-full min-h-0 flex-col">
	<div class="border-b p-2 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">
		Rounds <span class="ml-1 text-muted-foreground/50">({rounds.length})</span>
	</div>
	<ScrollArea class="min-h-0 flex-1">
		<ToggleGroup.Root
			type="single"
			value={String(current)}
			onValueChange={(v) => v && onSelect(Number(v))}
			variant="outline"
			size="sm"
			spacing={1}
			aria-label="Round"
			class="grid w-full! grid-cols-1 gap-1 p-1.5"
		>
			{#each rounds as r, i (r.round)}
				{#if i > 0 && isSideSwitchBefore(r.round)}
					<div
						class="my-0.5 flex items-center gap-1.5 px-1 text-[9px] font-semibold tracking-wider text-muted-foreground/70 uppercase"
						aria-hidden="true"
					>
						<span class="h-px flex-1 bg-border"></span>
						<span>{switchLabel(r.round)}</span>
						<span class="h-px flex-1 bg-border"></span>
					</div>
				{/if}
				<ToggleGroup.Item
					value={String(r.round)}
					aria-label="Round {r.round}"
					class="font-mono tabular-nums"
				>
					{r.round}
				</ToggleGroup.Item>
			{/each}
		</ToggleGroup.Root>
	</ScrollArea>
</div>