- Rows that spill past the viewport edge used to render whole, ghosting over
the BUY title or onto the Confirm bar; now only elements fully inside the
window render (this Phaser build can't crop glyphs), and row plates draw
just their in-window slice for a clean cut.
- Clipped-out steppers are no longer tappable: hit-testing gates on element
containment, not just row visibility.
- Add a right-edge scrollbar (track + drag/jump thumb) that tracks scroll
position and hides when content fits the viewport.
- Extend shop-shot/dev tests to verify the clip invariant, dead-click
behavior, and scrollbar geometry; add a geckodriver screenshot helper.
- Center the row background plate on its own local origin so it no longer double-offsets with the object's world position, eliminating the right/down drift and stretched spacing.
- Switch stepper glyphs to a centered (0.5, 0.5) origin and recompute the tap area live inside hitAreaCallback against the current glyph size, so the box stays centered on the visible button even as qty text re-measures.
- Add dev/shop-shot probes that assert bar fillRect coords and verify plus/minus clicks register on the glyph while a point in the old mis-anchored gap does not.
- Extend landing.json with additional land/surface/takeoff/shop video entries.
The center column is gone: Confirm + Clear move onto the tab sub-bar
([tabs] | [Clear][Confirm] | NET value), serving both the trade and
buyback tabs, so the two panels sit side by side with just a bit of
padding between (grid.centerW 208 -> 16). The row description keeps the
smaller font, word-wraps inside the text column (wrap width stops
before the price), and the char-count budget now spans two lines so the
headless path stays bounded; rowH grows 64 -> 72 to fit both lines.
The buttons persist across tab switches (they were content before and
died with it), Confirm stays grayed while the trade is invalid, and the
stub gains setX/setY so the bar layout is testable.
description + price + stepper) instead of the 4×4 icon grid
Each stock good is now ONE WIDE ROW — the good's icon, its name + a
one-line description (the good's flavor), and the price + a −/qty/+
stepper on the right — the way the user wanted the shop list to read.
The stock (12–16 goods) outgrows the panel, so the list SCROLLS:
drag on the row area or the mouse wheel; rows outside the window are
clipped (row-based alpha clipping — this Phaser build has no
ScrollContainer/camera clip), and hidden rows' steppers are
non-interactive. The selection is data (goodId→qty), so stepping a
good works whether its row is on screen or not.
js/ui/shop/BuyList.js new — the scrollable BUY list (rows, drag +
wheel scroll, per-row steppers, flavor text)
js/ui/shop/TradeGrid.js SELL-only now — the BUY mode (steppers, stock
rendering, buy-selection data) is stripped;
one grid, one purpose
js/ui/shop/ShopView.js composes TradeGrid (SELL) + BuyList (BUY);
the BUY panel sizes itself to the SELL grid's
height (top- AND bottom-aligned)
data/shopui.json buyList row/typography knobs (name, desc,
price, row bg/border, selection accent)
dev/shop-ui.test.mjs BUY assertions rewritten for the list + a new
SCROLL section (scroll clamps, row clipping,
stepping off-screen rows)
dev/shop-shot.mjs BUY probe → the row's inline text (no tooltip)
docs/ECONOMY.md §12 the BUY bullet + mockup now describe the list
The BUY side's name + price used to live in a hover tooltip because a
grid cell is too small for text; a wide row carries them inline, so the
tooltip stays on the SELL side only. All headless suites green
(shop-ui, economy, cargo, builds, ship-behavior).
Brian Fertig