92 lines
5.2 KiB
JSON
92 lines
5.2 KiB
JSON
{
|
||
"_comment": "SHOP UI — the buy/sell (and buyback) screen over the shop clip (data/shopui.json). LAYOUT: the two 4×4 grids sit side by side (SELL = the player's cargo bays on the LEFT, BUY = the shop's stock on the RIGHT), a center column carries the live NET preview + Confirm/Clear, and a tab bar up top toggles Buy/Sell ↔ Buyback (Buyback is disabled until the player has SOLD something this session). The panels are semi-transparent so the shop clip shows through; items + text are full alpha. CELLS show the good's ICON only — the name + price appear in a hover TOOLTIP (→ tooltip) instead of over the icon. GEOMETRY (slot/gap/gridCols/gridRows/centerW) is primitives the code (js/ui/shop/ShopView.js) lays out against the live scene size — not pixel positions. The ECONOMY itself (prices, stock) is Economy.js + data/goods.json + data/economy.json; this file is only presentation.",
|
||
"enabled": true,
|
||
|
||
"tabs": {
|
||
"_comment": "The tab sub-bar (two MenuButtons, the deck's cyberpunk style — js/ui/MenuButton.js). Buy/Sell opens the trade panel; Buyback opens the buyback panel (goods sold this session, session-local only). Size/palette come from data/save.json → subBar + colors (the Menu sub-bar recipe); this section just holds the labels + Buy/Sell accent. The sub-bar rests above the command deck, anchored to the deck's Shop button (SurfaceScene.shopAnchor).",
|
||
"buySell": "Buy/Sell",
|
||
"buyback": "Buyback",
|
||
"w": 184, "h": 46, "gap": 14,
|
||
"y": 44,
|
||
"activeAccent": "#00e5ff",
|
||
"disabledAlpha": 0.34
|
||
},
|
||
|
||
"panel": {
|
||
"_comment": "The semi-transparent panel behind each side's grid — the shop clip shows through it (bgAlpha < 1) but the goods + labels sit at full alpha on top.",
|
||
"bgColor": "#0a1120",
|
||
"bgAlpha": 0.70,
|
||
"border": "#22405f",
|
||
"pad": 16,
|
||
"title": { "fontSize": 21, "color": "#eaf6ff", "h": 34 }
|
||
},
|
||
|
||
"grid": {
|
||
"_comment": "The 4×4 grid shared by both sides (data/economy.json → cargo.maxSlots = 16 slots). SELL: the first `capacity` cells are live cargo bays (one good each), the rest are locked (the hold's upgrade room). BUY: the shop's stock (12–16) fills the first N, the rest are empty.",
|
||
"cols": 4, "rows": 4,
|
||
"slot": 96, "gap": 10,
|
||
"centerW": 208
|
||
},
|
||
|
||
"slot": {
|
||
"_comment": "A single bay/stock cell. `bg` is the cell plate, `selected` the SELL-check highlight (a bay marked to sell), `stepper` the BUY quantity control. `lockAlpha` dims the locked/empty cells. `iconScale` sizes the good icon, which now fills the cell (the name + price live in the hover tooltip, not over the icon). `name`/`price` colors still apply — they feed the tooltip's name/price lines + the buy stepper. Colors follow the theme (cyan selection, gold buy, green sell, magenta = bad).",
|
||
"bgColor": "#0e1728",
|
||
"border": "#1d2e4c",
|
||
"selected": "#00e5ff",
|
||
"lockAlpha": 0.30,
|
||
"iconScale": 0.62,
|
||
"name": { "fontSize": 11, "color": "#eaf6ff" },
|
||
"price": { "fontSize": 12, "sell": "#7ce8a4", "buy": "#ffc94d" },
|
||
"emptyLabel": "—",
|
||
"lockLabel": "locked"
|
||
},
|
||
|
||
"tooltip": {
|
||
"_comment": "The hover tooltip — one per grid (shared), revealed when the pointer is over a usable cell: the good's NAME + the price line (\"sell for N cr\" / \"buy for N cr\"). Anchored above the cell, or below when there's no room (top row); centred on the cell, clamped to the panel. Size/palette follow the theme; text is the body face (Centauri).",
|
||
"bgColor": "#0a1120",
|
||
"bgAlpha": 0.96,
|
||
"border": "#22405f",
|
||
"pad": 10,
|
||
"gap": 8,
|
||
"nameFontSize": 14,
|
||
"priceFontSize": 13
|
||
},
|
||
|
||
"stepper": {
|
||
"_comment": "The BUY-side quantity stepper (− n +). Clicking −/+ adjusts that good's buy quantity; the live preview recalcs. The sell side is bay-based (each bay = 1 unit, tap to check), so it has no stepper.",
|
||
"fontSize": 19,
|
||
"color": "#eaf6ff",
|
||
"btn": "#7d92c4",
|
||
"activeColor": "#00e5ff"
|
||
},
|
||
|
||
"preview": {
|
||
"_comment": "The live NET-credits readout in the center column. Positive (you're up) = green, negative (you'd spend past your credits / it's a net spend) = the value shown; the Confirm button is disabled while the trade is invalid (can't go negative, hold overflows).",
|
||
"label": "NET",
|
||
"labelColor": "#7d92c4",
|
||
"labelFontSize": 13,
|
||
"valueFontSize": 34,
|
||
"posColor": "#7ce8a4",
|
||
"negColor": "#ff2d6f"
|
||
},
|
||
|
||
"buttons": {
|
||
"_comment": "Confirm (execute the trade) + Clear (reset this side's selection) — they appear once the player starts checking/stepping items. `disabled` dims Confirm while the trade is invalid. `back` is a reserved return-to-menu label (the deck's Leave Shop is the real exit). Separate *Label (text) and *Accent (color) keys so they don't collide.",
|
||
"w": 158, "h": 54,
|
||
"confirmLabel": "Confirm",
|
||
"clearLabel": "Clear",
|
||
"backLabel": "‹ Menu",
|
||
"accent": "#00e5ff",
|
||
"confirmAccent": "#7ce8a4",
|
||
"clearAccent": "#7d92c4",
|
||
"disabled": "#7d92c4"
|
||
},
|
||
|
||
"animation": {
|
||
"_comment": "Reveal: the SELL grid slides in from the left, the BUY grid from the right, the center column fades up (data/shopui.json → animation). A short stagger per row keeps it feeling assembled rather than popped.",
|
||
"slideMs": 340,
|
||
"staggerMs": 26,
|
||
"ease": "Cubic.Out"
|
||
}
|
||
}
|