Wireframe — Combat screen
Wireframe — Combat screen
1. Frame
The combat screen is a full-screen modal that overlays the map/quest log when a combat encounter trigger fires. It is displayed for the duration of a single Walker-vs-enemy encounter — from trigger to outcome — and then dismissed (with the outcome card briefly visible before the player is returned to the previous context). The player is never automatically forwarded through turns; every Walker action requires an explicit tap. Enemy turns resolve immediately after the Walker’s action resolves, with a short (400ms) animation window before the next action row appears.
The screen communicates three things simultaneously: resource state (Walker hp, Walker energy — Pillar 1 anchor), encounter state (enemy hp, turn number, last action result), and agency (action affordances for the Walker’s turn). It must be readable during a walk: the Walker may glance at the screen for one to two seconds between steps. Every piece of actionable information must be visible without scrolling or tapping.
The combat system is Walker-first strict alternation (D-010) with non-punitive defeat (D-010): at hp=0 the Walker is set back rather than killed, with hp clamped to 1 and no XP/rep/streak loss. The UI communicates both of these facts — turn order is shown explicitly, and the defeat state uses language that matches the lore frame (“you fall back, bruised”) rather than language of failure.
The UI consumes EncounterResult from simulateEncounter(input, seed) in data/src/sim/combat.ts. The turns: TurnRecord[] array drives the turn log. The finalState: { walker_hp, walker_energy, enemy_hp, turns } drives the outcome card. The outcome: "victory" | "defeat" | "voluntary_retreat" | "forced_retreat" drives the outcome state label and dismiss behavior.
2. Always-on surfaces
These surfaces are visible at all times during an encounter — in idle (between turns), during Walker-turn (action picker visible), and during enemy-turn (passive wait state). No tap required to see any of these.
2.1 Walker status bar (top-left zone)
| Element | Data source | Visual spec |
|---|---|---|
| Walker hp numeric | walker_hp_after / hp_max from last TurnRecord | --type-h2, --color-success (#4caf7d) when hp > 50% hp_max; --color-warning (#e0a843) when hp 25-50%; --color-error (#e05555) when hp below 25% |
| Walker hp bar | Same fraction | Filled bar, color matches hp numeric above; bar bg --color-surface-variant |
| Walker energy numeric | walker_energy_after / energy_max | --type-h2, --color-region-frostlands (#7fb8d4) — regional accent doubles as energy color; fallback --color-info (#5b99c4) on non-Frostlands screens |
| Walker energy bar | Same fraction | Filled bar, --color-region-frostlands; bg --color-surface-variant |
| Walker label | Static “Walker” | --type-caption, --color-on-surface-muted |
Energy display is a Pillar-1 anchor. The bar and numeric are never hidden, never collapsed, never shown at lower visual weight than hp. The Walker’s energy is the structural constraint on the encounter (formulas.md §6: encounter ends in forced retreat at energy=0), so it must read at a glance.
2.2 Enemy status bar (top-right zone)
| Element | Data source | Visual spec |
|---|---|---|
| Enemy hp numeric | enemy_hp_after from last TurnRecord | --type-h2, --color-on-surface |
| Enemy hp bar | enemy_hp_after / enemy.hp_max from EncounterInput | Single color: --color-error (#e05555) — enemy hp is always displayed in the danger register to reinforce the adversarial frame |
| Enemy name | From encounter trigger metadata (e.g. “Frost-thing”) | --type-body, --color-on-surface-muted |
2.3 Last hp_delta (both sides, floating)
After each resolved action, the hp_delta from that TurnRecord appears as a floating numeral above the affected hp bar, then fades over 600ms. This is always rendered even at 0 (miss = “0” appears, dims faster — 300ms). Crit delta includes a visual marker (see §3).
| Element | Visual spec |
|---|---|
| Walker hp_delta (enemy attack landed) | --type-h1, --color-error, floats above Walker hp bar, slide-down entry, fade-out |
| Enemy hp_delta (Walker attack landed) | --type-h1, --color-success, floats above enemy hp bar, slide-down entry, fade-out |
| Miss (0 delta) | --type-body-lg, --color-on-surface-muted, “MISS”, fade-out 300ms |
2.4 Crit indicator
When crit: true on a TurnRecord, the floating hp_delta gains a prefix marker (“CRIT — ”) rendered in --color-warning (#e0a843) at --type-body-lg weight above the numeral. A screen-edge flash (4dp border ring, --color-warning, 400ms fade) fires on the affected side. Haptic: heavy impact on Walker crit; error-pattern haptic on enemy crit (Walker takes a crit). Sound: distinctive chime on Walker crit; low thud on enemy crit.
2.5 Turn indicator (Walker-first, D-010)
A persistent “Your turn / Enemy’s turn” pill anchored below the enemy status bar. During Walker-turn it reads “YOUR TURN” with --color-success background. During enemy-turn resolution it reads “ENEMY TURN” with --color-error background. Transition is instant (no animation), so the state is always current at a glance. Turn number is shown in small type below the pill: “Turn 1”, “Turn 2” etc.
3. Opt-in surfaces (tap to reveal)
These surfaces require a deliberate tap to show. They are present but visually tucked — the information is available but does not contribute to cognitive load during a fast walk-and-glance session.
3.1 Hit chance for chosen action
Tap the chosen action button (before confirming) to reveal a chip above the button: “Hit: 75%” rendered in --type-caption, --color-info. Derived from clamp(walker.accuracy - enemy.evasion, 0.05, 0.95) per formulas.md §7. Updated on any stat-modifier change during the encounter (none in phase 11, but the hook exists). Chip disappears on confirm or on tap-away.
3.2 Crit chance and crit multiplier
Same chip mechanism as hit chance, or a secondary line in the same chip: “Crit: 5% x1.5”. Values from Walker snapshot crit_chance and crit_mult. Shown alongside hit chance on the same tap — one tap reveals both.
3.3 Stat dictionary tooltip
A “Stats (i)” icon button in the bottom-right corner of the screen (always visible, 48dp tap target). Tapping it opens a bottom sheet with the Walker snapshot values for all stats in formulas.md §3: hp, hp_max, energy, energy_max, damage, defense, accuracy, evasion, crit_chance, crit_mult, energy_cost_per_action. The bottom sheet also shows the enemy’s visible stats (hp, hp_max, damage, defense, accuracy, evasion, crit_chance, crit_mult). This is the power-user view. Dismiss with swipe-down or tap outside. Does NOT pause the game; it is purely informational.
4. Action affordances
Maximum three buttons. All buttons are in the bottom 48% of the screen (one-handed thumb reach per a11y baseline). Each button is 56dp height (minimum 48dp), full-width within the action zone with 16px horizontal padding.
4.1 Action rows
| Action | Button label | Data effect | Energy cost shown |
|---|---|---|---|
| Attack | ”Attack” | Triggers Walker attack turn; resolves hit/miss/crit against enemy | ”1 energy” caption below label |
| (placeholder) | “Use Item” | Disabled in phase 11 — grayed out with “Phase 12” note in tooltip | — |
| Retreat | ”Retreat” | Voluntary retreat per RetreatPolicy { kind: "playerControlled" } — not yet wired in sim (phase 11b-2 shipped never only); button present, wired in 11e-1 mobile implementation | ”No cost” caption |
Phase 11 ships Attack + Retreat only (two buttons). “Use Item” is shown in a disabled state to orient the player to the future affordance slot without confusing them about current options.
Retreat confirmation: tapping Retreat shows an inline confirmation chip (“Retreat? Tap again to confirm”) for 2 seconds before executing. Prevents accidental retreats while walking. The confirmation chip sits above the Retreat button, does not move other UI elements, dismisses on timeout or tap-away.
4.2 Action zone hidden during enemy turn
During enemy-turn resolution (400ms animation window) the action buttons are visually dimmed (opacity 0.4) and non-interactive. This prevents double-tap conflicts during the resolution window. They become active immediately when the enemy turn resolves and the Walker-turn indicator fires.
5. ASCII wireframes — five states
The layout uses a single-column mobile portrait frame. Safe area: top system bar not shown (assumed handled by OS). Bottom safe area: nav bar not shown; action buttons sit above it.
State 1 — Idle (mid-encounter, between Walker inputs)
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ Frost-thing │ ││ │ HP 47 / 50 │ HP 10 / 18 │ ││ │ ██████████░ 94% │ █████░░░░░░ 56% │ ││ │ EN 10 / 30 │ │ ││ │ ███░░░░░░░░ 33% │ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ◉ YOUR TURN Turn 2 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [ENCOUNTER NAME / LORE BEAT] │ ││ │ Quest 002 — beat 3 │ ││ │ A frost-thing blocks the descent │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ LAST ACTION │ ││ │ Turn 1 — Enemy hit you for 3 dmg │ ││ └─────────────────────────────────────┘ ││ ││ ││ ││ ┌─────────────────────────────────────┐ ││ │ Attack │ ││ │ (1 energy) │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Use Item [Phase 12] │ ││ │ (disabled) │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Retreat │ ││ │ (no cost) │ ││ └─────────────────────────────────────┘ ││ [i] │└─────────────────────────────────────────────┘State 2 — Walker turn (action picker visible, hit/crit chip shown)
Identical to State 1 but with the hit/crit chip visible above the Attack button (triggered by prior tap on Attack before confirm). This state shows after the player taps Attack once but before second tap (no confirmation needed for Attack — chip is informational, Attack fires on single tap).
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ Frost-thing │ ││ │ HP 47 / 50 │ HP 10 / 18 │ ││ │ ██████████░ 94% │ █████░░░░░░ 56% │ ││ │ EN 10 / 30 │ │ ││ │ ███░░░░░░░░ 33% │ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ◉ YOUR TURN Turn 2 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Quest 002 — beat 3 │ ││ │ A frost-thing blocks the descent │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Hit: 75% Crit: 5% x1.5 │ │ <- opt-in chip│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Attack [TAP] │ │ <- highlighted│ │ (1 energy) │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Use Item [Phase 12] │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Retreat │ ││ └─────────────────────────────────────┘ ││ [i] │└─────────────────────────────────────────────┘State 3 — Enemy turn (passive, last-hit highlighted)
Action buttons dimmed (opacity 0.4). Enemy attack resolves. The hp_delta floats above the Walker hp bar (slide-down, then fade). The turn indicator pill switches to “ENEMY TURN” with --color-error background. The last-action log updates immediately.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ Frost-thing │ ││ │ HP 44 / 50 ◄── │ HP 0 / 18 │ │ <- hp_delta -3 floating (fades)│ │ ████████░░░ 88% │ ░░░░░░░░░░░░ 0%│ ││ │ EN 9 / 30 │ │ ││ │ ███░░░░░░░░ 30% │ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ● ENEMY TURN Turn 1 │ │ <- red pill│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Quest 002 — beat 3 │ ││ │ A frost-thing blocks the descent │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ LAST ACTION │ ││ │ Turn 1 — Enemy hit you for -3 │ │ <- highlighted row│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Attack │ │ <- dimmed│ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Use Item [Phase 12] │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Retreat │ ││ └─────────────────────────────────────┘ ││ [i] │└─────────────────────────────────────────────┘State 4 — Defeat clamp (hp=1, non-punitive)
Walker hp_after has been recorded as 1 by the simulator (D-010 clamp). The outcome resolves to "defeat". The combat screen transitions to a full-screen outcome card that overlays the encounter UI. Action buttons are hidden. The Walker is NOT returned to the map immediately — the outcome card gives them time to read the state before dismissing.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ [ENCOUNTER NAME] │ ││ │ Quest 002 — beat 3 │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ You fall back, │ ││ │ bruised. │ ││ │ │ ││ │ (No progress lost. No XP lost. │ ││ │ Walk more, then try again.) │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Walker HP: 1 / 50 │ ││ │ Walker EN: [energy_after] / 30 │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ The frost-thing disperses briefly │ ││ │ but does not dissolve. │ ││ └──────────────────────────────────────┘ ││ ││ ││ ┌──────────────────────────────────────┐ ││ │ Return to Quest │ │ <- primary CTA│ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Copy notes: “You fall back, bruised.” is the lore-consistent defeat label. “No progress lost. No XP lost. Walk more, then try again.” is the mechanical reassurance that communicates D-010 non-punitive defeat to the player in plain language. The “Walk more, then try again.” line also restates Pillar 1 (energy comes from walking) without being didactic.
State 5 — Victory
outcome: "victory". Full-screen outcome card. Shows final hp, energy, turns taken. Shows quest beat advancement. Primary CTA dismisses to quest log.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ [ENCOUNTER NAME] │ ││ │ Quest 002 — beat 3 │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ The frost-thing dissolves. │ ││ │ The path opens up. │ ││ │ │ ││ │ Victory. │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Walker HP: 47 / 50 (+intact) │ ││ │ Walker EN: 10 / 30 │ ││ │ Turns taken: 2 │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Quest 002 — Beat 3 complete. │ │ <- beat advancement│ │ The seal-house is in view. │ ││ └──────────────────────────────────────┘ ││ ││ ││ ┌──────────────────────────────────────┐ ││ │ Continue Journey │ │ <- primary CTA│ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘6. State machine (Mermaid)
stateDiagram-v2 [*] --> encounter_entry : trigger fires (quest beat / region event)
encounter_entry --> walker_turn : snapshots loaded, seed drawn, turn 1 begins
walker_turn --> action_resolving_walker : player taps Attack or Retreat
action_resolving_walker --> victory_screen : enemy hp <= 0 (after Walker action) action_resolving_walker --> enemy_turn : enemy hp > 0
enemy_turn --> action_resolving_enemy : enemy attack resolves (400ms)
action_resolving_enemy --> defeat_screen : walker hp <= 0 after enemy action action_resolving_enemy --> walker_turn : walker hp > 0; turn N+1 begins
walker_turn --> forced_retreat_screen : walker energy = 0 at turn start walker_turn --> voluntary_retreat_screen : player taps Retreat (confirmed)
victory_screen --> [*] : player taps Continue Journey defeat_screen --> [*] : player taps Return to Quest forced_retreat_screen --> [*] : player taps Return to Quest voluntary_retreat_screen --> [*] : player taps Return to Quest
note right of walker_turn EXIT CHECKS (top of each turn, in order per formulas.md §8): 1. walker hp <= 0 → defeat 2. voluntary retreat per policy 3. walker energy = 0 → forced retreat 4. enemy hp <= 0 → victory end note
note right of action_resolving_walker Walker-first strict alternation (D-010 #2). One attack per turn. Energy cost deducted on Walker action regardless of hit/miss (formulas.md §6). end note
note right of defeat_screen D-010 #3: non-punitive defeat. walker hp clamps to 1. No XP loss, no point loss, no streak penalty. Quest beat does not advance; trigger remains. end note7. Worked example — Frostlands slow-vent encounter (Quest 002 beat 3)
The following panels walk through the canonical two-turn fight from formulas.md §10. The seed note from the roadmap applies: seed 0x5A0C is flagged as unreachable under xorshift32; the wireframe depicts the outcome and narrative beats only, not the seed value. Outcome (walker_hp=47, walker_energy=10, enemy_hp=0, turns=2) is canonical.
Snapshot going in:
- Walker: hp=50, hp_max=50, energy=12, energy_max=30, damage=10, defense=4, accuracy=0.80, evasion=0.10, crit_chance=0.05, crit_mult=1.5, energy_cost=1
- Frost-thing: hp=18, hp_max=18, damage=7, defense=2, accuracy=0.65, evasion=0.05, crit_chance=0.02, crit_mult=1.5
Panel 1 — Encounter opens (before Turn 1)
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ Frost-thing │ ││ │ HP 50 / 50 │ HP 18 / 18 │ ││ │ ████████████ 100%│ ████████████ 100%│ ││ │ EN 12 / 30 │ │ ││ │ ████░░░░░░░░ 40%│ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ◉ YOUR TURN Turn 1 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Quest 002 — beat 3 │ ││ │ A slow vent of noble frost has │ ││ │ formed a frost-thing on the scree. │ ││ └─────────────────────────────────────┘ ││ ││ (No prior action) ││ ││ ┌─────────────────────────────────────┐ ││ │ Attack │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Use Item [Phase 12] │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Retreat │ ││ └─────────────────────────────────────┘ ││ [i] │└─────────────────────────────────────────────┘Energy reads 12/30 (40%). Turn 1, Walker goes first (D-010). The frost-thing is at full hp.
Panel 2 — After Walker Turn 1 (hit, 8 damage, no crit)
Roll stream from formulas.md §10 (hand-rolled illustration): roll_h=0.42 < hit_chance=0.75 → hit. raw=8, variance=1.00, roll_c=0.80 >= crit_chance=0.05 → no crit. hp_delta=8. Frost-thing hp: 18→10. Walker energy: 12→11.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ -8 (fading) │ │ <- float: -8 above enemy bar│ │ HP 50 / 50 │ Frost-thing │ ││ │ ████████████ 100%│ HP 10 / 18 │ ││ │ EN 11 / 30 │ █████░░░░░░ 56%│ ││ │ ████░░░░░░░░ 37%│ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ● ENEMY TURN Turn 1 │ │ <- red pill, enemy resolving│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ LAST ACTION │ ││ │ Turn 1 Walker — Hit for 8 │ ││ └─────────────────────────────────────┘ ││ ││ [action buttons dimmed — enemy resolving] ││ │└─────────────────────────────────────────────┘Floating “-8” fades over enemy hp bar. Enemy hp bar drops from full to ~56%. Walker energy 37% (11/30). Enemy now acts.
Panel 3 — After Enemy Turn 1 (hit, 3 damage, no crit)
roll_h=0.20 < hit_chance=0.55 → hit. raw=3, variance=1.015, roll_c=0.90 → no crit. hp_delta=3. Walker hp: 50→47.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ -3 (fading) │ Frost-thing │ │ <- float: -3 above Walker bar│ │ WALKER │ HP 10 / 18 │ ││ │ HP 47 / 50 │ █████░░░░░░ 56%│ ││ │ ████████████ 94%│ │ ││ │ EN 11 / 30 │ │ ││ │ ████░░░░░░░░ 37%│ │ ││ └──────────────────┴──────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ ◉ YOUR TURN Turn 2 │ │ <- green pill, Walker acts│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ LAST ACTION │ ││ │ Turn 1 Enemy — Hit you for 3 │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ Attack │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Use Item [Phase 12] │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Retreat │ ││ └─────────────────────────────────────┘ ││ [i] │└─────────────────────────────────────────────┘Walker hp at 94% (47/50). Energy 37% (11/30). Turn 2 begins; Walker acts first.
Panel 4 — After Walker Turn 2 (crit hit, 14 damage — enemy hp reaches 0)
roll_h=0.10 < 0.75 → hit. raw=8, variance=1.135, roll_c=0.03 < crit_chance=0.05 → crit. hp_delta=round(8 × 1.135 × 1.5)=round(13.62)=14. Frost-thing hp: 10→0 (clamped at 0 by sim). Walker energy: 11→10. Victory triggered at next turn-top check.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────┬──────────────────┐ ││ │ WALKER │ CRIT — -14 │ │ <- "CRIT — -14" in warning color│ │ HP 47 / 50 │ (fading over │ ││ │ ████████████ 94%│ enemy bar) │ ││ │ EN 10 / 30 │ │ ││ │ ███░░░░░░░░░ 33%│ Frost-thing │ ││ └──────────────────┤ HP 0 / 18 │ ││ │ ░░░░░░░░░░░░ 0%│ ││ ┌──────────────────┴──────────────────┐ ││ ││ [Screen edge: --color-warning ring firing] ││ ││ ┌─────────────────────────────────────┐ ││ │ LAST ACTION │ ││ │ Turn 2 Walker — CRIT for 14! │ ││ └─────────────────────────────────────┘ ││ ││ [Transitioning to Victory screen...] ││ │└─────────────────────────────────────────────┘Crit flash fires: --color-warning screen edge ring (400ms). Heavy haptic. Sound: crit chime. Enemy hp bar collapses to 0. After 600ms, outcome card slides up.
Panel 5 — Victory outcome card
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ Quest 002 — beat 3 │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ The frost-thing dissolves. │ ││ │ The path to the seal-house │ ││ │ opens below you. │ ││ │ │ ││ │ Victory. │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Walker HP: 47 / 50 │ ││ │ Walker EN: 10 / 30 │ ││ │ Turns taken: 2 │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Beat 3 — complete. │ ││ │ Descend to the col. The seal-house │ ││ │ is visible across the frost-glaze. │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Continue Journey │ ││ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Final state matches formulas.md §10 canonical outcome: walker_hp=47, walker_energy=10, enemy_hp=0, turns=2. Quest beat 3 advances per formulas.md §10: “the Walker continues down the scree to the seal-house.”
8. Accessibility
8.1 Walking-specific baseline answers
| Check | Answer |
|---|---|
| One-handed while walking | PASS — all action buttons in bottom 48% of screen; Attack is the primary button and sits immediately above Retreat, both reachable by thumb without shifting grip. Turn indicator and hp/energy bars are in the top zone — informational, not interactive. Stats tooltip button [i] is anchored bottom-right at 48dp; reachable with right-hand thumb or a brief grip shift. |
| Glance ≤ 2 seconds | PASS — hp bars are the largest visual elements and use color to communicate urgency (green/warning/error), so the Walker can assess encounter state in under 2 seconds without reading any numerals. Turn indicator pill (“YOUR TURN” / “ENEMY TURN”) is always visible at the center of the screen with a strong background color difference. |
| Tap target ≥ 48dp | PASS — action buttons are 56dp height, full-width. Stats tooltip button is 48dp square. Retreat confirmation chip is 48dp height. |
| Color contrast ≥ 4.5:1 body | PASS — see §8.2. |
| Font scale 200% | PASS — see §8.4. |
| Audio/haptic alternatives | PASS — see §8.3. |
8.2 Color-blind-safe palette for combat surfaces
The default palette for hp/energy/crit uses green/amber/red (a trichromatic convention that fails for deuteranopia and protanopia). The following mitigations are mandatory:
HP bars: Do NOT rely on color alone for hp urgency. The numeric fraction (“47 / 50”) is always shown alongside the bar. Additionally, the bar gains a texture/pattern overlay at the warning threshold:
- hp > 50% hp_max: solid fill, no texture
- hp 25–50% hp_max: fine diagonal stripe overlay on the bar (pattern density increases toward 25%)
- hp < 25% hp_max: coarse diagonal stripe + pulsing animation (1s period, subtle — not seizure-risk)
This means a player who cannot distinguish green from red still reads hp state via bar fill length, texture, and numeric.
Energy bar: A separate shape from hp bar (different row, different icon prefix — icon.footprint prefix at 16dp). Color-blind users differentiate it by position and icon, not by color alone.
Crit indicator: The “CRIT — ” prefix text is rendered as text (screen-reader accessible), not as a purely color-coded glyph. The screen-edge flash is --color-warning (#e0a843) which has strong luminance contrast — visible under most color-blindness variants. Additionally, the heavy haptic is the primary crit signal during a walk (the player may not be watching the screen at the moment of crit resolution).
Turn indicator pill: The “YOUR TURN” / “ENEMY TURN” distinction is communicated by background color AND by text. Text is the accessible primary; color reinforces. The indicator also changes shape slightly (◉ for Walker turn, ● for enemy turn — outlined vs filled circle glyph prefix) as a third channel.
Enemy hp bar: Uses --color-error (#e05555) only. The enemy hp bar is distinguished from the Walker hp bar by position (right column), label (“Frost-thing”), and shape. Color is not the only differentiator.
8.3 Haptic and sound cue mapping
| Combat event | Haptic | Sound | Notes |
|---|---|---|---|
| Walker attack hits | Light impact | Soft strike tone | Normal hit |
| Walker attack misses | Light error pattern (double-tap, short) | Miss whoosh | Communicates miss without heavy interruption |
| Walker attack crits | Heavy impact | Crit chime (distinct from normal hit) | Primary crit signal during a walk |
| Enemy attack hits Walker | Medium impact + error pattern | Low thud | More insistent than Walker miss — Walker took damage |
| Enemy attack crits Walker | Heavy impact + error pattern | Low heavy thud | Enemy crit = Walker is in more danger |
| Enemy misses Walker | None | None | Absence of haptic = nothing to worry about |
| Victory | Success pattern (3-step escalating) | Victory fanfare (short, 2s) | Quest beat advancement also fires |
| Defeat (hp clamp) | Error pattern + single light thud | Low resolve tone (not punishing — Pratchett-warm) | Non-punitive: haptic should not feel like a punishment |
| Forced retreat (energy=0) | Double light tap | Brief “energy empty” tone | Reminds player to walk |
| Voluntary retreat confirmed | Single medium tap | Neutral confirm tone | Player chose this; no negative affect |
All haptic and sound events are opt-out in settings (inherited from design-system.mdx §5.6: default-on, toggle-off). The haptic mapping is designed to be readable with eyes-off — a player walking and not watching the screen can feel the encounter state through the haptic rhythm.
8.4 Font scaling at 200%
At 200% OS font scaling:
- hp/energy numerics grow from
--type-h2(18px base) to ~36px effective. The two-column status bar will wrap: hp and energy stack vertically within the Walker column. This is acceptable — the expanded vertical space pushes action buttons down but they remain above the safe zone bottom. - Action button labels (“Attack”, “Retreat”) at
--type-body(14px base) grow to ~28px effective. Buttons grow vertically. This is handled bymin-height: 56dpon buttons (not fixed height) — they expand to accommodate. - The last-action log at
--type-bodywill wrap to two lines at 200%. The log row height must bemin-height, not fixed. - Floating hp_delta numerals at
--type-h1(24px base) grow to ~48px effective — very large, but the float animation keeps them out of the persistent layout, so overflow is not a concern. - Turn indicator pill text (“YOUR TURN”) at
--type-bodygrows to ~28px. Pill must grow horizontally or wrap; fixed-width pill would clip. Implementation: pill usesfit-contentwidth with horizontal padding.
8.5 Screen reader annotations
- Walker and enemy status bars are announced as groups: “Walker status: HP 47 of 50, Energy 10 of 30” and “Frost-thing status: HP 10 of 18”. Announced on change (after each turn resolves).
- Turn indicator is announced on change: “Your turn, turn 2” or “Enemy’s turn, turn 1”.
- Floating hp_delta is announced as an accessibility live region: “-3 damage received” or “-14 critical damage dealt”. Uses
aria-live="polite"on Walker damage andaria-live="assertive"on enemy damage (the Walker receiving damage is more urgent for a screen reader user). - Action buttons: announced as “Attack, costs 1 energy” and “Retreat, no energy cost”. Hit chance chip (when revealed) is announced as “Hit chance 75%, critical chance 5% with 1.5 multiplier”.
- Outcome cards: fully announced. Victory: encounter name + outcome text + stats. Defeat: encounter name + defeat message + stats + “No progress lost, no XP lost.”
9. What 11e-2 (faction and quest log UI) inherits
The combat screen establishes three patterns that 11e-2 should carry forward:
Layout grid: Two-column top status zone (Walker left, subject right) + single-column content zone (context/log) + single-column action zone (bottom). This three-zone layout (status / context / actions) works for faction reputation screens as well: the top zone becomes faction tier bar + quest context, the action zone becomes narrative choices.
Style tokens in use:
--color-success/--color-warning/--color-errorfor state-coded bars (hp urgency). The same tokens apply to faction reputation tier fills (Stranger/Familiar/Trusted/Allied/Champion — map to the error-through-success ramp).--color-region-frostlandsas the energy bar color establishes the principle that energy-related UI in a region uses that region’s accent color. Quest log UI in the Frostlands should use--color-region-frostlandsfor region-specific accents.- Opt-in chip pattern (tap to reveal secondary stats): usable in quest log for “show hidden objectives” or in faction screen for “show rep formula details”.
Turn/state pill pattern: The “YOUR TURN / ENEMY TURN” pill with strong background color is a reusable state indicator. 11e-2 quest log can use the same pattern for active beat indicators (“ACTIVE BEAT”, “COMPLETED”, “LOCKED”) with analogous background colors.
Outcome card pattern: Full-screen overlay card with a result headline, stat summary, and a single primary CTA. 11e-2 quest completion should follow the same structure: quest name, completion headline, rewards summary, “Continue” CTA.
a11y pattern: The three-channel crit indicator (text prefix + screen edge flash + heavy haptic) is the template for any event that requires multi-channel notification in 11e-2 — e.g. faction tier-up (new faction tier earned should fire: text badge + distinct haptic + sound cue).
This wireframe is W-level autonomous. Layout zones, color token assignments for combat surfaces (energy color = region accent, hp urgency ramp = success/warning/error), opt-in chip pattern, and outcome card structure are decisions within ui-designer authority, logged to ops/decisions/2026-05-19-combat-screen-wireframe.md.