[Bug] Space Game: "Select Your Ship" modal buttons unclickable — HUD hit-testing offset by the fixed app toolbar #492

New Issue

2026-07-12T01:08:22Z

spikerj commented

2026-07-12 01:08:22 +00:00

Symptom

On /space-game, the "Select Your Ship" modal renders but none of its buttons respond to clicks — Create New, Select Ship, Delete, and the close (×) button are all dead. Players cannot join the game. Keyboard navigation (Enter/N, added for #224) still works, which confirms it is specifically a mouse hit-testing problem.

Root cause

The modal is a native WebGL HUD (ShipSelectionHUD) that hit-tests rectangles in game-canvas coordinates (its coordinate space is sized from the canvas container via hudViewportWidth/Height). But SpaceGameComponent feeds the HUDs raw event.clientX/clientY window coordinates.

Since the #168 fix, .space-game-content sits below the fixed app toolbar (position: fixed; top: var(--app-toolbar-height, 64px)), so every click the HUDs test is vertically offset by the toolbar height (~64px). The modal buttons are only 36px tall, so clicks always miss their hit rectangles — and because the 600px-tall modal panel still "consumes" the mousedown, the clicks appear completely dead. The same offset affects the ship-creation modal, keybinding config, and all in-game panel HUDs (drag/click/wheel).

Fix

Convert mouse event coordinates from window space to canvas space (subtract the webGLContainer bounding rect origin) in the component's HUD delegation paths: delegateMouseDownToHUDs, delegateMouseUpToHUDs, delegateMouseMoveToHUDs, and onWheel.

Verified locally: clicking Create New now opens the CREATE NEW SHIP dialog and the modal buttons respond as expected.

## Symptom On `/space-game`, the "Select Your Ship" modal renders but none of its buttons respond to clicks — **Create New**, **Select Ship**, **Delete**, and the close (×) button are all dead. Players cannot join the game. Keyboard navigation (Enter/N, added for #224) still works, which confirms it is specifically a mouse hit-testing problem. ## Root cause The modal is a native WebGL HUD (`ShipSelectionHUD`) that hit-tests rectangles in **game-canvas coordinates** (its coordinate space is sized from the canvas container via `hudViewportWidth/Height`). But `SpaceGameComponent` feeds the HUDs raw `event.clientX/clientY` **window** coordinates. Since the #168 fix, `.space-game-content` sits below the fixed app toolbar (`position: fixed; top: var(--app-toolbar-height, 64px)`), so every click the HUDs test is vertically offset by the toolbar height (~64px). The modal buttons are only 36px tall, so clicks always miss their hit rectangles — and because the 600px-tall modal panel still "consumes" the mousedown, the clicks appear completely dead. The same offset affects the ship-creation modal, keybinding config, and all in-game panel HUDs (drag/click/wheel). ## Fix Convert mouse event coordinates from window space to canvas space (subtract the `webGLContainer` bounding rect origin) in the component's HUD delegation paths: `delegateMouseDownToHUDs`, `delegateMouseUpToHUDs`, `delegateMouseMoveToHUDs`, and `onWheel`. Verified locally: clicking **Create New** now opens the CREATE NEW SHIP dialog and the modal buttons respond as expected.

spikerj closed this issue

2026-07-12 01:17:10 +00:00

spikerj referenced this issue

2026-07-12 02:02:19 +00:00

[Bug] Dungeon Crawler: final 'Create Character' button unclickable — HUD hit-testing offset by the fixed app toolbar (same class as #492) #494

spikerj referenced this issue

2026-07-12 02:03:27 +00:00

[Bug] Dungeon Crawler: final 'Create Character' button unclickable — HUD hit-testing offset by the fixed app toolbar (same class as #492) #494

spikerj referenced this issue

2026-07-21 01:54:35 +00:00

EPIC: Angular 22 + Nx 23 full-leverage modernization (signal forms, resource APIs, affected CI, remote cache) #722

spikerj referenced this issue