Status : Designed
Author : user + game-designer
Last Updated : 2026-03-28
System Index : #16 — Vertical Slice, Presentation Layer
The Map UI renders the branching node map, showing all nodes with their types, connections, the party's current position, and available paths. The host can click a connected node to select the next destination. Non-host players see the map and the host's selection but cannot interact. The map is fully visible from the start — players can plan routes by seeing all node types ahead.
"We can see the road ahead and choose our fate." The map creates strategic discussion: "Should we go through the elite for a better reward, or take the safe path with a rest stop?" Seeing the whole map enables forward planning and team debate.
┌─────────────────────────────────────────────────────────┐
│ Party HP: ♥45 ♥52 ♥30 ♥60 Rally: 0 │
├─────────────────────────────────────────────────────────┤
│ │
│ Layer 0: [⚔] ← current (highlighted) │
│ / \ │
│ Layer 1: [⚔] [⚔] ← available (glowing) │
│ | \ | │
│ Layer 2: [★] [♥] ★=elite ♥=rest │
│ | | \ │
│ Layer 3: [⚔] [⚔] [⚔] │
│ | \ | / │
│ Layer 4: [♥] [⚔] │
│ | | │
│ Layer 5: [★] [⚔] │
│ \ | │
│ Layer 6: [⚔] │
│ | │
│ Layer 7: [☠] ← boss (skull icon) │
│ │
└─────────────────────────────────────────────────────────┘
Node Type Icon Color COMBAT Crossed swords Grey ELITE Star / skull with crown Gold REST Heart / campfire Green BOSS Large skull Red
State Visual Visited Dimmed, checkmark overlay Current Bright highlight, pulsing border Available (connected to current) Glowing, interactive (host only) Future (not yet reachable) Normal opacity, non-interactive
Host : Click an available (glowing) node to select it. Confirmation not needed — click = go.Non-host : View only. Cursor shows "not allowed" on nodes. Text: "Waiting for host to choose…"Hover (any player): Shows node tooltip — type name, encounter preview for combat nodes ("2 Goblins" or just "Combat Encounter").
Lines drawn between connected nodes using Line2D or custom draw.
Available path lines are brighter/thicker than other connections.
Visited path has a distinct color (e.g., dotted trail).
MAP_VISIBLE → host clicks available node → selection sent to server → scene transition
System Direction Interface Map System Reads MapLayout (nodes, edges, types, visited status) Game State Manager Reads Current node index from RunData Player Resources Reads Party HP displayed in header Networking Layer Sends Host sends select_node RPC
x = (node_index_in_layer / (nodes_in_layer + 1)) * screen_width
y = (layer / layer_count) * map_height + top_margin
# Jitter for visual variety:
x += seeded_random(-30, 30)
Case Resolution Single node in a layer (no choice) Still show the node. Host clicks it. Could auto-advance with a brief pause. Map doesn't fit on screen (many nodes) V1: fixed 8 layers, 1-3 per layer = always fits. Future: scrollable. Host clicks while scene is transitioning Debounce — ignore clicks during transition.
System Dependency Type Interface Map System Hard Provides MapLayout data
None — leaf node.
Knob Default Safe Range Affects node_icon_size48px 32-72px Readability connection_line_width3px 2-6px Visual clarity available_glow_intensity0.8 0.3-1.0 How obvious available nodes are
# Criterion Verification 1 All nodes and connections render correctly Visual test: generate map, assert all nodes visible with correct icons 2 Current node highlighted Visual test: assert current node has distinct visual 3 Available nodes glow and are clickable (host) Visual test: host can click available nodes 4 Non-host cannot select nodes Integration test: non-host click → no effect 5 Visited nodes dimmed Visual test: revisit map after combat, assert previous node dimmed 6 Node tooltip shows type info on hover Visual test: hover over node, assert tooltip appears
