Add the interface, then rebuild the economy around the first playtest
The MVP is playable: a turn screen, a career retrospective, an optional feedback widget, local-storage autosave with file export/import, and a build that flattens everything into one self-contained HTML file. A turn has two phases — the scenario and its options, then what the choice did and, separately, what the day cost regardless. Numbers that move without the player seeing why are most of what makes them meaningless. Locked options are shown greyed with the requirement spelled out rather than hidden, so a player can see the door they cannot open yet. The interface is named entirely by the pack. `pack.display` maps a state path to a label, a format and an order, which is why the header reads "Standing" for a path called `reputation` and why debt disappears while it is zero. The first playtest then found three things, all of them fair. *"Wasn't clear what daily drain was for."* The ledger was labelling changes by the path that moved — "Money −$18" — when the upkeep entry that caused them had a perfectly good name. It now says "Coffee, transit, lunch". The labels were in the data the whole time and never reached the screen. *"Should probably pay rent weekly / get paid every other week… would be good to have day of week and week # shown."* Packs can now declare a calendar, and the engine derives the day name, cycle and index from the turn number before the event is drawn — so content can require a Friday and the header can say "Thursday · Week 2 · Day 12". Upkeep entries take `every` and `offset`, making wages fall on alternate Fridays and rent every Monday. The turn screen carries a diary line — "Wages tomorrow · Rent in 4 days" — computed generically from whatever a pack schedules. *"Always in debt — could never get ahead."* The old economy bled $25 a day regardless of play. It is now roughly break-even at baseline, with a `spare_shift` event that appears *because* you are broke: the way out of a hole should be visible from inside it. Across archetypes a careful player ends around $1,400, an unplanned one treads water, and a careless one sinks into real debt. That retune broke the coverage test, usefully. Random play stopped reaching hard times at all, which made the entire debt branch look dead — it was not, since random play is not a plausible player. Coverage is now the union across five archetypes, including one that is broke *and* well-liked, because the "ask a friend for money" options sit in a state no single-axis strategy reaches. Not covered by any of this: styling and dark mode, which only a human with a browser can check. This machine has none that can render a page. 109 tests. Reasoning in docs/DECISIONS.md §14-21. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VMSFHyVPitUoosW5wyEADj
This commit is contained in:
JesseMarkowitz
co-authored by
Claude Opus 5
Claude Opus 5
parent
1d4ac0fdbd
commit
e482f07157
@@ -0,0 +1,289 @@
|
||||
/* The Ladder — one stylesheet, no framework.
|
||||
The look is office stationery: manila, rules, stamped figures. Muted enough
|
||||
that seventeen scenarios in a row do not tire the eye. */
|
||||
|
||||
:root {
|
||||
--paper: #f2eee4;
|
||||
--card: #fffdf7;
|
||||
--ink: #26231d;
|
||||
--ink-soft: #6b6659;
|
||||
--ink-faint: #938c7c;
|
||||
--rule: #ded6c4;
|
||||
--rule-strong: #c9bfa8;
|
||||
--accent: #7c5a2c;
|
||||
--accent-soft: #efe3cd;
|
||||
--up: #4a6b3d;
|
||||
--down: #a4402f;
|
||||
--focus: #2f6f9e;
|
||||
|
||||
--radius: 3px;
|
||||
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--paper: #1c1a17;
|
||||
--card: #24211d;
|
||||
--ink: #e8e3d8;
|
||||
--ink-soft: #a8a294;
|
||||
--ink-faint: #7d776a;
|
||||
--rule: #38342d;
|
||||
--rule-strong: #4a453b;
|
||||
--accent: #c9a05e;
|
||||
--accent-soft: #3a3227;
|
||||
--up: #85ad72;
|
||||
--down: #d17a68;
|
||||
--focus: #6fa8d4;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.app { max-width: 1080px; margin: 0 auto; padding: 24px 20px 48px; }
|
||||
.booting { color: var(--ink-faint); padding: 48px 20px; text-align: center; }
|
||||
|
||||
/* ---------- head-up display ---------- */
|
||||
|
||||
.hud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 32px;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid var(--rule-strong);
|
||||
}
|
||||
|
||||
.hud__stage {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.hud__day { margin: 2px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.hud__detail { margin: 1px 0 0; font-size: 13px; color: var(--ink-soft); }
|
||||
|
||||
.diary {
|
||||
margin: 14px 0 0; padding: 8px 12px;
|
||||
font-size: 12.5px; color: var(--ink-soft);
|
||||
background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
}
|
||||
.diary__entry--in { color: var(--up); }
|
||||
.diary__entry--out { color: var(--ink-soft); }
|
||||
|
||||
.stats { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; }
|
||||
|
||||
.figure { display: flex; flex-direction: column; gap: 1px; min-width: 92px; }
|
||||
.figure__label {
|
||||
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
|
||||
}
|
||||
.figure__value { font-family: var(--serif); font-size: 21px; font-variant-numeric: tabular-nums; }
|
||||
.figure__value--negative { color: var(--down); }
|
||||
|
||||
/* ---------- meters ---------- */
|
||||
|
||||
.meter { min-width: 150px; }
|
||||
.meter--compact { min-width: 132px; }
|
||||
.meter__head {
|
||||
display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
|
||||
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
|
||||
}
|
||||
.meter__value { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
|
||||
.meter__track {
|
||||
margin-top: 4px; height: 5px; background: var(--rule); border-radius: 99px; overflow: hidden;
|
||||
}
|
||||
.meter__fill {
|
||||
height: 100%; background: var(--accent); border-radius: 99px;
|
||||
transition: width 280ms ease;
|
||||
}
|
||||
|
||||
/* ---------- layout ---------- */
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
gap: 36px;
|
||||
margin-top: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
|
||||
}
|
||||
|
||||
/* ---------- the scenario ---------- */
|
||||
|
||||
.scenario__text, .outcome__text {
|
||||
font-family: var(--serif);
|
||||
font-size: 20px;
|
||||
line-height: 1.55;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
|
||||
|
||||
.option {
|
||||
display: flex; flex-direction: column; gap: 3px; width: 100%;
|
||||
padding: 14px 16px; text-align: left; cursor: pointer;
|
||||
background: var(--card); color: inherit; font: inherit;
|
||||
border: 1px solid var(--rule-strong); border-radius: var(--radius);
|
||||
transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
.option:hover:not(:disabled) { border-color: var(--accent); transform: translateX(2px); }
|
||||
.option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.option__label { font-size: 16px; }
|
||||
|
||||
.option--locked {
|
||||
cursor: not-allowed; background: transparent; border-style: dashed;
|
||||
border-color: var(--rule); color: var(--ink-faint);
|
||||
}
|
||||
.option__requirement {
|
||||
font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); font-style: italic;
|
||||
}
|
||||
|
||||
/* ---------- outcome ---------- */
|
||||
|
||||
.outcome__chose {
|
||||
margin: 0 0 10px; font-size: 12px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--accent);
|
||||
}
|
||||
.outcome__ledger {
|
||||
margin: 26px 0; padding: 18px 20px;
|
||||
background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
}
|
||||
.outcome__heading {
|
||||
margin: 0 0 10px; font-size: 11px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
|
||||
}
|
||||
.outcome__upkeep { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rule); }
|
||||
|
||||
.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
|
||||
.changes--none { color: var(--ink-faint); font-style: italic; margin: 0; }
|
||||
.change { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
|
||||
.change__label { color: var(--ink-soft); }
|
||||
.change__delta { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }
|
||||
.change--up .change__delta { color: var(--up); }
|
||||
.change--down .change__delta { color: var(--down); }
|
||||
.change__note { font-size: 11px; color: var(--ink-faint); font-style: italic; }
|
||||
|
||||
.button--next { margin-top: 8px; }
|
||||
|
||||
/* ---------- people ---------- */
|
||||
|
||||
.people__heading, .retro__heading {
|
||||
margin: 0 0 12px; font-size: 11px; letter-spacing: 0.12em;
|
||||
text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
|
||||
}
|
||||
|
||||
.person {
|
||||
padding: 16px; margin-bottom: 14px;
|
||||
background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
}
|
||||
.person__name { margin: 0; font-size: 16px; font-weight: 600; }
|
||||
.person__title {
|
||||
margin: 1px 0 0; font-size: 11px; letter-spacing: 0.08em;
|
||||
text-transform: uppercase; color: var(--ink-faint);
|
||||
}
|
||||
.person__description {
|
||||
margin: 10px 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
|
||||
font-family: var(--serif);
|
||||
}
|
||||
.person__meters { display: grid; gap: 8px; }
|
||||
|
||||
/* ---------- feedback ---------- */
|
||||
|
||||
.feedback {
|
||||
margin: 24px 0; padding: 14px 16px;
|
||||
border: 1px dashed var(--rule-strong); border-radius: var(--radius);
|
||||
}
|
||||
.feedback__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
|
||||
.feedback__prompt { font-size: 13px; color: var(--ink-soft); }
|
||||
.feedback__ratings { display: flex; gap: 6px; }
|
||||
|
||||
.rating {
|
||||
padding: 4px 10px; font-size: 16px; line-height: 1.2; cursor: pointer;
|
||||
background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
filter: grayscale(1); opacity: 0.65; transition: all 120ms ease;
|
||||
}
|
||||
.rating:hover { opacity: 1; filter: none; }
|
||||
.rating--on { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
|
||||
.rating:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
|
||||
.feedback__toggle {
|
||||
margin-left: auto; padding: 0; font: inherit; font-size: 12px; cursor: pointer;
|
||||
background: none; border: none; color: var(--ink-faint); text-decoration: underline;
|
||||
}
|
||||
.feedback__detail { display: grid; gap: 12px; margin-top: 14px; }
|
||||
.field { display: grid; gap: 4px; }
|
||||
.field__label { font-size: 12px; color: var(--ink-faint); }
|
||||
.field__input {
|
||||
width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical;
|
||||
background: var(--card); color: inherit;
|
||||
border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
}
|
||||
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
|
||||
.feedback__saved { margin: 10px 0 0; font-size: 12px; color: var(--up); }
|
||||
|
||||
/* ---------- buttons and controls ---------- */
|
||||
|
||||
.controls {
|
||||
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
||||
margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 9px 15px; font: inherit; font-size: 14px; cursor: pointer;
|
||||
background: var(--card); color: inherit;
|
||||
border: 1px solid var(--rule-strong); border-radius: var(--radius);
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
.button:hover { border-color: var(--accent); }
|
||||
.button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
.button--primary { background: var(--accent); border-color: var(--accent); color: #fffdf7; }
|
||||
.button--primary:hover { filter: brightness(1.08); }
|
||||
.button--quiet { border-color: transparent; background: transparent; color: var(--ink-faint); }
|
||||
.button--quiet:hover { color: var(--ink); border-color: var(--rule); }
|
||||
|
||||
/* ---------- retrospective ---------- */
|
||||
|
||||
.retro__head { padding-bottom: 20px; border-bottom: 2px solid var(--rule-strong); }
|
||||
.retro__eyebrow {
|
||||
margin: 0; font-size: 11px; letter-spacing: 0.14em;
|
||||
text-transform: uppercase; color: var(--ink-faint);
|
||||
}
|
||||
.retro__title { margin: 6px 0 4px; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
|
||||
.retro__subtitle { margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 17px; }
|
||||
|
||||
.retro__section { margin-top: 34px; }
|
||||
.retro__people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
|
||||
.retro__people .person { margin-bottom: 0; }
|
||||
|
||||
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; }
|
||||
.facts__item {
|
||||
padding: 12px 14px; background: var(--card);
|
||||
border: 1px solid var(--rule); border-radius: var(--radius);
|
||||
}
|
||||
.facts__label {
|
||||
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
|
||||
}
|
||||
.facts__value { margin: 3px 0 0; font-family: var(--serif); font-size: 16px; }
|
||||
|
||||
.moments { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
|
||||
.moment { font-family: var(--serif); font-size: 16px; }
|
||||
.moments--none { padding: 0; color: var(--ink-faint); font-style: italic; }
|
||||
|
||||
.screen--error { padding: 40px 0; }
|
||||
.screen--error h1 { font-size: 20px; color: var(--down); }
|
||||
Reference in New Issue
Block a user