scorers page about to get a claude makeover

src/routes/event/scoring/[eventId]/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import type { PageProps } from './$types';
+	let { params }: PageProps = $props();
+
+	function ordinal(n: number) {
+		const s = ['th', 'st', 'nd', 'rd'];
+		const v = n % 100;
+		return n + (s[(v - 20) % 10] ?? s[v] ?? s[0]);
+	}
+
+	function marquee(node: HTMLElement) {
+		function measure() {
+			const inner = node.querySelector<HTMLElement>('.marquee-inner');
+			if (!inner) return;
+			const overflow = inner.scrollWidth - node.clientWidth;
+			if (overflow > 2) {
+				node.style.setProperty('--scroll-dist', `-${overflow + 6}px`);
+				inner.classList.add('scrolling');
+			} else {
+				inner.classList.remove('scrolling');
+			}
+		}
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(node);
+		return { destroy: () => ro.disconnect() };
+	}
+
+	let eventId = params.eventId;
+
+	let eventEndpoint: EventSource;
+
+	async function getEventData() {
+		let response = await fetch('/api/registeredEvents', {
+			method: 'POST',
+			body: JSON.stringify({
+				eventId: eventId
+			}),
+			headers: {
+				'Content-type': 'application/json; charset=UTF-8'
+			}
+		});
+		return response.json();
+	}
+
+	let eventDataPromise = getEventData();
+
+	onMount(() => {
+		eventEndpoint = new EventSource('/api/registeredEvents');
+
+		// eventEndpoint.onmessage = (e) => {
+		// 	const eventData = JSON.parse(e.data);
+		// 	console.log(eventData);
+		// };
+	});
+</script>
+
+{#await eventDataPromise}
+	<div>loading</div>
+{:then eventData}
+	{@const event = eventData[0]}
+	<div class="flex justify-center">
+		<div class="w-full flex-col px-[5vw] text-center">
+			{console.log(event)}
+			<div class="align-text-middle h-10 w-full bg-red-500">
+				{event.name} - {event.division} - scoring
+			</div>
+			<div class="flex flex-row justify-center">
+				{#each event.registeredPlayers as bracket, bi}
+					<div class="w-full min-w-0">
+						<div class="brackets-name text-bold">
+							<span class="brackets-name-text">{bracket.name}</span>
+							<div class=""></div>
+						</div>
+						{#each bracket.items as player}
+							<div class="" style="color:{player.teamColor}">
+								<div class="player-name-wrap" use:marquee>
+									{player.firstName}
+									{player.lastName}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/await}
+
+<style>
+</style>