added the events table along with some highkey ass player boxes 🙏

src/routes/+page.svelte

@@ -1,25 +1,20 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { enhance } from '$app/forms';
+	// import { enhance } from '$app/forms';
+	import Table from './Table.svelte';
 
 	// Get initial data from the load thing (innacurate lol)
 	let { data }: { data: import('./$types').PageData } = $props();
 
 	// Derived unordered
-	let teams = $derived(data.teams);
+	let teams = $derived(data.teams.teams);
 
-	//// Layout logic
-	function getColCount(width: number): number {
-		if (width < 640) return 1; // sm
-		if (width < 1024) return 2; // md
-		// lg: 1 col per item, max 5
-		return Math.min(teams.length, 5);
-	}
+	let eventTable = $derived(data.events.events);
 
 	//// Leaderboard Database logic
 	// new event source for websocket
 	let scoreEndpoint: EventSource;
-	let playerEndpoint: EventSource;
+	let eventEndpoint: EventSource;
 
 	onMount(() => {
 		// get endpoint
@@ -27,19 +22,20 @@
 
 		// when you get a message do something
 		scoreEndpoint.onmessage = (e) => {
-			const parsed = JSON.parse(e.data);
+			const teamsData = JSON.parse(e.data);
 			// If the message has a teams object update the score thing
-			if (parsed['teams']) {
-				teams = parsed['teams'];
+			if (teamsData['teams']) {
+				teams = teamsData['teams'];
 				console.log('teams updated');
 			}
 		};
 		// Player endpoint
-		playerEndpoint = new EventSource('/api/players');
+		eventEndpoint = new EventSource('/api/registeredEvents');
 
-		playerEndpoint.onmessage = (e) => {
-			let playerData = JSON.parse(e.data);
-			console.log(playerData);
+		eventEndpoint.onmessage = (e) => {
+			const eventData = JSON.parse(e.data);
+			console.log(eventData);
+			eventTable = eventData;
 		};
 	});
 
@@ -50,16 +46,45 @@
 	let leaderboard = $derived([...teams].sort((a, b) => b.points - a.points));
 </script>
 
+{#snippet header()}
+	<th>Event</th>
+	<th>Division</th>
+	<th>Players</th>
+{/snippet}
+
+{#snippet row(d: any)}
+	<td>{d.name}</td>
+	<td>{d.division}</td>
+	<td>
+		<div class="flex justify-center">
+			{#each d.registeredPlayers as player}
+				<div
+					style="--theme-color: {player.teamColor};"
+					class="player-box w-min-0 m-1 flex aspect-square h-[100px] flex-col rounded-md border-2"
+				>
+					<div>{player.firstName} {player.lastName}</div>
+					<div></div>
+					<div>pic</div>
+					{#if player.placement != 0}
+						<div>{player.placement}</div>
+					{/if}
+					<div>{player.teamName}</div>
+				</div>
+			{/each}
+		</div>
+	</td>
+{/snippet}
+
 <svelte:window onbeforeunload={() => scoreEndpoint?.close()} />
 
 <div class="p-[2vw]">
-	{#each leaderboard as house (house.name)}
+	{#each leaderboard as team (team.name)}
 		<div
-			style="--theme-color: {house.color};"
+			style="--theme-color: {team.color};"
 			class="score-box mb-2 aspect-3/1 rounded-2xl border-5 first:aspect-2/1"
 		>
-			<div class="text-center">{house.name}</div>
-			<div class="items-center justify-center text-center"><p>{house.points}</p></div>
+			<div class="text-center">{team.name}</div>
+			<div class="items-center justify-center text-center"><p>{team.points}</p></div>
 		</div>
 	{/each}
 </div>
@@ -69,13 +94,14 @@
 		// Onclick send a request to the post endpoint
 		fetch('/api/teams', {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ message: 'hello' })
+			headers: { 'Content-Type': 'application/json' }
 		})}
 >
 	Send update
 </button>
 
+<Table data={eventTable} {header} {row} />
+
 <style>
 	@import url('https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css');
 	.score-box {
@@ -83,4 +109,9 @@
 		border-color: var(--theme-color);
 		background-color: color-mix(in srgb, var(--theme-color), transparent 90%);
 	}
+	.player-box {
+		color: var(--theme-color);
+		border-color: var(--theme-color);
+		background-color: color-mix(in srgb, var(--theme-color), transparent 90%);
+	}
 </style>

src/routes/Table.svelte

@@ -2,7 +2,7 @@
 	let { data, header, row } = $props();
 </script>
 
-<table class="w-full table-fixed">
+<table class="w-full table-auto">
 	{#if header}
 		<thead>
 			<tr>{@render header()}</tr>
@@ -17,20 +17,13 @@
 </table>
 
 <style>
-	table {
-		text-align: left;
-		border-spacing: 0;
+	table :global(th:not(.large)),
+	table :global(td:not(.large)) {
+		width: 1%;
 		padding: 0;
 		margin: 0;
 	}
-
 	tbody tr:nth-child(2n + 1) {
-		background: blue;
-	}
-
-	table :global(th),
-	table :global(td) {
-		padding: 0;
-		margin: 0;
+		background: var(--ctp-mocha-surface1);
 	}
 </style>