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

restore state on reload/new join

Browse Source
This commit is contained in:
sparshg
2024-09-22 04:41:53 +05:30
parent b994cd7439
commit 44e72d77f2
7 changed files with 333 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/lib/join.svelte
View File

@@ -23,13 +23,13 @@
{#if roomCode}
<div class="space-x-2 flex flex-row justify-center items-center">
<div
class="text-3xl font-bold tracking-widest text-accent-content font-mono bg-accent py-3 rounded-full px-12"
class="text-3xl font-bold tracking-widest text-secondary-content font-mono bg-secondary py-3 rounded-full px-12"
>
{roomCode}
</div>
<button
class="btn btn-accent btn-circle size-16"
class="btn btn-secondary btn-circle size-16"
onclick={() => navigator.clipboard.writeText(roomCode)}
>
<ClipboardCopy />
@@ -51,7 +51,7 @@
/>
<button
onclick={() => joinRoom(joinCode)}
class="w-full btn btn-outline btn-neutral text-neutral hover:text-neutral hover:bg-transparent text-xl"
class="w-full btn btn-outline btn-neutral text-neutral hover:border-neutral hover:bg-transparent text-xl"
>
Join Room
</button>

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

@@ -7,34 +7,43 @@ export class State {
phase: Phase = $state('placement');
playerBoard = $state(new Board(false));
opponentBoard = $state(new Board(true));
users = $state(0);
room = $state('');
turn = $state(false);
turn = $state(-1); // -1 not my turn, 0 might be, 1 is
socket: Socket;
constructor(hostname: string) {
let session = sessionStorage.getItem('session');
this.socket = io(`ws://${hostname}:3000/`, {
transports: ['websocket']
transports: ['websocket'],
auth: { session }
});
this.socket.on('joined-room', (room: string) => {
this.phase = 'waiting';
this.socket.on('connect', () => {
sessionStorage.setItem('session', this.socket.id!);
});
this.socket.on('update-room', ({ room, users }) => {
if (this.phase == 'placement') this.phase = 'waiting';
this.room = room;
this.users = users;
});
this.socket.on('upload', (_, callback) => {
callback(this.playerBoard.board);
});
this.socket.on('turnover', (id) => {
this.turn = id == this.socket.id;
this.turn = (id == this.socket.id) ? 1 : -1;
this.phase = this.turn ? 'selfturn' : 'otherturn';
});
this.socket.on('attacked', ({ by, at, hit, sunk }) => {
const [i, j]: [number, number] = at;
let board = by == this.socket.id ? this.opponentBoard : this.playerBoard;
if (by == this.socket.id) {
this.turn = hit;
this.turn = (hit) ? 1 : -1;
} else {
this.turn = !hit;
this.turn = (!hit) ? 1 : -1;
}
if (hit) {
board.board[i][j] = 'h';
@@ -62,12 +71,19 @@ export class State {
}
}
});
this.socket.on('restore', ({ turn, player, opponent }: { turn: boolean, player: string[], opponent: string[] }) => {
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));
})
}
attack(i: number, j: number) {
if (!this.turn) return;
if (this.turn != 1) return;
if (this.opponentBoard.board[i][j] != 'e') return;
this.turn = false;
this.turn = 0;
this.socket.emit('attack', [i, j]);
}
@@ -87,6 +103,7 @@ export class State {
}
}
export class Board {
static shipTypes = [5, 4, 3, 3, 2];
board: Array<Array<CellType>> = $state(Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 'e')));

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

@@ -3,6 +3,7 @@
import Header from '$lib/header.svelte';
import Join from '$lib/join.svelte';
import { State } from '$lib/state.svelte';
import { Users } from 'lucide-svelte';
const hostname = window.location.hostname;
let gameState = new State(hostname);
@@ -18,14 +19,35 @@
<h2 class="text-2xl font-semibold rounded-full bg-base-300 py-3 px-6">
{gameState.hasNotStarted()
? 'Place your ships'
: gameState.turn
: gameState.turn >= 0
? 'Make a guess'
: 'Waiting for opponent'}
</h2>
<div class="flex space-x-4">
<div class="text-blue-600">Your Ships: {5}</div>
<div class="text-red-600">Enemy Ships: {5}</div>
</div>
{#if gameState.room}
<div class="flex flex-row h-full items-center space-x-4">
<button
class="rounded-full bg-base-300 px-4 uppercase font-mono font-bold tracking-wide text-xl py-2.5 tooltip tooltip-bottom"
data-tip="Copy"
onclick={() => navigator.clipboard.writeText(gameState.room)}
>
{gameState.room}
</button>
<div class="rounded-full bg-base-300 px-4 flex items-center space-x-2 py-3">
<div
class="size-3 bg-green-500 rounded-full shadow-[0_0_10px] shadow-green-500"
></div>
<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(window.location.hostname);
}}>Leave</button
>
</div>
{/if}
</div>
<div class="grid md:grid-cols-2 gap-8">
@@ -33,7 +55,7 @@
<h3 class="text-lg font-medium mb-2">Your Board</h3>
<Board
class={!gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
class={gameState.turn < 0 ? 'scale-[1.01]' : 'opacity-60'}
board={gameState.playerBoard}
callback={() => {}}
/>
@@ -42,7 +64,7 @@
<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
<div class="relative">
<Board
class={gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
class={gameState.turn >= 0 ? 'scale-[1.01]' : 'opacity-60'}
board={gameState.opponentBoard}
callback={(i, j) => gameState.attack(i, j)}
/>