add db

app/src/lib/board.svelte

@@ -5,11 +5,11 @@
 	let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props();
 </script>
 
-<div class="grid grid-cols-10 gap-1 bg-blue-200 p-2 rounded-lg">
+<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-300 flex items-center justify-center {!board.isOpponent
+				class="aspect-square bg-blue-950 flex items-center justify-center {!board.isOpponent
 					? 'cursor-default'
 					: ''}"
 				onclick={() => callback(i, j)}

app/src/lib/state.svelte.ts

@@ -1,3 +1,5 @@
+import { io, Socket } from "socket.io-client";
+
 export type Phase = 'placement' | 'battle' | 'gameover';
 export type CellType = 'e' | 's' | 'h' | 'm'; // empty, ship, hit, miss
 
@@ -6,15 +8,57 @@ export class State {
     playerBoard = $state(new Board(false));
     opponentBoard = $state(new Board(true));
     room = $state('');
+    turn = $state(false);
+    socket = io('ws://127.0.0.1:3000/', {
+        transports: ['websocket']
+    });
 
-    createRoom() {
-        this.room = Math.random().toString(36).substring(2, 6).toUpperCase();
+    constructor() {
+        this.socket.on('created-room', (room: string) => {
+            this.room = room;
+        });
+        this.socket.on('upload', (_, callback) => {
+            callback(this.playerBoard.board);
+        })
+        this.socket.on('turn', (id) => {
+            this.turn = id == this.socket.id;
+        })
     }
 
-    joinRoom(room: string) {
-        if (room.length != 4) return;
-        if (room == this.room) return;
-        this.room = room;
+    async attack(i: number, j: number) {
+        if (!this.turn) return;
+        this.turn = false;
+        const res = await this.socket.emitWithAck('attack', [i, j]);
+        if (res) {
+            this.opponentBoard.board[i][j] = 'h';
+        } else {
+            this.opponentBoard.board[i][j] = 'm';
+        }
+    }
+
+    async createRoom() {
+        this.socket.emit('create');
+        // this.socket.emit('upload', this.playerBoard.board);
+        // send the board to the server
+        // let api = 'http://127.0.0.1:3000/';
+        // await fetch(api, {
+        //     method: 'POST',
+        //     headers: {
+        //         'Content-Type': 'application/json',
+        //         'Access-Control-Allow-Origin': '*',
+        //     },
+        //     body: JSON.stringify(this.playerBoard.board),
+        // }).then((response) => {
+        //     console.log(response);
+        //     response.json().then((data) => {
+        //         console.log(data);
+        //     });
+        // });
+    }
+
+    joinRoom() {
+        if (this.room.length != 4) return;
+        this.socket.emit('join', this.room);
     }
 }
 
@@ -28,9 +72,9 @@ export class Board {
         if (!isOpponent) this.randomize();
     }
 
-    set(x: number, y: number, type: CellType) {
-        this.board[x][y] = type;
-    }
+    // set(x: number, y: number, type: CellType) {
+    //     this.board[x][y] = type;
+    // }
 
     randomize() {
         this.board = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 'e'));

app/src/routes/+page.svelte

@@ -29,10 +29,7 @@
 					</div>
 					<div>
 						<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
-						<Board
-							board={gameState.opponentBoard}
-							callback={(i, j) => gameState.opponentBoard.set(i, j, 'h')}
-						/>
+						<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} />
 					</div>
 				</div>
 
@@ -50,9 +47,9 @@
 						type="text"
 						bind:value={gameState.room}
 						placeholder="Code"
-						class="input input-bordered w-full max-w-20"
+						class="input input-bordered w-full max-w-24 text-center"
 					/>
-					<button class="btn btn-outline">Join Room</button>
+					<button class="btn btn-outline" onclick={() => gameState.joinRoom()}>Join Room</button>
 				</div>
 			</div>
 		</main>