tim.mccarthy/pirats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rules: add card diagrams to the Example of Play (v3)

Browse Source 
The Cheesy Heist walkthrough was a wall of text. Add a card-state diagram at
each step (after the draw, and after each of the three Challenges) showing both
Obstacle columns as they grow — reusing the same overlapping-column visual as
the in-app obstacle display: original card at the back with a gold ring, plays
stacked in front (green = beat the difficulty, red = didn't), newest in full
view. Self-contained CSS in rules.html; card faces stay light parchment in both
themes. Verified in light/dark and on mobile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tim McCarthy
2026-06-15 09:44:59 -07:00
parent cf9ee33b52
commit 922fc38c0a
3 changed files with 186 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@@ -2,7 +2,7 @@
- [x] On the home page, rejoin a crew should be above muster a crew, and there should be a gap between the two boxes
- [x] **Version number and change log** Start keeping track of version number. It's fine to just start with v1 and increment on every commit. In the hamburger menu, add an "About" item that pops up a modal with the current version number and a change log. The change log should only cover user-facing changes. Add a note to AGENTS.md about maintaining the change log.
- [ ] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing.
- [x] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing.
- [x] **Condense Obstacle card display**: Change how the cards in an Obstacle are laid out. Instead of being one big card and a bunch of little ones under it in a row, they should be a single column, with the cards overlapping so that you can just see the numbers and suits of the previous cards peeking out behind the latest card. This is more compact, puts the focus on the most relevant information, and is in line with the rulebook describing the card layout as a column. This is probably also how the cards in the example play section should be laid out.
## Words Words Words

9
frontend/src/lib/changelog.js
View File

@@ -6,10 +6,17 @@
// - Add a CHANGELOG entry only when a commit changes something players can
// see. Skip refactors, tests, and tooling. Keep wording player-facing.
export const VERSION = 2;
export const VERSION = 3;
// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
export const CHANGELOG = [
{
version: 3,
date: '2026-06-15',
changes: [
'The rulebook’s Example of Play now has card diagrams at each step, showing how each Obstacle’s column grows as the scene unfolds.',
],
},
{
version: 2,
date: '2026-06-15',

177
src/pirats/rules.html
View File

@@ -232,6 +232,103 @@ a { color: var(--neon-cyan); }
font-family: var(--font-heading);
cursor: pointer;
}
/* ============================================================
Example-of-Play card diagrams. Mirror the SPA's Obstacle column:
the original card sits at the back (gold ring), each play stacks in
front with a heavy negative margin so only its rank + suit peeks out,
and the newest card — which sets the difficulty — is fully visible at
the bottom. Green ring = a play that beat the difficulty; red = one
that didn't. Card faces stay light parchment in both themes, like the app.
============================================================ */
:root {
--ex-card-face: #faf4e0;
--ex-card-shade: #ead9b8;
--ex-card-red: #c2303a;
--ex-card-black: #2c3245;
--ex-success: #3f9d5b;
--ex-fail: #c0392b;
--ex-card-h: 74px;
--ex-peek: 30px;
}
.ex-board {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.25rem;
margin: 0.75rem 0 1.25rem;
padding: 1rem 1.25rem;
background: var(--well-bg);
border: 1px solid var(--row-border);
border-radius: 10px;
}
.ex-board-label {
flex-basis: 100%;
font-family: var(--font-heading);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.ex-obstacle { display: flex; align-items: flex-start; gap: 0.85rem; }
.ex-stack {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
padding: 2px;
}
.ex-stack-card { position: relative; border-radius: 6px; line-height: 0; }
.ex-stack-card + .ex-stack-card { margin-top: calc(var(--ex-peek) - var(--ex-card-h)); }
.ex-stack-card.is-original { box-shadow: 0 0 0 2px var(--gold); }
.ex-stack-card.is-success { box-shadow: 0 0 0 2px var(--ex-success); }
.ex-stack-card.is-fail { box-shadow: 0 0 0 2px var(--ex-fail); }
.ex-card {
width: 52px;
height: var(--ex-card-h);
border-radius: 6px;
background: linear-gradient(150deg, var(--ex-card-face), var(--ex-card-shade));
border: 1px solid rgba(44, 50, 69, 0.35);
color: var(--ex-card-black);
padding: 4px 5px;
position: relative;
box-shadow: 0 2px 5px rgba(36, 62, 87, 0.25);
}
.ex-card.red { color: var(--ex-card-red); }
.ex-card .ex-corner {
display: flex;
flex-direction: column;
align-items: center;
width: max-content;
line-height: 1;
font-weight: 800;
}
.ex-card .ex-corner .r { font-size: 0.82rem; }
.ex-card .ex-corner .s { font-size: 0.72rem; }
.ex-card .ex-pip {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.ex-meta { font-size: 0.85rem; line-height: 1.35; }
.ex-meta .ex-title { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.ex-meta .ex-val { color: var(--gold); font-weight: 800; }
.ex-legend .ex-ok { color: var(--ex-success); font-weight: 700; }
.ex-legend .ex-no { color: var(--ex-fail); font-weight: 700; }
</style>
</head>
<body>
@@ -1021,6 +1118,28 @@ a { color: var(--neon-cyan); }
are a total of two Obstacles on the list. Sally draws from the top of the deck: 10 of ♥
Hearts: Cheese Thief. The Obstacle List now has: 7 of ♥ Hearts: Bad Breakups (value: 7) and
10 of ♥ Hearts: Cheese Thief (value: 10).</p>
<p class="aside ex-legend">In the diagrams below, each Obstacle is a column of cards. The
<strong>original</strong> card (gold outline) stays at the back and fixes the color; each play
stacks in front of it, and the newest card — which sets the current difficulty — sits in full
view. <span class="ex-ok">Green</span> marks a play that beat the difficulty, <span class="ex-no">red</span>
one that didn't.</p>
<div class="ex-board">
<div class="ex-board-label">Obstacle List after the draw</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">7</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Bad Breakups</span>Difficulty <span class="ex-val">7</span><br>0 successes</div>
</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">10</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Cheese Thief</span>Difficulty <span class="ex-val">10</span><br>0 successes</div>
</div>
</div>
<p><strong>Step 3: Frame the Scene!</strong></p>
<p>Sally: "Alright, so you rowdy rats are in the galley below deck, drinking grog, and
shootin' the breeze. The crew's been tense ever since that breakup between Salty Socks Pete
@@ -1065,6 +1184,24 @@ a { color: var(--neon-cyan); }
<p><strong>Draw Cards:</strong> Jake played a 3 of ♥ Hearts against a 10 of ♥ Hearts. Since
both were red, Jake draws 1 card and adds it to their hand.</p>
<div class="ex-board">
<div class="ex-board-label">After the First Challenge</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">7</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card"><span class="ex-corner"><span class="r">8</span><span class="s">♠</span></span><span class="ex-pip">♠</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Bad Breakups</span>Difficulty <span class="ex-val">8</span><br>1 success</div>
</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">10</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-fail"><div class="ex-card red"><span class="ex-corner"><span class="r">3</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Cheese Thief</span>Difficulty <span class="ex-val">3</span><br>0 successes</div>
</div>
</div>
<h4>Second Challenge</h4>
<p>Gabe: "While everyone's yelling at Carlos, I sneak toward the cheese wheel on the table,
looking for clues, and maybe to steal it." Sally: "Oh no you don't! Challenge time! Can you
@@ -1089,6 +1226,25 @@ a { color: var(--neon-cyan); }
<p><strong>Draw Cards:</strong> Gabe played a King of ♠ Spades (black) against a red
Obstacle, so he doesn't draw any cards.</p>
<div class="ex-board">
<div class="ex-board-label">After the Second Challenge</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">7</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card"><span class="ex-corner"><span class="r">8</span><span class="s">♠</span></span><span class="ex-pip">♠</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Bad Breakups</span>Difficulty <span class="ex-val">8</span><br>1 success</div>
</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">10</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-fail"><div class="ex-card red"><span class="ex-corner"><span class="r">3</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card"><span class="ex-corner"><span class="r">K</span><span class="s">♠</span></span><span class="ex-pip">♠</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Cheese Thief</span>Difficulty <span class="ex-val">Rank</span><br>1 success<br><span class="aside">(King = Secret Pirate Technique)</span></div>
</div>
</div>
<h4>Third Challenge</h4>
<p>Gabe: "Whiskey Shrinkage is up on deck now, eating cheese openly. He's taunting the crew
with it, hoping to draw out the Cheese Thief. 'Will the owner of this delicious havarti come
@@ -1123,6 +1279,27 @@ a { color: var(--neon-cyan); }
draws 1 card. Jake played Queen of ♥ Hearts (red) against a red Obstacle, so they WOULD draw
1 card, but they were assisting, so they didn't get to draw.</p>
<div class="ex-board">
<div class="ex-board-label">After the Third Challenge</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">7</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card"><span class="ex-corner"><span class="r">8</span><span class="s">♠</span></span><span class="ex-pip">♠</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card red"><span class="ex-corner"><span class="r">Q</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Bad Breakups</span>Difficulty <span class="ex-val">Rank</span><br>2 successes<br><span class="aside">(Queen = Secret Pirate Technique)</span></div>
</div>
<div class="ex-obstacle">
<div class="ex-stack">
<div class="ex-stack-card is-original"><div class="ex-card red"><span class="ex-corner"><span class="r">10</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-fail"><div class="ex-card red"><span class="ex-corner"><span class="r">3</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card"><span class="ex-corner"><span class="r">K</span><span class="s">♠</span></span><span class="ex-pip">♠</span></div></div>
<div class="ex-stack-card is-success"><div class="ex-card red"><span class="ex-corner"><span class="r">9</span><span class="s">♥</span></span><span class="ex-pip">♥</span></div></div>
</div>
<div class="ex-meta"><span class="ex-title">Cheese Thief</span>Difficulty <span class="ex-val">9</span><br>2 successes</div>
</div>
</div>
<h4>Ending the Scene</h4>
<p>Sally: "Alright, let's check the requirements for ending the Scene. Both Pi-Rat Players
have been challenged at least once. Has anyone made progress on their Objectives?"</p>