Cyd
f32494f0b7
Thirty-eight cards in one run is a lot to read. The first letter of a vehicle's two-letter art code is the hull the game actually draws it with, and the console's class names are subdivisions of those five - Bull and Roadblock are both 'b', Bug and Skeeter both 's' - so grouping by the letter keeps kin together whatever the console called them. Particles 6, Bugs 10, Mules 9, Bulls 8, Police 5, which is all of them. The build prints a warning if any vehicle falls outside the five, so a new hull cannot go missing from the page quietly. The tabs compose with the armament filter and the search box rather than replacing them.
516 lines
20 KiB
Python
516 lines
20 KiB
Python
"""Render the VTV preset reference page from the decoded JSON."""
|
||
import base64, html, io, json, os, sys
|
||
from PIL import Image
|
||
|
||
data = json.load(open(sys.argv[1]))
|
||
OUT = sys.argv[2]
|
||
GAUGE = 'c:/VWE/RP412/assets/RP411/GAUGE'
|
||
SCALE = 4 # pre-scale nearest-neighbour; masks get smoothed otherwise
|
||
|
||
|
||
def hull_mask(pcc):
|
||
"""The plan view as an alpha mask, so it takes the page's own colour.
|
||
Index 0 is the black ground; the two greys become two alpha levels,
|
||
which keeps the interior panel detail readable."""
|
||
im = Image.open(os.path.join(GAUGE, pcc.upper())).convert('P')
|
||
pal = im.getpalette()
|
||
lut = {}
|
||
for i in set(im.tobytes()):
|
||
r, g, b = pal[i * 3:i * 3 + 3]
|
||
lut[i] = 0 if (r, g, b) == (0, 0, 0) else int(max(r, g, b))
|
||
top = max(lut.values()) or 1
|
||
alpha = Image.frombytes('L', im.size,
|
||
bytes(round(lut[p] * 255 / top) for p in im.tobytes()))
|
||
out = Image.merge('RGBA', (Image.new('L', im.size, 255),) * 3 + (alpha,))
|
||
out = out.resize((im.width * SCALE, im.height * SCALE), Image.NEAREST)
|
||
buf = io.BytesIO()
|
||
out.save(buf, 'PNG', optimize=True)
|
||
return ('data:image/png;base64,' + base64.b64encode(buf.getvalue()).decode(),
|
||
im.size)
|
||
|
||
|
||
masks, sizes = {}, {}
|
||
for v in data.values():
|
||
art = v.get('hullArt')
|
||
if art and art not in masks:
|
||
masks[art], sizes[art] = hull_mask(art)
|
||
|
||
BUTTONS = ['trigger', 'thumb high', 'thumb low', 'pinky'] # index to little finger
|
||
ORDER = sorted(data, key=lambda v: (-len(data[v]['weapons']), v))
|
||
|
||
|
||
def kind(fn):
|
||
if fn is None:
|
||
return 'empty'
|
||
if fn.startswith('Booster'):
|
||
return 'booster'
|
||
if fn.startswith('Chute'):
|
||
return 'chute'
|
||
if fn in ('LIFT CUT', 'SIDESLIP', 'reverse thrust'):
|
||
return 'handling'
|
||
if fn in ('HORN', 'reticle'):
|
||
return 'comms'
|
||
return 'weapon'
|
||
|
||
|
||
def pretty(fn):
|
||
if fn is None:
|
||
return '—'
|
||
if fn.startswith('Booster'):
|
||
return 'BOOST ' + fn[7:] if fn[7:] else 'BOOST'
|
||
if fn.startswith('Chute'):
|
||
return 'CHUTE'
|
||
return {'RivetGun': 'RIVET', 'RivetGun1': 'RIVET 1', 'RivetGun2': 'RIVET 2',
|
||
'LaserGun': 'LASER', 'LaserGun1': 'LASER 1', 'LaserGun2': 'LASER 2',
|
||
'DemopackDropper': 'DEMO PACK', 'DemoPackDropper': 'DEMO PACK',
|
||
'Slaver3': 'SLAVER'}.get(fn, fn.upper())
|
||
|
||
|
||
def loadout_chips(v):
|
||
chips = []
|
||
if v['boosters']:
|
||
chips.append(('booster', '%d× BOOST' % v['boosters']))
|
||
if v['chute']:
|
||
chips.append(('chute', 'CHUTE'))
|
||
for w in v['weapons']:
|
||
chips.append(('weapon', pretty(w)))
|
||
if not v['weapons']:
|
||
chips.append(('empty', 'UNARMED'))
|
||
return ''.join('<span class="chip chip--%s">%s</span>' % (k, html.escape(t))
|
||
for k, t in chips)
|
||
|
||
|
||
def table(stream):
|
||
rows = []
|
||
for i, row in enumerate(stream['presets'], 1):
|
||
cells = []
|
||
for b in BUTTONS:
|
||
fn = row.get(b)
|
||
cells.append('<td class="fn fn--%s">%s</td>' % (kind(fn), html.escape(pretty(fn))))
|
||
rows.append('<tr><th scope="row"><span class="pnum">%d</span></th>%s</tr>'
|
||
% (i, ''.join(cells)))
|
||
return (
|
||
'<div class="tablewrap"><table>'
|
||
'<caption class="sr-only">Preset assignments</caption><thead><tr>'
|
||
'<th scope="col"><span class="sr-only">Preset</span></th>'
|
||
+ ''.join('<th scope="col">%s</th>' % b.upper() for b in BUTTONS)
|
||
+ '</tr></thead><tbody>' + ''.join(rows) + '</tbody></table></div>')
|
||
|
||
|
||
family = {}
|
||
for n, v in data.items():
|
||
family.setdefault(v.get('silhouette'), []).append(n)
|
||
|
||
cards = []
|
||
for name in ORDER:
|
||
v = data[name]
|
||
tags = ' '.join(['armed' if v['weapons'] else 'unarmed']
|
||
+ [kind(w) for w in v['weapons']])
|
||
code = v.get('silhouette') or ''
|
||
display = v.get('display') or name
|
||
# Hulls are named by the console, not by their two-letter art code.
|
||
hull_class = v.get('hullClass') or (code.upper() if code else 'unknown')
|
||
kin = sorted((data[x].get('display') or x)
|
||
for x in family.get(code, []) if x != name)
|
||
search = ' '.join([name, display, hull_class, code] + v['subsystems']).lower()
|
||
|
||
art = v.get('hullArt')
|
||
if art:
|
||
w, h = sizes[art]
|
||
note = ''
|
||
if v.get('hullMismatch'):
|
||
note = (' <span class="warn" title="The console showed a %s '
|
||
'picture for this vehicle; the game draws the %s hull">'
|
||
'(console says %s)</span>'
|
||
% (html.escape(v['consoleClass']), html.escape(hull_class),
|
||
html.escape(v['consoleClass'])))
|
||
hull = ('<figure class="hull"><span class="hull__img" role="img" '
|
||
'aria-label="{display} plan view" style="--art:url({uri});'
|
||
'--ar:{w}/{h}"></span>'
|
||
'<figcaption>{cls} hull{kin}{note}</figcaption></figure>').format(
|
||
display=html.escape(display), uri=masks[art], w=w, h=h,
|
||
cls=html.escape(hull_class), note=note,
|
||
kin=(' · shared with ' + html.escape(', '.join(kin))) if kin else '')
|
||
else:
|
||
hull = ''
|
||
|
||
cards.append("""
|
||
<article class="vtv" data-hull="{hullcode}" data-tags="{tags}" data-search="{search}">
|
||
<header class="vtv__id">
|
||
{hull}
|
||
<h3>{display}</h3>
|
||
<p class="vtv__key">{key}</p>
|
||
<p class="vtv__load">{chips}</p>
|
||
<p class="vtv__meta"><span>{nsub} subsystems</span><span>{nrec} mappings</span></p>
|
||
</header>
|
||
<div class="vtv__tables">{l4}</div>
|
||
</article>""".format(
|
||
tags=tags, hullcode=(code[:1] or '?'),
|
||
search=html.escape(search), display=html.escape(display.upper()),
|
||
key=html.escape(name), chips=loadout_chips(v), nsub=len(v['subsystems']),
|
||
hull=hull, nrec=v['L4']['records'], l4=table(v['L4'])))
|
||
|
||
# Tabs by hull. The first letter of a vehicle's two-letter art code is the
|
||
# hull the game actually draws it with; the console's class names are
|
||
# subdivisions of those five - Bull and Roadblock are both 'b', Bug and
|
||
# Skeeter both 's'. Grouping by the letter keeps kin together whatever the
|
||
# console called them.
|
||
HULL_TABS = [('l', 'Particles'), ('s', 'Bugs'), ('m', 'Mules'),
|
||
('b', 'Bulls'), ('p', 'Police')]
|
||
hull_tabs = ''.join(
|
||
'<button type="button" data-hull="%s" aria-pressed="false">%s'
|
||
'<span class="seg__n">%d</span></button>'
|
||
% (letter, label,
|
||
sum(1 for v in data.values() if (v.get('silhouette') or '?')[:1] == letter))
|
||
for letter, label in HULL_TABS)
|
||
loose = sorted(n for n, v in data.items()
|
||
if (v.get('silhouette') or '?')[:1] not in dict(HULL_TABS))
|
||
if loose:
|
||
print('!! not in any hull tab: %s' % loose)
|
||
|
||
armed = sum(1 for v in data.values() if v['weapons'])
|
||
CSS = """
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
:root {
|
||
/* The pod's own lamp fills - MUNGA_L4/L4MFDVIEW.cpp:112 */
|
||
--amber: #ffd230;
|
||
--red: #ff482c;
|
||
--phosphor: #6fdc8c;
|
||
|
||
--ground: #0d0b07;
|
||
--panel: #16130d;
|
||
--rule: #2f2819;
|
||
--ink: #f3ead6;
|
||
--ink-mid: #b3a68a;
|
||
--ink-low: #7d7360;
|
||
|
||
--sys: var(--amber);
|
||
--wep: var(--red);
|
||
--pilot: var(--phosphor);
|
||
--on-accent: #0d0b07; /* text that sits ON --sys */
|
||
|
||
--step--1: clamp(.72rem, .70rem + .1vw, .78rem);
|
||
--step-0: clamp(.88rem, .85rem + .15vw, .95rem);
|
||
--step-1: clamp(1.05rem, 1rem + .3vw, 1.2rem);
|
||
--step-2: clamp(1.4rem, 1.2rem + .9vw, 2rem);
|
||
--step-3: clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
|
||
|
||
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
|
||
--sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
--ground: #f7f3e8;
|
||
--panel: #fffdf7;
|
||
--rule: #ddd2b8;
|
||
--ink: #17140d;
|
||
--ink-mid: #5c5340;
|
||
--ink-low: #857a63;
|
||
--sys: #8a6400;
|
||
--wep: #b3260f;
|
||
--pilot: #1c7a3f;
|
||
--on-accent: #fffdf7;
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--ground: #f7f3e8;
|
||
--panel: #fffdf7;
|
||
--rule: #ddd2b8;
|
||
--ink: #17140d;
|
||
--ink-mid: #5c5340;
|
||
--ink-low: #857a63;
|
||
--sys: #8a6400;
|
||
--wep: #b3260f;
|
||
--pilot: #1c7a3f;
|
||
--on-accent: #fffdf7;
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--ground: #0d0b07;
|
||
--panel: #16130d;
|
||
--rule: #2f2819;
|
||
--ink: #f3ead6;
|
||
--ink-mid: #b3a68a;
|
||
--ink-low: #7d7360;
|
||
--sys: #ffd230;
|
||
--wep: #ff482c;
|
||
--pilot: #6fdc8c;
|
||
--on-accent: #0d0b07;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--ground);
|
||
color: var(--ink);
|
||
font: 400 var(--step-0)/1.6 var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
|
||
.sr-only {
|
||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
||
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||
}
|
||
:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; }
|
||
|
||
/* ---------------------------------------------------------- masthead */
|
||
.top { border-bottom: 1px solid var(--rule); padding: clamp(2.5rem,6vw,4.5rem) 0 2rem; }
|
||
.eyebrow {
|
||
font: 500 var(--step--1)/1 var(--mono);
|
||
letter-spacing: .22em; text-transform: uppercase; color: var(--ink-low);
|
||
margin: 0 0 1.1rem;
|
||
}
|
||
h1 {
|
||
font: 700 var(--step-3)/1.02 var(--mono);
|
||
letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance;
|
||
margin: 0 0 1rem;
|
||
}
|
||
h1 em { font-style: normal; color: var(--sys); }
|
||
.lede { max-width: 62ch; color: var(--ink-mid); margin: 0 0 1.6rem; font-size: var(--step-1); }
|
||
.lede strong { color: var(--ink); font-weight: 600; }
|
||
|
||
.rules { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; padding: 0; list-style: none; }
|
||
.rules li {
|
||
font: 500 var(--step--1)/1.5 var(--mono);
|
||
color: var(--ink-mid); padding-left: 1.1rem; position: relative;
|
||
}
|
||
.rules li::before {
|
||
content: ""; position: absolute; left: 0; top: .5em;
|
||
width: .45rem; height: .45rem; background: var(--sys);
|
||
}
|
||
.rules b { color: var(--ink); font-weight: 700; }
|
||
|
||
/* ----------------------------------------------------------- controls */
|
||
.bar {
|
||
position: sticky; top: 0; z-index: 5;
|
||
background: var(--ground);
|
||
background: color-mix(in srgb, var(--ground) 92%, transparent);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid var(--rule);
|
||
padding: .75rem 0;
|
||
}
|
||
.bar__in { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
|
||
.seg { display: inline-flex; border: 1px solid var(--rule); }
|
||
.seg button {
|
||
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
|
||
background: none; border: 0; color: var(--ink-mid);
|
||
padding: .55rem .9rem; cursor: pointer;
|
||
}
|
||
.seg button[aria-pressed="true"] { background: var(--sys); color: var(--on-accent); }
|
||
.search {
|
||
flex: 1 1 12rem; min-width: 9rem;
|
||
font: 400 var(--step--1) var(--mono);
|
||
background: var(--panel); color: var(--ink);
|
||
border: 1px solid var(--rule); padding: .55rem .7rem;
|
||
}
|
||
.search::placeholder { color: var(--ink-low); }
|
||
.count { font: 500 var(--step--1) var(--mono); color: var(--ink-low); letter-spacing: .1em; }
|
||
|
||
/* -------------------------------------------------------------- key */
|
||
.key { display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding: 1.25rem 0 0; }
|
||
.key span { display: inline-flex; align-items: center; gap: .4rem;
|
||
font: 500 var(--step--1) var(--mono); letter-spacing: .08em; color: var(--ink-low); }
|
||
.key i { width: .7rem; height: .7rem; display: inline-block; }
|
||
|
||
/* ------------------------------------------------------------- roster */
|
||
.roster { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
|
||
margin: 1.75rem 0 4rem; }
|
||
.vtv { background: var(--panel); display: grid; gap: 0;
|
||
grid-template-columns: minmax(13rem, 17rem) 1fr; }
|
||
@media (max-width: 46rem) { .vtv { grid-template-columns: 1fr; } }
|
||
.vtv[hidden] { display: none; }
|
||
|
||
.seg__n {
|
||
margin-left: .45em; font-size: .85em; opacity: .55;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.seg button[aria-pressed="true"] .seg__n { opacity: .75; }
|
||
|
||
.vtv__id { padding: 1.1rem 1.25rem; border-right: 1px solid var(--rule); }
|
||
@media (max-width: 46rem) { .vtv__id { border-right: 0; border-bottom: 1px solid var(--rule); } }
|
||
|
||
/* plan view, straight off the damage gauge, as a mask so it takes the
|
||
page colour in either theme */
|
||
.hull { margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .45rem;
|
||
align-items: flex-start; }
|
||
.hull__img {
|
||
display: block; width: 100%; max-width: 6.5rem; aspect-ratio: var(--ar);
|
||
background-color: var(--ink-mid);
|
||
-webkit-mask-image: var(--art); mask-image: var(--art);
|
||
-webkit-mask-size: contain; mask-size: contain;
|
||
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
|
||
-webkit-mask-position: left center; mask-position: left center;
|
||
}
|
||
.hull figcaption {
|
||
font: 500 var(--step--1)/1.35 var(--mono); letter-spacing: .1em;
|
||
text-transform: uppercase; color: var(--ink-low);
|
||
}
|
||
.vtv__id h3 {
|
||
font: 700 var(--step-2)/1 var(--mono); letter-spacing: .01em;
|
||
margin: 0 0 .7rem; color: var(--ink);
|
||
}
|
||
.vtv__key {
|
||
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em;
|
||
color: var(--ink-low); margin: -.45rem 0 .7rem;
|
||
}
|
||
.warn { color: var(--wep); }
|
||
.vtv__load { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .7rem; }
|
||
.chip {
|
||
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .08em;
|
||
padding: .3rem .45rem; border: 1px solid currentColor;
|
||
}
|
||
.chip--booster, .chip--chute { color: var(--sys); }
|
||
.chip--weapon { color: var(--wep); }
|
||
.chip--empty { color: var(--ink-low); }
|
||
.vtv__meta { display: flex; gap: .8rem; margin: 0; font: 400 var(--step--1) var(--mono);
|
||
color: var(--ink-low); font-variant-numeric: tabular-nums; }
|
||
|
||
.vtv__tables { min-width: 0; }
|
||
.tablewrap { overflow-x: auto; }
|
||
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
|
||
thead th {
|
||
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .14em;
|
||
color: var(--ink-low); text-align: left; font-weight: 500;
|
||
padding: .8rem .7rem .5rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
|
||
}
|
||
tbody th {
|
||
width: 3.4rem; padding: .42rem .7rem; text-align: left; font-weight: 500;
|
||
border-bottom: 1px solid var(--rule); white-space: nowrap;
|
||
}
|
||
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
|
||
.pnum { font: 500 var(--step--1) var(--mono); color: var(--ink-mid); }
|
||
td.fn {
|
||
padding: .42rem .7rem; border-bottom: 1px solid var(--rule);
|
||
font: 500 var(--step--1)/1.3 var(--mono); letter-spacing: .06em; white-space: nowrap;
|
||
}
|
||
.fn--booster, .fn--chute { color: var(--sys); }
|
||
.fn--weapon { color: var(--wep); }
|
||
.fn--handling, .fn--comms { color: var(--pilot); }
|
||
.fn--empty { color: var(--ink-low); }
|
||
.fn--chute, .fn--comms { opacity: .82; }
|
||
.foot { border-top: 1px solid var(--rule); padding: 1.5rem 0 4rem;
|
||
color: var(--ink-low); font-size: var(--step--1); }
|
||
.foot code { font-family: var(--mono); color: var(--ink-mid); }
|
||
.empty-state { padding: 2rem; background: var(--panel); color: var(--ink-low);
|
||
font: 400 var(--step-0) var(--mono); }
|
||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|
||
"""
|
||
|
||
JS = """
|
||
const root = document.documentElement;
|
||
const cards = [...document.querySelectorAll('.vtv')];
|
||
const count = document.getElementById('count');
|
||
const search = document.getElementById('search');
|
||
let filter = 'all';
|
||
let hull = 'all';
|
||
|
||
function apply() {
|
||
const q = search.value.trim().toLowerCase();
|
||
let shown = 0;
|
||
for (const c of cards) {
|
||
const tags = c.dataset.tags;
|
||
const okHull = hull === 'all' || c.dataset.hull === hull;
|
||
const okTag = filter === 'all'
|
||
|| (filter === 'armed' && tags.includes('armed'))
|
||
|| (filter === 'unarmed' && tags.includes('unarmed'))
|
||
|| tags.split(' ').includes(filter);
|
||
const okQ = !q || c.dataset.search.includes(q);
|
||
const on = okTag && okHull && okQ;
|
||
c.hidden = !on;
|
||
if (on) shown++;
|
||
}
|
||
count.textContent = shown + ' / ' + cards.length + ' VTV';
|
||
document.getElementById('nomatch').hidden = shown > 0;
|
||
}
|
||
|
||
for (const b of document.querySelectorAll('[data-filter]')) {
|
||
b.addEventListener('click', () => {
|
||
filter = b.dataset.filter;
|
||
for (const o of document.querySelectorAll('[data-filter]'))
|
||
o.setAttribute('aria-pressed', String(o === b));
|
||
apply();
|
||
});
|
||
}
|
||
for (const b of document.querySelectorAll('#hulls button')) {
|
||
b.addEventListener('click', () => {
|
||
hull = b.dataset.hull;
|
||
for (const o of document.querySelectorAll('#hulls button'))
|
||
o.setAttribute('aria-pressed', String(o === b));
|
||
apply();
|
||
});
|
||
}
|
||
search.addEventListener('input', apply);
|
||
apply();
|
||
"""
|
||
|
||
PAGE = """<!doctype html>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Red Planet - VTV control presets</title>
|
||
<style>{css}</style>
|
||
|
||
<header class="top">
|
||
<div class="wrap">
|
||
<p class="eyebrow">Red Planet 4.12 · decoded from RPL4.RES</p>
|
||
<h1>Every VTV and its<br><em>six control presets</em></h1>
|
||
<p class="lede">The six amber switches down the right flank of the map screen are not a
|
||
display option. <strong>Each is a complete factory layout for the four mappable
|
||
joystick buttons</strong>, authored per vehicle and shipped in the game's resource
|
||
file. Pressing one swaps the whole stick over, live, mid-race.</p>
|
||
<ul class="rules">
|
||
<li><b>Preset 2</b> always puts LIFT CUT on the pinky</li>
|
||
<li><b>Preset 6</b> always puts LIFT CUT on the trigger</li>
|
||
<li><b>Presets 1–5</b> keep the primary weapon on the trigger</li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="bar">
|
||
<div class="wrap bar__in">
|
||
<div class="seg" role="group" aria-label="Filter by armament">
|
||
<button type="button" data-filter="all" aria-pressed="true">All</button>
|
||
<button type="button" data-filter="armed" aria-pressed="false">Armed</button>
|
||
<button type="button" data-filter="unarmed" aria-pressed="false">Unarmed</button>
|
||
</div>
|
||
<div class="seg" id="hulls" role="group" aria-label="Filter by hull">
|
||
<button type="button" data-hull="all" aria-pressed="true">All hulls</button>
|
||
{hulltabs}
|
||
</div>
|
||
<input id="search" class="search" type="search" placeholder="Search vehicle or system…"
|
||
aria-label="Search vehicle or system">
|
||
<span class="count" id="count">{n} / {n} VTV</span>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="wrap">
|
||
<div class="key">
|
||
<span><i style="background:var(--sys)"></i>Vehicle systems</span>
|
||
<span><i style="background:var(--wep)"></i>Weapons</span>
|
||
<span><i style="background:var(--pilot)"></i>Pilot controls</span>
|
||
</div>
|
||
|
||
<div class="roster">{cards}</div>
|
||
<p class="empty-state" id="nomatch" hidden>No VTV matches that.</p>
|
||
|
||
<p class="foot">{n} VTVs carry a preset table; {armed} are armed. Decoded from the pod
|
||
RIO <code>ControlMappings</code> stream in <code>assets/RP411/RPL4.RES</code> —
|
||
subsystem names from each vehicle's own subsystem list, functions from
|
||
<code>ModePreset1..6</code> mask bits. Boosters, chute and weapons are the vehicle's
|
||
activatable systems; LIFT CUT and HORN are pilot controls that also live on the
|
||
panel. Empty cells are unbound — nothing on the pod fires them.</p>
|
||
<p class="foot">The plan views are the vehicle's own damage-gauge silhouette
|
||
(<code>GAUGE/s<hull>.pcc</code>), redrawn from the 3-colour original. The game has
|
||
no per-vehicle art: vehicles are grouped into hull families and share both the
|
||
silhouette and the 3D mesh in <code>VIDEO/</code>, which is keyed by the same two-letter
|
||
code. What distinguishes vehicles inside a family is the loadout, not the shape.</p>
|
||
</main>
|
||
|
||
<script>{js}</script>
|
||
"""
|
||
|
||
open(OUT, 'w', encoding='utf-8').write(PAGE.format(
|
||
css=CSS, js=JS, cards=''.join(cards), n=len(data), armed=armed,
|
||
hulltabs=hull_tabs))
|
||
print('wrote %s (%d VTVs)' % (OUT, len(data)))
|