feat(join): add leave room button when there is no opponent yet

app/src/lib/join.svelte

@@ -7,11 +7,13 @@
 		class: className = '',
 		roomCode,
 		createRoom,
-		joinRoom
+		joinRoom,
+		leaveRoom
 	}: {
 		roomCode: string;
 		createRoom: () => void;
 		joinRoom: (code: string) => void;
+		leaveRoom: () => void;
 		class: string;
 	} = $props();
 </script>
@@ -41,8 +43,8 @@
 				Create Room
 			</button>
 		{/if}
+		<div class="text-center text-lg text-primary-content">OR</div>
 		{#if !roomCode}
-			<div class="text-center text-lg text-primary-content">OR</div>
 			<div class="space-y-2">
 				<input
 					type="text"
@@ -58,6 +60,12 @@
 					Join Room
 				</button>
 			</div>
+		{:else}
+			<div class="space-x-2 flex flex-row justify-center items-center">
+				<button class="btn btn-error text-2xl" onclick={leaveRoom}>
+					Leave room
+				</button>
+			</div>
 		{/if}
 	</div>
 </div>

app/src/routes/+page.svelte

@@ -6,6 +6,11 @@
 	import { Users } from 'lucide-svelte';
 
 	let gameState = new State();
+
+	function leaveRoom() {
+		gameState.socket.emit('leave');
+		gameState = new State();
+	}
 </script>
 
 <div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">
@@ -40,10 +45,7 @@
 							</div>
 							<button
 								class="btn btn-error text-xl"
-								onclick={() => {
+								onclick={leaveRoom}>Leave</button
-									gameState.socket.emit('leave');
-									gameState = new State();
-								}}>Leave</button
 							>
 						</div>
 					{/if}
@@ -73,6 +75,7 @@
 									roomCode={gameState.room}
 									createRoom={() => gameState.createRoom()}
 									joinRoom={(code) => gameState.joinRoom(code)}
+									leaveRoom={leaveRoom}
 								/>
 							{/if}
 						</div>