jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Follow the browser's text size instead of sliding out from under it

Browse Source 
Every length in this stylesheet that isn't a structural clearance is in
`rem`. That is the right way round — it means the page follows the
browser's font size, which is what a phone's text-size slider changes —
and it means there was a whole axis of behaviour that 320 audits had
never once touched, because every one of them ran at the default 16px.

The sweep gets a third pass: the same surfaces on the eight phone-shaped
viewports at 20px of root text, which is 125% on an Android slider.
Everything it found on its first run was caught by a check that had been
sitting there for months with nothing to say.

The page slid sideways. Three header buttons that will not break and will
not shrink — `white-space: nowrap` and a `min-width: auto` floor apiece —
were told `flex-wrap: nowrap`, so when they stopped fitting they had
nowhere to go: "Resolve Pot" ended 23px past the right edge of a 360px
window and put a horizontal scrollbar under the whole document; at 24px,
60px past the edge of a 390px one. They take a second row now on the day
they need one, and still fit on the first and still grow into it at any
ordinary size.

Figures painted over the seat next door. Which of the two type steps an
amount got was decided by counting characters — eight for one, ten for
the other — which is a guess at how wide a figure is that happens to hold
at one text size and one puck width. At 20px on a 44px puck, "$1,200" is
six characters, took no step at all, and wanted 38px of the 34 it had.
Render.fitAmounts measures now, in the batched passes fitSeatNames
already uses, and takes the separators out before it takes a step of
type: "$1200" at full size beats "$1,200" at three-quarters of it.

And the pucks grew, which the ring cannot answer. The row heights are px
tokens so an amount stepping its type down shortens its digits and not
its row — but a token is a floor, not a ceiling. At 125% the puck went
from 55px tall to 65 and twelve of them came down on each other, because
at the 44px floor a thumb needs there is nowhere narrower to search. The
two sizes a puck is written at are capped at exactly the sizes they have
always been drawn at, so nothing changes for anybody at an ordinary text
size — and the felt is a diagram, so the rule that already governed a
puck's width now governs its height. Roomy pucks are exempt; they have
the room. The same figure is in Standings in full, at whatever size its
owner asked for.

Two smaller things on the way. The landscape rail opened at its top, so
its overflow came off the bottom — where Cancel and Raise to are; it
opens at the end now, which is the same reason it is anchored low at all.
And the check that called those buttons unreachable was wrong: the rail
scrolls on purpose, and a sweep that cries wolf is a sweep nobody reads.

