Make the dealer puck hittable without making it bigger #55

Closed
jheaps wants to merge 1 commits from feature/casino-holdem-first-run into feature/casino-holdem-contrast-audit
Owner

Ran the touch-target check that had been sitting in the audit unused. Stacked on #54.

The dealer puck is 22x22 — half what a fingertip needs — in ten places on the table, and tapping it hands the button to that seat and re-posts the blinds. Not a cosmetic control.

It stays 22x22

A puck should look like a puck sitting on the rim of its seat, and growing it would take area from the seat itself — which a dealer taps far more often. So an invisible pad catches the tap instead:

Drawn Hittable
Before 22x22 22x22
After 22x22 43x44

Close to four times the area, with the pad pushed down and left, away from the seat the chip juts towards. Verified no seat tap is stolen — the occlusion audit is clean at every size.

Three things the check itself got wrong

All found before acting on them:

  • It read element boxes, and boxes lie in both directions. A control padded with a transparent ::after responds well past its painted size; a checkbox wrapped in a label is hit by tapping the label. It reported the dedicated-dealer toggle as a 24px fault when it sits inside a 320x44 label that already forwards the tap. It probes outward with elementFromPoint now — what a finger actually experiences.
  • The probe walked a fixed 40px each way, so everything wider than 80px reported exactly 80. Every header button came back a suspiciously round 80x42.
  • It enforced 44px on desktop, where there is no fingertip. Those same buttons are 64px tall on a phone and 42px with a mouse, which is not a defect. Keyed off hover: none now — the same signal used for the tablet field sizing in #53.

Also removed an ::after pad I'd put on the dedicated-dealer checkbox that was both inert (pseudo-elements don't render on replaced elements) and unnecessary (the label already does the job).

One documented exemption

The puck is deliberately small, and "Give the button" is in the seat menu at full size — so it's a shortcut, not the only way through. The reason sits in the code next to the exemption rather than in a commit nobody will find.

Validation

Seven viewports. Phone sizes: puck 22x22 drawn / 43x44 hittable, and zero undersized controls even with the exemption and the pointer rule forced off. Layout and contrast audits clean at all seven. 137 unit tests passing. No console errors.

Also checked the genuine first-run state with storage cleared — 10 empty seats, action bar correctly hidden, gesture guidance present. Nothing to fix there.

Ran the touch-target check that had been sitting in the audit unused. Stacked on #54. The dealer puck is **22x22** — half what a fingertip needs — in ten places on the table, and tapping it hands the button to that seat *and re-posts the blinds*. Not a cosmetic control. ## It stays 22x22 A puck should look like a puck sitting on the rim of its seat, and growing it would take area from the seat itself — which a dealer taps far more often. So an invisible pad catches the tap instead: | | Drawn | Hittable | | --- | --- | --- | | Before | 22x22 | 22x22 | | After | 22x22 | **43x44** | Close to four times the area, with the pad pushed down and left, *away* from the seat the chip juts towards. Verified no seat tap is stolen — the occlusion audit is clean at every size. ## Three things the check itself got wrong All found before acting on them: - **It read element boxes, and boxes lie in both directions.** A control padded with a transparent `::after` responds well past its painted size; a checkbox wrapped in a label is hit by tapping the label. It reported the dedicated-dealer toggle as a 24px fault when it sits inside a **320x44 label** that already forwards the tap. It probes outward with `elementFromPoint` now — what a finger actually experiences. - **The probe walked a fixed 40px each way**, so everything wider than 80px reported exactly 80. Every header button came back a suspiciously round `80x42`. - **It enforced 44px on desktop**, where there is no fingertip. Those same buttons are **64px tall on a phone** and 42px with a mouse, which is not a defect. Keyed off `hover: none` now — the same signal used for the tablet field sizing in #53. Also removed an `::after` pad I'd put on the dedicated-dealer checkbox that was both **inert** (pseudo-elements don't render on replaced elements) and **unnecessary** (the label already does the job). ## One documented exemption The puck is deliberately small, and **"Give the button" is in the seat menu at full size** — so it's a shortcut, not the only way through. The reason sits in the code next to the exemption rather than in a commit nobody will find. ## Validation Seven viewports. Phone sizes: puck 22x22 drawn / **43x44 hittable**, and **zero undersized controls** even with the exemption and the pointer rule forced off. Layout and contrast audits clean at all seven. 137 unit tests passing. No console errors. Also checked the genuine first-run state with storage cleared — 10 empty seats, action bar correctly hidden, gesture guidance present. Nothing to fix there.
jheaps added 1 commit 2026-09-01 08:54:35 -06:00
Ran the touch-target check that had been sitting in the audit unused. The dealer
puck is 22x22 — half what a fingertip needs — in ten places on the table, and
tapping it hands the button to that seat and re-posts the blinds. Not a cosmetic
control.

It stays 22x22. A puck should look like a puck sitting on the rim of its seat, and
growing it would take area from the seat itself, which a dealer taps far more
often. Instead an invisible pad around it catches the tap: 43x44 hittable on every
phone size, close to four times the area, with the pad pushed down and left away
from the seat the chip juts towards. Verified that no seat tap is stolen — the
occlusion audit is clean at every size.

Three things the check itself got wrong, all found before acting on them

It read element boxes, and boxes lie in both directions. A control padded out with
a transparent ::after responds well past its painted size, and a checkbox wrapped
in a label is hit by tapping anywhere on the label — so it reported the dedicated
dealer toggle as a 24px fault when it sits inside a 320x44 label that already
forwards the tap. It probes outward with elementFromPoint now, which is what a
finger actually experiences.

The probe walked a fixed 40px each way, so everything wider than 80px reported
exactly 80. Every header button came back a suspiciously round "80x42".

And it enforced 44px on desktop, where there is no fingertip. Those same header
buttons are 64px tall on a phone and 42px with a mouse, which is not a defect.
Keyed off hover:none now, the same signal used for the tablet field sizing.

Also removed a ::after pad on the dedicated-dealer checkbox that was both inert --
pseudo-elements don't render on replaced elements -- and unnecessary, since the
label already does the job.

The puck is the one documented exemption: it is deliberately small and "Give the
button" is in the seat menu at full size, so it's a shortcut rather than the only
way through. The reason sits in the code next to the exemption.

Phone sizes: dealer chip 22x22 drawn / 43x44 hittable, zero undersized controls
even with the exemption and the pointer rule forced off. Layout and contrast
audits clean at all seven sizes. 137 tests passing.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheaps closed this pull request 2026-09-01 09:32:19 -06:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#55