feature: very very basic lobby select screen

6 files changed, 54 insertions, 1 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0d8eb03..d7135a5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,5 +5,8 @@
 	let { children } = $props();
 </script>
 
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<svelte:head>
+	<link rel="icon" href={favicon} />
+	<title>Cluedo Frontend</title>
+</svelte:head>
 {@render children()}
diff --git a/src/routes/lobbies/+page.server.ts b/src/routes/lobbies/+page.server.ts
new file mode 100644
index 0000000..426eec2
--- /dev/null
+++ b/src/routes/lobbies/+page.server.ts
@@ -0,0 +1,13 @@
+import type { PageServerLoad } from './$types';
+
+type LobbyListEntry = {
+	uuid: string;
+	player_count: number;
+};
+
+export const load: PageServerLoad = async () => {
+	const resp = await fetch('http://127.0.0.1:8080/lobbies');
+	const lobbies = (await resp.json()) as LobbyListEntry[];
+
+	return { lobbies: lobbies };
+};
diff --git a/src/routes/lobbies/+page.svelte b/src/routes/lobbies/+page.svelte
new file mode 100644
index 0000000..b9e3a6f
--- /dev/null
+++ b/src/routes/lobbies/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	import LobbyElement from './LobbyElement.svelte';
+
+	let { data }: PageProps = $props();
+</script>
+
+{#each data.lobbies as lobby (lobby.uuid)}
+	<LobbyElement uuid={lobby.uuid} player_count={lobby.player_count} />
+{/each}
diff --git a/src/routes/lobbies/LobbyElement.svelte b/src/routes/lobbies/LobbyElement.svelte
new file mode 100644
index 0000000..1107aa5
--- /dev/null
+++ b/src/routes/lobbies/LobbyElement.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+
+	let { uuid, player_count } = $props();
+</script>
+
+<a href={resolve(`/lobbies/${uuid}`)}>
+	<div class="m-1.5 flex w-2xl flex-col items-center rounded-sm bg-blue-200 p-3.5">
+		<div class="text-xl">
+			<h1>{uuid}</h1>
+		</div>
+		<div class="text-m text-blue-800">
+			<p>Players: {player_count}</p>
+		</div>
+	</div>
+</a>
diff --git a/src/routes/lobbies/[slug]/+page.svelte b/src/routes/lobbies/[slug]/+page.svelte
new file mode 100644
index 0000000..73b1ab9
--- /dev/null
+++ b/src/routes/lobbies/[slug]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<p>{data.slug}</p>
diff --git a/src/routes/lobbies/[slug]/+page.ts b/src/routes/lobbies/[slug]/+page.ts
new file mode 100644
index 0000000..16cc4f4
--- /dev/null
+++ b/src/routes/lobbies/[slug]/+page.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		slug: params.slug
+	};
+};