Spaces:
Running
Running
File size: 2,002 Bytes
31d3580 0a96402 8899818 31d3580 c3540d6 31d3580 8899818 31d3580 8899818 31d3580 8899818 31d3580 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <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>
|