feature: added a very basic non-functioning create lobby page

3 files changed, 67 insertions, 5 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..90f9f1c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,10 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
+<!-- <h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> -->
+
+<a href={resolve('/lobbies')}>
+	<div class="rounded-sm bg-blue-200">Lobbies</div>
+</a>
diff --git a/src/routes/lobbies/+page.svelte b/src/routes/lobbies/+page.svelte
index b9e3a6f..8750157 100644
--- a/src/routes/lobbies/+page.svelte
+++ b/src/routes/lobbies/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import type { PageProps } from './$types';
 
 	import LobbyElement from './LobbyElement.svelte';
@@ -6,6 +7,13 @@
 	let { data }: PageProps = $props();
 </script>
 
-{#each data.lobbies as lobby (lobby.uuid)}
-	<LobbyElement uuid={lobby.uuid} player_count={lobby.player_count} />
-{/each}
+<div class="flex w-screen flex-col items-center">
+	<a href={resolve('/lobbies/create')}>
+		<div class="m-3 flex flex-col items-center rounded-4xl bg-blue-400 p-3.5 pr-8 pl-8">Create</div>
+	</a>
+	<div>
+		{#each data.lobbies as lobby (lobby.uuid)}
+			<LobbyElement uuid={lobby.uuid} player_count={lobby.player_count} />
+		{/each}
+	</div>
+</div>
diff --git a/src/routes/lobbies/create/+page.svelte b/src/routes/lobbies/create/+page.svelte
new file mode 100644
index 0000000..2acce5b
--- /dev/null
+++ b/src/routes/lobbies/create/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	let name = $state('');
+	let password_enabled = $state(false);
+	let password = $state('');
+
+	function create_click() {
+		if (name == '') {
+			alert('Name not filled');
+			return;
+		}
+
+		console.log(`${name}${password_enabled ? ' : ' + password : ''}`);
+	}
+</script>
+
+<div class="m-12 flex w-screen flex-col items-center">
+	<div class="m-8">
+		<h1 class="text-4xl">Create Lobby</h1>
+	</div>
+	<div>
+		<div class="m-2 flex flex-row">
+			<p class="mr-4">Name:</p>
+			<input
+				class="w-full rounded-sm border border-black pr-1 pl-1"
+				type="text"
+				bind:value={name}
+				id="lobby_name"
+			/>
+		</div>
+		<div class="m-2 flex flex-row">
+			<p class="mr-2">Password:</p>
+			<input class="mr-2" bind:checked={password_enabled} type="checkbox" />
+			<input
+				class="w-full rounded-sm border border-black pr-1 pl-1 disabled:bg-gray-200"
+				disabled={!password_enabled}
+				type="password"
+				bind:value={password}
+			/>
+		</div>
+	</div>
+	<div class="m-8">
+		<button type="button" onclick={create_click}>
+			<div class="cursor-pointer rounded-md bg-blue-300 p-3.5">Create</div>
+		</button>
+	</div>
+</div>