Cyd
b1b82d5da1
Pan with the arrows, zoom with plus and minus, [ and ] for the next track. Self-contained HTML with the track data and palette embedded; nothing here ships, and pack-dist.ps1 does not look at it. It follows the engine rather than approximating it. NavDisplay derives metersPerPixel from the zoom and sets LODIndex to it; L4GaugeImage::Draw takes the first LOD whose scale is at least that value and draws nothing once the value runs past the largest, so objects vanish rather than simplify. Both map gauges are here because they disagree - nav is the 448x416 radar screen with LOD following zoom, gps the 125x203 panel whose config pins LOD at 1.0. The HUD reports what is dropped, and is honest that this content barely exercises it: every placement in every track is cn3 with one LOD at scale 1000. The map is not a phosphor screen. Primitives carry palette indices and the palette is whichever the port was configured with - for the pod's secondary port, configure(0,sec,270,0x00ff,clut0,rgb,secpal.pcc). PCC is PCX, so the palette is the last 769 bytes. Walls are grey because index 51 is #4b4b4b; background is index 0, black; a primitive with colour 0 keeps the display's staticColor, 0x3C. Per-file palettes, not a global one - 39 of 40 gauge PCCs differ - so the port's configured palette is the one that counts.
81 lines
2.9 KiB
CSS
81 lines
2.9 KiB
CSS
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
:root {
|
|
/* Chrome only. Everything inside the screen is painted from the game's
|
|
own palette (secpal.pcc) and must not be tinted by any of this. */
|
|
--chrome: #17181a;
|
|
--panel: #1e2023;
|
|
--rule: #2f3237;
|
|
--ink: #e6e4e0;
|
|
--ink-mid: #9aa0a6;
|
|
--ink-low: #6d737a;
|
|
--accent: #bf9300; /* palette 56, the map's own amber */
|
|
--mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
|
|
}
|
|
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0; background: var(--chrome); color: var(--ink);
|
|
font: 400 13px/1.5 var(--mono); overflow: hidden;
|
|
display: grid; grid-template-columns: 1fr 17rem;
|
|
}
|
|
|
|
/* The screen. Background is palette index 0 - black - so the chrome must
|
|
not bleed into it: this is what the gauge actually draws onto. */
|
|
#screen { position: relative; background: #000; overflow: hidden; }
|
|
#view { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
|
|
#view:active { cursor: grabbing; }
|
|
|
|
#scale {
|
|
position: absolute; left: 1rem; bottom: 1rem;
|
|
display: flex; align-items: center; gap: .5rem;
|
|
color: var(--ink-mid); font-size: 11px; letter-spacing: .08em;
|
|
text-shadow: 0 0 4px #000, 0 0 4px #000;
|
|
}
|
|
#barline { height: 0; border-top: 2px solid var(--ink-mid); }
|
|
|
|
aside {
|
|
background: var(--panel); border-left: 1px solid var(--rule);
|
|
padding: 1rem; overflow-y: auto;
|
|
display: flex; flex-direction: column; gap: 1rem;
|
|
}
|
|
|
|
h1 { font: 700 15px/1.2 var(--mono); margin: 0; letter-spacing: .02em; }
|
|
#key { color: var(--ink-low); font-size: 11px; letter-spacing: .14em; margin: .2rem 0 0; }
|
|
|
|
select {
|
|
width: 100%; font: 400 12px var(--mono); padding: .45rem .5rem;
|
|
background: var(--chrome); color: var(--ink); border: 1px solid var(--rule);
|
|
}
|
|
select:focus-visible, #view:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
|
|
dl#stats {
|
|
margin: 0; display: grid; grid-template-columns: 1fr auto;
|
|
gap: .3rem .75rem; font-size: 12px;
|
|
}
|
|
dl#stats dt { color: var(--ink-low); }
|
|
dl#stats dd {
|
|
margin: 0; text-align: right; color: var(--ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.note {
|
|
border-top: 1px solid var(--rule); padding-top: .8rem;
|
|
color: var(--ink-low); font-size: 11px; line-height: 1.6;
|
|
}
|
|
.note b { color: var(--ink-mid); font-weight: 500; }
|
|
|
|
kbd {
|
|
display: inline-block; min-width: 1.5em; text-align: center;
|
|
border: 1px solid var(--rule); border-bottom-width: 2px;
|
|
padding: .1em .35em; margin-right: .15em; border-radius: 3px;
|
|
background: var(--chrome); color: var(--ink-mid); font: 400 11px var(--mono);
|
|
}
|
|
.keys { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; font-size: 11px; }
|
|
.keys span:nth-child(even) { color: var(--ink-low); align-self: center; }
|
|
|
|
@media (max-width: 700px) {
|
|
body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
|
|
aside { border-left: 0; border-top: 1px solid var(--rule); max-height: 45vh; }
|
|
}
|