score-system/src/routes/event/[eventId]/+page.svelte

<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import type { PageProps } from './$types';
	let { params, data }: 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'
			}
		});

		const data = await response.json();

		// Sort players: placed first (ascending), unplaced last
		if (data && data[0] && data[0].registeredPlayers) {
			data[0].registeredPlayers.forEach((bracket: any) => {
				bracket.items.sort((a: any, b: any) => {
					if (a.placement === 0 && b.placement === 0) return 0;
					if (a.placement === 0) return 1;
					if (b.placement === 0) return -1;
					return a.placement - b.placement;
				});
			});
		}

		return data;
	}

	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]}
	{console.log(event)}
	<div class="flex justify-center">
		<div class="w-full flex-col px-[5vw] text-center">
			<div
				style:background-color={event.state === 1
					? 'color-mix(in srgb, #fe640b 18%, transparent)'
					: event.state === 2
						? 'color-mix(in srgb, #a6e3a1 18%, transparent)'
						: ''}
				class="align-text-middle my-7 h-10 w-full rounded-2xl border-2 border-solid border-ctp-surface1"
			>
				{event.name} - {event.division}
				{#if event.state == 1}- ONGOING
				{:else if event.state == 2}- FINISHED
				{/if}
			</div>
			{#each event.registeredPlayers as bracket, bi}
				{#if bi > 0}
					<div class="bracket-sep" aria-hidden="true"></div>
				{/if}
				<div class="bracket-row">
					<div class="brackets-name flex items-center">
						<span class="brackets-name-text align-text-middle">{bracket.name}</span>
						<div class="bracket-vertical-sep"></div>
					</div>
					{#each bracket.items as player}
						<div class="player-box" style="--c:{player.teamColor}">
							<div class="player-ghost" aria-hidden="true">
								<svg viewBox="0 0.1 100 0.6" preserveAspectRatio="none" class="ghost-svg">
									<text
										x="0"
										y="0.7"
										font-size="1"
										dominant-baseline="auto"
										textLength="100"
										lengthAdjust="spacingAndGlyphs"
										font-family="'Black Ops One',system-ui">{player.firstName}</text
									>
								</svg>
							</div>
							<div class="player-name-wrap" use:marquee>
								<span class=" text-xl">
									{player.firstName}
									{player.lastName}
								</span>
							</div>
							{#if player.placement !== 0}
								<div class="player-placement goldman">{ordinal(player.placement)}</div>
								<div class="resultContainer flex justify-center">
									{#each player.playerScores as score}
										<div class="mx-5 my-1 rounded border-2" style="border-color:{player.teamColor}">
											Run {score.resultIndex + 1}: {score.result}{event.resultPresets[0].unit}
										</div>
									{/each}
								</div>
							{:else}
								<div class="player-placement-gap"></div>
							{/if}
						</div>
					{/each}
				</div>
			{/each}
		</div>
	</div>
	{#if data.user}
		<div class="mt-10 flex w-full justify-center">
			<a
				class="flex justify-center rounded border-2 border-solid border-white bg-ctp-surface2 p-4"
				href="/event/scoring/{eventId}">Score This Event</a
			>
		</div>
	{/if}
{/await}

<style>
	.resultContainer {
		flex-direction: column;
	}
	@media (max-width: 479px) {
		.resultContainer {
			flex-direction: column;
		}
	}
</style>