eric/game-kit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The hall's cards name each game's house player and lead with "Play Dip →", Waving Hands shows its gesture grid, and the small text reads at 4.5:1

Browse Source 
The intro says how to start before the cards. Each card's metadata line
names the house player, the call to action is "Play [Game] →" with the
game's address beneath, and an empty length line waits, hidden, for real
play data. Waving Hands' card shows the lobby's gesture grid instead of
the share card. "How a table works" says Start a table and how a seat
crosses devices, and the credits run in the cards' order. The faint bone
is gone: the metadata lines and the footer use the dimmed bone, 6.5:1
and 7.2:1 where they were 3.7:1 and 4.0:1, and the ko-fi link no longer
wraps.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-10-11 20:41:55 -04:00
co-authored by Claude Fable 5.1
parent c2582a4822
commit c162625d51
2 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gamehall/site/hands.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 36 KiB

gamehall/site/index.html
+39 -20
View File
@@ -22,7 +22,6 @@
--line: #2c3236;
--bone: #e6dfcf;
--bone-dim: #a9a494;
--bone-faint: #7c7868;
--gold: #d2a94a;
--gutter: 16px;
}
@@ -73,14 +72,17 @@
.game .art { position: relative; aspect-ratio: 5 / 3; background: #222; overflow: hidden; }
.game .art img.fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.game .art img.tafl { object-position: 50% 50%; }
.game .art img.hands { object-position: 0% 50%; }
.game .art img.dip { object-position: 50% 80%; }
.game .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game h2 { margin: 0; font-size: 1.45rem; font-weight: 500; }
.game .pitch { margin: 0; color: var(--bone); }
.game .facts { margin: 0; color: var(--bone-faint); font-size: 0.92rem; }
.game .play { margin-top: auto; padding-top: 10px; color: var(--gold); font-size: 1rem; }
.game .facts, .game .length { margin: 0; color: var(--bone-dim); font-size: 0.92rem; }
.game .length:empty { display: none; }
.game .go { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.game .play { color: var(--gold); font-size: 1rem; }
.game .site { color: var(--bone-dim); font-size: 0.85rem; }
.game:hover .play { text-decoration: underline; }
.nowrap { white-space: nowrap; }
/* The maze card: a stone floor in CSS, mortar-coloured walls, and the hall's own token drawings. */
.maze {
@@ -111,7 +113,7 @@
.keeper img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--line); }
@media (max-width: 480px) { .keeper { flex-direction: column; } }
footer { margin-top: 64px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--bone-faint); font-size: 0.9rem; }
footer { margin-top: 64px; padding: 28px 0 48px; border-top: 1px solid var(--line); color: var(--bone-dim); font-size: 0.9rem; }
footer p { margin: 0 0 8px; }
/* The hall-wide notice: its own colors, the same in every game of the hall. */
.hall-announcement { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .45rem 2.4rem .45rem 1rem; background: #f2c45a; color: #1d1a12; font: 500 .95rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; box-shadow: 0 1px 4px #0005; }
@@ -123,10 +125,11 @@
<header class="mast">
<h1>Kestrel's Hall</h1>
<p class="lede"><b>Free board games in the browser.</b> Play with friends by sending a link, or alone against the house. No accounts, no adverts, no timers, and nothing sold.</p>
<p class="lede"><b>Free board games in the browser.</b> Play alone against the house right away, or open a table and send friends the link. No accounts, no adverts, no timers, and nothing sold.</p>
</header>
<div class="games">
<!-- Each card's empty "length" line is for a typical game's length, once real play has shown it; it is hidden until filled. -->
<a class="game" href="https://wizwar.kestrelsnest.social">
<div class="art">
@@ -150,18 +153,26 @@
<div class="body">
<h2>Wiz-War</h2>
<p class="pitch">Steal treasure. Blast through walls. Outwit your friends.</p>
<p class="facts">2 to 6 players · an unofficial rebuild of Tom Jolly's 1993 board game</p>
<span class="play">Play at wizwar.kestrelsnest.social →</span>
<p class="facts">2 to 6 players, or solo against the automaton · an unofficial rebuild of Tom Jolly's 1993 board game</p>
<p class="length"></p>
<div class="go">
<span class="play">Play Wiz-War →</span>
<span class="site">wizwar.kestrelsnest.social</span>
</div>
</div>
</a>
<a class="game" href="https://hands.kestrelsnest.social">
<div class="art"><img class="fill hands" src="hands.png" alt="The Waving Hands share card: a column of gesture letters beside the title."></div>
<div class="art"><img class="fill" src="hands.png" alt="Four turns of a Waving Hands duel as the game writes them: each row a turn, each letter one hand's gesture, and a spell named under the gesture that finished it."></div>
<div class="body">
<h2>Waving Hands</h2>
<p class="pitch">Wizards duel with their hands, and the right run of gestures is a spell.</p>
<p class="facts">2 to 12 players · Richard Bartle's pencil-and-paper duel, 1977</p>
<span class="play">Play at hands.kestrelsnest.social →</span>
<p class="facts">2 to 12 players, or solo against a rival wizard · Richard Bartle's pencil-and-paper duel, 1977</p>
<p class="length"></p>
<div class="go">
<span class="play">Play Waving Hands →</span>
<span class="site">hands.kestrelsnest.social</span>
</div>
</div>
</a>
@@ -170,8 +181,12 @@
<div class="body">
<h2>Hnefatafl</h2>
<p class="pitch">The Viking board game of a king breaking for safety and a ring of attackers closing in.</p>
<p class="facts">2 players · the Norse tafl game, by the Copenhagen rules or Linnaeus's 1732 Tablut</p>
<span class="play">Play at tafl.kestrelsnest.social →</span>
<p class="facts">2 players, or solo against the housecarl · the Norse tafl game, by the Copenhagen rules or Linnaeus's 1732 Tablut</p>
<p class="length"></p>
<div class="go">
<span class="play">Play Hnefatafl →</span>
<span class="site">tafl.kestrelsnest.social</span>
</div>
</div>
</a>
@@ -179,9 +194,13 @@
<div class="art"><img class="fill dip" src="dip.jpg" alt="Dip's map of Europe at the opening: the seven powers' armies and fleets on their home centers, each power's lands in its color."></div>
<div class="body">
<h2>Dip</h2>
<p class="pitch">Seven powers share one map, and none of them has to keep its word.</p>
<p class="facts">2 to 7 players · an unofficial rebuild of Allan B. Calhamer's 1959 Diplomacy</p>
<span class="play">Play at dip.kestrelsnest.social →</span>
<p class="pitch">Seven powers share one map, and none of them has to keep its word. Five fight on the Chromatic wheel, and ten on Youngstown Redux.</p>
<p class="facts">2 to 7 players (5 on Chromatic, 10 on Youngstown Redux), or solo against the house's envoys · an unofficial rebuild of Allan B. Calhamer's 1959 Diplomacy</p>
<p class="length"></p>
<div class="go">
<span class="play">Play Dip →</span>
<span class="site">dip.kestrelsnest.social</span>
</div>
</div>
</a>
@@ -191,9 +210,9 @@
<div>
<h2>How a table works</h2>
<ul class="how">
<li><b>Open a table</b> and you get a four-letter code and a link. Send it to a friend, and begin once they sit down.</li>
<li><b>Start a table</b> and you get a four-letter code and a link. Send it to a friend, and begin once they sit down.</li>
<li><b>No one home?</b> Every game can seat the house, whether an automaton, a housecarl, a rival wizard or an envoy, so you can play right away on your own.</li>
<li><b>Nothing to sign up for.</b> Your browser holds your seat. Close the tab and come back, and the game is where you left it.</li>
<li><b>Nothing to sign up for.</b> Your browser holds your seat. Come back in the same browser and the game is where you left it. On another device, use Transfer seat in any game to carry your seat over with four words.</li>
<li><b>Watchers welcome.</b> Anyone with the link can sit in the Peanut Gallery and, if the host allows, join the table talk.</li>
<li><b>Something went wrong?</b> Every table has a report button that reaches the keeper with the exact moment attached.</li>
</ul>
@@ -208,12 +227,12 @@
</div>
</div>
<h2 style="margin-top:28px">The hosting</h2>
<p>The games are free and will stay free. They run on small servers that cost a few dollars a month, and anyone who wants to chip in toward the hosting can do so at <a href="https://ko-fi.com/kestrelsnest">ko-fi.com/kestrelsnest</a>. Every game stays whole either way.</p>
<p>The games are free and will stay free. They run on small servers that cost a few dollars a month, and anyone who wants to chip in toward the hosting can do so at <a class="nowrap" href="https://ko-fi.com/kestrelsnest">ko-fi.com/kestrelsnest</a>. Every game stays whole either way.</p>
</div>
</section>
<footer>
<p>Wiz-War is Tom Jolly's design, and the rights rest with Steve Jackson Games. Waving Hands is Richard Bartle's. Diplomacy is Allan B. Calhamer's design, and its name is a trademark of Hasbro. Nothing here is official or endorsed by Steve Jackson Games, Richard Bartle or Hasbro. Hnefatafl belongs to everyone, and is more than a thousand years old.</p>
<p>Wiz-War is Tom Jolly's design, and the rights rest with Steve Jackson Games. Waving Hands is Richard Bartle's. Hnefatafl belongs to everyone, and is more than a thousand years old. Diplomacy is Allan B. Calhamer's design, and its name is a trademark of Hasbro; the designers of Dip's Chromatic and Youngstown Redux maps are credited in Dip's How to play. Nothing here is official or endorsed by Steve Jackson Games, Richard Bartle or Hasbro.</p>
</footer>
</div>