very important changes

TODO.md

@@ -0,0 +1,36 @@
+# UI - Medium priority
+player view - all registered events and scores for those events
+team view - all registered players and all points gained from them - Do i need this?
+
+# Login stuff - HIGH PRIORITY
+disableable register button on the login page for end users
+make a way to toggle on and off the register page
+protect the register endpoint?? (low prio)
+
+# Ledger - HIGH PRIORITY
+ledger view
+inserting manually into ledger
+
+# Database - HIGH PRIORITY
+make events score based off of highest score instead of avg
+load results from the excel sheet i made
+export whole contest results to csv
+
+# OPTIONAL (low priority)
+chat thing
+protect all the endpoints?????? (pain in the ass)
+
+> probably need just in case, seems possible with one endpoint/interface
+## Non-seeded data
+manual registering of teams
+live editing of event/score presets
+manual registering of events
+manual registering of players
+result amendments
+
+## Easy shit
+animations for all leaderboards
+Ongoing since... or ongoing for... on the main page
+displaying averages of loaded scores when there's more than one (easy, low prio)
+fix the layout on event view to match the homepage view
+fix the marquee animation thing and make it global

eslint.config.js

@@ -20,8 +20,6 @@ export default defineConfig(
 	{
 		languageOptions: { globals: { ...globals.browser, ...globals.node } },
 		rules: {
-			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
-			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
 			'no-undef': 'off'
 		}
 	},
@@ -37,8 +35,6 @@ export default defineConfig(
 		}
 	},
 	{
-		// Override or add rule settings here, such as:
-		// 'svelte/button-has-type': 'error'
 		rules: {}
 	}
 );

scripts/seed.ts

