0a80f902e2
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>
114 lines
5.0 KiB
HTML
114 lines
5.0 KiB
HTML
<!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>
|