Reward UI

Status: Designed Author: user + game-designer Last Updated: 2026-03-28 System Index: #17 — Vertical Slice, Presentation Layer

Overview

The Reward UI displays the 3 card options each player receives after a combat victory. Players view their options, hover for details, and click to select one card (or skip). A status bar shows which teammates have already chosen. The phase ends when all players have selected, transitioning back to the map.

Player Fantasy

"This card will change everything." The reward screen is a moment of anticipation — which card will appear? The short pause between combat and the next map node lets the team discuss their picks.

Detailed Design

Screen Layout

┌─────────────────────────────────────────────────────────┐
│                  CHOOSE A CARD                           │
│                                                         │
│    ┌─────────┐    ┌─────────┐    ┌─────────┐           │
│    │  Card 1  │    │  Card 2  │    │  Card 3  │          │
│    │          │    │          │    │          │          │
│    │  [art]   │    │  [art]   │    │  [art]   │          │
│    │          │    │          │    │          │          │
│    │ Strike+  │    │ Rally    │    │ Chain    │          │
│    │ 1⚡ ATK  │    │ 1⚡ AST  │    │ 1⚡ CHN  │          │
│    └─────────┘    └─────────┘    └─────────┘           │
│                                                         │
│                    [SKIP]                                │
│                                                         │
│  P1: Choosing...  P2: ✓ Done  P3: Choosing...           │
└─────────────────────────────────────────────────────────┘

Card Display

Each option shows:

Card art (from art_id)
Card name (display_name)
Energy cost
Category badge (ATK/SKL/PWR/AST/CHN)
Rarity border color (white=common, blue=uncommon, gold=rare)
Full description text

Interaction

Hover: Card scales up, full description tooltip if text is truncated
Click: Select card. Brief confirmation animation. Card flies to "deck" icon. Selection sent to server.
Skip button: Adds nothing. Sends select_reward(null).
Selection is final — no undo after clicking.

Teammate Status Bar

Shows each player's selection state:

"Choosing…" — still deciding
"Done ✓" — has selected
Does not reveal WHAT they picked (private)

States and Transitions

SHOWING_OPTIONS → player clicks card or skip → SELECTED → wait for all → TRANSITION_TO_MAP

Interactions with Other Systems

System	Direction	Interface
Card Reward System	Receives	3 card options for this player
Card Data System	Reads locally	Card display data for rendering
Networking Layer	Sends	select_reward RPC

Formulas

None.

Edge Cases

Case	Resolution
Player clicks two cards quickly	First click wins. Second ignored.
All 3 cards are undesirable	Player can skip. Skip is always available.
Screen resolution cuts off card text	Hover tooltip shows full text. Cards use responsive layout.
Teammate disconnects during reward	Server auto-skips for them after timeout. UI shows "Disconnected" status.

Dependencies

Upstream

System	Dependency Type	Interface
Card Reward System	Hard	Provides the 3 card options

Downstream

None — leaf node.

Tuning Knobs

Knob	Default	Safe Range	Affects
`card_display_scale`	1.5	1.0-2.0	Card readability in reward view
`selection_timeout_sec`	60	30-120	Max time before auto-skip

Acceptance Criteria

#	Criterion	Verification
1	3 cards displayed with correct info	Visual test: assert 3 cards with name, cost, category, description
2	Click selects card and sends to server	Integration test: click card, assert deck grows by 1
3	Skip adds nothing to deck	Integration test: click skip, assert deck unchanged
4	Cannot select twice	Integration test: rapid double-click, assert only 1 selection sent
5	Teammate status updates	Visual test: P2 selects, P1 sees "Done ✓" for P2
6	Phase ends when all select	Integration test: all select, assert transition to MAP