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:
1 parent
84b1234012
commit
115c6089be
2 files changed
+19
-9
No files matched your search
+8
-4
@@ -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
@@ -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>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user