changed some table stuff and made the brackets render on seperate rows, players ordered by placement then team name

src/routes/+page.svelte

@@ -56,19 +56,21 @@
 	<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 class="">
+			{#each d.registeredPlayers as bracket}
+				<div class="flex justify-center">
+					{#each bracket.items as player}
+						<div
+							style="--theme-color: {player.teamColor};"
+							class="player-box w-min-0 m-1 flex-1 flex-col rounded-md border-2"
+						>
+							<div>{player.firstName} {player.lastName}</div>
+							<div></div>
+							{#if player.placement != 0}
+								<div>{player.placement}</div>
+							{/if}
+						</div>
+					{/each}
 				</div>
 			{/each}
 		</div>
@@ -76,6 +78,7 @@
 {/snippet}
 
 <svelte:window onbeforeunload={() => scoreEndpoint?.close()} />
+<Table data={eventTable} {header} {row} />
 
 <div class="p-[2vw]">
 	{#each leaderboard as team (team.name)}
@@ -100,8 +103,6 @@
 	Send update
 </button>
 
-<Table data={eventTable} {header} {row} />
-
 <style>
 	@import url('https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css');
 	.score-box {

src/routes/Table.svelte

@@ -5,13 +5,13 @@
 <table class="w-full table-auto">
 	{#if header}
 		<thead>
-			<tr>{@render header()}</tr>
+			<tr class="justify-content-center">{@render header()}</tr>
 		</thead>
 	{/if}
 
 	<tbody>
 		{#each data as d}
-			<tr>{@render row(d)}</tr>
+			<tr class="text-center">{@render row(d)}</tr>
 		{/each}
 	</tbody>
 </table>