Skip to main content

​
Price ladder

A vertical book of one outcome’s price levels where you place, move and cancel orders. The same component appears in the desktop ladder dock (232 px column), in the market view, inline in an expanded portfolio row, and as the mobile bottom sheet. Phase 1 ships it read-only: same layout, clicks do nothing, no cursor tag, header actions hidden.

​
Model

  • Fixed levels. One row per tick from the lowest to the highest valid price (tick 0.01 → 99 rows, 1¢ to 99¢; tick 0.001 → 999 rows). Prices descend top to bottom. A price’s row never moves; the book moves across the rows. Virtualised with a fixed row height (--ladder-row-h).
  • Columns: P&L-if-closed, Bid, Price, Ask. Bid sizes appear at levels at or below the best bid; ask sizes at or above the best ask. Rows in between are the spread.
  • Clicking a Bid cell buys at that row’s price; clicking an Ask cell sells. The colour of the column is the side you trade (tokens.md, “The colour rule”). A click at or through the touch fills against the book; the order is still a GTC limit at exactly that price.

​
Desktop column (232 px wide, full dock height)

At 1440 × 900 with the bottom dock collapsed, the body shows about 22 levels (820 − 196 px of header, column header and footer, at 28 px rows; a game market’s score line takes 24 px more). Status line contents, highest priority first. It shows one at a time; the delay text sits on the right whenever the market has an in-play delay.

​
Rows (28 px)

  • Depth bar length = level size ÷ the largest level within 20 ticks of the touch, capped at 1. It never tweens.
  • Sizes and chips are compact in at most four characters (1.2k, 12k, 66.7), so a chip (at most 28 px) and a size (at most 27 px) fit a 64 px cell side by side; the exact sizes are in the row’s accessible label and the orders table.
  • Several of your orders at one level: one chip with the total. In the 64 px cells a second edge behind the chip, offset 2 px towards the cell’s outer corner, marks it, and the tooltip says 2 orders; the phone sheet’s wider cells show ×2 after the size.
  • Row states (hover, spread, stale, drag target) are in components.md.
Stake $25 with [chevron-down] (a select: opens the preset list; same global stake as the top bar), Last 42¢, and the re-centre button [crosshair] (icon button, --control-h).

​
Centring

  • On open: centred instantly on the midpoint (or the last trade when one side is empty).
  • Manual: [crosshair] button or Space (focused ladder). Instant jump, no smooth scroll.
  • Automatic (desktop only): when the best bid or best ask comes within 3 rows of the visible edge or leaves the view, the ladder re-centres instantly, only if the pointer is not over the ladder and no drag is in progress. While the pointer is over it, the ladder stays put and an edge pill appears instead.
  • Edge pill: 24 px, --popover, at the top or bottom of the body: [arrow-up] Best ask 58¢ or [arrow-down] Best bid 41¢. Clicking it re-centres.
  • Mobile: never re-centres by itself after opening. Only the edge pill and [crosshair].
  • Tick size change: the level grid is rebuilt. If the pointer is over the ladder (or a finger touched it in the last 1.5 s), the rebuild waits and the status line says so. Then it rebuilds and re-centres on the midpoint.

​
Interactions

All input semantics are in interactions.md. In short: Accessibility: each Bid and Ask cell is a <button> with a name such as Buy at 42 cents, stake $25, bid size 1,200. The body uses a roving tabindex so the ladder is one tab stop.

​
Mobile bottom sheet (390 × 844)

Opens from a board card, watchlist row or portfolio card. The sheet’s top sits under the mobile header (y = top inset + 52), so Safe/Armed and Cancel all stay visible.
  • About 11 levels visible at 44 px rows on a 390 × 844 screen.
  • Row 1 has no market label: the outcome switch takes the width beside [ellipsis] and [x], with full outcome names. Row 2 buttons are 44 px tall. [ellipsis] opens an action sheet: Hedge, with its quote or the reason it is unavailable on the line under it, and Open market. Long-press a level for Set alert at 42¢.
  • Gestures: the body scrolls natively; only the handle and header drag the sheet (vaul with handle-only dragging), so scrolling never dismisses it. Tap, long-press and the order bar are in interactions.md.
  • The order bar overlays the bottom of the body instead of pushing it, so rows do not move when it appears.
  • Closing: [x], swipe down on the handle/header, or the system back gesture.
  • Delay, pre-game and wipe states use the same status line as desktop.

​
Stale, trading off and Safe