Wireframe — Crafting screen
Wireframe — Crafting screen
1. Frame
The crafting screen is a tab-level screen (Home tab bar: Home / Tree / Factions / Quests / Craft) that is navigable from the main five-item bottom tab bar. It is a persistent tab destination, not a modal. The player opens it freely during a session — mid-walk or at rest.
The screen serves three states in sequence: a recipe browser (the default tab view), a recipe drill-down with forge confirmation, and a forge in-progress / outcome card that fires when a craft resolves. Navigation from browser to drill-down to forge is forward push navigation; the player returns to the browser after any outcome (success, failure, abort).
The crafting system talks to three pillars: Pillar 1 (step-energy is not spent directly on crafting, but materials harvested by walking — field-find, extract — are the input supply, so the Walker’s walking drives the economy), Pillar 2 (keystones can gate recipes per requiredKeystoneId), and Pillar 3 (allocating a Frostlands keystone may reveal hidden crafting recipes, parallel to hidden quests).
Crafting state the UI must consume (per data/src/schemas/recipe.ts and data/src/schemas/material.ts):
| Field | Source | UI surface |
|---|---|---|
recipe.kind | "craft" or "harvest" | Filter chip; row sub-label |
recipe.successRate | 0..1 | Success rate card in drill-down |
recipe.successStatScaling | optional stat + perPoint | Crafting stat preview in drill-down |
recipe.craftTimeSec | seconds | Craft time row in drill-down; progress bar in forge state |
recipe.originRegionId | nullable region | Region chip on browser row; region gate overlay |
recipe.requiredFactionId + requiredFactionTier | nullable | Faction chip on browser row; gate overlay |
recipe.requiredKeystoneId | nullable | Keystone chip on browser row; gate overlay |
material.leakTier | 0..3 | Leak-tier overlay on ingredient row (diagonal stripe at tier > 0) |
material.originRegionId | region | Origin region badge on ingredient row |
material.harvestMethod | enum | Harvest method badge on ingredient row (field-find / extract / distill / trade-only / scavenge) |
The page depicts the two 12b-1 consumable recipes (recipe.second-tea, recipe.silver-vein-tincture) as the worked mid-state examples. Equipment recipes from 12b-2 are shown as placeholder rows (12b-2 is shipping in parallel and its specific names are not yet authored). The page’s wireframes are valid against the current data canon; they do not need 12b-2 content to be readable.
2. Screen 1 — Recipe browser
2.1 Layout
The recipe browser uses the same three-zone layout inherited from combat-screen (11e-1) and faction/quest log (11e-2):
- Top zone: screen title + filter chip row
- Content zone: recipe list (scrollable)
- Action zone: bottom tab bar
Filter chips sit in a single horizontally scrollable row immediately below the screen title. All chips are toggles; multiple can be active simultaneously; active chips show --color-success background with --color-bg text (reversed, same pattern as “ACTIVE BEAT” pill from 11e-2). The full set of filter chips:
| Chip group | Values |
|---|---|
By recipe.kind | craft / harvest |
| By output slot | consumable / weapon / armour / ring / amulet / other |
| By gate | faction-gated / region-gated / keystone-gated / no-gate |
Per-row anatomy (available recipe):
| Element | Data source | Visual spec |
|---|---|---|
| Item icon placeholder | output item/material icon | 40dp square, --color-surface-variant bg, --color-border border (1dp); icon centered |
| Recipe name (EN) | recipe.name.en | --type-body-lg, --color-on-surface |
| Output tier badge | output item.tier (common / magic / etc.) | Small chip, tier color (common = --color-on-surface-muted; magic = --color-region-passage-arc (#9b7fc4); rare = --color-region-targosie; unique = --color-warning; legendary = --color-warning + gold border) |
| Success rate | recipe.successRate × 100 | --type-caption, --color-on-surface-muted, right-aligned: “90%” or “60%“ |
| Faction chip | recipe.requiredFactionId if non-null | Small chip, faction accent color bg (per design-system §1.4), --color-bg text; label = faction short name + tier requirement |
| Region chip | recipe.originRegionId if non-null | Small chip, --color-region-* bg, --color-bg text; label = region name |
| Keystone chip | recipe.requiredKeystoneId if non-null | Small chip, --color-warning bg, --color-bg text; label = keystone short name |
| Tap target | Whole row | 72dp min-height; full row is interactive |
Per-row anatomy (locked recipe):
An overlay covers the row content. The row structure remains (icon placeholder, name area) but all content is visually dimmed to --color-disabled. A centered lock badge replaces the stat area: lock icon + single-line reason text. Examples:
- Faction-locked: “Reach Cartographer with the Guild to unlock”
- Region-locked: “Travel to the Frostlands to unlock”
- Keystone-locked: “Allocate Krok Niezachwiany to unlock”
The region badge remains visible on locked rows (same pattern as hidden quest slots from 11e-2 §5.3 — the region is the actionable hint). The recipe name is shown at muted weight so the player knows something exists without being able to act on it.
2.2 Mid-state wireframe (4 recipes — worked example)
The mid-state shows the two 12b-1 consumables plus two placeholder equipment recipes from 12b-2 (one available, one locked). Filter chips: no active filters (showing all).
┌─────────────────────────────────────────────┐│ ││ CRAFT ││ ││ [craft] [harvest] [consumable] [weapon] ││ [armour] [faction-gated] [region-gated] │ <- filter chips (scrollable)│ [keystone-gated] [no-gate] ││ ││ ───────────────────────────────────────── ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Second Tea 90% │ ││ │ Brewing [common] │ ││ │ craft • consumable │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Silver-Vein Tincture 60% │ ││ │ Third-register [magic] │ ││ │ craft • consumable │ ││ │ [FROSTLANDS] │ │ <- region chip│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon] [12b-2 equipment recipe] ?% │ ││ │ [common / magic] │ ││ │ craft • weapon │ ││ │ [GUILD Cartographer] │ │ <- faction chip│ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ │ <- locked row│ │ [icon] ??? LOCKED │ ││ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ││ │ Travel to the Frostlands to unlock │ ││ │ [FROSTLANDS] │ │ <- region badge (actionable hint)│ └─────────────────────────────────────┘ ││ ││ ───────────────────────────────────────── ││ [Home] [Tree] [Factions] [Quests] [CRAFT] │└─────────────────────────────────────────────┘2.3 Locked-recipe overlay state (full detail)
When a region-gated, faction-gated, or keystone-gated recipe cannot be unlocked yet, the row shows the full locked presentation. The overlay uses the same dim + centered-badge approach as locked quest steps from 11e-2 §3.3:
┌─────────────────────────────────────┐ │ [----] ??? LOCKED │ <- icon dimmed │ ────────────────────────────────── │ │ [FROSTLANDS] │ <- region badge visible │ │ │ Travel to the Frostlands │ │ to unlock this recipe. │ └─────────────────────────────────────┘Keystone-gated example:
┌─────────────────────────────────────┐ │ [----] ??? LOCKED │ │ ────────────────────────────────── │ │ [PLENNY] │ │ │ │ Allocate Krok Niezachwiany │ │ to reveal this recipe. │ └─────────────────────────────────────┘Faction-gated example:
┌─────────────────────────────────────┐ │ [----] ??? LOCKED │ │ ────────────────────────────────── │ │ [GUILD] │ │ │ │ Reach Cartographer with the │ │ Guild to unlock this recipe. │ └─────────────────────────────────────┘2.4 Empty state
When the Walker has no accessible recipes at all (early game before the Cech apprentice pack is issued):
┌─────────────────────────────────────────────┐│ ││ CRAFT ││ ││ [craft] [harvest] [consumable] ... ││ ││ ───────────────────────────────────────── ││ ││ ┌─────────────────────────────────────┐ ││ │ │ ││ │ No recipes yet. │ ││ │ Bertranda's apprentice pack │ ││ │ arrives after your first │ ││ │ Frostlands commission. │ ││ │ │ ││ └─────────────────────────────────────┘ ││ ││ ───────────────────────────────────────── ││ [Home] [Tree] [Factions] [Quests] [CRAFT] │└─────────────────────────────────────────────┘Empty state copy follows the 11e-2 §3.2 pattern: warm + directional (names Bertranda, gives a concrete next action, tone consistent with D-006 lore pillars).
3. Screen 2 — Recipe drill-down and craft confirmation
3.1 Layout
Tapping an available (not locked) recipe card navigates to its drill-down. This is a full-screen push navigation (back chevron appears top-left) — same navigation model as faction drill-down and quest drill-down in 11e-2. It is not a bottom sheet because ingredient lists, success rate cards, and stat previews exceed bottom sheet capacity at 200% font scale.
Three-zone layout (inherited from 11e-1 and 11e-2):
- Top zone: output item preview card (non-scrollable, always visible)
- Content zone: ingredient list + success rate card + craft time row (scrollable)
- Action zone: two-tap confirm CTA
3.2 Top zone — output item preview
| Element | Data source | Visual spec |
|---|---|---|
| Item icon placeholder | output item icon | 48dp square, --color-surface-variant, --color-border border |
| Item name (EN) | output.item.name.en | --type-h1, --color-on-surface |
| Output tier badge | output.item.tier | Same badge spec as browser row (§2.1) |
| Item modifiers | output.item.modifiers[] | One line per modifier: stat name + op + value. --type-body, --color-on-surface. Example: “+12 hp (on use)” or “+0.10 crit_chance (one encounter)“ |
| Flavour text | output.item.flavour.en | --type-caption, --color-on-surface-muted, italic prose. Example: “Of the three, the only one that walks.” |
3.3 Content zone — ingredient list
Each ingredient row:
| Element | Data source | Visual spec |
|---|---|---|
| Material/item icon placeholder | ingredient icon | 32dp square, --color-surface-variant |
| Ingredient name (EN) | material.name.en or item.name.en | --type-body, --color-on-surface |
| Have / need count | walker.inventory[ingredient] / ingredient.qty | --type-body, --color-on-surface for “have”; --type-body, --color-error when have < need. Format: “2 / 3”. Per 11e-2 §5.3 progress bar + numeric pair rule: the numeric pair is always present; no bar for ingredient counts (discrete qty, not a continuous percent). |
| Origin region badge | material.originRegionId | --color-region-* chip, --color-bg text, --type-caption. Only shown when originRegionId is non-null. |
| Harvest method badge | material.harvestMethod | Small text badge in --color-on-surface-muted, --type-caption. Values: “field-find”, “extract”, “distill”, “trade-only”, “scavenge”. Gives the Walker a sourcing cue. |
| Leak-tier overlay | material.leakTier > 0 | Diagonal stripe overlay on the ingredient row background (extending the 11e-1 §8.2 diagonal-stripe urgency-texture pattern). Stripe density corresponds to tier: tier 1 = fine stripes, spaced 8dp; tier 2 = medium stripes, spaced 4dp; tier 3 = coarse stripes + amber tint (--color-warning at 15% opacity). The stripe is a texture, not a color replacement — the underlying row bg (--color-surface) remains. |
3.4 Content zone — success rate card
The success rate card is a distinct card below the ingredient list. It shows the base success rate and the forward-compat crafting stat scaling preview (for when successStatScaling is defined on the recipe):
┌─────────────────────────────────────┐ │ SUCCESS RATE │ │ │ │ Base rate: 90% │ │ Your crafting: 0 (no bonus yet) │ │ Final rate: 90% │ │ │ │ Higher crafting stat improves │ │ success. (12c — not active yet) │ └─────────────────────────────────────┘When successStatScaling is defined (12c, leak-touched recipes):
┌─────────────────────────────────────┐ │ SUCCESS RATE │ │ │ │ Base rate: 60% │ │ Your crafting: 5 (+0.02/pt) │ │ Bonus: +4% → 64% │ │ Final rate: 64% │ └─────────────────────────────────────┘The preview uses --type-body for labels, --type-h2 weight for the final rate numeral (the one piece of data the Walker needs at a glance before deciding to forge). Color: final rate below 70% uses --color-warning; below 50% uses --color-error. Above 70% uses --color-success. This is the same urgency ramp as hp bars in 11e-1.
3.5 Content zone — craft time row
Craft time: 90 seconds--type-body, --color-on-surface. No bar (craft time is informational, not a progress indicator at this step). The forge in-progress screen (Screen 3) adds the actual progress bar.
3.6 Action zone — two-tap confirm
The action zone contains one primary button and one secondary button, both in the bottom 48% of the screen (thumb reach per a11y baseline):
| Button | Label | State | Spec |
|---|---|---|---|
| Primary CTA | ”Start Craft” | Available | --color-success bg, --color-bg text, 56dp height, full-width minus 16px horizontal padding |
| Primary CTA (disabled) | “Need 1 more thaw-mint” | Insufficient materials | --color-disabled bg, --color-on-disabled text, 56dp height; sub-label in --type-caption beneath button |
| Secondary CTA | ”Back to Recipes” | Always | --color-surface-variant bg, --color-on-surface text, 48dp height |
Two-tap confirm pattern (mirroring 11e-1 Retreat confirmation): tapping “Start Craft” once shows an inline confirmation chip above the button: “Confirm craft? Tap again to start.” Chip persists for 2 seconds, dismisses on timeout or tap-away. Second tap on “Start Craft” within the 2-second window starts the forge. This prevents accidental taps while walking.
3.7 Mid-state wireframe — Second Tea (all materials available)
┌─────────────────────────────────────────────┐│ ││ < Second Tea — brewing ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Second Tea [common] │ ││ │ +12 hp (on use) │ ││ │ "Of the three, the only │ ││ │ one that walks." │ ││ └─────────────────────────────────────┘ ││ │ <- scrollable below│ INGREDIENTS ││ ───────────────────────────────────────── ││ ┌─────────────────────────────────────┐ ││ │ [icon] Thaw-Mint Sprig │ ││ │ 2 / 2 [FROSTLANDS] │ ││ │ field-find │ ││ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Spruce-Ash Honey │ ││ │ 1 / 1 [FROSTLANDS] │ ││ │ trade-only │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ SUCCESS RATE │ ││ │ Base rate: 90% │ ││ │ Your crafting: 0 (no bonus yet) │ ││ │ Final rate: 90% │ ││ └─────────────────────────────────────┘ ││ ││ Craft time: 90 seconds ││ ││ ┌─────────────────────────────────────┐ ││ │ Start Craft │ │ <- primary CTA (green)│ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Back to Recipes │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘3.8 Mid-state wireframe — Silver-Vein Tincture (one material short; leak-tier overlay active)
Silver-Vein Tincture has originRegionId: frostlands so a region banner appears in the top zone. Both ingredients have leakTier > 0 (silver-veined frost = leakTier 2, bound soot = leakTier 1) so diagonal stripe overlays appear on both ingredient rows. The Walker has 0/1 silver-veined frost (insufficient), so that row shows the have-count in --color-error.
┌─────────────────────────────────────────────┐│ ││ < Silver-Vein Tincture ││ Third-register protocol ││ ││ [FROSTLANDS] Region-bound recipe │ <- region gate banner│ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Silver-Vein Tincture [magic]│ ││ │ +0.10 crit_chance │ ││ │ (one encounter) │ ││ │ "Carry one, drink three." │ ││ └─────────────────────────────────────┘ ││ ││ INGREDIENTS ││ ───────────────────────────────────────── ││ ┌───────────────────────────────-//-─┐ │ <- leakTier 2: medium diagonal stripe│ │ [icon] Silver-Veined Frost /// │ │ overlay on row bg│ │ 0 / 1 (!) [FROSTLANDS] extract │ │ <- "0" in --color-error; "!"│ └─────────────────────────────────-//- ││ ┌──────────────────────────────-//-──┐ │ <- leakTier 1: fine diagonal stripe│ │ [icon] Vigil-Bound Soot // │ ││ │ 2 / 2 [FROSTLANDS] extract │ ││ └─────────────────────────────────-//- ││ ││ ┌─────────────────────────────────────┐ ││ │ SUCCESS RATE │ ││ │ Base rate: 60% │ │ <- 60% → --color-warning (below 70%)│ │ Your crafting: 0 (no bonus yet) │ ││ │ Final rate: 60% │ ││ └─────────────────────────────────────┘ ││ ││ Craft time: 240 seconds ││ ││ ┌─────────────────────────────────────┐ ││ │ Need 1 more Silver-Veined Frost │ │ <- disabled CTA sub-label│ │ ───────────────────────────────── │ ││ │ Start Craft (unavailable) │ │ <- --color-disabled bg│ └─────────────────────────────────────┘ ││ ┌─────────────────────────────────────┐ ││ │ Back to Recipes │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘The diagonal stripe ASCII notation (///) in the wireframe represents the texture overlay described in §3.3. Implementation renders this as a CSS/native diagonal repeating pattern on the row background, not as literal slash characters.
4. Screen 3 — Forge in-progress and outcome card
4.1 Forge in-progress state
When the Walker confirms the craft, the UI transitions to the forge in-progress state. This is a full-screen view (replaces the drill-down) with a centered progress bar and countdown. The Walker can abort during this window (before the timer completes) — aborting returns materials unused and returns to the browser.
The progress bar uses the same bar pattern as the combat-screen hp bars (11e-1 §2.1): filled + numeric alongside it. The numeric is a countdown in seconds: “72 seconds remaining” at --type-body, --color-on-surface-muted. The bar fill color is --color-info (#5b99c4) — neutral, neither success nor warning; the forge has not resolved yet.
Reduced motion: When OS “Reduce Motion” is active, the progress bar does not animate its fill; it updates at discrete 10-second intervals (snaps to the current fill position). The countdown numeric continues to update each second regardless — the countdown is textual, not motion-based. See §6.3.
┌─────────────────────────────────────────────┐│ ││ Forging... ││ Second Tea — brewing ││ ││ ┌─────────────────────────────────────┐ ││ │ [icon] Second Tea [common] │ ││ └─────────────────────────────────────┘ ││ ││ ││ ┌─────────────────────────────────────┐ ││ │ ████████████░░░░░░░░░ 54 s left │ │ <- progress bar + countdown│ └─────────────────────────────────────┘ ││ ││ "do not skip the seal." ││ — Bertranda's note, apprentice pack │ <- flavour / lore beat during forge│ ││ ││ ││ ││ ││ ┌─────────────────────────────────────┐ ││ │ Abort │ │ <- secondary action; returns materials│ │ (returns all materials unused) │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘The lore/flavour beat shown during forging is drawn from recipe.description.en — a short excerpt or flavour line. For Second Tea: Bertranda’s “do not skip the seal” note. For Silver-Vein Tincture: Brodek’s “the forty seconds are for the alchemist’s nerve.” This is the same flavour-during-wait principle as combat lore beats (11e-1 §5 encounter text). It serves cognitive load reduction: the Walker has something to read while the forge timer counts, without it being interactive.
4.2 Outcome card — success
When the forge timer completes and the success roll passes, the full-screen outcome card slides up (inheriting the combat-screen outcome card pattern from 11e-1 §5 state 5 and 11e-2 quest completion overlay). The slide-up animation is suppressed when OS “Reduce Motion” is active (card appears immediately at full opacity per 11e-2 §4.5).
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ Second Tea — brewing │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ [icon] Second Tea [common] │ ││ │ │ ││ │ Crafted. │ ││ │ │ ││ │ The tin is sealed. Half a │ ││ │ day's warmth, guaranteed. │ ││ │ │ ││ │ "Of the three, the only │ ││ │ one that walks." │ │ <- item.flavour.en│ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ + 1 x Second Tea added to pack │ ││ │ + 12 hp on use │ ││ └──────────────────────────────────────┘ ││ ││ ││ ┌──────────────────────────────────────┐ ││ │ Continue │ │ <- primary CTA, returns to browser│ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘4.3 Outcome card — failure (non-punitive)
When the forge timer completes and the success roll fails, the outcome card uses non-punitive language consistent with D-010 philosophy extended to crafting (same principle as combat defeat: “you fall back, bruised” — no XP loss, no streak penalty, language frames the outcome as a natural setback not a punishment). The material consumption on failure is not decided here (mechanics-designer has a FLAG_LEAD on this in both 12b-1 recipe files); the UI presents the failure outcome and does not show materials “lost” — it shows “Try again” framing.
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ Silver-Vein Tincture │ ││ │ Third-register protocol │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ The decoction goes cloudy. │ ││ │ The silver threads disperse │ ││ │ before the seal. │ ││ │ │ ││ │ (The protocol holds. Try again │ ││ │ when the conditions are right.) │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ No phial produced. │ ││ │ Materials consumed: see recipe. │ │ <- material loss is not emphasized│ └──────────────────────────────────────┘ ││ ││ ││ ┌──────────────────────────────────────┐ ││ │ Try Again │ │ <- primary CTA, returns to drill-down│ └──────────────────────────────────────┘ ││ ┌──────────────────────────────────────┐ ││ │ Back to Recipes │ ││ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Failure copy rules:
- No “you failed” or “craft failed” phrasing. The subject is the decoction / the material / the process, not the Walker.
- A lore-consistent explanation: for Second Tea, over-steeping the mint (“The mint oils burn off at the lip of the tin.”). For Silver-Vein Tincture, the silver threads dispersing before the seal (per recipe description: “the leak-touched material has a regional affinity… unstable outside its region”).
- A mechanical reassurance in parentheses: neutral, no blame. “(Try again when the conditions are right.)” or “(The seal can be re-attempted.)”
- Primary CTA is “Try Again” (not “Ok” or “Dismiss”) — forwards momentum.
4.4 Outcome card — abort
When the Walker taps “Abort” during the forge in-progress state:
┌─────────────────────────────────────────────┐│ ││ ┌──────────────────────────────────────┐ ││ │ Second Tea — brewing │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ │ ││ │ Forge stopped. │ ││ │ │ ││ │ All materials returned to pack. │ ││ │ Nothing lost. │ ││ │ │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ Back to Recipes │ ││ └──────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Abort returns all materials unconsumed. The outcome card is brief: no lore text, no blame, just confirmation that the pack is intact. This keeps abort unambiguously safe and non-punitive.
5. State machine (Mermaid)
stateDiagram-v2 [*] --> browser_empty : Walker opens Craft tab (no recipes yet) [*] --> browser : Walker opens Craft tab (recipes available)
browser_empty --> browser : Cech apprentice pack issued (first recipe granted)
browser --> drilldown_locked : tap locked recipe row drilldown_locked --> browser : tap back / swipe right
browser --> drilldown_available : tap available recipe row drilldown_available --> browser : tap Back to Recipes
drilldown_available --> confirm_chip : tap Start Craft (first tap) confirm_chip --> drilldown_available : chip timeout (2s) or tap-away (no action) confirm_chip --> forge_in_progress : second tap within 2s (confirmed)
forge_in_progress --> abort_card : Walker taps Abort abort_card --> browser : Walker taps Back to Recipes
forge_in_progress --> outcome_success : timer completes + success roll passes forge_in_progress --> outcome_failure : timer completes + success roll fails
outcome_success --> browser : Walker taps Continue outcome_failure --> drilldown_available : Walker taps Try Again outcome_failure --> browser : Walker taps Back to Recipes
note right of browser Filter chips persist across session. Locked recipes always visible (hidden-slot pattern from 11e-2 §5.3). No recipes → empty state with directional copy (Bertranda's pack). end note
note right of drilldown_available Three-zone layout (11e-1 + 11e-2). Ingredients show have/need numeric pair. Leak-tier diagonal stripe overlay on ingredients with leakTier > 0. Success rate card: base + stat preview. Two-tap confirm prevents accidental forge. end note
note right of forge_in_progress Progress bar + countdown. Lore beat from recipe description shown. Abort always available; returns materials unconsumed (non-punitive per D-010 ext). Reduced-motion: bar snaps at 10s intervals; countdown numeric updates each second. end note
note right of outcome_failure D-010 non-punitive philosophy extended to crafting failures. Subject is the material / process, not the Walker. Material consumption on failure: deferred to mechanics-designer (12c). Primary CTA "Try Again" forwards momentum. end note
note right of drilldown_locked Locked state shows reason text + region/faction/keystone badge. Region badge always visible (actionable hint: "travel here to unlock"). No navigation into the recipe from locked state — back only. end note6. Accessibility
6.1 Walking-specific baseline
| Check | Answer |
|---|---|
| One-handed while walking | PASS — recipe browser rows are full-width, 72dp min-height, centered in the lower 70% of the screen. The primary “Start Craft” CTA in the drill-down is full-width in the bottom 30% of the screen (56dp height). Filter chips in the browser are horizontally scrollable — the player need not reach all chips to use the screen; the list is usable with the default “all recipes” view. “Back to Recipes” and “Abort” are both in the bottom action zone at 48dp+ height. The two-tap confirm does not require precise timing — the 2-second window is generous for a walking user. |
| Glance 2 seconds | PASS — on the browser, each recipe row reads as: icon + name + tier badge + chips + success rate. The most important elements (name, success rate) are in the largest type on the row. On the drill-down, the output item preview (top zone) shows the item name at --type-h1 and the final success rate at --type-h2 weight — the two things the Walker needs before deciding to forge. On the forge in-progress screen, the progress bar and countdown are the dominant visual elements. |
| Tap target 48dp | PASS — recipe rows 72dp min-height; “Start Craft” 56dp; “Back to Recipes” and “Abort” 48dp; filter chips 36dp height but in a horizontally scrollable row — chips are secondary affordances and the row itself has adequate touch area with 8dp vertical padding above and below the chip row. |
| Color contrast 4.5:1 body | PASS — see §6.2. |
| Font scale 200% | PASS — see §6.4. |
| Audio/haptic alternatives | PASS — see §6.3. |
6.2 Leak-tier color-blind accommodations
The diagonal stripe overlay on leak-tier ingredients (§3.3) is the primary visual signal for leak presence. This is an intentional extension of the 11e-1 §8.2 diagonal-stripe urgency pattern (hp bar at warning threshold). The leak-tier overlay avoids relying on color alone:
Tier 1 (touched — leakTier 1, e.g. Vigil-Bound Soot):
- Fine diagonal stripes on the ingredient row background (8dp spacing, 1dp stroke width)
- Stripe color:
--color-border(#3a3730) — low-contrast, subtle texture - No color change to text or badge
- Screen reader: ingredient name is announced as “Vigil-Bound Soot — leak-touched (tier 1)”
Tier 2 (infused — leakTier 2, e.g. Silver-Veined Frost):
- Medium diagonal stripes (4dp spacing, 1.5dp stroke width)
- Stripe color:
--color-region-frostlands(#7fb8d4) at 40% opacity — the regional accent implies the frost leak affinity - A small “LEAK 2” badge at top-right of the ingredient row in
--type-caption,--color-region-frostlands - Screen reader: “Silver-Veined Frost — infused leak (tier 2). Handle with care.”
Tier 3 (corrupted — leakTier 3, not yet in data but must be specced):
- Coarse diagonal stripes (3dp spacing, 2dp stroke width) +
--color-warning(#e0a843) at 15% opacity background tint - A “LEAK 3” badge in
--color-warningat--type-caption - Screen reader: “Corrupted material — leak (tier 3). Quest-bound.”
Color-blind safety rule: The stripe pattern is the primary channel; color (blue tint for tier 2, amber tint for tier 3) is secondary reinforcement only. A user who cannot distinguish blue from the dark background will still see the stripe pattern and the text badge. A user in a high-ambient-light environment (walking outdoors) will still see stripe density change across tiers. This extends the three-channel principle from 11e-1 §8.2 (texture + color + text) to leak-tier display.
Success rate urgency colors on the drill-down: The final success rate numeral uses the same --color-success / --color-warning / --color-error ramp as hp bars (11e-1 §2.1), with numeric always adjacent. The numeric is the primary channel; the color is the secondary urgency indicator. Color-blind users read the percentage number, not the hue.
Tier badge colors for item output: common tier badge uses --color-on-surface-muted (neutral). magic tier badge uses --color-region-passage-arc (#9b7fc4). Differentiation relies on the text label (“common”, “magic”) as the primary signal; color is secondary. A user who cannot distinguish violet from gray reads the label. Do not express tier exclusively through color.
6.3 Haptic, sound, and reduced-motion
Haptic and sound cue mapping:
| Event | Haptic | Sound | Notes |
|---|---|---|---|
| Forge confirmed (second tap) | Medium impact | Neutral confirm tone | Walker chose to proceed; positive but not celebratory |
| Forge in progress (tick) | None | Ambient background tone (opt-in, off by default) | The forge is passive; no haptic during progress |
| Forge complete — success | Heavy impact + success pattern (3-step, per design-system §5.6) | Forge-complete chime (distinct from quest-complete; shorter, more mechanical) | Inherits quest-completion haptic scale from 11e-2 §4.4 |
| Forge complete — failure | Error pattern (double-tap, short) | Low resolve tone (not punishing — same tone register as combat defeat in 11e-1 §8.3) | Non-punitive: the haptic should not feel like a penalty |
| Abort confirmed | Single medium tap | Neutral abort tone | Walker chose this; no negative affect |
| Insufficient materials (disabled CTA) | None (button is disabled) | None | No haptic for non-interactive elements |
| Leak-tier ingredient scroll into view | None | None | Haptic for visual overlay would be distracting during a walk |
All haptic and sound events are opt-out per design-system §5.6 (default-on, toggle-off in settings).
Forge progress bar — reduced-motion behavior:
When OS “Reduce Motion” is active:
- The forge progress bar does not animate its fill continuously. It updates at discrete 10-second intervals (snapping to the current fill fraction).
- The countdown numeric (“54 s left”) updates every second regardless — the numeric is the primary real-time signal; motion is secondary.
- The forge outcome card (success or failure) appears immediately at full opacity without the slide-up transition. Content is identical.
- The drill-down push navigation: cross-dissolve instead of slide-push (per 11e-2 §4.5 reduced-motion pattern).
Screen-reader live region for forge completion:
The forge outcome (success or failure) is announced as an aria-live="assertive" live region:
- Success: “Second Tea crafted. 1 item added to pack.”
- Failure: “Craft did not complete. The decoction went cloudy. No phial produced.”
- Abort: “Forge stopped. All materials returned.”
The live region fires when the outcome card appears — the Walker who is mid-walk and not watching the screen gets the announcement through their screen reader or text-to-speech system. "assertive" priority is used because forge completion is a time-proximate, high-relevance event (the Walker started this action and is waiting for its resolution).
Forge in-progress state: a secondary aria-live="polite" region announces progress at 25% intervals: “Forging: 25% complete.” / “50%” / “75%” / “Complete.” The polite priority avoids interrupting other content while the bar fills.
6.4 Font scaling at 200%
Recipe browser at 200%:
- Recipe row name at
--type-body-lg(16px) grows to ~32px. Two-line recipe name wraps to three. Row height grows viamin-height: 72dp— the row expands, does not clip. - Filter chips at
--type-caption(12px) grow to ~24px. Chips usefit-contentwidth with horizontal padding — the filter chip row is horizontally scrollable; individual chips never clip their label. - Success rate “90%” at
--type-captiongrows to ~24px. It is right-aligned; at 200% it may force the name to wrap earlier. This is acceptable — the name always wraps before clipping.
Drill-down at 200%:
- Item name at
--type-h1(24px) grows to ~48px. The top zone stacks vertically: icon then name then modifiers. The top zone must usemin-heightnot a fixed height. - Ingredient rows: have/need count (“2 / 3”) at
--type-body(14px) grows to ~28px. The row has two text columns (name left, count right). At 200%, the row switches to a stacked layout: name on one line, count + badges on the next line. This is a flex column fallback — the same pattern as the 11e-2 §4.3 region badge stacking rule. - Success rate card: the final rate numeral at
--type-h2(18px) grows to ~36px. The card expands vertically; no fixed height on the card.
Forge in-progress at 200%:
- Progress bar remains at its visual height (8dp, not font-scaled). The countdown text at
--type-body(14px) grows to ~28px. The bar and text stack vertically (bar above, countdown below) — the countdown text does not sit inside the bar.
7. Style inheritance from 11e-1 and 11e-2
The following table confirms inheritance from 11e-2 §6 (which enumerates what 12d should inherit) and notes the one deviation:
| Pattern | Source | Inherited by crafting screen | Notes |
|---|---|---|---|
| Three-zone layout (status / content / actions) | 11e-1 §2, 11e-2 §2.2 | INHERITED — browser uses filter chips in status zone; drill-down uses output preview in top zone; action zone holds CTA buttons | Same structural principle; content in zones differs per screen purpose |
| Progress bar + numeric pair | 11e-2 §5.3 (rep bar pattern) | INHERITED — ingredient have/need count is always a numeric pair; success rate card always shows numeric; forge progress bar shows countdown numeric | The bar-alone pattern is never used where the value is player-relevant state |
| Collapsed-by-default secondary section | 11e-2 §5.3 (completed quests) | INHERITED — craft history (past recipes, future feature) will be collapsed by default when added; locked recipes are visible but not expandable (no collapse needed — they are single-row rows, not section lists) | |
| Faction-accent chip | 11e-2 §5.3 (rival chip, faction tier pill) | INHERITED — faction-gated recipe chip uses faction accent color bg + --color-bg text, same spec as faction tier pill | |
| Full-screen outcome card | 11e-1 §5 (victory/defeat), 11e-2 (quest completion overlay) | INHERITED — forge success and failure both use the full-screen outcome card with: recipe name, outcome headline, item summary / failure narration, single primary CTA | |
| Opt-in chip (tap to reveal detail) | 11e-1 §3.1 (hit/crit chance chip) | INHERITED for future use — recipe success rate formula details (“tap to see crafting stat formula”) will use the same chip mechanism when 12c wires the crafting stat. Not active in 12d mid-state because crafting stat does not exist yet. | |
| Hidden-slot pattern | 11e-2 §5.3 (hidden quest slot) | INHERITED — locked recipes show ”???” with gate type badge and reason text, always visible. Region badge visible on locked rows (actionable hint). | |
| Audio/haptic multi-channel notification | 11e-1 §8.3 (combat crit: text + flash + haptic), 11e-2 §4.4 (tier-up) | INHERITED — forge success uses: outcome card text + heavy haptic + forge-complete chime (three channels) | |
| Diagonal stripe urgency texture | 11e-1 §8.2 (hp bar at warning threshold) | EXTENDED — the stripe pattern is extended to leak-tier ingredient overlays. New application: stripe density = leak tier (tier 0 = no stripe, tier 1 = fine, tier 2 = medium, tier 3 = coarse + amber tint). The pattern principle is the same (texture communicates urgency without relying on color alone); the semantic is new (material danger vs. hp danger). | NEW SEMANTIC on existing pattern |
| State pill (colored background + text label) | 11e-1 §2.5 (YOUR TURN/ENEMY TURN), 11e-2 §2.1 (tier name pill) | INHERITED — active filter chips use --color-success bg; region gate banner uses --color-region-* bg; item tier badges use tier color bg | |
| Non-punitive outcome framing | 11e-1 §5 state 4 (defeat: “you fall back, bruised”), 11e-2 §2.3 (tier loss: silent) | EXTENDED — crafting failure uses subject-is-the-material framing, not Walker-failure framing. “The decoction goes cloudy” not “You failed to craft.” Primary CTA is “Try Again” not “Dismiss.” | D-010 philosophy extended |
| Reduced-motion behavior | 11e-2 §4.5 | INHERITED — no slide animations, cross-dissolve navigation, immediate outcome card appearance. Forge progress bar exception: snaps at 10s intervals rather than animating continuously. |
New patterns introduced in this document (to be added to design-system.mdx in a future commit):
-
Leak-tier diagonal stripe overlay. A tiered stripe texture pattern on ingredient/material rows communicating leak intensity (leakTier 0 = no texture, tier 1 = fine 8dp stripes, tier 2 = medium 4dp stripes + regional accent tint, tier 3 = coarse 3dp stripes +
--color-warningtint). Stripe is always layered over the surface background, never replacing text or icon legibility. Color is secondary to stripe density. -
Two-tap forge confirm (inline chip). The “Start Craft → confirm chip → second tap” sequence. The chip appears above the CTA button, reads “Confirm craft? Tap again to start”, persists 2 seconds, dismisses on timeout or tap-away. No movement of surrounding layout elements on chip appearance. Identical mechanism to 11e-1 retreat confirmation; extended here to the forge action.
-
Success rate urgency ramp. The final success rate numeral in the drill-down uses
--color-successat 70-100%,--color-warningat 50-69%,--color-errorat 0-49%. Matches the hp urgency ramp tokens from 11e-1 §2.1. New in this document: the same tokens applied to a probability display rather than a resource bar. -
Lore beat during forge. A flavour/lore line from
recipe.description.en(oritem.flavour.en) shown during the forge in-progress wait. Static text, not interactive. Serves cognitive load reduction for the waiting Walker. No equivalent exists in combat-screen or faction screens (combat is too fast; faction screens are navigational). First introduction here. -
Harvest method badge on ingredient row. A small text badge in
--type-caption,--color-on-surface-mutedshowing how the material is sourced (field-find / extract / distill / trade-only / scavenge). Surfacesmaterial.harvestMethodon the crafting UI — gives the Walker a sourcing cue before they are out of stock.
8. What 11d-2 / 12c integrate — data shapes consumed
The crafting UI is a consumer of data authored in other phases. This section enumerates the exact fields the UI reads so that backend-engineer (when wiring the craft tab in Phase 13) and mechanics-designer (12c) know what the mobile-developer needs.
From recipe.ts (RecipeSchema)
| Field | UI consumer | Phase when wired |
|---|---|---|
successRate | Success rate card — base rate numeral | 12d (this page) |
successStatScaling.stat | Success rate card — “Your crafting” label | 12c (when stat exists) |
successStatScaling.perPoint | Success rate card — bonus calculation | 12c |
craftTimeSec | Craft time row; forge progress bar duration | 12d (this page) |
originRegionId | Region chip on browser row; region gate banner on drill-down; locked overlay reason text | 12d |
requiredFactionId + requiredFactionTier | Faction chip on browser row; locked overlay reason text | 12d (chip; faction rep system wired in 11d-2 / 11c-2) |
requiredKeystoneId | Keystone chip on browser row; locked overlay reason text | 12d (chip; keystone allocation wired in Phase 13) |
kind | Filter chip group (“craft” / “harvest”) | 12d |
output | Item preview card in drill-down; outcome card | 12d |
inputs | Ingredient list rows | 12d |
From material.ts (MaterialSchema)
| Field | UI consumer | Phase when wired |
|---|---|---|
leakTier | Diagonal stripe overlay on ingredient row; leak badge text | 12d (spec), 12c (yield curves that determine how much the Walker has) |
originRegionId | Origin region badge on ingredient row | 12d |
harvestMethod | Harvest method badge on ingredient row | 12d |
name.en | Ingredient row label | 12d |
From walker profile (server-side, not yet a schema surface in 12d)
| Field | UI consumer | Phase when wired |
|---|---|---|
walker.crafting (stat) | Success rate card — “Your crafting” stat value and bonus preview | 12c (when crafting stat is added to the stat dictionary per formulas.md §3) |
walker.inventory[materialId].qty | Ingredient row have-count | Phase 13 (mobile inventory state) |
walker.inventory[itemId].qty | Ingredient row have-count for item inputs | Phase 13 |
From leak-harvest spec (12c — not yet exists)
[leak-harvest spec — 12c, see wiki/src/content/docs/crafting/leak-harvest.md]
When 12c ships, the crafting UI expects the following additional data shapes to be surfaced:
- Harvest yield curves — how many of a given material the Walker has based on step count and region presence. The ingredient have-count on the drill-down reads from the Walker’s inventory, which 12c populates via harvest yields.
craftingstat — if 12c addscraftingto the formulas.md §3 stat dictionary, the success rate card readswalker.craftingandrecipe.successStatScaling.perPointto compute the live bonus preview. The UI for this is already designed (§3.4 — the “Your crafting” row with stat preview).- LeakTier overlays at tier 3 — the tier 3 overlay spec (coarse stripes + amber tint + “LEAK 3” badge) is pre-designed in §6.2 of this document pending 12c’s first leakTier-3 material.
- Harvest recipe kind (
recipe.kind: "harvest") — harvest recipes from 12c appear in the browser under the “harvest” filter chip. Their drill-down will differ: no ingredients list (or a minimal “region presence required” row instead of ingredient quantities); success rate card shows yield formula instead of craft formula. The drill-down state machine handles this as a variant of the craft drill-down; the mobile-developer should branch onrecipe.kindwhen rendering the content zone.
9. Open questions for CEO
A. Craft tab position in the bottom nav (W-level as specified, raising for CEO awareness)
This document adds a fifth tab (“Craft”) to the bottom tab bar: Home / Tree / Factions / Quests / Craft. The current tab bar from 11e-2 §1 shows: Home / Tree / Factions / Quests / Map. This design replaces “Map” with “Craft” in the tab bar, demoting “Map” to a secondary navigation surface (accessible from Home or from within quests). The rationale: crafting is a primary loop action (Pillar 1 materials, Pillar 2 tree gates, Pillar 3 keystone reveals); Map is exploratory and accessed less frequently per session. This is a W-level layout decision but it changes the global IA, which the CEO should be aware of. Recommendation: keep this layout. Alternatively, the CEO could ratify a six-item nav (non-standard but usable on 375pt screens at 48dp each) if Map must remain at top level. A/B: keep five tabs and demote Map — simpler; fewer tab targets reduces walking-mode tap errors.
B. Material consumption on craft failure — UI implications
Both 12b-1 recipe files carry a FLAG_LEAD: mechanics-designer on whether a failed craft consumes inputs, returns partial inputs, or downgrades to a lesser product. This document treats the failure outcome as “No [item] produced. Materials consumed: see recipe.” — it does not prominently display what was lost, consistent with non-punitive framing. If mechanics-designer decides that failed crafts return some or all materials, the failure card wording changes to “No phial produced. [N] materials returned.” which is more explicit and arguably more player-friendly. Recommendation: wait for mechanics-designer’s 12c ruling, then update the failure card copy. The UI structure is the same regardless of outcome; only one line of copy changes. Do not block 12d on this ruling.
C. Forge timer UX during background / lock-screen
The forge progress bar counts down in real time (90 seconds for Second Tea, 240 seconds for Silver-Vein Tincture). The UX when the player locks their phone mid-forge is unspecified. Options: (a) forge timer continues in the background and a push notification fires on completion; (b) forge timer pauses when the app is backgrounded and resumes on return. Option (a) matches the walking-RPG ethos (the Walker queued the craft and walked away; the craft completes while they walk) and makes 90-240 second timers feel natural rather than requiring the player to stare at a progress bar. Option (b) is simpler to implement. Recommendation: (a) background continuation with push notification on completion. This requires a backend-engineer Phase 13 task (push notification for forge-complete). If push notifications are deferred, fall back to (b) until they are wired.