Merge remote-tracking branch 'origin/lane/e'
This commit is contained in:
m3ultra
commit
f66c1835b4
24
THREADS.md
24
THREADS.md
@ -2449,3 +2449,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