eric/waving-hands
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A table for a dozen wizards, begun by its host

Browse Source 
Rooms take up to twelve seats and the host begins the duel with whoever
is seated; a full table begins by itself. The lobby is a roster with a
bot seat and the host's begin button. The ledger pins the turn and your
own columns and scrolls sideways to the rest; the phone bar shows every
wizard's health; a wizard who is out watches the rest; each charmed
wizard gets their own gesture; an unnamed spell goes at whoever hurt you
last, else the weakest opponent; a stab has a target from the start.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up
This commit is contained in:
Eric Wagoner
2026-09-23 09:34:21 -04:00
co-authored by Claude Fable 5.1
parent 79947e31ba
commit 58d7db106e
15 changed files with 299 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Ledger.svelte
+53 -8
View File
@@ -79,14 +79,14 @@
<tr>
<th class="turn" scope="col"><span class="visually-hidden">Turn</span></th>
{#each columns as who (who)}
<th class:you={who === duel.me} class:foe={who !== duel.me} colspan="2" scope="colgroup">{duel.state.wizards[who].name}{#if who === duel.me}&nbsp;(you){/if}</th>
<th class:you={who === duel.me} class:foe={who !== duel.me} class:gone={!duel.state.wizards[who].alive || duel.state.wizards[who].surrendered} colspan="2" scope="colgroup">{duel.state.wizards[who].name}{#if who === duel.me}&nbsp;(you){/if}</th>
{/each}
</tr>
<tr class="hands">
<th></th>
{#each columns as who (who)}
<th scope="col">left</th>
<th scope="col">right</th>
<th scope="col" class:pin-left={who === duel.me}>left</th>
<th scope="col" class:pin-right={who === duel.me}>right</th>
{/each}
</tr>
</thead>
@@ -96,7 +96,7 @@
<td class="turn">{row.label}{#if row.note}<span class="rownote">{row.note}</span>{/if}</td>
{#each columns as who (who)}
{#each ['left', 'right'] as const as hand (hand)}
<td class="cell" class:you={who === duel.me} class:foe={who !== duel.me}>
<td class="cell" class:you={who === duel.me} class:foe={who !== duel.me} class:pin-left={who === duel.me && hand === 'left'} class:pin-right={who === duel.me && hand === 'right'}>
{#each row.cells[who] as p (p.index)}
{@const notes = notesFor(who, p.index, hand)}
{@const other = hand === 'left' ? p.entry.right : p.entry.left}
@@ -114,7 +114,7 @@
<tr class="draft" class:stopped={duel.timeStopped}>
<td class="turn">{duel.timeStopped ? '' : duel.turnNumber}{#if duel.timeStopped}<span class="rownote">time stop</span>{/if}</td>
{#each ['left', 'right'] as const as hand (hand)}
<td class="cell you">
<td class="cell you" class:pin-left={hand === 'left'} class:pin-right={hand === 'right'}>
{#each duel.activeSets as set (set)}
{@const undecided = duel.chosenGesture(set, hand) === null || duel.charmedHand === hand}
{@const cast = duel.chosen[set][hand]}
@@ -138,17 +138,53 @@
<style>
.scroller {
max-height: clamp(170px, 30vh, 400px);
overflow-y: auto;
overflow: auto;
border-top: 1px solid var(--rule-strong);
border-bottom: 1px solid var(--rule-strong);
}
/* With many wizards the table grows sideways; the turn and your own two columns stay pinned on the left. */
.ledger {
width: 100%;
border-collapse: collapse;
min-width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.ledger th,
.ledger td {
min-width: 4.5rem;
}
th.pin-left,
td.pin-left,
th.pin-right,
td.pin-right {
position: sticky;
z-index: 1;
background: var(--slate-deep);
}
th.pin-left,
td.pin-left {
left: 2.9rem;
}
th.pin-right,
td.pin-right {
left: 7.4rem;
}
thead th.pin-left,
thead th.pin-right {
z-index: 3;
}
thead th.gone {
text-decoration: line-through;
color: var(--bone-dim);
}
thead th {
position: sticky;
top: 0;
@@ -177,7 +213,12 @@
th.turn,
td.turn {
position: sticky;
left: 0;
z-index: 2;
background: var(--slate-deep);
width: 2.9rem;
min-width: 2.9rem;
color: var(--bone-faint);
text-align: right;
padding-right: 0.5rem;
@@ -266,4 +307,8 @@
border-bottom: 2px solid var(--ember);
}
tr.draft td.turn {
background: var(--slate);
}
</style>