Stop the big blind's own chip from covering the BB badge #68

2026-09-01T14:00:59-06:00

jheaps commented

2026-09-01 14:00:59 -06:00

On a phone the badge marking the big blind wasn't hard to read. It wasn't there — the chip showing their $2 sat on top of it. Stacked on #67.

Both live on the same spoke. Bets sit between a seat and the pot, so on the bottom half of the ring the chip comes down onto the seat's top edge, which is exactly where the badge was — and the chip is a layer above it.

390x844, six seats:  badge 24x12 = 288px², chip covered 196px² of it
                     badge z-index 2, chip z-index 3
                     the badge's own centre hit-tested as the chip

So seats on the bottom of the ring wear their badge underneath instead, on the edge the pot isn't on. And badges now outrank chips regardless, so a layout this doesn't anticipate can't hide one again: which blind a seat is posting is the one thing on that puck nothing else on the felt repeats, while a bet chip's amount is on the seat's own total line as well.

Measured across 20 table sizes — badge area lost to bet chips


430x932, 390x844, 360x640 at 2 and 6 seats	35% → 0%
8 seats	4–12%, unchanged — the blinds land on the top arc there, where the badge was already out of the way
Desktop and tablet	0% either way, more room

Two other placements were measured and rejected. Tucking the badge inside the seat's bottom edge put 38–42% of it on the seat's own stack line at every size including desktop — trading a chip covering the badge for the badge covering the money. Leaving it on top and only raising its z-index worked everywhere, but leaves the badge sitting on the chip rather than clear of it; the z-index is kept as a backstop, the move is what does the work.

What it costs

At 360x640 heads-up the bottom seat's badge moves down into the action bar, where it was visible before. That seat is already substantially behind the bar at that size — the narrow layout reserves scroll room rather than capping the felt, which #63 measured and settled on — but this change is what put the badge there, so I'm saying so rather than leaving it to be found. Every other size and seat count is clean, including 360x640 at six and nine seats.

An instrument note, because it nearly became a finding

Bet chips are pointer-events: none above 900px and auto below it, so elementFromPoint reports them as covering things on a phone and as invisible on a desktop. The 35% figures above are geometric overlap plus a cropped screenshot of the rendered pixels, not hit tests. Three "chip covered by DIV" results I saw earlier were that quirk and are not real.

Validation

214 tests still passing; layout audit and contrast clean at 8 sizes × 3 seat counts; no console errors. Before/after crops of the same seat confirm the badge goes from entirely hidden to plainly visible.

On a phone the badge marking the big blind wasn't hard to read. It wasn't there — the chip showing their $2 sat on top of it. Stacked on #67. Both live on the same spoke. Bets sit between a seat and the pot, so on the **bottom half of the ring** the chip comes *down* onto the seat's top edge, which is exactly where the badge was — and the chip is a layer above it. ``` 390x844, six seats: badge 24x12 = 288px², chip covered 196px² of it badge z-index 2, chip z-index 3 the badge's own centre hit-tested as the chip ``` So seats on the bottom of the ring wear their badge **underneath** instead, on the edge the pot isn't on. And badges now outrank chips regardless, so a layout this doesn't anticipate can't hide one again: which blind a seat is posting is the one thing on that puck nothing else on the felt repeats, while a bet chip's amount is on the seat's own total line as well. ## Measured across 20 table sizes — badge area lost to bet chips | | | | --- | --- | | 430x932, 390x844, 360x640 at 2 and 6 seats | **35% → 0%** | | 8 seats | 4–12%, unchanged — the blinds land on the top arc there, where the badge was already out of the way | | Desktop and tablet | 0% either way, more room | **Two other placements were measured and rejected.** Tucking the badge inside the seat's bottom edge put **38–42% of it on the seat's own stack line** at every size including desktop — trading a chip covering the badge for the badge covering the money. Leaving it on top and only raising its z-index worked everywhere, but leaves the badge sitting *on* the chip rather than clear of it; the z-index is kept as a backstop, the move is what does the work. ## What it costs At **360x640 heads-up** the bottom seat's badge moves down into the action bar, where it was visible before. That seat is already substantially behind the bar at that size — the narrow layout reserves scroll room rather than capping the felt, which #63 measured and settled on — but this change is what put the badge there, so I'm saying so rather than leaving it to be found. Every other size and seat count is clean, including 360x640 at six and nine seats. ## An instrument note, because it nearly became a finding Bet chips are `pointer-events: none` above 900px and `auto` below it, so `elementFromPoint` reports them as covering things on a phone and as invisible on a desktop. The 35% figures above are **geometric overlap plus a cropped screenshot of the rendered pixels**, not hit tests. Three "chip covered by DIV" results I saw earlier were that quirk and are not real. ## Validation 214 tests still passing; layout audit and contrast clean at 8 sizes × 3 seat counts; no console errors. Before/after crops of the same seat confirm the badge goes from entirely hidden to plainly visible.

jheaps added 1 commit 2026-09-01 14:00:59 -06:00

Stop the big blind's own chip from covering the BB badge 3e9e2e899d

On a phone the badge marking the big blind was not hard to read. It was not there.
The chip showing their $2 sat on top of it.

Both live on the same spoke. Bets sit between a seat and the pot, so on the bottom
half of the ring the chip comes down onto the seat's top edge, which is exactly where
the badge was -- and the chip is a layer above it.

  390x844, six seats:  badge 24x12 = 288px², chip covered 196px² of it
                       badge z-index 2, chip z-index 3
                       the badge's own centre hit-tested as the chip

So seats on the bottom of the ring wear their badge underneath instead, on the edge
the pot is not on. And badges now outrank chips regardless, so a layout this does not
anticipate cannot hide one again: which blind a seat is posting is the one thing on
that puck nothing else on the felt repeats, while a bet chip's amount is on the seat's
own total line as well.

Measured across 20 table sizes -- badge area lost to bet chips:

  430x932, 390x844, 360x640 at 2 and 6 seats    35% -> 0%
  8 seats                                        4-12%, unchanged: the blinds land
                                                 on the top arc there, where the
                                                 badge was already out of the way
  desktop and tablet                             0% either way, more room

Two other placements were measured and rejected. Tucking the badge inside the seat's
bottom edge put 38-42% of it on the seat's own stack line at every size including
desktop -- trading a chip covering the badge for the badge covering the money. Leaving
it on top and only raising its z-index worked everywhere, but leaves the badge sitting
on the chip rather than clear of it; the z-index is kept as a backstop, the move is
what does the work.

What it costs

At 360x640 heads-up the bottom seat's badge moves down into the action bar, where it
was visible before. That seat is already substantially behind the bar at that size --
the narrow layout reserves scroll room rather than capping the felt, which #63
measured and settled on -- but this change is what put the badge there, so I am
saying so rather than leaving it to be found. Every other size and seat count is
clean, including 360x640 at six and nine seats.

An instrument note, because it nearly became a finding. Bet chips are
pointer-events: none above 900px and auto below it, so elementFromPoint reports them
as covering things on a phone and as invisible on a desktop. The 35% figures above
are geometric overlap and a cropped screenshot of the rendered pixels, not hit tests.
Three "chip covered by DIV" results I saw earlier were that quirk and are not real.

214 tests still passing; layout audit and contrast clean at 8 sizes x 3 seat counts;
no console errors.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

jheaps referenced this pull request

2026-09-01 14:14:28 -06:00

Give buttons and links the same box #69

jheaps closed this pull request

2026-09-02 09:57:50 -06:00

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#68