add ship wreck detection

app/src/lib/board.svelte

@@ -5,23 +5,40 @@
 	let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props();
 </script>
 
-<div class="grid grid-cols-10 gap-1 bg-primary p-2 rounded-lg">
-	{#each board.board as row, i}
-		{#each row as cell, j}
-			<button
-				class="aspect-square bg-blue-950 flex items-center justify-center {!board.isOpponent
-					? 'cursor-default'
-					: ''}"
-				onclick={() => callback(i, j)}
-			>
-				{#if cell === 's'}
-					<Ship class="size-3/5 text-blue-500" />
-				{:else if cell === 'h'}
-					<Crosshair class="size-3/5 text-red-500" />
-				{:else if cell === 'm'}
-					<div class="size-3/5 bg-blue-400 rounded-full"></div>
-				{/if}
-			</button>
-		{/each}
+<div class="grid grid-cols-10 ml-4">
+	{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as i}
+		<div class="text-center">{i}</div>
 	{/each}
 </div>
+
+<div class="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>
+		{/each}
+	</div>
+	<div
+		class="grid grid-cols-10 gap-0.5 lg:gap-1 bg-primary-content p-1 lg:p-1.5 rounded-lg size-full"
+	>
+		{#each board.board as row, i}
+			{#each row as cell, j}
+				<button
+					class="aspect-square {cell === 'm'
+						? 'bg-secondary'
+						: cell === 'h'
+							? 'bg-accent'
+							: 'bg-primary'} flex items-center justify-center {!board.isOpponent
+						? 'cursor-default'
+						: ''}"
+					onclick={() => callback(i, j)}
+				>
+					{#if cell === 's'}
+						<Ship class="size-3/5 text-primary-content" />
+					{:else if cell === 'h'}
+						<Crosshair class="size-3/5 text-accent-content" />
+					{/if}
+				</button>
+			{/each}
+		{/each}
+	</div>
+</div>

app/src/lib/state.svelte.ts

@@ -9,35 +9,53 @@ export class State {
     opponentBoard = $state(new Board(true));
     room = $state('');
     turn = $state(false);
-    socket = io('ws://127.0.0.1:3000/', {
-        transports: ['websocket']
-    });
+    socket: Socket;
+
+    constructor(hostname: string) {
+        this.socket = io(`ws://${hostname}:3000/`, {
+            transports: ['websocket']
+        });
 
-    constructor() {
         this.socket.on('created-room', (room: string) => {
             this.room = room;
         });
         this.socket.on('upload', (_, callback) => {
             callback(this.playerBoard.board);
-        })
+        });
         this.socket.on('turnover', (id) => {
             this.turn = id != this.socket.id;
-        })
-        this.socket.on('attacked', ({ by, at, res }) => {
-            let [i, j] = at;
+        });
+        this.socket.on('attacked', ({ by, at, hit, sunk }) => {
+            const [i, j]: [number, number] = at;
+            let board = by == this.socket.id ? this.opponentBoard : this.playerBoard;
             if (by == this.socket.id) {
-                this.opponentBoard.board[i][j] = res ? 'h' : 'm';
-                this.turn = false;
+                this.turn = hit;
             } else {
-                this.playerBoard.board[i][j] = res ? 'h' : 'm';
-                this.turn = true;
+                this.turn = !hit;
             }
-        })
+            board.board[i][j] = hit ? 'h' : 'm';
+            if (sunk) {
+                const [[minx, miny], [maxx, maxy]] = sunk;
+                const x1 = Math.max(0, minx - 1);
+                const y1 = Math.max(0, miny - 1);
+                const x2 = Math.min(9, maxx + 1);
+                const y2 = Math.min(9, maxy + 1);
+                for (let x = x1; x <= x2; x++) {
+                    for (let y = y1; y <= y2; y++) {
+                        if (board.board[x][y] == 'e') {
+                            board.board[x][y] = 'm';
+                        }
+                    }
+                }
+            }
+        });
     }
 
     attack(i: number, j: number) {
         if (!this.turn) return;
+        if (this.opponentBoard.board[i][j] != 'e') return;
         this.turn = false;
+
         this.socket.emit('attack', [i, j]);
     }
 

app/src/routes/+page.svelte

@@ -3,7 +3,8 @@
 	import Header from '$lib/header.svelte';
 	import { State } from '$lib/state.svelte';
 
-	let gameState = new State();
+	const hostname = window.location.hostname;
+	let gameState = new State(hostname);
 </script>
 
 <div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">

app/tailwind.config.js

@@ -9,8 +9,8 @@ export default {
   ],
 
   daisyui: {
-    themes: ["night"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-    darkTheme: "night", // name of one of the included themes for dark mode
+    themes: ["cupcake", "night"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "cupcake", // name of one of the included themes for dark mode
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components
     utils: true, // adds responsive and modifier utility classes