improve ui

app/src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Board from '$lib/board.svelte';
 	import Header from '$lib/header.svelte';
+	import Join from '$lib/join.svelte';
 	import { State } from '$lib/state.svelte';
 
 	const hostname = window.location.hostname;
@@ -14,8 +15,8 @@
 		<main class="bg-base-100 shadow-xl rounded-xl overflow-hidden">
 			<div class="p-6 space-y-6">
 				<div class="flex justify-between items-center">
-					<h2 class="text-2xl font-semibold">
-						{gameState.phase === 'placement' ? 'Place Your Ships' : 'Battle Phase'}
+					<h2 class="text-2xl font-semibold rounded-full bg-base-300 py-3 px-6">
+						{gameState.hasNotStarted() ? 'Place your ships' : 'Battle Phase'}
 					</h2>
 					<div class="flex space-x-4">
 						<div class="text-blue-600">Your Ships: {5}</div>
@@ -30,28 +31,19 @@
 					</div>
 					<div>
 						<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
-						<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} />
+						<div class="relative">
+							<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} />
+							{#if gameState.hasNotStarted()}
+								<Join
+									class="absolute top-[24px] left-[15px] w-[calc(100%-15px)] h-[calc(100%-24px)]"
+									roomCode={gameState.room}
+									createRoom={() => gameState.createRoom()}
+									joinRoom={(code) => gameState.joinRoom(code)}
+								/>
+							{/if}
+						</div>
 					</div>
 				</div>
-
-				<div class="flex justify-center space-x-4">
-					{#if gameState.phase === 'placement'}
-						<button class="btn btn-primary" onclick={() => gameState.playerBoard.randomize()}
-							>Randomize</button
-						>
-					{:else}
-						<button class="btn btn-primary">Fire!</button>
-					{/if}
-					<button class="btn btn-outline" onclick={() => gameState.createRoom()}>Create Room</button
-					>
-					<input
-						type="text"
-						bind:value={gameState.room}
-						placeholder="Code"
-						class="input input-bordered w-full max-w-24 text-center"
-					/>
-					<button class="btn btn-outline" onclick={() => gameState.joinRoom()}>Join Room</button>
-				</div>
 			</div>
 		</main>