feat: end screen

app/src/lib/state.svelte.ts

@@ -1,6 +1,6 @@
 import { io, Socket } from "socket.io-client";
 
-export type Phase = 'placement' | 'waiting' | 'selfturn' | 'otherturn';
+export type Phase = 'placement' | 'waiting' | 'selfturn' | 'otherturn' | 'gameover';
 export type CellType = 'e' | 's' | 'h' | 'm'; // empty, ship, hit, miss
 
 export class State {
@@ -10,8 +10,11 @@ export class State {
     users = $state(0);
     room = $state('');
     turn = $state(-1); // -1 not my turn, 0 might be, 1 is
+    game_over = $state(false);
     socket: Socket;
 
+    play_again_phase = $state(false);
+
     constructor() {
         const url = import.meta.env.DEV ? 'ws://localhost:3000' : 'wss://battleship.icyground-d91964e0.centralindia.azurecontainerapps.io';
         this.socket = io(url, {
@@ -37,7 +40,7 @@ export class State {
             this.turn = (id == this.socket.id) ? 1 : -1;
             this.phase = this.turn ? 'selfturn' : 'otherturn';
         });
-        this.socket.on('attacked', ({ by, at, hit, sunk }) => {
+        this.socket.on('attacked', ({ by, at, hit, sunk, game_over }) => {
             const [i, j]: [number, number] = at;
             const board = by == this.socket.id ? this.opponentBoard : this.playerBoard;
             if (by == this.socket.id) {
@@ -70,13 +73,18 @@ export class State {
                     }
                 }
             }
+            
+            this.game_over = game_over;
+
         });
 
-        this.socket.on('restore', ({ turn, player, opponent }: { turn: boolean, player: string[], opponent: string[] }) => {
+        this.socket.on('restore', ({ turn, player, opponent, game_over }: { turn: boolean, player: string[], opponent: string[], game_over: boolean }) => {
             this.turn = turn ? 1 : -1;
             this.phase = this.turn ? 'selfturn' : 'otherturn';
             this.playerBoard.board = player.map((s) => s.split('').map(c => c as CellType));
             this.opponentBoard.board = opponent.map((s) => s.split('').map(c => c as CellType));
+
+            this.game_over = game_over;
         })
     }
 

app/src/routes/+page.svelte

@@ -43,10 +43,7 @@
 								<div class="font-mono font-bold">{gameState.users}</div>
 								<Users />
 							</div>
-							<button
+							<button class="btn btn-error text-xl" onclick={leaveRoom}>Leave</button>
-								class="btn btn-error text-xl"
-								onclick={leaveRoom}>Leave</button
-							>
 						</div>
 					{/if}
 				</div>
@@ -69,13 +66,37 @@
 								board={gameState.opponentBoard}
 								callback={(i, j) => gameState.attack(i, j)}
 							/>
+
+							{#if gameState.game_over}
+								<div
+									class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 pointer-events-none"
+								>
+									<div class="p-6 bg-base-300 rounded-xl text-center">
+										<h3 class="text-2xl font-semibold">Game Over</h3>
+										<p class="text-lg">
+											{gameState.turn >= 0 ? 'You win!' : 'You lose!'}
+										</p>
+										<button
+											class="btn btn-primary mt-4 pointer-events-auto"
+											onclick={() => {
+												let room = gameState.room;
+												leaveRoom();
+												gameState.joinRoom(room);
+											}}
+										>
+											Play Again
+										</button>
+										<button class="btn btn-secondary mt-4 ml-4 pointer-events-auto" onclick={leaveRoom}>Leave</button>
+									</div>
+								</div>
+							{/if}
 							{#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)}
-									leaveRoom={leaveRoom}
+									{leaveRoom}
 								/>
 							{/if}
 						</div>

migrations/0001_schema.sql

@@ -1,5 +1,5 @@
 -- DROP OWNED BY CURRENT_USER CASCADE;
-CREATE TYPE STAT AS ENUM ('waiting', 'p1turn', 'p2turn');
+CREATE TYPE STAT AS ENUM ('waiting', 'p1turn', 'p2turn', 'gameover');
 
 CREATE TABLE IF NOT EXISTS players (
     id CHAR(16) PRIMARY KEY,

src/board.rs

@@ -134,6 +134,11 @@ impl Board {
         self
     }
 
+    pub fn is_game_over(&self) -> bool {
+        self.iter()
+            .all(|row| row.iter().all(|cell| matches!(cell, 'e' | 'm' | 'h')))
+    }
+
     // fn validate_syntax(&self) -> bool {
     //     self
     //         .iter()

src/game.rs

@@ -33,6 +33,7 @@ pub enum Status {
     Waiting,
     P1Turn,
     P2Turn,
+    GameOver
 }
 
 pub async fn room_if_player_exists(sid: &str, pool: &sqlx::PgPool) -> Result<Option<String>> {
@@ -158,7 +159,7 @@ pub async fn get_game_state(
     sid: &str,
     room: &str,
     pool: &sqlx::PgPool,
-) -> Result<(bool, Vec<String>, Vec<String>)> {
+) -> Result<(bool, Vec<String>, Vec<String>, bool)> {
     let room_details = sqlx::query!(
         r#"SELECT player1_id, player2_id, stat AS "stat: Status" FROM rooms WHERE code = $1"#,
         room
@@ -188,7 +189,6 @@ pub async fn get_game_state(
     .board
     .unwrap()
     .into();
-    let player_board: Vec<String> = player_board.mark_redundant().into();
 
     let opponent_board: Board = sqlx::query!(
         r#"SELECT board FROM players WHERE id = $1 AND room_code = $2"#,
@@ -200,6 +200,11 @@ pub async fn get_game_state(
     .board
     .unwrap()
     .into();
+
+    let game_over = player_board.is_game_over() || opponent_board.is_game_over();
+
+    let player_board: Vec<String> = player_board.mark_redundant().into();
+
     let opponent_board: Vec<String> = opponent_board.mark_redundant().into();
     let opponent_board: Vec<String> = opponent_board
         .into_iter()
@@ -210,7 +215,7 @@ pub async fn get_game_state(
         })
         .collect::<Vec<_>>();
 
-    Ok((turn, player_board, opponent_board))
+    Ok((turn, player_board, opponent_board, game_over))
 }
 
 pub async fn start(sid: Sid, code: String, pool: &sqlx::PgPool) -> Result<()> {
@@ -247,7 +252,7 @@ pub async fn attack(
     sid: Sid,
     (i, j): (usize, usize),
     pool: &sqlx::PgPool,
-) -> Result<(bool, Option<[(usize, usize); 2]>)> {
+) -> Result<(bool, Option<[(usize, usize); 2]>, bool)> {
     let player = sqlx::query!(r"SELECT room_code FROM players WHERE id = $1", sid.as_str())
         .fetch_one(pool)
         .await?;
@@ -302,9 +307,19 @@ pub async fn attack(
         .execute(&mut *txn)
         .await?;
     }
-
+    let game_over = board.is_game_over();
+    if game_over {
+        sqlx::query!(
+            r#"UPDATE rooms SET stat = $1 WHERE code = $2"#,
+            Status::GameOver as Status,
+            player.room_code
+        )
+        .execute(&mut *txn)
+        .await?;
+    }
+    
     txn.commit().await?;
-    Ok((hit, if hit { board.has_sunk((i, j)) } else { None }))
+    Ok((hit, if hit { board.has_sunk((i, j)) } else { None }, game_over))
 }
 
 pub async fn update_sid(oldsid: &str, newsid: &str, pool: &sqlx::PgPool) -> Result<()> {

src/main.rs

@@ -60,7 +60,7 @@ async fn on_connect(socket: SocketRef, Data(auth): Data<AuthPayload>, pool: Stat
             socket
                 .emit(
                     "restore",
-                    serde_json::json!({"turn": data.0, "player": data.1, "opponent": data.2}),
+                    serde_json::json!({"turn": data.0, "player": data.1, "opponent": data.2, "game_over": data.3}),
                 )
                 .unwrap();
             socket.join(room.clone()).unwrap();
@@ -170,7 +170,7 @@ async fn on_connect(socket: SocketRef, Data(auth): Data<AuthPayload>, pool: Stat
     socket.on(
         "attack",
         |socket: SocketRef, Data::<[usize; 2]>([i, j]), pool: State<PgPool>| async move {
-            let (hit, sunk) = match attack(socket.id, (i, j), &pool).await {
+            let (hit, sunk, game_over) = match attack(socket.id, (i, j), &pool).await {
                 Ok(res) => res,
                 Err(e) => {
                     tracing::error!("{:?}", e);
@@ -182,7 +182,7 @@ async fn on_connect(socket: SocketRef, Data(auth): Data<AuthPayload>, pool: Stat
                 .within(socket.rooms().unwrap().first().unwrap().clone())
                 .emit(
                     "attacked",
-                    serde_json::json!({"by": socket.id.as_str(), "at": [i, j], "hit": hit, "sunk": sunk}),
+                    serde_json::json!({"by": socket.id.as_str(), "at": [i, j], "hit": hit, "sunk": sunk, "game_over": game_over}),
                 )
                 .unwrap();
         },