From cf9ee33b52a00b68ba6392f6480439718ff4f24a Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Mon, 15 Jun 2026 09:38:01 -0700
Subject: [PATCH] Condense obstacle cards into an overlapping column (v2)

Replace the big-original-card + row-of-minis layout with a single vertical
column: the original sits at the back (accent ring), each play stacks in front
with a heavy negative margin so only its rank+suit peeks out, and the latest
card is fully visible at the bottom. Played cards keep a green/red success ring;
the ChallengePanel's per-play list still credits each player.

Top-aligns the Current Difficulty / Successes boxes so they no longer stretch to
the now-taller card column. Matches the rulebook's column card layout and is far
more compact. Verified in the ChallengePanel, the obstacle list, and on mobile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 TODO.md                                       |  2 +-
 frontend/src/assets/css/scene-play.css        | 59 ++++++++++---------
 .../src/components/scene/ObstacleItem.svelte  | 27 ++++-----
 frontend/src/lib/changelog.js                 |  9 ++-
 4 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/TODO.md b/TODO.md
index 8d1d64f..6ec605f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,7 +3,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. 
-- [ ] **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.
+- [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
 
diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css
index 15ee3f6..12d3c6b 100644
--- a/frontend/src/assets/css/scene-play.css
+++ b/frontend/src/assets/css/scene-play.css
@@ -205,19 +205,40 @@
 .suit-c, .suit-s { border-left: 4px solid var(--suit-black); }
 .suit-h, .suit-d { border-left: 4px solid var(--suit-red); }
 
-.obstacle-card-wrapper {
+/* Overlapping card column for an Obstacle. Cards stack with a heavy negative
+   margin so each earlier card shows only its top strip (rank + suit); the most
+   recent play sits fully visible at the bottom. Rings: accent = the original
+   card, green/red = a play that did / didn't beat the difficulty. */
+.obstacle-stack {
+    --peek: 34px;          /* visible strip of each earlier card */
+    --card-h: 112px;       /* medium card height (card.css) */
+    align-self: start;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: 0.3rem;
+    padding: 2px;          /* room for the rings, which overflow:hidden would clip */
 }
 
-.card-caption {
-    font-size: 0.6rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-muted);
+.stack-card {
+    position: relative;
+    border-radius: var(--radius-sm);
+    line-height: 0;
+}
+
+.stack-card + .stack-card {
+    margin-top: calc(var(--peek) - var(--card-h));
+}
+
+.stack-card.is-original {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.stack-card.is-success {
+    box-shadow: 0 0 0 2px var(--success);
+}
+
+.stack-card.is-failure {
+    box-shadow: 0 0 0 2px var(--danger);
 }
 
 /* Obstacle color (red/black) — fixed by the original card; matching it draws back */
@@ -288,6 +309,7 @@
 }
 
 .obstacle-value-display {
+    align-self: start;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -299,6 +321,7 @@
 }
 
 .obstacle-successes-display {
+    align-self: start;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -327,26 +350,6 @@
     color: var(--accent);
 }
 
-.played-column {
-    grid-column: 1 / -1;
-    border-top: 1px solid var(--edge-soft);
-    padding-top: 0.75rem;
-    margin-top: 0.5rem;
-}
-
-.played-column h5 {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-}
-
-.column-cards-flex {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.75rem;
-}
-
 .clear-obstacle-row {
     grid-column: 1 / -1;
 }
diff --git a/frontend/src/components/scene/ObstacleItem.svelte b/frontend/src/components/scene/ObstacleItem.svelte
index fae2514..b488598 100644
--- a/frontend/src/components/scene/ObstacleItem.svelte
+++ b/frontend/src/components/scene/ObstacleItem.svelte
@@ -67,9 +67,19 @@
     {#if error}
         <div class="alert alert-danger" style="grid-column: 1 / -1;">{error}</div>
     {/if}
-    <div class="obstacle-card-wrapper">
-        <Card card={obs.original_card} size="medium" />
-        <span class="card-caption">Original card</span>
+    <!-- Card column: original at the back, each play stacked in front of it, the
+         latest fully visible and earlier cards peeking their rank + suit. -->
+    <div class="obstacle-stack">
+        <div class="stack-card is-original" use:tooltip={'Original card — fixes the Obstacle’s color and never changes.'}>
+            <Card card={obs.original_card} size="medium" />
+        </div>
+        {#each column_cards as pc, i (i)}
+            <div class="stack-card {pc.success ? 'is-success' : 'is-failure'}"
+                 class:is-latest={i === column_cards.length - 1}
+                 use:tooltip={`${pc.player_name} played this — ${pc.success ? 'success' : 'no success'}.`}>
+                <Card card={pc.card} size="medium" />
+            </div>
+        {/each}
     </div>
     <div class="obstacle-details">
         <h4>{obs.title} {#if in_challenge && !embedded}<span class="in-challenge-tag">⚔️ In Challenge</span>{/if}</h4>
@@ -97,17 +107,6 @@
         <span class="val-number">{success_count} / {state.players.length}</span>
     </div>
 
-    <!-- Played Cards Column -->
-    <div class="played-column">
-        <h5>Card History (Column)</h5>
-        <div class="column-cards-flex">
-            <Card card={obs.original_card} size="mini" />
-            {#each column_cards as pc}
-                <Card card={pc.card} size="mini" rotated success={pc.success} owner={pc.player_name.slice(0, 4)} />
-            {/each}
-        </div>
-    </div>
-
     {#if is_completed && state.player.role === 'deep'}
         <div class="clear-obstacle-row text-center">
             <button class="btn btn-success btn-full" on:click={clearObstacle}>Clear Obstacle</button>
diff --git a/frontend/src/lib/changelog.js b/frontend/src/lib/changelog.js
index 6554002..d41c023 100644
--- a/frontend/src/lib/changelog.js
+++ b/frontend/src/lib/changelog.js
@@ -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 = 1;
+export const VERSION = 2;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 2,
+        date: '2026-06-15',
+        changes: [
+            'Obstacle cards now stack as a single overlapping column — the latest play sits in full view with earlier cards peeking out behind it, matching the rulebook’s card layout.',
+        ],
+    },
     {
         version: 1,
         date: '2026-06-15',