Peter_Computerliebe_ORG/battleship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: end screen

Browse Source
This commit is contained in:
Khadeer
2024-10-05 14:52:41 +05:30
committed by Sparsh Goenka
parent 1d61f8fc32
commit cd1a156d3e
6 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/src/lib/state.svelte.ts
View File

@@ -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;
})
}

31
app/src/routes/+page.svelte
View File

@@ -43,10 +43,7 @@
<div class="font-mono font-bold">{gameState.users}</div>
<Users />
</div>
<button
class="btn btn-error text-xl"
onclick={leaveRoom}>Leave</button
>
<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>

2
migrations/0001_schema.sql
View File

@@ -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,

5
src/board.rs
View File

@@ -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()

27
src/game.rs
View File

@@ -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<()> {

6
src/main.rs
View File

@@ -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();
},