UI Reference

Reference layout based on the original CritDice advanced dice bag screenshot.

Screen Structure (top to bottom)

Top navigation tabs: Dice bag (calculator), Favorites, Roll History — each a separate view accessible via tab icons.
Notation display: Large text showing the current dice expression as the user builds it (e.g. 2d20kh+10). Includes a clear (X) button.
Human-readable explanation: Smaller text below the notation explaining what will happen (e.g. “Roll 2 d20’s (keep the highest roll) and add 10.”). Updates live as input changes.
Dice buttons: Two rows of color-coded dice type buttons. Top row: dN (custom), d100, d20, d12, d10. Bottom row: d8, d6, d4, d3, d2, dF. Colors differentiate at a glance — warm tones (red/orange/yellow) for smaller dice, cool tones (blue/green/purple) for larger. FlowDice adds d% alongside d100.
Number pad: Standard 0–9 grid plus +/- modifier buttons.
Operator rows: CritDice has two rows for advanced operators (K, X, R, !, ≤, ≥ and k, x, r, !!, !p, f). FlowDice replaces these with: kh, kl, c, C, ->, and the Text Input toggle. Buttons gray out when not valid for the current input state.
Action bar: Full-width ROLL button (prominent, easy to tap), flanked by clear (X) on the left and favorite (heart) on the right.

Material Design language — flat, clean, no skeuomorphism
Color-coded dice buttons for instant visual differentiation
Context-sensitive button states — invalid operators fade/disable based on current input
Live notation + explanation as the user builds the expression
Large, readable result popup visible to the whole table
Optimized for one-handed use in portrait mode — all controls reachable by thumb

d% button for percentile pair rolls
kh/kl buttons replace CritDice’s K/k (clearer semantics)
c/C buttons for crit selection
-> button for flow chaining
Text Input toggle to switch from calculator to direct notation entry
Human-Readable Explanations update live (CritDice had this too — carry it forward)
Long-press on Favorites shows Named Parameters toggles