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

working state

Browse Source
This commit is contained in:
sparshg
2024-09-20 03:05:17 +05:30
parent 9cc0defa05
commit b994cd7439
4 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,15 @@
import { Board } from '$lib/state.svelte'; import { Board } from '$lib/state.svelte';
import { Crosshair, Ship } from 'lucide-svelte'; import { Crosshair, Ship } from 'lucide-svelte';
let { board, callback }: { board: Board; callback: (i: number, j: number) => void } = $props(); let {
class: className,
board,
callback
}: {
class: string;
board: Board;
callback: (i: number, j: number) => void;
} = $props();
</script> </script>
<div class="grid grid-cols-10 ml-4"> <div class="grid grid-cols-10 ml-4">
@@ -11,7 +19,7 @@
{/each} {/each}
</div> </div>
<div class="flex flex-row"> <div class="{className} flex flex-row">
<div class="grid grid-rows-10 items-center mr-1"> <div class="grid grid-rows-10 items-center mr-1">
{#each ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] as i} {#each ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] as i}
<div class="text">{i}</div> <div class="text">{i}</div>

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

@@ -22,7 +22,9 @@
<div class="space-y-4 max-w-[70%]"> <div class="space-y-4 max-w-[70%]">
{#if roomCode} {#if roomCode}
<div class="space-x-2 flex flex-row justify-center items-center"> <div class="space-x-2 flex flex-row justify-center items-center">
<div class="text-3xl font-bold tracking-widest font-mono bg-accent py-3 rounded-full px-12"> <div
class="text-3xl font-bold tracking-widest text-accent-content font-mono bg-accent py-3 rounded-full px-12"
>
{roomCode} {roomCode}
</div> </div>

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

@@ -25,7 +25,7 @@ export class State {
callback(this.playerBoard.board); callback(this.playerBoard.board);
}); });
this.socket.on('turnover', (id) => { this.socket.on('turnover', (id) => {
this.turn = id != this.socket.id; this.turn = id == this.socket.id;
this.phase = this.turn ? 'selfturn' : 'otherturn'; this.phase = this.turn ? 'selfturn' : 'otherturn';
}); });
this.socket.on('attacked', ({ by, at, hit, sunk }) => { this.socket.on('attacked', ({ by, at, hit, sunk }) => {

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

@@ -16,7 +16,11 @@
<div class="p-6 space-y-6"> <div class="p-6 space-y-6">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h2 class="text-2xl font-semibold rounded-full bg-base-300 py-3 px-6"> <h2 class="text-2xl font-semibold rounded-full bg-base-300 py-3 px-6">
{gameState.hasNotStarted() ? 'Place your ships' : 'Battle Phase'} {gameState.hasNotStarted()
? 'Place your ships'
: gameState.turn
? 'Make a guess'
: 'Waiting for opponent'}
</h2> </h2>
<div class="flex space-x-4"> <div class="flex space-x-4">
<div class="text-blue-600">Your Ships: {5}</div> <div class="text-blue-600">Your Ships: {5}</div>
@@ -27,12 +31,21 @@
<div class="grid md:grid-cols-2 gap-8"> <div class="grid md:grid-cols-2 gap-8">
<div> <div>
<h3 class="text-lg font-medium mb-2">Your Board</h3> <h3 class="text-lg font-medium mb-2">Your Board</h3>
<Board board={gameState.playerBoard} callback={() => {}} />
<Board
class={!gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
board={gameState.playerBoard}
callback={() => {}}
/>
</div> </div>
<div> <div>
<h3 class="text-lg font-medium mb-2">Opponent's Board</h3> <h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
<div class="relative"> <div class="relative">
<Board board={gameState.opponentBoard} callback={(i, j) => gameState.attack(i, j)} /> <Board
class={gameState.turn ? 'scale-[1.01]' : 'opacity-60'}
board={gameState.opponentBoard}
callback={(i, j) => gameState.attack(i, j)}
/>
{#if gameState.hasNotStarted()} {#if gameState.hasNotStarted()}
<Join <Join
class="absolute top-[24px] left-[15px] w-[calc(100%-15px)] h-[calc(100%-24px)]" class="absolute top-[24px] left-[15px] w-[calc(100%-15px)] h-[calc(100%-24px)]"