Mobile (iPhone): cannot enter initials for leaderboard — no native keyboard trigger #59

Closed
opened 2026-06-21 17:34:28 +02:00 by bosun · 1 comment
Owner

Symptom (operator playtest, 2026-06-21, iPhone)

Operator: "I was unable to enter my initials on the iPhone".

When the leaderboard initials-entry UI appears (after game-over with a top-N score), the operator could not type initials on iPhone — no iOS keyboard appeared when tapping the initials box.

Likely root cause

The initials-entry is canvas-rendered (drawInitialsBox in render.ts), not a real DOM <input> element. iOS Safari only shows the soft keyboard when a real text input gains focus. Canvas + key handlers work on desktop because we listen for keyboard events directly, but iOS has no physical keyboard to trigger.

No touch-handler exists for the initials cells either — even if there were, tapping wouldnt give a way to enter letters without summoning the OS keyboard.

Fix direction (decision tree)

Three paths, depending on scope:

  1. Hidden DOM input + canvas-overlay UX: render the canvas initials box for visual feedback, but place an invisible/styled <input maxlength=3 type="text"> on top. Focus triggers iOS keyboard; canvas reflects the value. Standard mobile-web pattern. Size/M.
  2. On-screen 26-letter keyboard: built into the canvas/DOM for both desktop AND mobile. More custom UX but no dependency on OS keyboard. Size/L.
  3. A-Z scroller per slot: tap-up / tap-down on each slot cycles through A-Z. Arcade-style + works without OS keyboard. Mid-size, fits the chiptune aesthetic. Size/M.

Lane

Shipwright (canvas render) + Pilot (state machine + input handling). Bundle if touching the same code.

Effort

Size/M-L. Part of the dedicated mobile session.

Anchor

Operator iPhone playtest 2026-06-21 17:27 (Mattermost-shared screenshot showed leaderboard reachable but unable to enter initials). Filed as part of the cellblock #57 portrait-layout mobile-session batch.

## Symptom (operator playtest, 2026-06-21, iPhone) Operator: *"I was unable to enter my initials on the iPhone"*. When the leaderboard initials-entry UI appears (after game-over with a top-N score), the operator could not type initials on iPhone — no iOS keyboard appeared when tapping the initials box. ## Likely root cause The initials-entry is canvas-rendered (drawInitialsBox in render.ts), not a real DOM `<input>` element. iOS Safari only shows the soft keyboard when a real text input gains focus. Canvas + key handlers work on desktop because we listen for keyboard events directly, but iOS has no physical keyboard to trigger. No touch-handler exists for the initials cells either — even if there were, tapping wouldnt give a way to enter letters without summoning the OS keyboard. ## Fix direction (decision tree) Three paths, depending on scope: 1. **Hidden DOM input + canvas-overlay UX**: render the canvas initials box for visual feedback, but place an invisible/styled `<input maxlength=3 type="text">` on top. Focus triggers iOS keyboard; canvas reflects the value. Standard mobile-web pattern. Size/M. 2. **On-screen 26-letter keyboard**: built into the canvas/DOM for both desktop AND mobile. More custom UX but no dependency on OS keyboard. Size/L. 3. **A-Z scroller per slot**: tap-up / tap-down on each slot cycles through A-Z. Arcade-style + works without OS keyboard. Mid-size, fits the chiptune aesthetic. Size/M. ## Lane Shipwright (canvas render) + Pilot (state machine + input handling). Bundle if touching the same code. ## Effort Size/M-L. Part of the dedicated mobile session. ## Anchor Operator iPhone playtest 2026-06-21 17:27 (Mattermost-shared screenshot showed leaderboard reachable but unable to enter initials). Filed as part of the cellblock #57 portrait-layout mobile-session batch.
bosun closed this issue 2026-06-22 09:56:28 +02:00
Author
Owner

Closing satisfaction summary — closed by PR #74 @23319501:

Implementation matches the issue framing: per-slot ▲/▼ steppers + SAVE button + tap-to-focus, portrait-only path (rare-edge landscape-touch scoped out to #73 follow-up). Surveyor verified by Vite+Playwright iPhone-13 32-check harness, mutation-proven, hit-rects-painted-cells-by-construction. n=4 of probe-gated-merge-separation operator-device-gate variant family — iOS effectiveness operator-device-gated (instrument shipped, behavioral confirmation awaits playtest).

**Closing satisfaction summary** — closed by PR #74 @23319501: Implementation matches the issue framing: per-slot ▲/▼ steppers + SAVE button + tap-to-focus, portrait-only path (rare-edge landscape-touch scoped out to #73 follow-up). Surveyor verified by Vite+Playwright iPhone-13 32-check harness, mutation-proven, hit-rects-painted-cells-by-construction. n=4 of probe-gated-merge-separation operator-device-gate variant family — iOS effectiveness operator-device-gated (instrument shipped, behavioral confirmation awaits playtest).
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
frankenbit/cellblock#59
No description provided.