From 0b5f51352027ede550bd94b48c48a771b892314c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yael=20Arturo=20Chavoya=20Andal=C3=B3n?= <ychavoya@ibm.com>
Date: Mon, 30 Sep 2024 16:36:04 -0600
Subject: [PATCH] feat(join): add leave room button when there is no opponent
 yet

---
 app/src/lib/join.svelte     | 12 ++++++++++--
 app/src/routes/+page.svelte | 11 +++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/src/lib/join.svelte b/app/src/lib/join.svelte
index 3d53796..de77c08 100644
--- a/app/src/lib/join.svelte
+++ b/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>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 375e042..fad9909 100644
--- a/app/src/routes/+page.svelte
+++ b/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={() => {
-									gameState.socket.emit('leave');
-									gameState = new State();
-								}}>Leave</button
+								onclick={leaveRoom}>Leave</button
 							>
 						</div>
 					{/if}
@@ -73,6 +75,7 @@
 									roomCode={gameState.room}
 									createRoom={() => gameState.createRoom()}
 									joinRoom={(code) => gameState.joinRoom(code)}
+									leaveRoom={leaveRoom}
 								/>
 							{/if}
 						</div>