working state

app/src/lib/board.svelte

@@ -2,7 +2,15 @@
 	import { Board } from '$lib/state.svelte';
 	import { Crosshair, Ship } from 'lucide-svelte';
 
-	let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props();
+	let {
+		class: className,
+		board,
+		callback
+	}: {
+		class: string;
+		board: Board;
+		callback: (i: number, j: number) => void;
+	} = $props();
 </script>
 
 <div class="grid grid-cols-10 ml-4">
@@ -11,7 +19,7 @@
 	{/each}
 </div>
 
-<div class="flex flex-row">
+<div class="{className} flex flex-row">
 	<div class="grid grid-rows-10 items-center mr-1">
 		{#each ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] as i}
 			<div class="text">{i}</div>

app/src/lib/join.svelte

@@ -22,7 +22,9 @@
 	<div class="space-y-4 max-w-[70%]">
 		{#if roomCode}
 			<div class="space-x-2 flex flex-row justify-center items-center">
-				<div class="text-3xl font-bold tracking-widest font-mono bg-accent py-3 rounded-full px-12">
+				<div
+					class="text-3xl font-bold tracking-widest text-accent-content font-mono bg-accent py-3 rounded-full px-12"
+				>
 					{roomCode}
 				</div>
 

app/src/lib/state.svelte.ts

@@ -25,7 +25,7 @@ export class State {
             callback(this.playerBoard.board);
         });
         this.socket.on('turnover', (id) => {
-            this.turn = id != this.socket.id;
+            this.turn = id == this.socket.id;
             this.phase = this.turn ? 'selfturn' : 'otherturn';
         });
         this.socket.on('attacked', ({ by, at, hit, sunk }) => {

app/src/routes/+page.svelte

@@ -16,7 +16,11 @@
 			<div class="p-6 space-y-6">
 				<div class="flex justify-between items-center">
 					<h2 class="text-2xl font-semibold rounded-full bg-base-300 py-3 px-6">
-						{gameState.hasNotStarted() ? 'Place your ships' : 'Battle Phase'}
+						{gameState.hasNotStarted()
+							? 'Place your ships'
+							: gameState.turn
+								? 'Make a guess'
+								: 'Waiting for opponent'}
 					</h2>
 					<div class="flex space-x-4">
 						<div class="text-blue-600">Your Ships: {5}</div>
@@ -27,12 +31,21 @@
 				<div class="grid md:grid-cols-2 gap-8">
 					<div>
 						<h3 class="text-lg font-medium mb-2">Your Board</h3>
-						<Board board={gameState.playerBoard} callback={() => {}} />
+
+						<Board
+							class={!gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
+							board={gameState.playerBoard}
+							callback={() => {}}
+						/>
 					</div>
 					<div>
 						<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
 						<div class="relative">
-							<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} />
+							<Board
+								class={gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
+								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)]"