v1.2.0

Cargo.lock

@@ -154,7 +154,7 @@ checksum = "8c3c1a368f70d6cf7302d78f8f7093da241fb8e8807c05cc9e51a125895a6d5b"
 
 [[package]]
 name = "battleship"
-version = "1.1.1"
+version = "1.2.0"
 dependencies = [
  "axum",
  "dotenv",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "battleship"
-version = "1.1.1"
+version = "1.2.0"
 edition = "2021"
 
 [dependencies]

README.md

@@ -12,7 +12,13 @@ The client is built using SvelteKit (static site) and the server uses Axum frame
 
 The client can be started using `npm run dev` inside `app` directory.
 
-The server and the database services are containarized. Just run `docker compose up` to start the server and database services if you are working on the frontend.
+The server and the database services are containerized. Just run `docker compose up` to start the server and database services if you are working on the frontend.
+Make sure to make a `.env` file with these parameters:
+```
+DATABASE_PASSWORD=db_password
+DATABASE_NAME=db_name
+DATABASE_URL=postgres://postgres:db_password@localhost:5432/db_name
+```
 
 If you are working on the server, you can run `cargo watch -i app -x run` to automatically restart the server when the source code changes, and `docker compose up -d db` to start the database service in the background.
 

app/src/lib/join.svelte

@@ -7,11 +7,13 @@
 		class: className = '',
 		roomCode,
 		createRoom,
-		joinRoom
+		joinRoom,
+		leaveRoom
 	}: {
 		roomCode: string;
 		createRoom: () => void;
 		joinRoom: (code: string) => void;
+		leaveRoom: () => void;
 		class: string;
 	} = $props();
 </script>
@@ -21,6 +23,7 @@
 >
 	<div class="space-y-4 max-w-[70%]">
 		{#if roomCode}
+			<div class="text-center text-lg text-primary-content">Share this room code</div>
 			<div class="space-x-2 flex flex-row justify-center items-center">
 				<div
 					class="text-3xl font-bold tracking-widest text-secondary-content font-mono bg-secondary py-3 rounded-full px-12"
@@ -41,20 +44,31 @@
 			</button>
 		{/if}
 		<div class="text-center text-lg text-primary-content">OR</div>
-		<div class="space-y-2">
-			<input
-				type="text"
-				placeholder="Enter code"
-				maxlength="4"
-				bind:value={joinCode}
-				class="input input-bordered input-primary uppercase tracking-widest placeholder-primary text-neutral text-center font-bold text-xl lg:text-3xl w-full glass"
-			/>
-			<button
-				onclick={() => joinRoom(joinCode)}
-				class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
-			>
-				Join Room
-			</button>
-		</div>
+		{#if !roomCode}
+			<div class="space-y-2">
+				<input
+					type="text"
+					placeholder="Enter code"
+					maxlength="4"
+					bind:value={joinCode}
+					class="input input-bordered input-primary uppercase tracking-widest placeholder-primary text-neutral text-center font-bold text-xl lg:text-3xl w-full glass"
+				/>
+				<button
+					onclick={() => joinRoom(joinCode)}
+					class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
+				>
+					Join Room
+				</button>
+			</div>
+		{:else}
+			<div class="space-x-2 flex flex-row justify-center items-center">
+				<button
+					class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
+					onclick={leaveRoom}
+				>
+					Leave room
+				</button>
+			</div>
+		{/if}
 	</div>
 </div>

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 {
@@ -29,15 +29,19 @@ export class State {
             this.room = room;
             this.users = users;
         });
-
         this.socket.on('upload', (_, callback) => {
+            if (this.phase == 'gameover') {
+                this.playerBoard.randomize();
+                this.opponentBoard = new Board(true);
+                this.phase = 'waiting';
+            }
             callback(this.playerBoard.board);
         });
         this.socket.on('turnover', (id) => {
             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 +74,19 @@ export class State {
                     }
                 }
             }
+            if (game_over) {
+                this.phase = 'gameover';
+            }
         });
 
-        this.socket.on('restore', ({ turn, player, opponent }: { turn: boolean, player: string[], opponent: string[] }) => {
+        this.socket.on('restore', ({ turn, player, opponent, gameover }: { turn: boolean, player: string[], opponent: string[], gameover: 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));
+            if (gameover) {
+                this.phase = 'gameover';
+            }
         })
     }
 
@@ -94,13 +104,17 @@ export class State {
 
     joinRoom(code: string) {
         code = code.toUpperCase();
-        if (code.length != 4 || code == this.room) return;
+        if (code.length != 4 || code == this.room && this.phase !== 'gameover') return;
         this.socket.emit('join', code);
     }
 
     hasNotStarted() {
         return this.phase == 'placement' || this.phase == 'waiting';
     }
+
+    playAgain() {
+        this.joinRoom(this.room);
+    }
 }
 
 

app/src/routes/+page.svelte

@@ -6,6 +6,11 @@
 	import { Users } from 'lucide-svelte';
 
 	let gameState = new State();
+
+	function leaveRoom() {
+		gameState.socket.emit('leave');
+		gameState = new State();
+	}
 </script>
 
 <div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">
@@ -38,13 +43,7 @@
 								<div class="font-mono font-bold">{gameState.users}</div>
 								<Users />
 							</div>
