Draw the score button as a tally

The ruled card it had been reads as a document, a table or a form at the size
it actually renders — six strokes inside a 16x18 box at clamp(23px,6.4vw,32px)
— and nothing in it said score. A tally does, with no box around it to explain
itself, and it is the one score mark that survives being seen from the far side
of the board: upside down it is still a tally.

Three uprights and the slash, not four and the slash. At 23px a fourth upright
closes the gaps and the whole glyph turns into a picket fence; the slash is kept
inside the uprights' span for the same reason, since running it past them made
the icon read wider than the gear and speaker beside it.

Drawn against six alternatives in two passes, judged rendered in the real bar
at both ends of the size clamp rather than described. The passes that lost are
worth a line each, because the reasons were not visible in the geometry: two
stacks of checkers flips to say the other player is ahead when the far player
looks at it, which is worse than merely asymmetric; a bar chart is the stock
analytics glyph and says statistics rather than this match; and a tally inside a
card is smothered by the card, whatever the count.

Screenshots 1 and 5 are redone. Not 2 and 3, where the open sheet covers the bar
and the icon is not in shot at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-16 12:47:37 +02:00
co-authored by Claude Opus 5
parent 5ad69c6ff2
commit 7095e2b86e
3 changed files with 7 additions and 4 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 76 KiB

+7 -4
View File
@@ -536,10 +536,13 @@
<span class="gap"></span>
<button class="btn" id="score" aria-label="Score" hidden>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
<rect x="4" y="3" width="16" height="18" rx="2.6"/>
<path d="M12 7.5v10"/>
<path d="M7.6 10.6h2.6"/><path d="M13.8 10.6h2.6"/>
<path d="M7.6 14.6h2.6"/><path d="M13.8 14.6h2.6"/>
<!-- a tally: three uprights and the fifth-mark slash. Three rather than
four, and the slash kept inside their span, because at 23px a fourth
upright closes the gaps and the whole thing reads as a picket fence.
It is the one score mark that needs no box around it to explain
itself, and it stays a tally seen from the far side of the board. -->
<path d="M6.5 6v12"/><path d="M12 6v12"/><path d="M17.5 6v12"/>
<path d="M4 18.5L20 5.5"/>
</svg>
</button>
<span class="gap"></span>