Falling Words: Tab+Enter steals focus to GitHub link, breaks 'Enter to restart' on return

[moKshagna-p]

Describe the bug

In the Falling Words game, pressing Tab moves focus away from the hidden <input> that captures keyboard events. If Enter is then pressed, whatever element now has focus is activated — typically the GitHub link in the footer. This opens GitHub in a new tab.

When the user returns to the game tab, the game may have ended (via visibilitychange -> endGame()), showing the "enter to restart" overlay. However, pressing Enter does nothing because the hidden input no longer has focus — the handleKeyDown listener is never reached.

To Reproduce

1. Go to the Falling Words game
2. Press Tab (focus moves away from the hidden input)
3. Press Enter (GitHub opens in a new tab)
4. Close the GitHub tab and return to the game
5. See the "enter to restart" overlay
6. Press Enter -- nothing happens

Expected behavior

• Pressing Enter on the game-over overlay should restart the game regardless of what element has focus (or the hidden input should be automatically refocused).
• Tab should not be able to steal focus from the game input.

Root cause

The hidden input in apps/frontend/src/features/games/falling-words/view.tsx:59-69 has no tabindex management. When focus leaves it via Tab, the handleKeyDown handler in engine.ts no longer receives keyboard events. The "enter to restart" prompt in game-over.tsx is purely visual -- it relies on the hidden input being focused.

Suggested fixes (one of)

1. Add tabindex={-1} to the hidden input to prevent Tab from leaving it
2. Refocus the input when game-over or idle phase is entered
3. Add a window-level keydown listener for Enter during game-over/idle phases

[moKshagna-p]

Following up on this — I investigated why simply preventing Tab and refocusing on game-over wasn't the right approach.

The difficulty with a direct fix:

The root issue has three layers:

1. Tab's default browser behavior moves focus away from the hidden <input>.
2. When focus is lost, Enter goes to whatever element now has focus (GitHub link in the footer).
3. When returning from GitHub, endGame() fires from visibilitychange, but focus() on a hidden tab is silently ignored by browsers — so the input stays blurred and "enter to restart" is dead.

Simply adding tabindex={-1} or preventDefault() on Tab only addresses layer 1, but feels like a hack — the game input still has no Tab-based restart mechanism.

Why Monkeytype's approach is better:

Monkeytype handles this at the architecture level rather than patching individual symptoms:

• Tab = restart key. Tab is treated identically to Enter — both restart the test. preventDefault() stops focus from moving, and the restart fires immediately. There's no path where Tab can steal focus.
• Auto-restart on return. When the tab becomes visible again or the window regains focus, if the test is inactive, Monkeytype auto-restarts. This eliminates the "enter to restart" dead state entirely.
• Always-focused input. focusInput() is called defensively everywhere: on mount, after game-over, on visibility change to visible, on window focus.

Implementation applied (Monkeytype-style):

1. engine.ts (both games): Tab || Enter restarts when idle/game-over, both with preventDefault().
2. endGame(): focusInput() when document is visible.
3. handleVisibilityChange: auto-restart when returning to visible tab.
4. New handleWindowFocus: auto-restart when window regains focus.

[moKshagna-p]

Fix applied (PR attached)

Root cause had two parts:

1. GameOver overlay blocks clicks. Falling words view.tsx game container had no onClick handler. The GameOver overlay renders at z-20 on top of Field (which has onFieldClick={actions.focusInput}). So clicking the "enter to restart" overlay never reached focusInput() — the hidden input stayed blurred and Enter went nowhere.
   Survival already handled this correctly — its container div had onClick={actions.focusInput}.

2. Visibilitychange → no refocus. When endGame() fires from visibilitychange (tab hidden → GitHub opened), the browser ignores focus() on a hidden tab. So on return, the input was still blurred with no mechanism to refocus it.

Fix (3 changes, Tab navigation preserved):

File	Change
falling-words/view.tsx	Added onClick={actions.focusInput} to game container (same pattern as survival)
falling-words/engine.ts	handleVisibilityChange calls setTimeout(focusInput, 0) when tab becomes visible
survival/engine.ts	Added missing visibilitychange + blur handling (was missing entirely), with same refocus-on-return logic

Tab key navigation through header/footer links is completely untouched.

[moKshagna-p]

Fix applied (PR #49 updated)

Root cause (two parts):

1. GameOver overlay blocks click-to-focus. The game container div had no onClick handler. When GameOver renders at z-20 on top of Field (which has onFieldClick={actions.focusInput}), clicks hit the overlay and never reach focusInput(). The hidden input stays blurred → Enter goes nowhere.

2. Visibilitychange was ending the game instead of pausing. Originally handleVisibilityChange called endGame() when the tab was hidden. When returning from GitHub, the game was already over. The user expects the game to resume, not restart.

Fix (2 files, survival untouched — kept production behavior):

Change	What
view.tsx	Added onClick={actions.focusInput} to game container so overlay clicks refocus the input
engine.ts	Pause/resume instead of endGame: pauseGame() stops the rAF loop and freezes elapsed time. resumeGame() adjusts timing to skip the pause duration and restarts the loop via a loopKey signal that forces the createEffect to re-run. Visibilitychange/blur → pause. Visibilitychange/focus → resume.