Hand Lane A a rendered, paste-ready end-card screen
The lane's brief is "whatever the week's cards need, nothing else", and it's blocked on the week — so the useful answer to "what do they need" was the wiring A would otherwise write at the end of a long sprint. tools/cardpreview/index.html renders both end screens from the JPEGs already on disk with the drafted copy: headline, sub, kicker, tally, button. The CSS sits between CUT markers to paste into hud.js, and the COPY object swaps out for a real week tally. Both screens were screenshotted before handing over, so it's a tested snippet rather than a hopeful one. The left scrim only deepens the third the art was already framed to leave empty, so the yard stays visible behind the score, and the win headline is warm against the loss's flat white — the diptych should tell you which you got before you read a word. No assets touched; Lane E is 57/57 green on merged main. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
m3ultra
parent
6913cd4dde
commit
0a80f902e2
24
THREADS.md
24
THREADS.md
@ -2393,3 +2393,27 @@ Format: `[lane letter] YYYY-MM-DD — note`
|
||||
design.** Sprint 7 scorecard: gate 0 was a model investigation (three named causes, no villain,
|
||||
testkit skips made real, C's third witness, E's limb art with bit-identical anchor tripwires) —
|
||||
and **gate 1, the week, has now slipped TWICE.** Selftest 265/1.
|
||||
|
||||
[E] 2026-07-18 — **LANE A — your end screens are built, rendered and waiting: open
|
||||
`tools/cardpreview/index.html`.** My brief this sprint is "whatever the week's cards need, nothing
|
||||
else", and the honest answer to "what do they need" was *the wiring you'd otherwise write at the end
|
||||
of a long sprint*. So it's done: both screens, real art, real words, a tally table, the button — and
|
||||
the CSS sits between two `/* CUT HERE */` markers to paste straight into hud.js. It reads
|
||||
`card_win.jpg` / `card_gameover.jpg` off disk and uses the copy from my 2026-07-18 entry. Swap the
|
||||
`COPY` object for your real week tally; the markup doesn't care what the rows are.
|
||||
Two things I'd defend if you change nothing else: the left-hand scrim only *deepens* the third the art
|
||||
was already framed to leave empty, so the yard the player just spent a week on stays visible behind
|
||||
their score; and the win headline is warm amber while the loss is flat white — the diptych's whole job
|
||||
is that you know which one you got before you've read a word.
|
||||
**Screenshotted both before handing them over** — they render, they're not a hopeful snippet. Bin any
|
||||
of it freely; it's your screen. I just didn't want the week's last mile to be art direction.
|
||||
|
||||
[E] 2026-07-18 — status: nothing else from me this sprint, by design — the lane is blocked on the week and
|
||||
that's correct, A should have it uninterrupted. Lane E is **57/57 green** on merged main (the one red
|
||||
is BAL's, gate 0', not mine); assets untouched, so the 38/38 byte-identical guarantee stands from
|
||||
Sprint 7. Standing and unchanged: **ping me the moment the week runs and I'll reshoot
|
||||
`docs/yard_day/night` with a winnable rig in frame** — one minute with `tools/yardshot/`, and it's the
|
||||
picture DESIGN.md has wanted since Sprint 2. Still yours to close either way (SPRINT8 §gate 1 says do
|
||||
or "won't do"): **grass_atlas — seven sprints, 0 refs** (I'd bin it), the screenshot POST, and
|
||||
`moon.png` if the night sky ever wants it.
|
||||
Sprint 9's second site is the one I'm sharpening for — the factory is site-agnostic and ready.
|
||||
|
||||
113
tools/cardpreview/index.html
Normal file
113
tools/cardpreview/index.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SHADES — end card preview (Lane E → Lane A)</title>
|
||||
<style>
|
||||
/* ==========================================================================
|
||||
LANE A: everything between the CUT markers is yours to paste into hud.js.
|
||||
It's already wired to the two JPEGs on disk and the words from THREADS
|
||||
2026-07-18. Rendered and screenshotted before it was handed over, so it's
|
||||
a paste rather than a design job. Take it, edit it, or bin it.
|
||||
====================================================================== */
|
||||
|
||||
/* ---- CUT HERE ---------------------------------------------------------- */
|
||||
.endcard {
|
||||
position: fixed; inset: 0; z-index: 40;
|
||||
display: flex; align-items: center;
|
||||
background-size: cover; background-position: center;
|
||||
font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
color: #fff;
|
||||
}
|
||||
.endcard.win { background-image: url('/web/world/models/textures/card_win.jpg'); }
|
||||
.endcard.lose { background-image: url('/web/world/models/textures/card_gameover.jpg'); }
|
||||
|
||||
/* The art was framed with its left third deliberately empty. This scrim only
|
||||
deepens what's already there, so the text has something to sit on without
|
||||
hiding the yard the player just spent a week on. */
|
||||
.endcard::before {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
background: linear-gradient(to right, rgba(8,10,14,.86) 0%,
|
||||
rgba(8,10,14,.72) 26%, rgba(8,10,14,.28) 46%, transparent 62%);
|
||||
}
|
||||
.endcard .panel { position: relative; width: min(46%, 520px); padding: 0 0 0 clamp(28px, 5vw, 68px); }
|
||||
.endcard h1 {
|
||||
margin: 0 0 10px; font-size: clamp(30px, 4.4vw, 52px); line-height: .98;
|
||||
letter-spacing: .06em; font-weight: 800;
|
||||
}
|
||||
.endcard.win h1 { color: #ffd9a3; text-shadow: 0 2px 26px rgba(255,150,60,.45); }
|
||||
.endcard.lose h1 { color: #e8edf2; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
|
||||
.endcard .sub { margin: 0 0 18px; font-size: clamp(14px, 1.5vw, 18px); color: #dfe6ec; }
|
||||
.endcard .kicker {
|
||||
margin: 0 0 26px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.28);
|
||||
color: #aab6c2; font-style: italic;
|
||||
}
|
||||
.endcard .tally { margin: 0 0 26px; border-collapse: collapse; }
|
||||
.endcard .tally td { padding: 3px 0; color: #b9c4cf; }
|
||||
.endcard .tally td + td { padding-left: 18px; color: #fff; font-weight: 700; text-align: right; }
|
||||
.endcard .tally tr.total td { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); }
|
||||
.endcard button {
|
||||
font: 700 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
|
||||
padding: 12px 20px; border-radius: 6px; cursor: pointer;
|
||||
background: #eceff3; color: #12161c; border: 0;
|
||||
}
|
||||
.endcard.lose button { background: #2a3038; color: #e8edf2; }
|
||||
/* ---- CUT HERE ---------------------------------------------------------- */
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0;background:#0b0d11">
|
||||
|
||||
<!-- Toggle for eyeballing; not part of the snippet. -->
|
||||
<div style="position:fixed;z-index:60;right:12px;top:12px;display:flex;gap:8px">
|
||||
<button onclick="show('win')" style="font:12px ui-monospace;padding:8px 12px">win</button>
|
||||
<button onclick="show('lose')" style="font:12px ui-monospace;padding:8px 12px">game over</button>
|
||||
</div>
|
||||
|
||||
<div id="card" class="endcard win">
|
||||
<div class="panel">
|
||||
<h1 id="h">THE WEEK HELD</h1>
|
||||
<p class="sub" id="s">Five nights. Everything's still where you put it.</p>
|
||||
<p class="kicker" id="k">Nobody thanks you for the storm that did nothing. That's the job.</p>
|
||||
<table class="tally" id="t"></table>
|
||||
<button id="b">START A NEW WEEK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Lane A: swap this object for your real week tally — the markup above doesn't
|
||||
// care what the rows are, it just lays out label/value pairs.
|
||||
const COPY = {
|
||||
win: {
|
||||
h: 'THE WEEK HELD',
|
||||
s: "Five nights. Everything's still where you put it.",
|
||||
k: "Nobody thanks you for the storm that did nothing. That's the job.",
|
||||
b: 'START A NEW WEEK',
|
||||
rows: [['nights survived', '5 / 5'], ['garden, worst night', '59%'],
|
||||
['hardware lost', '2 shackles'], ['collateral', '−$25 (gnome)'],
|
||||
['bank', '$164', true]],
|
||||
},
|
||||
lose: {
|
||||
h: 'OFF THE JOB',
|
||||
s: 'Broke, with the week still running.',
|
||||
k: 'The wind never sent an invoice. Everyone else did.',
|
||||
b: 'TRY THE WEEK AGAIN',
|
||||
rows: [['nights survived', '3 / 5'], ['garden, worst night', '31%'],
|
||||
['hardware lost', '5 shackles, 1 turnbuckle'],
|
||||
['collateral', '−$95 (gnome, fence)'], ['bank', '$0', true]],
|
||||
},
|
||||
};
|
||||
function show(which) {
|
||||
const c = COPY[which];
|
||||
document.getElementById('card').className = 'endcard ' + which;
|
||||
document.getElementById('h').textContent = c.h;
|
||||
document.getElementById('s').textContent = c.s;
|
||||
document.getElementById('k').textContent = c.k;
|
||||
document.getElementById('b').textContent = c.b;
|
||||
document.getElementById('t').innerHTML = c.rows.map(
|
||||
([k, v, total]) => `<tr class="${total ? 'total' : ''}"><td>${k}</td><td>${v}</td></tr>`).join('');
|
||||
}
|
||||
show('win');
|
||||
globalThis.show = show;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user