418 audits, clean. One shape it is not held to, with the arithmetic in
runUiAudit.js: twelve players all-in on a 360x640 phone leaves the felt
290x163 once the bar has taken 283px of the 640, and twelve 44x62 pucks
do not fit around an ellipse 163px deep. Reported as a note every run
rather than a failure every run. 1026 unit tests.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
jheaps
2026-09-10 13:40:44 -06:00
co-authored by Claude Opus 5
parent 42b36a1464
commit d4c39f209a
8 changed files with 431 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/holdem/runUiAudit.js
+64 -18
View File
@@ -110,23 +110,72 @@ async function main() {
const warnings = [];
let checks = 0;
// Twice over: once with a mouse, once with a thumb. The 44px rule stands itself
// down where `hover: hover` says there's a pointer, and a headless desktop browser
// is a pointer — so a single pass here has never once measured a touch target,
// however many viewports it visited. The phone-sized ones are exactly the pass that
// needs it.
for (const touch of [false, true]) {
// Three passes over the same surfaces.
//
// A mouse and a thumb, because the 44px rule stands itself down where `hover: hover`
// says there's a pointer, and a headless desktop browser is a pointer — so a single
// pass has never once measured a touch target, however many viewports it visited.
//
// And a thumb on a phone whose owner has turned the text up. Every length in this
// stylesheet that isn't a structural clearance is in `rem`, which is the right way
// round and means the whole page follows the browser's font size — including out of
// the side of the window, which is what it was doing: at 20px, which is the 125%
// an Android text-size slider gives you, "Resolve Pot" ran 23px off the right of a
// 360px phone and took the document's scroll width with it. Every check in the
// audit already knew how to catch that; not one of them had ever been run at a size
// anybody actually sets.
//
// One shape it is not held to, and the arithmetic for why. Twelve players all-in on
// a 360x640 phone is the tallest the action bar ever gets — the status block and the
// pot breakdown both grow with the text — and at 20px it stands 283px of the 640,
// which with the header leaves the felt 290x163 where it had 296x262. Twelve pucks
// 44px wide (the floor a thumb needs; there is nothing narrower to go to) and 62px
// tall do not fit around an ellipse 163px deep: two per side is all the height there
// is, and the sweep reports it as seats 9, 10 and 11 written across each other.
//
// That is a geometry with no answer rather than a fault with a fix, so it is
// reported as a note every run instead of a failure every run. A sweep that is
// always red stops being read — the same reasoning as the 30% furniture warning.
const CROWDED_BEYOND_HELP = "all in";
const LARGE_TEXT_PX = 20;
const PHONES = VIEWPORTS.filter(([w, h]) => Math.min(w, h) <= 430);
const PASSES = [
{ hand: "mouse", touch: false, viewports: VIEWPORTS },
{ hand: "touch", touch: true, viewports: VIEWPORTS },
{ hand: "large text", touch: true, viewports: PHONES, rootPx: LARGE_TEXT_PX, soft: CROWDED_BEYOND_HELP },
];
for (const { hand, touch, viewports, rootPx, soft } of PASSES) {
const context = await browser.newContext(touch
? { hasTouch: true, isMobile: true, deviceScaleFactor: 3 }
: {});
// Before any of the page's own scripts, so its listener is registered first and
// the size is in place before main.js measures anything. A stylesheet rather
// than an inline style because that is what a browser font-size setting is: the
// root's used size, from first paint, not something applied afterwards.
if (rootPx) {
await context.addInitScript((px) => {
document.addEventListener("DOMContentLoaded", () => {
const style = document.createElement("style");
style.textContent = `html { font-size: ${px}px }`;
document.head.appendChild(style);
}, { once: true });
}, rootPx);
}
const page = await context.newPage();
const hand = touch ? "touch" : "mouse";
for (const [width, height, rawLabel] of VIEWPORTS) {
for (const [width, height, rawLabel] of viewports) {
await page.setViewportSize({ width, height });
for (const [shape, seats, players, board, shoves] of TABLES) {
const label = `${rawLabel} · ${shape} · ${hand}`;
// Measured either way; where the shape has no answer at this text size,
// said in the notes rather than counted against the run.
const record = (where, offenders) => {
if (!offenders.length) return;
if (shape === soft) warnings.push(`${where}: ${offenders.join("; ")}`);
else failures.push({ where, offenders });
};
await page.goto(`${BASE}/Casino/TexasHoldem`);
await page.evaluate(seedTable, [seats, players, board]);
await page.goto(`${BASE}/Casino/TexasHoldem`);
@@ -201,7 +250,7 @@ async function main() {
const table = await page.evaluate(() => LayoutAudit.runAll());
checks++;
if (!table.clean) failures.push({ where: `table · ${label} ${width}x${height}`, offenders: table.failed.flatMap(f => f.offenders) });
record(`table · ${label} ${width}x${height}`, table.failed.flatMap(f => f.offenders));
table.warnings.forEach(w => warnings.push(`${label}: ${w}`));
// The raise pad, which is part of the bar rather than an overlay and so
@@ -224,12 +273,8 @@ async function main() {
const pad = await page.evaluate(() => LayoutAudit.runAll({
occlusionSelector: "#actionBar button, #actionBar input",
}));
if (!pad.clean) {
failures.push({
where: `raise pad · ${label} ${width}x${height}`,
offenders: pad.failed.flatMap(f => f.offenders),
});
}
record(`raise pad · ${label} ${width}x${height}`,
pad.failed.flatMap(f => f.offenders));
await page.evaluate(() => {
const cancel = [...document.querySelectorAll("#actionBar button")]
.find(b => /^Cancel/.test(b.textContent.trim()));
@@ -253,12 +298,12 @@ async function main() {
return LayoutAudit.occlusion(`#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`);
});
await page.evaluate(() => document.querySelectorAll("[id$='Overlay']").forEach(o => { o.hidden = true; }));
if (result.offenders.length) failures.push({ where: `${name} · ${label} ${width}x${height}`, offenders: result.offenders });
record(`${name} · ${label} ${width}x${height}`, result.offenders);
}
}
}
for (const [width, height, rawLabel] of VIEWPORTS.filter((_, i) => i % 4 === 0)) {
for (const [width, height, rawLabel] of viewports.filter((_, i) => i % 4 === 0)) {
const label = `${rawLabel} · ${hand}`;
await page.setViewportSize({ width, height });
await page.goto(`${BASE}/Casino/TexasHoldem/QuickSplit`);
@@ -278,7 +323,8 @@ async function main() {
await browser.close();
console.log(`${checks} audits across ${VIEWPORTS.length} viewports, with a mouse and with a thumb`);
console.log(`${checks} audits across ${VIEWPORTS.length} viewports — with a mouse, with a thumb, ` +
`and with a thumb at ${LARGE_TEXT_PX}px of root text on ${PHONES.length} phones`);
warnings.forEach(w => console.log(` note: ${w}`));
if (failures.length === 0) {
console.log("clean");