sunrise/docs/superpowers/plans/2026-10-30-immersive-ui.md

Immersive UI Implementation Plan

For agentic workers: Use superpowers:executing-plans for this approved UI change.

Goal: Show only scene/action buttons by default on mobile and desktop; open all information and controls in popups; rename visible prayer copy to 소원빌기.

Architecture: Preserve existing element IDs and controllers. One native modal dialog switches between existing feature sections, providing browser focus containment and inert background. The minimap retains its renderer inside a separately toggled wrapper.

Tech Stack: Existing TypeScript, HTML, CSS, Vite; no new runtime dependencies.

Spec: User-approved immersive mockup and follow-up naming correction in this chat.

Constraints and review focus

• Preserve shared/solo viewing, weather, time and character logic; keep internal pray protocol/animation identifiers.
• Default minimap hidden; optional pin through 지도·시점.
• Cover 320px mobile, desktop and short landscape; safe-area spacing, touch targets, modal scrolling.
• Opening dialogs stops background movement via canvas blur; modal keyboard input cannot trigger emotes.
• Closing via button, backdrop or Escape restores opener focus; nested sections return to menu.
• No Git metadata exists in this folder; edit in place, no worktree or commit.

Tasks

• Browser acceptance check: default panels hidden, modal navigation/focus, time changes, map pinning, equipment and shared viewing accessible.
• Replace index.html HUD structure and src/style.css layout; retain functional IDs.
• Add src/ui/dialogs.ts initialization and cleanup in main.ts; rename visible world.ts strings.
• Populate sources with existing provenance links and bundled license notices.
• Run browser checks, existing tests and production build; inspect mobile/desktop screenshots.

Verification log

• Baseline npm test: local server tests hit sandbox EACCES on loopback; rerun with network-capable execution for valid results.
• Final npm test: 102 passed, 1 skipped, 0 failed (103 total).
• Final npm run build: passed; existing large-chunk advisory remains.
• Chrome browser acceptance: passed at 390×844, 320×568, 844×390 and 1440×900. Inspected mobile, desktop and popup screenshots. Mobile checks are browser emulation, not physical iOS/Android devices.
• Verified native modal background isolation, Tab containment, Escape/backdrop/button closing, focus restore, KST edits, map toggle, existing menu controls, wish animation and license URL.
• Independent read-only review: no actionable regression. Browser testing caught Tab navigation leaving the popup; explicit boundary wrap added and rechecked.
• Concurrent lobby/entry changes were retained. Tests use the supported solo entry path; full live backend admission remains covered by existing server tests, not this UI browser check.