BODY COUNT: dashes for never, names on the rack, and one seam too many

A record never set reads as a dash — "BEST GORE RUN 0" looks like a bad run
when what it means is that there has not been one. The weapon tiles name their
weapon: six unlabelled silhouettes was a guessing game about which one is the
flamer.

The doubled border was the row rule firing inside the grid: `.fig + .fig` gave
cell three a left border hard against the container's own. It is scoped to
single-row figure strips now, and the two-up grid draws its own seams. Less
padding inside the box, air above it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-31 16:06:15 +02:00
1 parent 84b1234012
commit 115c6089be
2 files changed
+19 -9

No files matched your search

+8 -4
View File
@@ -265,11 +265,13 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
.figs { display: flex; border: 2px solid var(--line); background: var(--panel); } .figs { display: flex; border: 2px solid var(--line); background: var(--panel); }
/* four numbers read better two-up than four-across on a phone — at four the labels wrap and /* four numbers read better two-up than four-across on a phone — at four the labels wrap and
the row becomes a wall of two-line captions */ the row becomes a wall of two-line captions */
.figs.pair { display: grid; grid-template-columns: 1fr 1fr; } .figs.pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.figs.pair .fig:nth-child(2n) { border-left: 2px solid var(--line); } .figs.pair .fig:nth-child(2n) { border-left: 2px solid var(--line); }
.figs.pair .fig:nth-child(n+3) { border-top: 2px solid var(--line); } .figs.pair .fig:nth-child(n+3) { border-top: 2px solid var(--line); }
.fig { flex: 1; min-width: 0; padding: 11px 8px 12px; text-align: center; } .fig { flex: 1; min-width: 0; padding: 8px 8px 9px; text-align: center; }
.fig + .fig { border-left: 2px solid var(--line); } /* ...only in a ROW. In the two-up grid the same rule gave cell 3 a left border hard against the
container's own — the doubled line Oliver spotted; the grid draws its own seams below. */
.figs:not(.pair) .fig + .fig { border-left: 2px solid var(--line); }
/* THE NUMBER NEVER MOVES (2026-08-31, Oliver: "manchmal sind die überschriften ein- manchmal /* THE NUMBER NEVER MOVES (2026-08-31, Oliver: "manchmal sind die überschriften ein- manchmal
zweizeilig, das drückt die zahl runter"). The label gets two lines of room whether it needs zweizeilig, das drückt die zahl runter"). The label gets two lines of room whether it needs
them or not, so every figure in a row sits on the same baseline. */ them or not, so every figure in a row sits on the same baseline. */
@@ -732,6 +734,8 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
.wtile img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 2px; .wtile img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 2px;
image-rendering: pixelated; } image-rendering: pixelated; }
.wtile b { display: block; font: 400 11px Silkscreen, monospace; color: var(--acid); } .wtile b { display: block; font: 400 11px Silkscreen, monospace; color: var(--acid); }
.wtile i { display: block; margin-top: 3px; font: 400 7px/1.3 Silkscreen, monospace;
font-style: normal; color: var(--dim); letter-spacing: 0.5px; }
.none { margin: 4px 0 0; font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px; .none { margin: 4px 0 0; font: 400 9px Silkscreen, monospace; color: var(--dim); letter-spacing: 1px;
text-align: left; } text-align: left; }
#stFoot { display: flex; justify-content: space-between; align-items: baseline; #stFoot { display: flex; justify-content: space-between; align-items: baseline;
@@ -1078,6 +1082,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="src/main.js?v=346"></script> <script type="module" src="src/main.js?v=347"></script>
</body> </body>
</html> </html>
+11 -5
View File
@@ -297,10 +297,13 @@ export function drawStats(period, v) {
const $ = id => document.getElementById(id); const $ = id => document.getElementById(id);
// every body you have put down, in any mode — the climb's own record stands beside it, so it // every body you have put down, in any mode — the climb's own record stands beside it, so it
// does not need adding twice (its opponents are counted in the same kill tally) // does not need adding twice (its opponents are counted in the same kill tally)
const figs = [['BODIES FELLED', n(all.kills)], // a record never set reads as a DASH, not a zero: "BEST GORE RUN 0" looks like a bad run, when
['BEST GORE RUN', n(gore.best)], // what it means is that there has not been one yet
['DEEPEST CLIMB', n(match.longest)], const num = v => v > 0 ? n(v) : '—';
['RUNS', n(all.matches)]]; const figs = [['BODIES FELLED', num(all.kills)],
['BEST GORE RUN', num(gore.best)],
['DEEPEST CLIMB', num(match.longest)],
['RUNS', num(all.matches)]];
$('stFigs').innerHTML = figs.map(([k, val]) => $('stFigs').innerHTML = figs.map(([k, val]) =>
`<div class="fig"><b>${k}</b><i>${val}</i></div>`).join(''); `<div class="fig"><b>${k}</b><i>${val}</i></div>`).join('');
// sorted by count, and only bodies you have actually met — an empty roster of everything would // sorted by count, and only bodies you have actually met — an empty roster of everything would
@@ -308,8 +311,11 @@ export function drawStats(period, v) {
const rows = Object.entries(all.z).filter(([, c]) => c > 0).sort((a, b) => b[1] - a[1]); const rows = Object.entries(all.z).filter(([, c]) => c > 0).sort((a, b) => b[1] - a[1]);
roster($('stZ'), rows, v, 'NOTHING YET. GO AND EARN A ROW.'); roster($('stZ'), rows, v, 'NOTHING YET. GO AND EARN A ROW.');
const ws = Object.entries(all.w).filter(([id, c]) => c > 0 && wIcon(id)).sort((a, b) => b[1] - a[1]); const ws = Object.entries(all.w).filter(([id, c]) => c > 0 && wIcon(id)).sort((a, b) => b[1] - a[1]);
// ...and a tile NAMES its weapon: six unlabelled icons is a guessing game about which silhouette
// is the flamer and which is the rocket
$('stW').innerHTML = ws.length ? ws.map(([id, c]) => $('stW').innerHTML = ws.length ? ws.map(([id, c]) =>
`<div class="wtile"><img src="assets/${wIcon(id)}.png?v=${v}" alt=""><b>${n(c)}</b></div>`).join('') `<div class="wtile"><img src="assets/${wIcon(id)}.png?v=${v}" alt=""><b>${n(c)}</b>`
+ `<i>${(WEAPONS[id] && WEAPONS[id].label) || id.toUpperCase()}</i></div>`).join('')
: '<p class="none">NO WEAPONS FIRED.</p>'; : '<p class="none">NO WEAPONS FIRED.</p>';
} }