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