-							<button
-								class="btn btn-error text-xl"
-								onclick={() => {
-									gameState.socket.emit('leave');
-									gameState = new State();
-								}}>Leave</button
-							>
+							<button class="btn btn-error text-xl" onclick={leaveRoom}>Leave</button>
 						</div>
 					{/if}
 				</div>
@@ -67,12 +66,33 @@
 								board={gameState.opponentBoard}
 								callback={(i, j) => gameState.attack(i, j)}
 							/>
+
+							{#if gameState.phase === 'gameover'}
+								<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={() => gameState.playAgain()}
+										>
+											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}
 								/>
 							{/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,10 @@ impl Board {
         self
     }
 
+    pub fn is_game_over(&self) -> bool {
+        !self.iter().any(|row| row.iter().any(|&cell| cell == 's'))
+    }
+
     // fn validate_syntax(&self) -> bool {
     //     self
     //         .iter()

src/game.rs

@@ -15,6 +15,8 @@ pub enum Error {
     RoomFull(Option<String>),
     #[error("Room not full")]
     RoomNotFull,
+    #[error("GameOver room joined")]
+    GameOverRoom,
     #[error("Already in room")]
     AlreadyInRoom,
     #[error("Not in room")]
@@ -33,6 +35,7 @@ pub enum Status {
     Waiting,
     P1Turn,
     P2Turn,
+    GameOver,
 }
 
 pub async fn room_if_player_exists(sid: &str, pool: &sqlx::PgPool) -> Result<Option<String>> {
@@ -79,7 +82,7 @@ pub async fn add_room(sid: Sid, pool: &sqlx::PgPool) -> Result<String> {
 pub async fn join_room(sid: Sid, code: String, pool: &sqlx::PgPool) -> Result<()> {
     let code = code.to_uppercase();
     let room = sqlx::query!(
-        r#"SELECT player1_id, player2_id FROM rooms WHERE code = $1"#,
+        r#"SELECT player1_id, player2_id, stat AS "stat: Status" FROM rooms WHERE code = $1"#,
         code
     )
     .fetch_one(pool)
@@ -87,26 +90,40 @@ pub async fn join_room(sid: Sid, code: String, pool: &sqlx::PgPool) -> Result<()
 
     let sid = sid.as_str();
 
+    // if player is already in room
+    if [room.player1_id.as_ref(), room.player2_id.as_ref()]
+        .into_iter()
+        .flatten()
+        .any(|x| x == sid)
+    {
+        // if game was over, set status to waiting and return
+        if room.stat == Status::GameOver {
+            sqlx::query!(
+                r"UPDATE rooms SET stat = $1 WHERE code = $2",
+                Status::Waiting as Status,
+                code
+            )
+            .execute(pool)
+            .await?;
+            return Ok(());
+        }
+        return Err(Error::AlreadyInRoom);
+    }
+
+    if room.stat == Status::GameOver {
+        return Err(Error::GameOverRoom);
+    }
+
     if let (Some(p1), Some(p2)) = (room.player1_id.as_ref(), room.player2_id.as_ref()) {
         if in_delete_sid(p1, pool).await? {
-            update_sid(p1, sid, pool).await?;
+            // update_sid(p1, sid, pool).await?;
             return Err(Error::RoomFull(Some(p1.to_string())));
         } else if in_delete_sid(p2, pool).await? {
-            update_sid(p2, sid, pool).await?;
+            // update_sid(p2, sid, pool).await?;
             return Err(Error::RoomFull(Some(p2.to_string())));
         }
         return Err(Error::RoomFull(None));
     }
-    if let Some(id) = room.player1_id.as_ref() {
-        if id == sid {
-            return Err(Error::AlreadyInRoom);
-        }
-    }
-    if let Some(id) = room.player2_id.as_ref() {
-        if id == sid {
-            return Err(Error::AlreadyInRoom);
-        }
-    }
     delete_sid(sid, pool).await?;
     let mut txn = pool.begin().await?;
 
@@ -158,7 +175,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 +205,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 +216,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 +231,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 +268,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 +323,23 @@ 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

@@ -1,5 +1,6 @@
 mod board;
 mod game;
+
 use axum::Router;
 use board::Board;
 use dotenv::dotenv;
@@ -16,7 +17,6 @@ use socketioxide::{
 };
 use sqlx::PgPool;
 use tokio::net::TcpListener;
-use tower_http::cors::CorsLayer;
 use tracing_subscriber::FmtSubscriber;
 
 #[tokio::main]
@@ -34,9 +34,8 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
     let (layer, io) = SocketIo::builder().with_state(pool).build_layer();
 
     io.ns("/", on_connect);
-    let app = Router::new()
-        .layer(layer)
-        .layer(CorsLayer::very_permissive());
+
+    let app = Router::new().layer(layer);
 
     let listener = TcpListener::bind("0.0.0.0:3000").await?;
     println!("listening on {}", listener.local_addr()?);
@@ -61,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, "gameover": data.3}),
                 )
                 .unwrap();
             socket.join(room.clone()).unwrap();
@@ -119,7 +118,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, "gameover": data.3}),
                         )
                         .unwrap();
                 } else {
@@ -171,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);
@@ -183,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();
         },