109 lines
3.4 KiB
Svelte
109 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import Board from '$lib/board.svelte';
|
|
import Header from '$lib/header.svelte';
|
|
import Join from '$lib/join.svelte';
|
|
import { State } from '$lib/state.svelte';
|
|
import { Users } from 'lucide-svelte';
|
|
|
|
let gameState = new State();
|
|
|
|
function leaveRoom() {
|
|
gameState.socket.emit('leave');
|
|
gameState = new State();
|
|
}
|
|
</script>
|
|
|
|
<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-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 rounded-full bg-base-300 py-3 px-6">
|
|
{gameState.hasNotStarted()
|
|
? 'Place your ships'
|
|
: gameState.turn >= 0
|
|
? 'Make a guess'
|
|
: 'Waiting for opponent'}
|
|
</h2>
|
|
{#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={leaveRoom}>Leave</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-2">Your Board</h3>
|
|
|
|
<Board
|
|
class={gameState.turn < 0 ? 'scale-[1.01]' : 'opacity-60'}
|
|
board={gameState.playerBoard}
|
|
callback={() => {}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-2">Opponent's Board</h3>
|
|
<div class="relative">
|
|
<Board
|
|
class={gameState.turn >= 0 ? 'scale-[1.01]' : 'opacity-60'}
|
|
board={gameState.opponentBoard}
|
|
callback={(i, j) => gameState.attack(i, j)}
|
|
/>
|
|
|
|
{#if gameState.phase === 'gameover'}
|
|
<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={() => gameState.playAgain()}
|
|
>
|
|
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}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="mt-8 text-center text-gray-500">
|
|
<p>© 2024 Battleship Online. All rights reserved.</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|