4d4f2d7d7f
carport_01 is site_02's dressing and its whole design. DESIGN.md wants the corner block anchor-poor, and the interesting way to build that isn't to give the yard nothing — an empty yard is just a smaller yard. It's to give it something that looks like four free anchors and isn't. Light posts on small pads, a beam sized for one sheet of roofing: tie 25 m2 to it in a southerly and you take the carport, not the shackle. Ships with the worst ratings in the game (beam 0.22 vs the fascia's 0.35) and collateral="carport", pinned in e.test.js below the fascia with the reason attached, so nobody quietly fixes them upward and turns the site back into a small yard. The pyrrhic card is the third outcome on the same camera: dawn, bed green, gnome standing, sail post down across the yard behind him. Warm light on purpose — a pyrrhic result is a win, and the wreckage is the price, not the verdict. Copy goes to Lane A in THREADS; cardpreview renders all three. 277/0/0, Lane E 60 asserts, 39/39 output files byte-identical. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
126 lines
5.6 KiB
HTML
126 lines
5.6 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.pyrrhic { background-image: url('/web/world/models/textures/card_pyrrhic.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,
|
||
.endcard.pyrrhic 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('pyrrhic')" style="font:12px ui-monospace;padding:8px 12px">pyrrhic</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]],
|
||
},
|
||
pyrrhic: {
|
||
h: 'THE GARDEN MADE IT',
|
||
s: "The sail didn't. That's the trade you took.",
|
||
k: 'A sail is a consumable. A season isn\'t.',
|
||
b: 'NEXT WEEK',
|
||
rows: [['nights survived', '5 / 5'], ['garden, worst night', '52%'],
|
||
['corners lost', '2 (t2, p3)'], ['hardware lost', '1 shackle, 1 carabiner'],
|
||
['bank', '$88', 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>
|