Testing things out

src/app.d.ts

@@ -1,13 +1,32 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+import { User } from '@clerk/backend';
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
+    namespace App {
+        // interface Error {}
+        interface Locals {
+            session:
+            {
+                prefix: string | undefined,
+                username: string | undefined,
+                userId: string,
+                claims: {
+                    azp: string,
+                    exp: number,
+                    iat: number,
+                    iss: string,
+                    nbf: number,
+                    sid: string,
+                    sub: string
+                }
+            }
+            | undefined,
+            clerkUser: User | undefined
+        }
+        // interface PageData {}
+        // interface PageState {}
+        // interface Platform {}
+    }
 }
 
-export {};
+export { };

src/hooks.server.ts

@@ -3,20 +3,79 @@ import { sequence } from '@sveltejs/kit/hooks'
 import { handleClerk } from 'clerk-sveltekit/server'
 import { CLERK_SECRET_KEY } from '$env/static/private'
 import prisma from '$lib/prisma';
+import { createClerkClient } from '@clerk/backend';
+const getClearkUserObject: Handle = async function({ event, resolve }) {
+    if (event.locals.session?.userId == null) {
+        return await resolve(event);
+    }
+    const clerkClient = createClerkClient({ secretKey: CLERK_SECRET_KEY });
+    event.locals.clerkUser = await clerkClient.users.getUser(event.locals.session.userId);
+    return await resolve(event);
+};
+
+const localUserHandle: Handle = async function({ event, resolve }) {
+    console.debug('Adding or Grabbing new user', event.locals);
+    if (event.locals.session == null || event.locals.clerkUser == null) {
+        return await resolve(event);
+    }
+    let provider = await prisma.authProvider.findUnique({
+        where: {
+            providerValue: event.locals.session!.claims!.iss,
+        }
+    });
+    if (provider == null) {
+        console.debug('Provider does not exist', event.locals.session!.claims.iss);
+        provider = await prisma.authProvider.create({
+            data: {
+                name: event.locals.session!.claims.iss,
+                providerValue: event.locals.session!.claims.iss,
+            }
+        });
+    }
+    const userAuthValue = await prisma.userAuth.findUnique({
+        where: {
+            providerIdAuthValue: {
+                providerId: provider.id,
+                value: event.locals.session?.userId
+            }
+        },
+        include: {
+            user: true,
+        }
+    });
+    let userObject = userAuthValue?.user;
+    if (userAuthValue == null) {
+        //create a user for this identity
+        console.debug(`User doesn't exist, creating`,);
+        userObject = await prisma.user.create({
+            data: {
+                name: event.locals.clerkUser!.username!,
+                email: event.locals.clerkUser!.primaryEmailAddress!.emailAddress,
+                auth: {
+                    create: [
+                        {
+                            value: event.locals.clerkUser.id,
+                            providerId: provider.id
+                        }
+                    ]
+                },
+            },
+        });
+        event.locals.session.username = userObject.name;
+    }
+    console.debug('Found/Created user', userObject);
 
-const newUserHandle: Handle = async function({event, resolve}) {
-    prisma.user.findUnique(
     const result = await resolve(event);
-    console.log(result);
     return result;
 };
 
 export const handle: Handle = sequence(
-	handleClerk(CLERK_SECRET_KEY, {
-		debug: true,
-		protectedPaths: ['/admin'],
-		signInUrl: '/sign-in',
-	}),
-    newUserHandle
+    handleClerk(CLERK_SECRET_KEY, {
+        debug: true,
+        protectedPaths: ['/admin'],
+        signInUrl: '/sign-in',
+    }),
+    getClearkUserObject,
+    localUserHandle
 )
 

src/lib/DTOs/PlayerCellDto.ts

@@ -0,0 +1,12 @@
+export default interface PlayerCellDto {
+    name: string,
+    prefix?: string,
+    character?: string,
+}
+export interface Set {
+
+}
+export class Round {
+    constructor(seededPlayers: Array<PlayerCellDto>) {
+    }
+}

src/lib/components/HeadToHeadCell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
+	import PlayerCell from './PlayerCell.svelte';
+
+	interface HeadToHeadCellProps {
+		player1: PlayerCellDto;
+		player2: PlayerCellDto;
+		player1Seed: number;
+		player2Seed: number;
+		setId: string;
+	}
+	let { player1, player2, player1Seed, player2Seed, setId }: HeadToHeadCellProps = $props();
+</script>
+
+<div class="flex flex-col">
+	<div class="text-sm self-center text-zinc-400">
+		╭ Match {setId} ╮
+	</div>
+	<div class="px-1 flex border rounded-t-md border-zinc-600">
+		<div class="flex-1 overflow-hidden">
+			<PlayerCell playerCell={player1} />
+		</div>
+		<div class="text-zinc-400">{player1Seed}</div>
+	</div>
+	<div class="px-1 flex border border-t-0 rounded-b-md border-zinc-600">
+		<div class="flex-1 overflow-hidden">
+			<PlayerCell playerCell={player2} />
+		</div>
+		<div class="text-zinc-400">{player2Seed}</div>
+	</div>
+</div>

src/lib/components/PlayerCell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
+	interface PlayerCellProps {
+		playerCell: PlayerCellDto;
+	}
+	let { playerCell }: PlayerCellProps = $props();
+</script>
+
+{#if playerCell.prefix != null}
+	<span class="text-neutral-400"> {playerCell.prefix} | </span>
+{/if}
+{playerCell.name}
+{#if playerCell.character != null}
+	<img src="" />
+{/if}

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { PageData } from "./$types";
-
 export let data: PageData;
 </script>
 

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

@@ -0,0 +1,8 @@
+import prisma from '$lib/prisma';
+import type { PageServerLoad } from './$types';
+
+export const load = (async (event) => {
+    console.log('Checking session for user object', event.locals);
+    return { };
+}) satisfies PageServerLoad;
+

src/routes/playground/cells/+page.server.ts

@@ -0,0 +1,137 @@
+import type { PageServerLoad } from './$types';
+import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
+
+export const load: PageServerLoad = async ({ params }) => {
+    const playerCells: Array<PlayerCellDto> = [
+        { name: 'Alice' },
+        { name: 'Bob', prefix: 'B', character: 'Knight' },
+        { name: 'Charlie', prefix: 'C' },
+        { name: 'Diana', character: 'Archer' },
+        { name: 'Ethan', prefix: 'E', character: 'Mage' },
+        { name: 'Fiona' }, { name: 'George', prefix: 'G' },
+        { name: 'Hannah', character: 'Warrior' },
+        { name: 'Ian', prefix: 'I', character: 'Rogue' },
+        { name: 'Jasmine' },
+        { name: 'Kevin', prefix: 'K', character: 'Paladin' },
+        { name: 'Laura', character: 'Cleric' },
+        { name: 'Mike', prefix: 'M' },
+        { name: 'Nina', character: 'Druid' },
+        { name: 'Oscar', prefix: 'O', character: 'Sorcerer' },
+        { name: 'Paula' },
+        { name: 'Quentin', prefix: 'Q' },
+        { name: 'Rachel', character: 'Bard' },
+        { name: 'Sam', prefix: 'S', character: 'Monk' },
+        { name: 'Tina' },
+        { name: 'Ulysses', prefix: 'U', character: 'Necromancer' },
+        { name: 'Vera', character: 'Ranger' },
+        { name: 'Walter', prefix: 'W' },
+        { name: 'Xena', character: 'Assassin' },
+        { name: 'Yara', prefix: 'Y', character: 'Summoner' },
+        { name: 'Zack' },
+        { name: 'Amber', prefix: 'Am', character: 'Beastmaster' },
+        { name: 'Blake', character: 'Elementalist' },
+        { name: 'Carmen', prefix: 'Cm', character: 'Guardian' },
+        { name: 'Derek' },
+        { name: 'Elena', prefix: 'El', character: 'Invoker' },
+        { name: 'Frank', character: 'Alchemist' },
+        { name: 'Grace', prefix: 'Gr' },
+        { name: 'Henry', character: 'Tracker' },
+        { name: 'Isla', prefix: 'Is', character: 'Enchanter' },
+        { name: 'Jack' },
+        { name: 'Kara', prefix: 'Kr', character: 'Berserker' },
+        { name: 'Liam', character: 'Shadowcaster' },
+        { name: 'Maya', prefix: 'My' },
+        { name: 'Noah', character: 'Invoker' },
+        { name: 'Olivia', prefix: 'Ol', character: 'Mystic' },
+        { name: 'Peter' },
+        { name: 'Queenie', prefix: 'Qu', character: 'Spellblade' },
+        { name: 'Ryan', character: 'Templar' },
+        { name: 'Sophia', prefix: 'So' },
+        { name: 'Thomas', character: 'Warlord' },
+        { name: 'Uma', prefix: 'Um', character: 'Shadowdancer' },
+        { name: 'Victor' },
+        { name: 'Wendy', prefix: 'We', character: 'Elementalist' },
+        { name: 'Xander', character: 'Runemaster' },
+        { name: 'Yvonne', prefix: 'Yv' },
+        { name: 'Zoe', character: 'Chronomancer' },
+        { name: 'Aaron', prefix: 'Aa', character: 'Battle Mage' },
+        { name: 'Bella' },
+        { name: 'Caleb', prefix: 'Ca', character: 'Guardian' },
+        { name: 'Delilah', character: 'Invoker' },
+        { name: 'Eli', prefix: 'El', character: 'Sorcerer' },
+        { name: 'Faith' },
+        { name: 'Gavin', prefix: 'Ga', character: 'Paladin' },
+        { name: 'Hailey', character: 'Druid' },
+        { name: 'Isaac', prefix: 'Is', character: 'Rogue' },
+        { name: 'Julia' },
+        { name: 'Kyle', prefix: 'Ky', character: 'Warrior' },
+        { name: 'Lily', character: 'Bard' }
+    ];
+
+    const round1Matches: Array<{
+        player1: PlayerCellDto;
+        player2: PlayerCellDto;
+        seed1: number;
+        seed2: number;
+        matchId: string;
+    }> = new Array();
+    const round2Matches: Array<{
+        player1: PlayerCellDto;
+        player2: PlayerCellDto;
+        seed1: number;
+        seed2: number;
+        matchId: string;
+    }> = new Array();
+    const round3Matches: Array<{
+        player1: PlayerCellDto;
+        player2: PlayerCellDto;
+        seed1: number;
+        seed2: number;
+        matchId: string;
+    }> = new Array();
+    const round4Matches: Array<{
+        player1: PlayerCellDto;
+        player2: PlayerCellDto;
+        seed1: number;
+        seed2: number;
+        matchId: string;
+    }> = new Array();
+    for (let i = 0; i < playerCells.length / 2; i++) {
+        round1Matches.push({
+            player1: playerCells[i],
+            player2: playerCells[playerCells.length / 2 + i],
+            seed1: i + 1,
+            seed2: playerCells.length - i,
+            matchId: `A${i + 1}`
+        });
+    }
+    for (let i = 0; i < playerCells.length / 4; i++) {
+        round2Matches.push({
+            player1: playerCells[i],
+            player2: playerCells[playerCells.length / 4 + i],
+            seed1: i + 1,
+            seed2: playerCells.length / 2 - i,
+            matchId: `A${i + 33}`
+        });
+    }
+    for (let i = 0; i < playerCells.length / 8; i++) {
+        round3Matches.push({
+            player1: playerCells[i],
+            player2: playerCells[playerCells.length / 8 + i],
+            seed1: i + 1,
+            seed2: playerCells.length / 4 - i,
+            matchId: `A${i + (round1Matches.length + round2Matches.length)}`
+        });
+    }
+    for (let i = 0; i < playerCells.length / 16; i++) {
+        round4Matches.push({
+            player1: playerCells[i],
+            player2: playerCells[playerCells.length / 16 + i],
+            seed1: i + 1,
+            seed2: playerCells.length / 8 - i,
+            matchId: `A${i + (round1Matches.length + round2Matches.length + round3Matches.length)}`
+        });
+    }
+    return { rounds: [round1Matches, round2Matches, round3Matches, round4Matches] };
+};
+

src/routes/playground/cells/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import HeadToHeadCell from '$lib/components/HeadToHeadCell.svelte';
+	import type { PageData } from './$types';
+	let { data }: { data: PageData } = $props();
+	console.debug(data);
+</script>
+
+<div class="flex">
+	{#each data.rounds as round}
+		<div class="min-w-36">
+			{#each round as match}
+				<HeadToHeadCell
+					player1={match.player1}
+					player2={match.player2}
+					player1Seed={match.seed1}
+					player2Seed={match.seed2}
+					setId={match.matchId}
+				/>
+			{/each}
+		</div>
+	{/each}
+</div>