Worked on ui

frontend/src/app.d.ts

@@ -5,7 +5,13 @@
 declare namespace App {
 	// interface Locals {}
 	// interface Platform {}
-	// interface Session {}
+	interface Session {
+		authenticated: boolean;
+		token: string | null;
+		email: string | null;
+
+	}
+
 	// interface Stuff {}
 }
 

frontend/src/hooks.ts

@@ -0,0 +1,57 @@
+import * as cookie from 'cookie';
+import fetch from 'node-fetch';
+import Redis from 'ioredis';
+
+
+const redis = new Redis(process.env.REDIS_URL);
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
+	const regex_token = /^Bearer (.*)$/gm.exec(cookies.access_token);
+	if (regex_token === null) {
+		event.locals.token = null;
+	} else {
+		event.locals.token = regex_token[1];
+	}
+	event.locals.rememberme = cookies.rememberme_token;
+
+	return await resolve(event);
+}
+
+/** @type {import('@sveltejs/kit').GetSession} */
+export async function getSession(event) {
+	const redis_res = await redis.get(event.locals.token);
+	let user_email: string;
+	if (redis_res === null) {
+		const res = await fetch(`${process.env.API_URL}/api/v1/users/check`, {
+			headers: {
+				Cookie: `access_token=Bearer ${event.locals.token}`
+			}
+		});
+		if (res.ok) {
+			const json = await res.json();
+			// @ts-ignore
+			user_email = json.email;
+		} else {
+			user_email = null;
+		}
+
+	} else {
+		user_email = redis_res;
+	}
+	if (user_email === null) {
+		return {
+			authenticated: false,
+			token: event.locals.token,
+			email: null
+		};
+	} else {
+		return {
+			authenticated: true,
+			token: event.locals.token,
+			email: user_email
+		};
+	}
+
+}

frontend/src/routes/account/login.svelte

@@ -1,15 +1,14 @@
-<!--<script context='module' lang='ts'>
-	export async function load({ session }) {
-		console.log(import.meta.env.VITE_BASE_ADDRESS);
+<script context='module' lang='ts'>
+	export async function load({ session, request }) {
 		if (session.authenticated) {
 			return {
 				status: 302,
-				redirect: '/'
+				redirect: "/"
 			};
 		}
-		return {};
+		return {}
 	}
-</script>-->
+</script>
 
 <script lang='ts'>
 	//import { rememberme } from '$lib/utils/clientAuth';

frontend/src/routes/overview.svelte

@@ -0,0 +1,15 @@
+<script context='module' lang='ts'>
+	export async function load({ session }) {
+		if (!session.authenticated) {
+			return {
+				status: 302,
+				redirect: '/account/login'
+			};
+		}
+		return {
+			props: {
+				email: session.email
+			}
+		};
+	}
+</script>

frontend/src/routes/play.svelte

@@ -0,0 +1,56 @@
+<script context='module' lang='ts'>
+	export async function load({ url }) {
+		const token = url.searchParams.get('token');
+		return {
+			props: {
+				game_pin: token === null ? '' : token
+			}
+		};
+	}
+</script>
+
+<script lang='ts'>
+	import { socket } from '$lib/socket';
+
+	export let game_pin: string;
+	let game_pin_valid = false;
+	console.log(game_pin);
+
+
+	const setUsername = (username: string) => {
+		console.log(username);
+	};
+	const setGamePin = (game_pin: string) => {
+		socket.emit()
+	};
+
+	$: console.log(game_pin.length);
+
+</script>
+
+<div>
+	{#if game_pin === "" || game_pin.length <= 7 || !game_pin_valid}
+		<div class='flex flex-col justify-center align-center w-screen h-screen'>
+			<form on:submit|preventDefault={setGamePin} class='flex-col flex justify-center align-center mx-auto'>
+				<h1 class='text-lg text-center'>Game Pin</h1>
+				<input class='border border-amber-800 self-center text-center' bind:value={game_pin} maxlength='8'>
+				<br>
+				<button class='bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded'
+						type='submit'>
+					Submit
+				</button>
+			</form>
+		</div>
+
+	{:else}
+		<div class='flex flex-col justify-center align-center w-screen h-screen'>
+			<form on:submit|preventDefault={setUsername} class='flex-col flex justify-center align-center mx-auto'>
+				<h1 class='text-lg text-center'>Username</h1>
+				<input class='border border-amber-800'>
+				<button class='bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded' type='submit'>
+					Submit
+				</button>
+			</form>
+		</div>
+	{/if}
+</div>