waving-hands/src/lib/components/Roster.svelte

<script lang="ts">
	// The rail for three or more opponents: each on one line, with the focused
	// one expanded. The player's own status card stays above in full.
	import WizardStatus from './WizardStatus.svelte';
	import type { Duel } from '$lib/game/duel.svelte';
	import { seatColor } from '$lib/game/colors';
	import { MAX_HP, type WizardId } from '$lib/game/state';
	import { statusWords } from '$lib/game/status';

	let { duel }: { duel: Duel } = $props();

	const waitingOn = $derived(duel.remote?.waitingOn ?? []);

	function toggle(id: WizardId) {
		if (duel.focus === id) duel.focus = null;
		else duel.focusOn(id);
	}

	function stateOf(id: WizardId): string {
		if (!duel.remote?.started || duel.state.over) return '';
		const w = duel.state.wizards[id];
		if (!w.alive || w.surrendered) return 'out';
		const seat = duel.remote.seats.find((s) => s.id === id);
		if (seat?.standIn) return 'a bot duels for them';
		if (seat?.bot) return '';
		return waitingOn.includes(id) ? 'writing' : 'moved';
	}
</script>

<section class="roster" id="roster" aria-label="The other wizards">
	<h2>At the table</h2>
	<ul>
		{#each duel.others as id (id)}
			{@const w = duel.state.wizards[id]}
			{@const open = duel.focus === id}
			{@const words = statusWords(w)}
			<li class:open class:gone={!w.alive || w.surrendered}>
				<button type="button" class="row" aria-expanded={open} onclick={() => toggle(id)}>
					<span class="dot" style="background: {seatColor(duel.state, id)}"></span>
					<span class="name">{w.name}</span>
					<span class="hp">{w.hp}/{MAX_HP}</span>
					<span class="words">{words.join(', ')}</span>
					<span class="turn muted">{stateOf(id)}</span>
				</button>
				{#if open}
					<div class="detail">
						<WizardStatus turnsPlayed={duel.state.turn} wizard={w} monsters={duel.state.monsters.filter((m) => m.owner === id)} />
					</div>
				{/if}
			</li>
		{/each}
	</ul>
</section>

<style>
	.roster {
		scroll-margin-top: 0.5rem;
		padding: 0.75rem 0 0.4rem;
		border-bottom: 1px solid var(--rule);
	}

	h2 {
		font-size: 1.1rem;
		font-style: italic;
		margin-bottom: 0.3rem;
	}

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

	li {
		border-top: 1px solid var(--rule);
	}

	li.gone .name {
		text-decoration: line-through;
		color: var(--bone-dim);
	}

	.row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.4fr) auto;
		align-items: baseline;
		gap: 0.5rem;
		width: 100%;
		padding: 0.35rem 0.2rem;
		background: none;
		border: 0;
		color: var(--bone);
		text-align: left;
		font-size: 0.92rem;
	}

	.row:hover,
	li.open .row {
		background: var(--slate);
	}

	.dot {
		width: 0.55rem;
		height: 0.55rem;
		border-radius: 50%;
		align-self: center;
	}

	.name {
		font-style: italic;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hp {
		font-variant-numeric: tabular-nums;
		color: var(--bone-dim);
	}

	.words {
		color: var(--frost);
		font-size: 0.82rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.turn {
		font-size: 0.78rem;
		font-style: italic;
		white-space: nowrap;
	}

	.detail {
		padding: 0 0.2rem 0.3rem;
	}

	.detail :global(.wizard) {
		border-bottom: 0;
		padding-top: 0.2rem;
	}

	.detail :global(h2) {
		display: none;
	}
</style>