36 lines
2.8 KiB
Markdown
36 lines
2.8 KiB
Markdown
# 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
|
||
- [x] Browser acceptance check: default panels hidden, modal navigation/focus, time changes, map pinning, equipment and shared viewing accessible.
|
||
- [x] Replace index.html HUD structure and src/style.css layout; retain functional IDs.
|
||
- [x] Add src/ui/dialogs.ts initialization and cleanup in main.ts; rename visible world.ts strings.
|
||
- [x] Populate sources with existing provenance links and bundled license notices.
|
||
- [x] 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.
|