refactor: redesigned the create lobby page

1 files changed, 59 insertions, 32 deletions

diff --git a/src/routes/lobbies/create/+page.svelte b/src/routes/lobbies/create/+page.svelte
index 2acce5b..7d7efb9 100644
--- a/src/routes/lobbies/create/+page.svelte
+++ b/src/routes/lobbies/create/+page.svelte
@@ -1,46 +1,73 @@
 <script lang="ts">
-	let name = $state('');
-	let password_enabled = $state(false);
-	let password = $state('');
+	let player_name = $state('');
+	let lobby_name = $state('');
+	let pin_enabled = $state(false);
+	let request_on_join_enabled = $state(false);
 
-	function create_click() {
-		if (name == '') {
-			alert('Name not filled');
-			return;
-		}
+	let create_disabled = $derived(player_name == '' || lobby_name == '');
 
-		console.log(`${name}${password_enabled ? ' : ' + password : ''}`);
-	}
+	function create_click() {}
 </script>
 
-<div class="m-12 flex w-screen flex-col items-center">
+<div class="flex w-screen flex-col items-center justify-center p-2">
 	<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 class="flex flex-row">
+		<!-- Input Area -->
+		<div class="m-4 flex flex-col items-center">
+			<!-- left input -->
+			<div class="h-full rounded-xl border p-4">
+				<div>
+					<!-- title -->
+					<h1 class="mb-4 text-3xl">Player</h1>
+				</div>
+				<div class="flex flex-row">
+					<!-- Name input -->
+					<p class="mr-4">Name:</p>
+					<input
+						class="w-full rounded-sm border border-black pr-1 pl-1"
+						type="text"
+						bind:value={player_name}
+					/>
+				</div>
+			</div>
 		</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}
-			/>
+		<!-- right input -->
+		<div class="m-4 flex h-max flex-col rounded-xl border p-4">
+			<!-- title -->
+			<h1 class="mb-4 text-3xl">Lobby</h1>
+			<!-- input area -->
+			<div class="grid grid-cols-2 grid-rows-3 justify-start">
+				<!-- Name Input -->
+				<p>Name:</p>
+				<input
+					class="w-full rounded-sm border border-black pr-1 pl-1"
+					type="text"
+					bind:value={lobby_name}
+				/>
+
+				<!-- PIN Checkbox -->
+				<p>PIN?</p>
+				<input class="w-max align-middle" type="checkbox" bind:checked={pin_enabled} />
+
+				<!-- Request on join checkbox -->
+				<p>Request on join?</p>
+				<div class="w-max align-middle">
+					<input type="checkbox" bind:checked={request_on_join_enabled} />
+				</div>
+			</div>
 		</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>
+
+	<div class="mt-5">
+		<button
+			class="cursor-pointer rounded-xl bg-blue-300 p-3.5 disabled:cursor-auto disabled:bg-blue-100"
+			type="button"
+			disabled={create_disabled}
+			onclick={create_click}
+		>
+			Create
 		</button>
 	</div>
 </div>