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

rust board, room frontend

Browse Source
This commit is contained in:
sparshg
2024-09-15 01:07:16 +05:30
parent 73ab2b63a8
commit 04b9a9502b
11 changed files with 170 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/lib/board.svelte
View File

@@ -5,11 +5,11 @@
let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props();
</script>
<div class="grid grid-cols-10 gap-1 bg-blue-100 p-2 rounded-lg">
<div class="grid grid-cols-10 gap-1 bg-blue-200 p-2 rounded-lg">
{#each board.board as row, i}
{#each row as cell, j}
<button
class="aspect-square bg-blue-200 flex items-center justify-center {!board.isOpponent
class="aspect-square bg-blue-300 flex items-center justify-center {!board.isOpponent
? 'cursor-default'
: ''}"
onclick={() => callback(i, j)}

4
app/src/lib/header.svelte
View File

@@ -3,8 +3,8 @@
</script>
<header
class="mb-8 flex items-center w-fit rounded-full px-6 py-3 drop-shadow-md bg-gray-50 mx-auto"
class="mb-8 flex items-center w-fit rounded-full px-6 py-3 drop-shadow-md bg-base-100 mx-auto"
>
<Anchor class="size-16 mr-8 text-blue-600" />
<h1 class="text-4xl font-bold text-gray-900">Battleship Online</h1>
<h1 class="text-4xl font-bold">Battleship Online</h1>
</header>

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

@@ -5,6 +5,17 @@ export class State {
phase: Phase = $state('placement');
playerBoard = $state(new Board(false));
opponentBoard = $state(new Board(true));
room = $state('');
createRoom() {
this.room = Math.random().toString(36).substring(2, 6).toUpperCase();
}
joinRoom(room: string) {
if (room.length != 4) return;
if (room == this.room) return;
this.room = room;
}
}
export class Board {

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

@@ -6,14 +6,14 @@
let gameState = new State();
</script>
<div class="min-h-screen bg-gray-100 py-8 px-4 sm:px-6 lg:px-8">
<div class="min-h-screen bg-base-300 py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<Header />
<main class="bg-white shadow-xl rounded-lg overflow-hidden">
<main class="bg-base-100 shadow-xl rounded-xl overflow-hidden">
<div class="p-6 space-y-6">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-semibold text-gray-700">
<h2 class="text-2xl font-semibold">
{gameState.phase === 'placement' ? 'Place Your Ships' : 'Battle Phase'}
</h2>
<div class="flex space-x-4">
@@ -24,11 +24,11 @@
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Your Board</h3>
<h3 class="text-lg font-medium mb-2">Your Board</h3>
<Board board={gameState.playerBoard} callback={() => {}} />
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Opponent's Board</h3>
<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
<Board
board={gameState.opponentBoard}
callback={(i, j) => gameState.opponentBoard.set(i, j, 'h')}
@@ -44,7 +44,15 @@
{:else}
<button class="btn btn-primary">Fire!</button>
{/if}
<button class="btn btn-outline">Reset Game</button>
<button class="btn btn-outline" onclick={() => gameState.createRoom()}>Create Room</button
>
<input
type="text"
bind:value={gameState.room}
placeholder="Code"
class="input input-bordered w-full max-w-20"
/>
<button class="btn btn-outline">Join Room</button>
</div>
</div>
</main>