game-kit/template/src/lib/components/Board.svelte

<script lang="ts">
	// The demo game's board. A real game replaces this file entirely; the
	// masthead, lobby, talk, gallery and reports around it stay.
	import TableTalk from './TableTalk.svelte';
	import { HIGHEST, TARGET } from '$lib/game';
	import type { Room } from '$lib/net/room.svelte';

	let { room }: { room: Room } = $props();

	const g = $derived(room.state!);
	let pick = $state(0);

	async function play() {
		if (!pick) return;
		if (await room.submit({ pick })) pick = 0;
	}
</script>

<main class="board">
	<section class="play">
		<table class="rounds">
			<thead>
				<tr>
					<th class="turn"><span class="visually-hidden">Round</span></th>
					{#each g.seats as id (id)}
						<th class:you={id === room.me}>{g.players[id].name}{#if id === room.me}&nbsp;(you){/if}</th>
					{/each}
				</tr>
			</thead>
			<tbody>
				{#each g.rounds as round, i (i)}
					<tr>
						<td class="turn">{i + 1}</td>
						{#each g.seats as id (id)}
							<td class:scored={round.scorer === id}>{round.picks[id]}</td>
						{/each}
					</tr>
				{/each}
				{#if !g.over}
					<tr class="draft">
						<td class="turn">{g.rounds.length + 1}</td>
						{#each g.seats as id (id)}
							<td class="muted">{id === room.me && pick ? pick : '?'}</td>
						{/each}
					</tr>
				{/if}
			</tbody>
		</table>

		{#if g.over}
			<div class="verdict">
				<h2>{g.over.winner === room.me ? 'You win.' : g.over.winner ? `${g.players[g.over.winner].name} wins.` : 'A draw.'}</h2>
				<p>{g.over.reason}</p>
				<a class="commit" href="/">Back to the hall</a>
			</div>
		{:else if room.spectating}
			<section class="move">
				<h2>You watch from the Peanut Gallery</h2>
				<p class="muted">{room.awaitingText ? `${room.awaitingText} ${room.awaiting.length === 1 ? 'turns a card over and over, still choosing.' : 'turn their cards over and over, still choosing.'}` : 'Cards are being chosen, face down.'}</p>
			</section>
		{:else}
			<section class="move">
				<h2>Round {g.rounds.length + 1}: name a number</h2>
				<p class="muted">Every player lays a card face down; the highest card nobody else laid takes the point. First to {TARGET}.</p>
				<div class="picks">
					{#each Array.from({ length: HIGHEST }, (_, i) => i + 1) as n (n)}
						<button type="button" class="pick" class:chosen={pick === n} disabled={room.moved} onclick={() => (pick = n)}>{n}</button>
					{/each}
				</div>
				<button type="button" class="commit" disabled={!pick || room.moved || room.sending} onclick={play}>
					{room.moved ? `Waiting on ${room.awaitingText}` : room.sending ? 'Sending' : 'Commit'}
				</button>
				{#if room.error}<p class="warning">{room.error}</p>{/if}
			</section>
		{/if}
	</section>

	<aside class="rail">
		<section class="standings">
			<h2>Standings</h2>
			<ul>
				{#each g.seats as id (id)}
					<li><span>{g.players[id].name}</span><span>{g.players[id].points} / {TARGET}</span></li>
				{/each}
			</ul>
		</section>
		<TableTalk {room} />
	</aside>
</main>

<style>
	.board {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
		gap: 0 clamp(1.5rem, 4vw, 3.5rem);
		padding: 0 var(--gutter);
		max-width: 1280px;
		margin: 0 auto;
	}

	@media (max-width: 860px) {
		.board {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.rounds {
		width: 100%;
		border-collapse: collapse;
		font-size: 1.3rem;
		text-align: center;
	}

	.rounds th {
		font-weight: 500;
		font-style: italic;
		font-size: 1rem;
		padding: 0.3rem 0;
		border-bottom: 1px solid var(--rule-strong);
	}

	.rounds th.you {
		color: var(--frost);
	}

	.rounds td {
		padding: 0.35rem 0;
		border-bottom: 1px solid var(--rule);
	}

	.rounds .turn {
		width: 2.5rem;
		font-size: 0.8rem;
		color: var(--bone-faint);
	}

	.rounds td.scored {
		color: var(--ember);
		font-weight: 600;
	}

	.rounds tr.draft td {
		background: var(--slate);
	}

	.move,
	.verdict {
		margin-top: 1.2rem;
	}

	.move h2,
	.verdict h2 {
		font-size: 1.3rem;
		margin-bottom: 0.4rem;
	}

	.picks {
		display: flex;
		gap: 0.5rem;
		margin: 0.8rem 0;
	}

	.pick {
		width: 3rem;
		height: 3rem;
		font-size: 1.3rem;
		background: var(--slate);
		border: 1px solid var(--rule-strong);
		border-radius: 6px;
		color: var(--bone);
	}

	.pick.chosen {
		border-color: var(--ember);
		color: var(--ember);
	}

	.verdict .commit {
		display: inline-block;
		margin-top: 0.6rem;
		text-decoration: none;
	}

	.standings h2 {
		font-size: 1.1rem;
		font-style: italic;
		margin: 0.75rem 0 0.4rem;
	}

	.standings ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.standings li {
		display: flex;
		justify-content: space-between;
		padding: 0.3rem 0;
		border-bottom: 1px solid var(--rule);
	}
</style>