feat: redesign match play and add broadcast tooling

src/lib/components/broadcast/Players.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { SIDE_COLORS, flagUrl, initials } from '$lib/components/match/theme';
+	import type { OverlayProps } from './context';
+
+	const { data }: OverlayProps = $props();
+	const view = $derived(data.view);
+</script>
+
+{#if view}
+	<div class="grid size-full grid-cols-2 gap-10">
+		{#each view.sides as side, index (side.id)}
+			{@const colors = SIDE_COLORS[side.color]}
+			<div class="flex flex-col gap-4 {index === 1 ? 'items-end text-right' : ''}">
+				<div class="text-5xl font-black tracking-tight" style="color:{colors.text}">
+					{side.name}
+				</div>
+				{#if side.roll != null}<div class="text-2xl text-zinc-300">
+						rolled <span class="font-black tabular-nums">{side.roll}</span>
+					</div>{/if}
+				<div class="flex flex-col gap-3 {index === 1 ? 'items-end' : ''}">
+					{#each side.players as player, n (player.id)}
+						<div
+							in:fly={{ x: index === 0 ? -60 : 60, delay: n * 120, duration: 500 }}
+							class="flex items-center gap-4 rounded-2xl border border-white/10 bg-zinc-950/80 p-3 pr-6 {index ===
+							1
+								? 'flex-row-reverse pr-3 pl-6'
+								: ''}"
+							style="box-shadow:inset {index === 0 ? '5px' : '-5px'} 0 0 {colors.solid}"
+						>
+							{#if player.avatarUrl}
+								<img src={player.avatarUrl} alt="" class="size-16 rounded-xl object-cover" />
+							{:else}
+								<div
+									class="grid size-16 place-items-center rounded-xl text-xl font-bold"
+									style="background:{colors.soft}"
+								>
+									{initials(player.name)}
+								</div>
+							{/if}
+							<div>
+								<div
+									class="flex items-center gap-2 text-2xl font-bold {index === 1
+										? 'flex-row-reverse'
+										: ''}"
+								>
+									{#if flagUrl(player.countryCode)}<img
+											src={flagUrl(player.countryCode)}
+											alt=""
+											class="h-4"
+										/>{/if}
+									{player.osuName ?? player.name}
+								</div>
+								<div class="text-lg text-zinc-400 tabular-nums">
+									{player.rating ?? ''}{player.inLobby ? ' · in lobby' : ''}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+{/if}