@@ -28,7 +28,7 @@ function readCSV(filename: string): Record<string, any>[] {
 async function seed() {
 	console.log('Resetting database...');
 
-	// Disable foreign keys globally during setup to prevent structural mismatches
+	// Temporarily disable FK checks during reset
 	await client.execute('PRAGMA foreign_keys = OFF');
 
 	await db.delete(schema.scoreLedger);
@@ -53,30 +53,35 @@ async function seed() {
 	let passwordHash = await Bun.password.hash('password');
 	await db
 		.insert(schema.scorers)
-		.values({ id: crypto.randomUUID(), username: 'admin', passwordHash: passwordHash });
+		.values({
+			id: crypto.randomUUID(),
+			username: 'admin',
+			role: 'admin',
+			passwordHash: passwordHash
+		});
 
-	// --- 1. Teams ---
+	// Seed teams
 	const teamsCSV = readCSV('teams.csv');
 	for (const row of teamsCSV) {
 		await db.insert(schema.teams).values({ name: row.team_name, color: row.color });
 		console.log(`  → Team: ${row.team_name} (${row.color})`);
 	}
 
-	// --- 2. Divisions ---
+	// Seed divisions
 	const divisionsCSV = readCSV('divisions.csv');
 	for (const row of divisionsCSV) {
 		await db.insert(schema.divisions).values({ name: row.div_name });
 		console.log(`  → Division: ${row.div_name}`);
 	}
 
-	// --- 2.5 Brackets (Added Section) ---
+	// Seed brackets
 	const bracketsCSV = readCSV('brackets.csv');
 	for (const row of bracketsCSV) {
 		await db.insert(schema.brackets).values({ name: row.bracket_name });
 		console.log(`  → Bracket: ${row.bracket_name}`);
 	}
 
-	// --- 2.75 resultPresets ---
+	// Seed result presets
 	const resultPresetsCSV = readCSV('resultPresets.csv');
 	for (const row of resultPresetsCSV) {
 		await db.insert(schema.resultPresets).values({
@@ -91,7 +96,7 @@ async function seed() {
 		);
 	}
 
-	// --- 3. Scoring Presets ---
+	// Seed scoring presets
 	const scoringPresetsCSV = readCSV('scoringPresets.csv');
 	for (const row of scoringPresetsCSV) {
 		await db.insert(schema.scoringPresets).values({
@@ -102,19 +107,19 @@ async function seed() {
 		console.log(`  → Preset ${row.preset}: placement ${row.placement} = ${row.points}pts`);
 	}
 
-	// Maps for dynamic relational lookups
+	// Build lookup maps for relational seeding
 	const dbTeams = await db.select().from(schema.teams);
 	const dbDivisions = await db.select().from(schema.divisions);
 	const dbResults = await db.select().from(schema.resultPresets);
-	const dbBrackets = await db.select().from(schema.brackets); // Look up newly seeded brackets
+	const dbBrackets = await db.select().from(schema.brackets);
 
 	const teamMap = new Map(dbTeams.map((t) => [t.name, t.id]));
 	const divisionMap = new Map(dbDivisions.map((d) => [d.name, d.id]));
 	const divisionNameMap = new Map([...divisionMap.entries()].map(([name, id]) => [id, name]));
-	const bracketMap = new Map(dbBrackets.map((b) => [b.name, b.id])); // Map names to IDs
-	const resultPresetMap = new Map(dbResults.map((b) => [b.presetName, b.id])); // Map names to IDs
+	const bracketMap = new Map(dbBrackets.map((b) => [b.name, b.id]));
+	const resultPresetMap = new Map(dbResults.map((b) => [b.presetName, b.id]));
 
-	// --- 4. Players ---
+	// Seed players
 	const playersCSV = readCSV('players.csv');
 	for (const row of playersCSV) {
 		const teamId = teamMap.get(row.team);
@@ -132,7 +137,7 @@ async function seed() {
 		);
 	}
 
-	// --- 5. Event Types ---
+	// Seed event types
 	const eventTypesCSV = readCSV('eventTypes.csv');
 	for (const row of eventTypesCSV) {
 		const presetId = resultPresetMap.get(row.resultPreset);
@@ -150,7 +155,7 @@ async function seed() {
 	const dbEventTypes = await db.select().from(schema.eventTypes);
 	const eventTypeMap = new Map(dbEventTypes.map((et) => [et.name, et.id]));
 
-	// --- 6. Registered Events ---
+	// Seed registered events
 	const eventNameMap = new Map<string, number>();
 	const registeredEventsCSV = readCSV('registeredEvents.csv');
 
@@ -176,11 +181,11 @@ async function seed() {
 			`  → Registered Event [id:${inserted.id}]: ${row.event_type} | ${row.division}, winner: ${teamId}, ${row.winner}`
 		);
 
-		// Map the textual event name (e.g., "100m Sprint") to the generated DB ID
+		// Map event name|division to the generated event ID
 		eventNameMap.set(`${row.event_type}|${row.division}`, inserted.id);
 	}
 
-	// --- 7. Registered Players ---
+	// Seed registered players (linking players to events)
 	const dbPlayers = await db.select().from(schema.players);
 	const playerMap = new Map(dbPlayers.map((p) => [`${p.firstName} ${p.lastName}`, p]));
 
@@ -190,7 +195,6 @@ async function seed() {
 		const divisionName = divisionNameMap.get(player?.division ?? -1);
 		const actualEventId = eventNameMap.get(`${row.event_registered}|${divisionName}`);
 
-		// Dynamic look up of the bracket row's primary key ID using the CSV text
 		const bracketId = bracketMap.get(row.bracket);
 
 		if (!player) throw new Error(`Player "${row.player_registered}" not found`);
@@ -203,7 +207,7 @@ async function seed() {
 		await db.insert(schema.registeredPlayers).values({
 			playerID: player.id,
 			registeredEventID: actualEventId,
-			bracket: bracketId, // Using the real relational ID instead of raw value
+			bracket: bracketId,
 			placement: row.player_placement || 0
 		});
 		console.log(
@@ -211,7 +215,7 @@ async function seed() {
 		);
 	}
 
-	// Re-enable Foreign Key constraints now that the data is built cleanly
+	// Re-enable FK checks
 	await client.execute('PRAGMA foreign_keys = ON');
 
 	console.log('\n✅ Seeding complete!');

src/app.d.ts

@@ -1,7 +1,6 @@
 import type { User, Session } from 'better-auth/minimal';
 
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
+// SvelteKit app type declarations
 declare global {
 	namespace App {
 		interface Locals { user?: User; session?: Session }

src/hooks.server.ts

@@ -19,7 +19,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	const { session, user } = await validateSessionToken(token);
 
 	if (session) {
-		setSessionTokenCookie(event, token, session.expiresAt); // refresh cookie expiry
+		setSessionTokenCookie(event, token, session.expiresAt);
 	} else {
 		deleteSessionTokenCookie(event);
 	}

src/lib/index.ts

@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+// Place shared exports accessible via $lib alias here

src/lib/server/auth.ts

@@ -34,13 +34,13 @@ export async function validateSessionToken(token: string) {
 
 	if (!row) return { session: null, user: null };
 
-	// Expired — clean up and reject
+	// Session expired, delete it
 	if (Date.now() >= row.session.expiresAt.getTime()) {
 		await db.delete(sessions).where(eq(sessions.id, sessionId));
 		return { session: null, user: null };
 	}
 
-	// Sliding expiration: renew if past the halfway mark
+	// Renew session if past the halfway point
 	if (Date.now() >= row.session.expiresAt.getTime() - DAY_MS * 15) {
 		const newExpiresAt = new Date(Date.now() + DAY_MS * 30);
 		await db.update(sessions).set({ expiresAt: newExpiresAt }).where(eq(sessions.id, sessionId));
@@ -59,7 +59,7 @@ export function setSessionTokenCookie(event: RequestEvent, token: string, expire
 		expires: expiresAt,
 		path: '/',
 		httpOnly: true,
-		secure: !import.meta.env.DEV, // allow http in local dev
+		secure: !import.meta.env.DEV,
 		sameSite: 'lax'
 	});
 }

src/lib/server/databaseManager.ts

@@ -1,9 +1,9 @@
 import { db } from '$lib/server/db';
-import { eq } from 'drizzle-orm';
+import { sql, eq, and } from 'drizzle-orm';
 import * as schema from '$lib/server/db/schema';
 import { globalEmitter } from './globalEmitter';
 
-// For page.server.ts so that it doesnt look weird before loading
+// Initial data for page load
 export async function getAllInitialInfo() {
 	return {
 		teams: await getTeams(),
@@ -11,7 +11,7 @@ export async function getAllInitialInfo() {
 	};
 }
 
-// Get teams object from database
+// Fetch teams with optional filter
 export async function getTeams(teamId?: number) {
 	const allTeams = await db
 		.select()
@@ -32,7 +32,7 @@ export async function getTeams(teamId?: number) {
 	};
 }
 
-// Get all registered events from database
+// Fetch registered events with optional filter
 export async function getRegisteredEvents(eventId?: number) {
 	async function getWinnerInfo(teamId: number) {
 		const teamInfo = await getTeams(teamId);
@@ -74,7 +74,6 @@ export async function startEvent(eventId: number) {
 		.from(schema.registeredEventsView)
 		.where(eq(schema.registeredEventsView.eventId, eventId));
 	let requestedEvent = event[0];
-	console.log(requestedEvent);
 	if (requestedEvent.state != 0) {
 		console.log('not startable');
 		return false;
@@ -84,26 +83,26 @@ export async function startEvent(eventId: number) {
 			.set({ state: 1 })
 			.where(eq(schema.registeredEvents.id, requestedEvent.eventId))
 			.returning();
-		console.log(replacedEvent);
 		globalEmitter.emit('eventUpdate');
 		return true;
 	}
 }
 
-// Get all players with an event id specified
-export async function getAllRegisteredEventPlayers(eventId: number) {
+// Fetch all players registered for a specific event
+export async function getAllRegisteredEventPlayers(eventId: number, getScores?: boolean) {
 	const eventPlayers = await db
 		.select()
 		.from(schema.registeredEventPlayersView)
-		// where the registered player is registered for that event
 		.where(eq(schema.registeredEventPlayersView.eventId, eventId))
 		.orderBy(
 			schema.registeredEventPlayersView.bracket,
-			schema.registeredEventPlayersView.placement,
+			sql`CASE WHEN ${schema.registeredEventPlayersView.placement} = 0 THEN 999999 ELSE ${schema.registeredEventPlayersView.placement} END ASC`,
 			schema.registeredEventPlayersView.teamName
 		);
-	return {
-		eventPlayers: eventPlayers.map((players) => ({
+
+	// 1. Wrap the map in Promise.all and await it
+	const resolvedPlayers = await Promise.all(
+		eventPlayers.map(async (players) => ({
 			id: players.playerId,
 			firstName: players.firstName,
 			lastName: players.lastName,
@@ -114,8 +113,14 @@ export async function getAllRegisteredEventPlayers(eventId: number) {
 			eventName: players.eventName,
 			teamId: players.teamId,
 			teamName: players.teamName,
-			teamColor: players.teamColor
+			teamColor: players.teamColor,
+			playerScores: getScores == true ? await getPlayerScores(players.playerId, eventId) : undefined
 		}))
+	);
+
+	// 2. Return the fully resolved data
+	return {
+		eventPlayers: resolvedPlayers
 	};
 }
 
@@ -127,6 +132,43 @@ export async function getAllBrackets() {
 	};
 }
 
+export async function getPlayerInfo(playerId: number) {
+	const playerInfo = await db.select().from(schema.players).where(eq(schema.players.id, playerId));
+	const teamInfo = await db
+		.select()
+		.from(schema.teams)
+		.where(eq(schema.teams.id, playerInfo[0].team));
+	return { ...playerInfo[0], teamInfo: teamInfo[0] };
+}
+
+export async function getPlayerScores(playerId: number, eventId?: number) {
+	const playerRegistrations = await getPlayerRegistrations(playerId, eventId);
+	let scoresObject: any[] = [];
+	for (let registration in playerRegistrations) {
+		let currentReg = playerRegistrations[registration];
+		let scores = await db
+			.select()
+			.from(schema.registeredResults)
+			.where(eq(schema.registeredResults.registeredPlayerId, currentReg.registeredPlayerId));
+		scoresObject.push(...scores);
+	}
+	return scoresObject;
+}
+
+export async function getPlayerRegistrations(playerId: number, eventId?: number) {
+	const playerRegistrations = await db
+		.select()
+		.from(schema.registeredEventPlayersView)
+		.where(
+			and(
+				eq(schema.registeredEventPlayersView.playerId, playerId),
+				eventId ? eq(schema.registeredEventPlayersView.eventId, eventId) : undefined
+			)
+		);
+
+	return playerRegistrations;
+}
+
 export async function getResultPreset(presetId?: number) {
 	const resultPresets = await db
 		.select()
@@ -138,48 +180,37 @@ export async function getResultPreset(presetId?: number) {
 	};
 }
 
-// Moved the function the registeredEvents endpoint
-// Just merges the results of the previous 3 functions into a standard format
+// Merge events, players, brackets, and presets into a frontend-ready structure
 export async function getRegisteredEventsWithPlayers(eventId?: number) {
-	// Get updated events from database
 	let newEvents = await getRegisteredEvents(eventId);
 	let registeredEventList = newEvents['events'];
 
-	// Get all possible brackets from the database
 	let brackets = await getAllBrackets();
 
-	// Initilise the final eventList
 	let fullEventList: any[] = [];
 
-	// For every event
 	for (let registeredEvent in registeredEventList) {
 		let event = registeredEventList[registeredEvent];
-
-		// Get the info about the result preset for the ui
 		let resultPreset = await getResultPreset(event.resultPreset);
+		let registeredPlayers = await getAllRegisteredEventPlayers(
+			event.id,
+			eventId != undefined ? true : undefined
+		);
 
-		// Get all players for the event
-		let registeredPlayers = await getAllRegisteredEventPlayers(event.id);
-
-		// Map the players into an [] with structure {id: number, name: string, items: any[]}
-		// So that the players are sorted by bracket for the frontend
+		// Group players by bracket category for the frontend
 		const bracketOrder = brackets.brackets.map((category) => {
 			return {
 				...category,
-				// Filter the items that match the current bracket name
 				items: registeredPlayers.eventPlayers.filter((item) => item.bracket === category.name)
 			};
 		});
 
-		// append the player info and result preset to the event object
 		let eventWithPlayers = {
 			...event,
 			registeredPlayers: bracketOrder,
 			...resultPreset
 		};
-		// combine all of the events into one array
 		fullEventList.push(eventWithPlayers);
 	}
-	// Send to client
 	return fullEventList;
 }

src/lib/server/db/schema.ts

@@ -9,7 +9,7 @@ export const scorers = sqliteTable('users', {
 });
 
 export const sessions = sqliteTable('sessions', {
-	id: text('id').primaryKey(), // SHA-256 hash of the token, never the raw token
+	id: text('id').primaryKey(),
 	userId: text('user_id')
 		.notNull()
 		.references(() => scorers.id),

src/lib/server/endpoint.ts

@@ -1,34 +1,77 @@
 export async function generateEndpoint(
-	startFunction?: (enqueue: (data: any) => void) => void | Promise<void | (() => void)>
+	startFunction?: (enqueue: (data: any) => void) => void | Promise<void | (() => void)>,
+	request?: Request
 ) {
 	let streamController: ReadableStreamDefaultController | null = null;
 	let cleanupFunction: (() => void) | void = undefined;
+	let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+	let cleanedUp = false;
+
+	const safeCleanup = () => {
+		if (cleanedUp) return;
+		cleanedUp = true;
+
+		if (heartbeatInterval) {
+			clearInterval(heartbeatInterval);
+			heartbeatInterval = null;
+		}
+
+		if (typeof cleanupFunction === 'function') {
+			cleanupFunction();
+			cleanupFunction = undefined;
+		}
+	};
 
 	const enqueue = (data: any) => {
+		if (cleanedUp) return;
 		let transferdata = JSON.stringify(data);
-		// stringify data and add to controller queue
 		if (streamController) {
+			try {
 				streamController.enqueue(`data: ${transferdata}\n\n`);
-		} else {
-			console.log('no controller');
+			} catch {
+				safeCleanup();
+			}
 		}
 	};
 
 	const stream = new ReadableStream({
 		async start(controller) {
 			streamController = controller;
+
+			heartbeatInterval = setInterval(() => {
+				try {
+					streamController!.enqueue(': keepalive\n\n');
+				} catch {
+					safeCleanup();
+				}
+			}, 30000);
+			heartbeatInterval.unref();
+
 			if (startFunction) {
+				try {
 					const result = await startFunction(enqueue);
 					if (typeof result === 'function') {
 						cleanupFunction = result;
 					}
+				} catch (err) {
+					safeCleanup();
+					throw err;
+				}
 			}
 		},
 		async cancel() {
-			if (cleanupFunction) cleanupFunction();
+			safeCleanup();
 		}
 	});
 
+	if (request?.signal) {
+		if (request.signal.aborted) {
+			safeCleanup();
+		} else {
+			request.signal.addEventListener('abort', () => safeCleanup());
+		}
+	}
+
 	return {
 		response: new Response(stream, {
 			headers: {

src/lib/server/globalEmitter.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from 'node:events';
 
-// Main emitter for everything
-
 export const globalEmitter = new EventEmitter();
+globalEmitter.setMaxListeners(1000);

src/lib/ui/Table.svelte

@@ -13,33 +13,26 @@
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let activeId = $state<string | number | null>(null);
 
-	/**
-	 * Public function to scroll a specific row into the center of the viewport.
-	 * Can be called manually by the parent component.
-	 */
+	/** Scroll a specific row to the center of the viewport */
 	export function scrollToId(id: string | number) {
 		if (!containerRef) return;
 
 		const targetRow = containerRef.querySelector(`#row-${id}`) as HTMLElement | null;
 		if (targetRow) {
-			// Update local state to highlight the centered row
 			activeId = id;
 
-			// Calculate the midpoint math to center the row
 			const rowOffsetTop = targetRow.offsetTop;
 			const rowHeight = targetRow.offsetHeight;
-			const containerHeight = containerRef.clientHeight;
 
-			// Target = Row position - (half of container space) + (half of row height adjustment)
 			const centerScrollTarget = rowOffsetTop - containerHeight / 2 + rowHeight / 2;
 
-			// Using behavior: 'auto' for an instantaneous snap instead of smooth scrolling
 			containerRef.scrollTo({
 				top: centerScrollTarget,
 				behavior: 'auto'
 			});
 		}
 	}
+	}
 </script>
 
 <div bind:this={containerRef} class="table-container" style="max-height: {maxHeight};">

src/lib/ui/fitText.ts

@@ -10,7 +10,7 @@ export const fitText: Action<HTMLElement> = (node) => {
 		node.style.transformOrigin = 'top left';
 		node.style.transform = 'none';
 
-		// Step 1: fit to height
+		// Fit font size to container height
 		let size = 1;
 		node.style.fontSize = size + 'px';
 		while (node.scrollHeight <= container!.clientHeight) {
@@ -19,7 +19,7 @@ export const fitText: Action<HTMLElement> = (node) => {
 		}
 		node.style.fontSize = size - 1 + 'px';
 
-		// Step 2: stretch width to fill container
+		// Stretch width to fill container
 		const scaleX = container!.clientWidth / node.scrollWidth;
 		node.style.transform = `scaleX(${scaleX})`;
 	}

src/routes/+layout.server.ts

@@ -0,0 +1,15 @@
+// alternative, if role isn't on locals.user
+import { eq } from 'drizzle-orm';
+import { db } from '$lib/server/db';
+import { scorers } from '$lib/server/db/schema';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	if (!locals.user) return { user: null };
+
+	const [row] = await db
+		.select({ role: scorers.role })
+		.from(scorers)
+		.where(eq(scorers.id, locals.user.id));
+	return { user: { ...locals.user, role: row?.role ?? 'scorer' } };
+};

src/routes/+layout.svelte

@@ -1,22 +1,41 @@
 <script lang="ts">
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import type { LayoutData } from './$types';
 
-	let { children } = $props();
+	let { children, data }: { children: import('svelte').Snippet; data: LayoutData } = $props();
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
 <div class="header goldman flex h-15 w-full">
 	<a
-		class="align-text-middle justify-left mx-3 my-1 h-auto content-center rounded-sm border-2 border-solid border-red-500 px-2"
+		class="align-text-middle justify-left mx-3 my-1 h-auto content-center rounded-sm border-2
+		border-solid border-red-500 px-2"
 		href="/">home</a
 	>
 	<div class="w-full"></div>
+
+	{#if data.user?.role === 'admin'}
 		<a
-		class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2 border-solid border-red-500 px-2"
+			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
+			border-solid border-red-500 px-2"
+			href="/ledger">ledger</a
+		>
+	{/if}
+	{#if data.user}
+		<a
+			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
+	border-solid border-red-500 px-2"
+			href="/login">logout</a
+		>
+	{:else}
+		<a
+			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
+			border-solid border-red-500 px-2"
 			href="/login">login</a
 		>
+	{/if}
 </div>
 
 {@render children()}

src/routes/+page.server.ts

@@ -1,6 +1,6 @@
 import { getAllInitialInfo } from '$lib/server/databaseManager';
 
-// Literally only here so that the frontend has the right structure
+// Provide initial data for the home page
 export const load = async () => {
 	return await getAllInitialInfo();
 };

src/routes/+page.svelte

@@ -14,21 +14,18 @@
 	let scoreEndpoint: EventSource;
 	let eventEndpoint: EventSource;
 
-	// Ref map for event card DOM nodes
+	// Map event IDs to their DOM elements for scrolling
 	let eventRefs = $state<Record<number, HTMLElement>>({});
 
 	onMount(() => {
-		// Get the teams endpoint
+		// Subscribe to live team score updates via SSE
 		scoreEndpoint = new EventSource('/api/teams');
-		// When the endpoint sends something
 		scoreEndpoint.onmessage = (e) => {
-			// Parse the json
 			const teamsData = JSON.parse(e.data);
-			// If its teams info, then update the teams thing
 			if (teamsData['teams']) teams = teamsData['teams'];
 		};
 
-		// Basically same for events
+		// Subscribe to live event updates via SSE
 		eventEndpoint = new EventSource('/api/registeredEvents');
 		eventEndpoint.onmessage = (e) => {
 			eventTable = JSON.parse(e.data);
@@ -50,22 +47,29 @@
 		return n + (s[(v - 20) % 10] ?? s[v] ?? s[0]);
 	}
 
-	// When focusEventId changes, scroll to and highlight that event card
+	function sortPlayers(items: any) {
+		return [...items].sort((a, b) => {
+			// If a is unranked and b is ranked, move a down
+			if (a.placement === 0 && b.placement !== 0) return 1;
+			// If a is ranked and b is unranked, move a up
+			if (a.placement !== 0 && b.placement === 0) return -1;
+			// If both are ranked, sort numerically ascending (1st, 2nd, 3rd...)
+			return a.placement - b.placement;
+		});
+	}
+
+	// Scroll to and highlight the currently ongoing event
 	$effect(() => {
 		if (focusEventId == null) return;
 		tick().then(() => {
-			// Get focused element
 			const el = eventRefs[focusEventId!];
-			// Scroll it to the top of the box
 			el.scrollIntoView({ alignToTop: true, behavior: 'instant', container: 'nearest' });
-			// Wait for that to finish
 			tick().then(() => {
-				// Scroll the window back to the top
 				window.scrollTo(0, 0);
 			});
 		});
 	});
-	// Svelte action: measures text overflow and drives CSS marquee
+	// Svelte action that enables CSS marquee when text overflows
 	function marquee(node: HTMLElement) {
 		function measure() {
 			const inner = node.querySelector<HTMLElement>('.marquee-inner');
@@ -88,9 +92,9 @@
 <svelte:window onbeforeunload={() => scoreEndpoint?.close()} />
 
 <div class="page">
-	<!-- ═══════════ LEADERBOARD ═══════════ -->
+	<!-- LEADERBOARD -->
 	<section class="leaderboard">
-		<!-- Winner — always full-width -->
+		<!-- Winner, always full-width -->
 		{#if leaderboard[0]}
 			{@const team = leaderboard[0]}
 			<a
@@ -122,7 +126,7 @@
 			</a>
 		{/if}
 
-		<!-- Runners-up: stretch to fill row, max 5 wide, 1 col on small -->
+		<!-- Runners-up, responsive grid -->
 		{#if leaderboard.length > 1}
 			<div class="runners-grid" style="--runner-count:{Math.min(leaderboard.length - 1, 5)}">
 				{#each leaderboard.slice(1) as team, i (team.name)}
@@ -158,7 +162,7 @@
 		{/if}
 	</section>
 
-	<!-- ═══════════ EVENTS TABLE ═══════════ -->
+	<!-- EVENTS TABLE -->
 	<p class="section-label">Events</p>
 
 	<section class="events-scroll">
@@ -167,7 +171,9 @@
 				<div
 					class="event-card"
 					class:ongoing-event={event.state == 1}
+					class:completed-event={event.state == 2}
 					bind:this={eventRefs[event.id]}
+					style={event.state == 2 ? `--event-color: ${event.winner.color}` : ''}
 				>
 					<div class="event-header">
 						<a href="/event/{event.id}" class="event-name goldman">{event.name}</a>
@@ -195,7 +201,7 @@
 									<span class="brackets-name-text align-text-middle">{bracket.name}</span>
 									<div class="bracket-vertical-sep"></div>
 								</div>
-								{#each bracket.items as player}
+								{#each sortPlayers(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">
@@ -211,10 +217,10 @@
 											</svg>
 										</div>
 										<div class="player-name-wrap" use:marquee>
-											<span class="marquee-inner">
+											<a href="/stats/player/{player.id}" class="marquee-inner">
 												{player.firstName}
 												{player.lastName}
-											</span>
+											</a>
 										</div>
 										{#if player.placement !== 0}
 											<div class="player-placement goldman">{ordinal(player.placement)}</div>

src/routes/api/eventResults/+server.ts

@@ -5,31 +5,25 @@ import * as schema from '$lib/server/db/schema';
 import { getRegisteredEvents } from '$lib/server/databaseManager';
 
 export async function POST({ request }: any) {
-	// Decode body
 	let responseBody = await request.json();
 
-	// If there is no request then dont respond
 	if (!responseBody) {
 		return new Error('nuh uh');
 	} else {
-		console.log(JSON.stringify(responseBody));
 		if (responseBody.eventId) {
-			// Get the event
 			let eventData = await getRegisteredEvents(responseBody.eventId);
 
-			// If the event hasnt started or ended
 			if (eventData.events[0].state != 1) {
 				return new Error();
 			}
 			let scoringPreset = eventData.events[0].scoringPreset;
 
-			// make a new main ledger entry
+			// Create ledger entry to record this scoring event
 			let newLedgerEntry = await db
 				.insert(schema.mainLedger)
 				.values({ registeredEvent: responseBody.eventId })
 				.returning();
 
-			// get the id so i can use it in the sub ledgers
 			let ledgerEntryId = newLedgerEntry[0].id;
 
 			function getPoints(
@@ -44,42 +38,48 @@ export async function POST({ request }: any) {
 				);
 			}
 
-			// Create a Map to collect total scores per team
+			// Accumulate scores per team, then batch insert
 			const teamScores = new Map<any, number>();
 
-			// for every bracket
 			for (let bracket in responseBody.brackets) {
-				// for every player
 				for (let player in responseBody.brackets[bracket].players) {
-					// variable fun
 					let currentPlayer = responseBody.brackets[bracket].players[player];
 					let currentPlayerTeam = currentPlayer.teamId;
 					let currentPlayerPosition = currentPlayer.position;
 
-					// If they put in a score / result
 					if (currentPlayerPosition > 0) {
 						let score = getPoints(scoringPreset, currentPlayerPosition);
-						// If their score is in the preset and they put in a score
 						if (currentPlayer.scores.length > 0) {
 							if (score > 0) {
-								// Accumulate points for this team instead of inserting right away
 								const currentTeamScore = teamScores.get(currentPlayerTeam) || 0;
 								teamScores.set(currentPlayerTeam, currentTeamScore + score);
 							}
 
-							// PLACEMENT LOGIC (Left untouched)
+							for (let result in currentPlayer.scores) {
+								let currentResult = currentPlayer.scores[result];
+								let newScoreEntry = await db
+									.insert(schema.registeredResults)
+									.values({
+										registeredPlayerId: currentPlayer.registeredPlayerId,
+										resultIndex: parseInt(result),
+										result: currentResult
+									})
+									.returning();
+								console.log(newScoreEntry);
+							}
+
+							// Update player placement in the database
 							let newPlayerPlacement = await db
 								.update(schema.registeredPlayers)
 								.set({ placement: currentPlayerPosition })
 								.where(eq(schema.registeredPlayers.id, currentPlayer.registeredPlayerId))
 								.returning();
-							console.log(newPlayerPlacement[0].placement, currentPlayer.firstName);
 						}
 					}
 				}
 			}
 
-			// After calculating all player scores, batch insert team scores into the ledger
+			// Batch insert team scores into the ledger
 			if (teamScores.size > 0) {
 				const ledgerEntries = Array.from(teamScores.entries()).map(([teamID, points]) => ({
 					ledgerID: ledgerEntryId,
@@ -88,10 +88,9 @@ export async function POST({ request }: any) {
 				}));
 
 				let newScores = await db.insert(schema.scoreLedger).values(ledgerEntries).returning();
-				console.log(newScores);
 			}
 
-			// 2. Determine the winner right here using the same Map data
+			// Determine the winning team from accumulated scores
 			let highestScore = -1;
 			let winningTeamId = null;
 
@@ -108,13 +107,11 @@ export async function POST({ request }: any) {
 					.set({ teamWinner: winningTeamId, state: 2, timeCompleted: Date.now() })
 					.where(eq(schema.registeredEvents.id, responseBody.eventId))
 					.returning();
-				console.log(teamWinnerUpdate);
 			}
 		}
 
-		// Update the frontends
 		globalEmitter.emit('scoreUpdate');
-		// Return a response because
+		globalEmitter.emit('eventUpdate');
 		return new Response('coolsies');
 	}
 }

src/routes/api/logout/+server.ts

@@ -0,0 +1,12 @@
+import { redirect } from '@sveltejs/kit';
+import { invalidateSession, deleteSessionTokenCookie } from '$lib/server/auth';
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async (event) => {
+	if (event.locals.session) {
+		await invalidateSession(event.locals.session.id);
+	}
+	deleteSessionTokenCookie(event);
+
+	throw redirect(303, '/login');
+};

src/routes/api/registeredEvents/+server.ts

@@ -2,44 +2,32 @@ import { getRegisteredEventsWithPlayers } from '$lib/server/databaseManager';
 import { globalEmitter } from '$lib/server/globalEmitter';
 import { generateEndpoint } from '$lib/server/endpoint';
 
-export async function GET() {
-	// Generate stream endpoint
+export async function GET({ request }) {
 		const endpoint = generateEndpoint(async (enqueue) => {
-		// Get the all the events with the players seperated into brackets
 		let eventList = async () => {
-			// Get eventList with structure from database
 			let newEventList = await getRegisteredEventsWithPlayers();
-			// send to client
 			enqueue(newEventList);
 		};
 
-		// Send the eventList to the client when a connection is made
-		// TODO make it so that this only happens on an initial post request
+		// Send initial data on connection, then subscribe to updates
 		eventList();
-		// When the data changes send an update to the client
 		globalEmitter.on('eventUpdate', eventList);
 
-		// Return cleanup function to remove listener when it closes
 		return () => {
 			globalEmitter.off('eventUpdate', eventList);
 		};
-	});
+	}, request);
 	return (await endpoint).response;
 }
 
 export async function POST({ request }: any) {
-	// Decode body
 	let responseBody = await request.json();
 
-	// If there is no request then dont respond
 	if (!responseBody) {
 		return new Response('nuh uh');
 	} else {
-		// Get requested event
 		let eventRequested = responseBody.eventId;
-		// request eventList from database
 		let eventList = await getRegisteredEventsWithPlayers(eventRequested);
-		// return eventList to client
 		return new Response(JSON.stringify(eventList));
 	}
 }

src/routes/api/registeredPlayers/+server.ts

@@ -2,9 +2,6 @@ import { getAllRegisteredEventPlayers } from '$lib/server/databaseManager';
 import { globalEmitter } from '$lib/server/globalEmitter';
 import { generateEndpoint } from '$lib/server/endpoint';
 
-// Expose post request
 export async function POST({ request }: any) {
-	// When post request recieved increment testscores by 1
-	// Return ok so the frontend is happy
 	return new Response('ok');
 }

src/routes/api/teams/+server.ts

@@ -2,30 +2,25 @@ import { getTeams } from '$lib/server/databaseManager';
 import { globalEmitter } from '$lib/server/globalEmitter';
 import { generateEndpoint } from '$lib/server/endpoint';
 
-// Expose post request
 export async function POST({ request }: any) {
-	// When post request recieved increment testscores by 1
 	globalEmitter.emit('incrementScores');
-	// Return ok so the frontend is happy
 	return new Response('ok');
 }
 
-export async function GET() {
+export async function GET({ request }) {
 	const endpoint = generateEndpoint(async (enqueue) => {
-		// Function to grab score from database and add it to message queue
 		let newScore = async () => {
 			let newScores = await getTeams();
 			enqueue(newScores);
 		};
 
-		// Initial Sync
+		// Send initial team scores, then subscribe to updates
 		newScore();
 		globalEmitter.on('scoreUpdate', newScore);
 
-		// Simply return the cleanup function here
 		return () => {
 			globalEmitter.off('scoreUpdate', newScore);
 		};
-	});
+	}, request);
 	return (await endpoint).response;
 }

src/routes/event/[eventId]/+page.server.ts

@@ -0,0 +1,14 @@
+import { eq } from 'drizzle-orm';
+import { db } from '$lib/server/db';
+import { scorers } from '$lib/server/db/schema';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) return { user: null };
+
+	const [row] = await db
+		.select({ role: scorers.role })
+		.from(scorers)
+		.where(eq(scorers.id, locals.user.id));
+	return { user: { ...locals.user, role: row?.role ?? 'scorer' } };
+};

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import type { PageProps } from './$types';
-	let { params }: PageProps = $props();
+	let { params, data }: PageProps = $props();
 
 	function ordinal(n: number) {
 		const s = ['th', 'st', 'nd', 'rd'];
@@ -44,20 +44,13 @@
 
 		const data = await response.json();
 
-		// Sort the players inside each bracket before returning the data
+		// 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) => {
-					// 1. Both have no placement (placement === 0) -> keep original order
 					if (a.placement === 0 && b.placement === 0) return 0;
-
-					// 2. 'a' has no placement, but 'b' does -> move 'b' to the top
 					if (a.placement === 0) return 1;
-
-					// 3. 'a' has a placement, but 'b' doesn't -> keep 'a' on top
 					if (b.placement === 0) return -1;
-
-					// 4. Both have placements -> sort ascending (1st, 2nd, 3rd, etc.)
 					return a.placement - b.placement;
 				});
 			});
@@ -82,12 +75,21 @@
 	<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}
@@ -99,7 +101,7 @@
 						<div class="bracket-vertical-sep"></div>
 					</div>
 					{#each bracket.items as player}
-						<div class="player-box h-30" style="--c:{player.teamColor}">
+						<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
@@ -121,6 +123,13 @@
 							</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}
@@ -130,10 +139,23 @@
 			{/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>

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

@@ -41,7 +41,6 @@
 	let dropTarget = $state<{ bi: number; pi: number } | null>(null);
 	let submitStatus = $state<'idle' | 'submitting' | 'done' | 'error'>('idle');
 
-	// Drag state
 	let dragSrc = $state<{ bi: number; pi: number } | null>(null);
 
 	let sortByScore = $state(true);
@@ -93,19 +92,17 @@
 			...bracket,
 			items: sortByScore
 				? [...bracket.items].sort((a, b) => {
-						// 1. Check if players actually have committed scores
 						const scoresA = committedScores[a.id]?.filter((s) => s !== null) ?? [];
 						const scoresB = committedScores[b.id]?.filter((s) => s !== null) ?? [];
 
 						const hasA = scoresA.length > 0;
 						const hasB = scoresB.length > 0;
 
-						// 2. Handle cases where one or both don't have scores
-						if (!hasA && !hasB) return 0; // Neither have scores, keep order
-						if (!hasA) return 1; // 'a' has no score -> push down
-						if (!hasB) return -1; // 'b' has no score -> push down
+						// Push unranked players to the bottom, then sort by score
+						if (!hasA && !hasB) return 0;
+						if (!hasA) return 1;
+						if (!hasB) return -1;
 
-						// 3. Both have scores, fallback to standard leaderboard sorting
 						const fallback = lowerIsBetter ? Infinity : -Infinity;
 						const sa = useAverage
 							? average(committedScores[a.id] ?? [], fallback)
@@ -129,7 +126,7 @@
 			headers: { 'Content-type': 'application/json; charset=UTF-8' }
 		});
 		const data = await response.json();
-		console.log(data);
+		console.log(data[0]);
 		event = data[0];
 		brackets = data[0].registeredPlayers.map((b: any) => ({
 			...b,
@@ -158,11 +155,16 @@
 		loading = false;
 
 		eventEndpoint = new EventSource('/api/registeredEvents');
-		eventEndpoint.onmessage = (e) => {
-			const data = JSON.parse(e.data)[eventId - 1];
-			console.log(data);
-			event = data;
-			brackets = data.registeredPlayers.map((b: any) => ({
+		eventEndpoint.onmessage = async (e) => {
+			const response = await fetch('/api/registeredEvents', {
+				method: 'POST',
+				body: JSON.stringify({ eventId }),
+				headers: { 'Content-type': 'application/json; charset=UTF-8' }
+			});
+			const data = await response.json();
+			console.log('sone', data[0]);
+			event = data[0];
+			brackets = data[0].registeredPlayers.map((b: any) => ({
 				...b,
 				items: [...b.items]
 			}));
@@ -254,10 +256,13 @@
 			<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} - scoring {#if event.state == 1}- ONGOING
+				{:else if event.state == 2}- FINISHED
 				{/if}
 			</div>
 
@@ -266,11 +271,6 @@
 					>Start event</button
 				>
 			{/if}
-
-			<!-- <button onclick={() => (sortByScore = !sortByScore)}> -->
-			<!-- 	{sortByScore ? 'Sort: Score' : 'Sort: Manual'} -->
-			<!-- </button> -->
-
 			<div class="flex flex-row justify-center">
 				<div class="flex w-50 min-w-0 flex-col">
 					<div class="brackets-name text-bold">=</div>
@@ -333,6 +333,7 @@
 										{player.lastName}
 									</div>
 									<div class="result-input-containers flex flex-col">
+										{#if event.state == 1}
 											{#each Array.from({ length: numResults }, (_, i) => i) as run}
 												<input
 													type="number"
@@ -357,13 +358,20 @@
 													}}
 												/>
 											{/each}
-									</div>
-								</div>
 											{#if event.resultPresets[0].averageResults == 1}
 												<div class="text-sm opacity-60">
 													avg: {avgScore.toFixed(2)}
 												</div>
 											{/if}
+										{:else if player.playerScores.length > 0}
+											{#each player.playerScores as score}
+												<div class="border-red border-2 px-2">
+													{score.result}{event.resultPresets[0].unit}
+												</div>
+											{/each}
+										{/if}
+									</div>
+								</div>
 							</div>
 						{/each}
 					</div>

src/routes/layout.css

@@ -31,7 +31,7 @@
 	font-weight: 400;
 }
 
-/* ── Leaderboard ── */
+/* Leaderboard */
 .leaderboard {
 	display: flex;
 	flex-direction: column;
@@ -46,7 +46,7 @@
 	border: 2px solid var(--c);
 	color: var(--c);
 	background: color-mix(in srgb, var(--c) 10%, transparent);
-	/* Grid stacking: ghost + fg share the same cell */
+	/* Ghost + foreground stacked in same grid cell */
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr;
@@ -71,7 +71,7 @@
 	min-height: 56px;
 }
 
-/* Ghost SVG: fill the cell edge-to-edge, text flush to bottom */
+/* Ghost SVG fills cell, text sits at bottom */
 .score-ghost {
 	width: 100%;
 	height: 100%;
@@ -84,7 +84,7 @@
 	display: block;
 }
 
-/* Foreground */
+/* Foreground content layer */
 .score-fg {
 	position: relative;
 	z-index: 1;
@@ -126,14 +126,7 @@
 	font-size: clamp(26px, 7.5vw, 52px);
 }
 
-/*
-	 * Runners-up grid:
-	 * - 1 column on small screens (<480px)
-	 * - 2 columns on medium (480–699px)
-	 * - 4 columns on large (≥700px), max 5
-	 * --runner-count drives the actual column count on large screens
-	 *   so fewer than 5 teams still fill the whole row.
-	 */
+/* Responsive runners-up: 1 col <480px, 2 cols 480-699px, 4 cols ≥700px */
 .runners-grid {
 	display: grid;
 	gap: 10px;
@@ -154,8 +147,7 @@
 }
 @media (min-width: 700px) {
 	.runners-grid {
-		/* clamp actual count to 4 on large, but use --runner-count
-			   so e.g. 2 teams still fill 2 equal columns not 2 of 4 */
+		/* Use --runner-count so fewer teams fill the row evenly */
 		grid-template-columns: repeat(min(var(--runner-count), 4), 1fr);
 	}
 	.winner {
@@ -166,7 +158,7 @@
 	}
 }
 
-/* ── Section label ── */
+/* Section label */
 .section-label {
 	font-size: 10px;
 	letter-spacing: 2.5px;
@@ -176,7 +168,7 @@
 	margin: 0;
 }
 
-/* ── Events scrollable container ── */
+/* Events scrollable container */
 .events-scroll {
 	flex: 1;
 	box-shadow: inset 0px 48px 20px -26px rgba(0, 0, 0, 0.35);
@@ -185,7 +177,7 @@
 	/* max-height: 900px; */
 	min-height: 0;
 	padding: 0 14px 24px;
-	/* Thin custom scrollbar */
+	/* Thin scrollbar styling */
 	scrollbar-width: thin;
 	scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent;
 }
@@ -206,7 +198,7 @@
 	color: var(--winner-color);
 }
 
-/* ── Event card ── */
+/* Event card */
 .event-card {
 	border-radius: 12px;
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
@@ -218,7 +210,13 @@
 	background-color: color-mix(in srgb, currentColor 18%, transparent);
 	color: var(--ctp-latte-peach);
 }
-/* Focus highlight pulse — added/removed by $effect */
+
+.completed-event {
+	border-color: var(--event-color);
+	/* If you want a subtle background tint like ongoing events usually have: */
+	background-color: color-mix(in srgb, var(--event-color) 10%, transparent);
+}
+/* Pulse animation for focused event card */
 .event-card.highlight-pulse {
 	animation: card-pulse 1.2s ease-out forwards;
 }
@@ -254,7 +252,7 @@
 	opacity: 0.4;
 }
 
-/* ── Brackets ── */
+/* Brackets */
 .brackets {
 	display: flex;
 	flex-direction: column;
@@ -271,9 +269,9 @@
 	flex-wrap: wrap;
 }
 
-/* ── Player boxes ── */
+/* Player boxes */
 .player-box {
-	flex: 1 1 0; /* equal widths, no min-content bias */
+	flex: 1 1 0;
 	max-width: 160px;
 	position: relative;
 	overflow: hidden;
@@ -287,11 +285,11 @@
 	min-height: 52px;
 }
 
-/* 1 col on small screens, 4 across on large */
+/* Mobile: single column layout */
 @media (max-width: 479px) {
 	.brackets {
 		flex-direction: row;
-		align-items: stretch; /* was flex-start — lets columns fill full height */
+		align-items: stretch;
 	}
 	.bracket-sep {
 		width: 1px;
@@ -326,7 +324,7 @@
 @media (min-width: 700px) {
 	.player-box {
 		max-width: calc(25% - 6px);
-	} /* 4 per row */
+	}
 }
 
 .player-ghost {
@@ -345,9 +343,14 @@
 .player-name-wrap {
 	position: relative;
 	z-index: 1;
+	text-decoration: none;
 	overflow: hidden;
 	white-space: nowrap;
 }
+
+.player-name-wrap:hover {
+	text-decoration: underline;
+}
 .marquee-inner {
 	display: inline-block;
 	font-size: 11px;
@@ -379,5 +382,5 @@
 	margin-top: 2px;
 }
 .player-placement-gap {
-	height: 20px;
+	height: 50px;
 }

src/routes/ledger/+page.server.ts

@@ -0,0 +1,23 @@
+// src/routes/admin/+page.server.ts
+import { error, redirect } from '@sveltejs/kit';
+import { eq } from 'drizzle-orm';
+import { db } from '$lib/server/db';
+import { scorers } from '$lib/server/db/schema';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+
+	const [row] = await db
+		.select({ role: scorers.role })
+		.from(scorers)
+		.where(eq(scorers.id, locals.user.id));
+
+	if (row?.role !== 'admin') {
+		throw error(403, 'Forbidden');
+	}
+
+	return { user: locals.user };
+};

src/routes/ledger/+page.svelte

@@ -0,0 +1 @@
+<div>some</div>

src/routes/login/+page.server.ts

@@ -4,7 +4,13 @@ import { eq } from 'drizzle-orm';
 import { db } from '$lib/server/db';
 import { scorers } from '$lib/server/db/schema';
 import { generateSessionToken, createSession, setSessionTokenCookie } from '$lib/server/auth';
-import type { Actions } from './$types';
+import type { Actions } from '../login/$types';
+
+import type { PageServerLoad } from '../login/$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	return { user: locals.user };
+};
 
 export const actions: Actions = {
 	default: async (event) => {

src/routes/login/+page.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
-	import type { ActionData } from './$types';
+	import type { ActionData, PageData } from './$types';
+	export let data: PageData;
 	export let form: ActionData;
 </script>
 
 <div class="auth-card">
+	{#if data.user}
+		<div class="align-center flex h-full w-full flex-col text-center">
+			<h1>Already logged in</h1>
+			<p>You're signed in as <strong>{data.user.username}</strong></p>
+			<a href="/">Go to home</a>
+			<form method="POST" action="/api/logout">
+				<button type="submit">Log out</button>
+			</form>
+		</div>
+	{:else}
 		<h1>Log in</h1>
 
 		<form method="POST">
@@ -29,6 +40,7 @@
 
 			<button type="submit">Log in</button>
 		</form>
+	{/if}
 
 	<!-- <p class="switch">No account? <a href="/signup">Sign up</a></p> -->
 </div>

src/routes/register/+page.server.ts

@@ -4,7 +4,7 @@ import { eq } from 'drizzle-orm';
 import { db } from '$lib/server/db';
 import { scorers } from '$lib/server/db/schema';
 import { generateSessionToken, createSession, setSessionTokenCookie } from '$lib/server/auth';
-import type { Actions } from './$types';
+import type { Actions } from '../signup/$types';
 
 export const actions: Actions = {
 	default: async (event) => {
@@ -21,7 +21,7 @@ export const actions: Actions = {
 			return fail(400, { message: 'Username already taken' });
 		}
 
-		const passwordHash = await Bun.password.hash(password); // defaults to argon2id
+		const passwordHash = await Bun.password.hash(password);
 		const userId = crypto.randomUUID();
 
 		await db.insert(scorers).values({ id: userId, username, passwordHash });

src/routes/register/+page.svelte

@@ -9,12 +9,19 @@
 	<form method="POST">
 		<label>
 			Username
-			<input name="username" type="text" autocomplete="username" required />
+			<input name="username" class="text-black" type="text" autocomplete="username" required />
 		</label>
 
 		<label>
 			Password
-			<input name="password" type="password" autocomplete="new-password" minlength="8" required />
+			<input
+				class="text-black"
+				name="password"
+				type="password"
+				autocomplete="new-password"
+				minlength="8"
+				required
+			/>
 			<small>At least 8 characters</small>
 		</label>
 

src/routes/stats/player/[playerId]/+page.server.ts

@@ -0,0 +1,14 @@
+import { getPlayerInfo } from '$lib/server/databaseManager';
+import type { PageServerLoad } from './$types';
+
+// export const load: PageServerLoad = async ({ params }) => {
+// 	return {
+// 		data: await getPlayerInfo(parseInt(params.playerId))
+// 	};
+// };
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		playerInfo: getPlayerInfo(parseInt(params.playerId))
+	};
+};

src/routes/stats/player/[playerId]/+page.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+
+	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() };
+	}
+</script>
+
+{#await data.playerInfo}
+	<div>Loading...</div>
+{:then playerInfo}
+	{console.log(playerInfo)}
+	<div class="mt-5 flex justify-center">
+		<div
+			class="player-single-box aspect-square w-full max-w-[95vw] justify-center md:aspect-2/1 lg:aspect-2/1"
+			style="--c:{playerInfo.teamInfo.color}"
+		>
+			<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">{playerInfo.firstName}</text
+					>
+				</svg>
+			</div>
+			<div class=" goldman player-name-wrap text-5xl" use:marquee>
+				{playerInfo.firstName}
+				{playerInfo.lastName}
+			</div>
+		</div>
+	</div>
+{/await}
+
+<style>
+	.player-single-box {
+		flex: 1 1 0;
+		position: relative;
+		overflow: hidden;
+		border-radius: 8px;
+		border: 1.5px solid var(--c);
+		color: var(--c);
+		background: color-mix(in srgb, var(--c) 10%, transparent);
+		padding: 5px 7px 5px;
+		display: flex;
+		flex-direction: column;
+	}
+	.player-name-wrap {
+		position: relative;
+		z-index: 1;
+		text-decoration: none;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+</style>

svelte.config.js

@@ -3,13 +3,10 @@ import adapter from '@sveltejs/adapter-auto';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	compilerOptions: {
-		// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
+		// Force runes mode (except in node_modules). Remove when Svelte 6 makes it default.
 		runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
 	},
 	kit: {
-		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter(),
 
 		typescript: {