UXS-006 — Moon Map

Status · Draft v0.1 Visual fidelity · Verified against prototype (P06_moon-map.html) IA anchor · §surfaces/moon · §topbar-patterns · §shared-tokens Related PRD · PRD-006

Why this UXS exists

The Moon Map has two views (3D sphere and 2D flat map) and a detail panel pattern specific to landing sites. This UXS defines both views, the landing site marker appearance, the nation colour system, and the site detail panel.

Principles

• The 3D sphere rotation is the primary discovery mechanism — rotating to find the far side teaches something
• Landing site markers are visible but not cluttered
• Nation colour distinguishes 5 nations without a legend once learned
• "Still on the surface" callout is the most emotionally impactful element of each panel — it must be prominent

Scope

In scope: nav bar, 3D sphere view, 2D flat map view, 3D/2D toggle, landing site markers, detail panel (OVERVIEW, GALLERY tabs), nation colour system. Non-goals: sphere texture detail level, map projection choice. Boundary note: sphere rotation physics belongs in the screen module.

Theme

Dark only.

Tokens

Inherited from IA

All shared tokens.

Defined here

nation-usa:     #4b9cd3   US sites
nation-ussr:    #c07070   Soviet sites
nation-china:   #c1440e   Chinese sites
nation-india:   #ff9933   Indian sites
nation-japan:   #ffffff   Japanese sites

site-marker-size:  4–6px radius depending on mission significance
site-marker-glow:  nation colour, 3× radius
site-selected:     nation colour, pulsing ring
moon-surface:      Three.js texture from static/textures/moon_1024.jpg

Layout

3D view

Full-viewport Three.js sphere. Nav bar overlaid. 3D/2D toggle top-right. Landing site markers as Three.js sprites or projected HTML divs. Detail panel right 314px on site click.

2D flat map

Full-viewport Canvas 2D. Equirectangular projection. Site markers as circles at lat/lon-mapped coordinates. Nation legend bottom-left. Detail panel same as 3D.

Site detail panel

┌───────────────────────────────────┐
│  NATION FLAG/COLOUR · AGENCY      │
│  MISSION NAME (Bebas Neue 32px)   │
│  Year · Type · Status             │
├───────────────────────────────────┤
│  OVERVIEW │ GALLERY               │
├───────────────────────────────────┤
│  [Still on the surface]           │
│  nation-colour left border        │
│  "Hardware still on the Moon:"    │
│  - Descent stage                  │
│  - Rover (if applicable)          │
├───────────────────────────────────┤
│  Editorial description            │
│  (Crimson Pro italic)             │
│                                   │
│  Capability proved:               │
│  First [X] — required for Mars    │
└───────────────────────────────────┘

Component states

Site marker (default): small circle, nation colour Site marker (hovered): slightly larger, brighter glow Site marker (selected): pulsing ring, panel open "Still on the surface" block: nation-colour left border, rgba(nation,0.08) background 3D/2D toggle: same pattern as explore screen (vtab style)

Accessibility

Canvas/WebGL: aria-label="Interactive Moon map with 16 landing sites. Use the detail panels for screen reader access.". Detail panels are HTML — screen reader accessible.

Acceptance criteria

• [ ] All 16 landing sites visible in both 3D and 2D views
• [ ] Far-side sites (Chang'e 4) only visible when sphere is rotated
• [ ] Each site colour-coded by nation
• [ ] Detail panel opens on site click
• [ ] "Still on the surface" block present for all missions that left hardware
• [ ] Capability callout present in each panel
• [ ] 3D/2D toggle switches views without losing selected site
• [ ] 2D flat map shows all 16 sites at approximately correct lat/lon positions

---

Extension — GALLERY + LEARN tabs (v0.1.10)

The detail panel gains a tab system: OVERVIEW (existing content) · GALLERY · LEARN. CSS sourced from the shared src/lib/styles/panel-tabs.css introduced in v0.1.10.

Layout

• Tabs row sits below the agency-row + name + mission-type header, above the existing landing-data grid.
• GALLERY tab renders only when static/data/moon-site-galleries.json[id] > 0. For sites that share an ID with a flown mission (Apollo 11, Chang'e 5, Luna 9, etc.) the photos are copied from images/missions/<id>/ at build time — same content, different surface.
• LEARN tab renders only when the moon-site record has non-empty links[].

Tokens (extension)

Inherits all panel-tab tokens from UXS-004 §Extension. Active tab border: #4466ff. GALLERY thumb hover: rgba(68, 102, 255, 0.6). LEARN tiers: teal (intro) · blue (core) · gold (deep).

Acceptance criteria (extension)

• [ ] OVERVIEW tab content (data grid + "still on the surface" block + capability callout + fact + credit) unchanged
• [ ] GALLERY tab renders Apollo 11 photos identical to those on /missions for the same mission (no duplicate downloads)
• [ ] LEARN tab renders tiered links from moon-site.links
• [ ] No GALLERY/LEARN tab on sites without data