750 lines
34 KiB
JavaScript
750 lines
34 KiB
JavaScript
/**
|
||
* ShopView — the buy/sell (and buyback) screen over the shop clip video.
|
||
*
|
||
* ┌────────────────────────────────────────────────────────────────┐
|
||
* │ ┌SELL 4×4┐ [ Confirm ] ┌────────────────────────┐ │
|
||
* │ │ bays │ [ Clear ] │ [i] Fresh Produce 24cr│ │
|
||
* │ │ (cargo)│ │ Crisp, clean… − 0 +│ │
|
||
* │ └────────┘ │ [i] Refined Fuel 41cr│ │
|
||
* │ │ The lifeblood − 1 +│ │
|
||
* │ │ … (scrolls) … │ │
|
||
* │ └────────────────────────┘ │
|
||
* └────────────────────────────────────────────────────────────────┘
|
||
* ┌────────────────────────────────────────────────────────────────┐
|
||
* │ BUY/SELL BUYBACK ···console··· CLEAR CONFIRM │ NET +420 cr │
|
||
* │ ← spans the FULL command deck (left + right edges) → │
|
||
* └────────────────────────────────────────────────────────────────┘
|
||
*
|
||
* The SELL side (left) is a TradeGrid (js/ui/shop/TradeGrid.js): the
|
||
* player's cargo bays — tap a filled bay to check it off (a bay = 1 unit);
|
||
* locked bays are the hold's upgrade room.
|
||
* The BUY side (right) is a BuyList (js/ui/shop/BuyList.js): the shop's
|
||
* stock as WIDE ROWS — icon + name + one-line description (the good's
|
||
* flavor) + price + a −/qty/+ stepper — SCROLLABLE (drag / wheel) so a
|
||
* full 8–16 stock always fits. The live NET preview (green ≥ 0, red < 0)
|
||
* sits on the TAB SUB-BAR at its RIGHT edge: the tabs pack at the bar's
|
||
* LEFT, the trade actions (Clear + Confirm) and the credit readout pack
|
||
* at the RIGHT — the value right-aligned at the bar's end, so a growing
|
||
* number never shifts the label, the buttons, or the tabs (no overlap).
|
||
* Confirm is disabled while the trade is invalid (can't go negative, hold
|
||
* would overflow). SELL→BUY happens atomically (sell to free room for a
|
||
* buy).
|
||
*
|
||
* BUYBACK (session-local only) — the second tab. After the player SELLs
|
||
* something, the goods they sold are listed here and can be bought BACK —
|
||
* priced at the sale price (a neutral undo, so sell→buyback can't loop into
|
||
* free credits). It disappears when the player leaves the shop (no
|
||
* persistence; data/shopui.json).
|
||
*
|
||
* This component owns the SESSION state (soldThisSession, the active tab, the
|
||
* selection). The PRICING + preview math is js/economy/Economy.js (fixed
|
||
* per-shop prices + tradePreview). The credits/cargo ledger is ship.credits
|
||
* + ship.cargo (CargoHold). Headless-testable: the logic (preview / confirm /
|
||
* clear / buyback) is plain data; the Phaser rendering is best-effort.
|
||
*/
|
||
import Phaser from '../../vendor/phaser.js';
|
||
import { config } from '../../config/Config.js';
|
||
import * as E from '../../economy/Economy.js';
|
||
import { MenuButton } from '../MenuButton.js';
|
||
import { toColor, toCss } from '../../utils/Color.js';
|
||
import { fontStack } from '../../utils/Theme.js';
|
||
import { TradeGrid } from './TradeGrid.js';
|
||
import { BuyList } from './BuyList.js';
|
||
|
||
export class ShopView extends Phaser.GameObjects.Container {
|
||
/**
|
||
* @param {object} scene — the SurfaceScene (or a headless fake).
|
||
* @param {object} o — { ship, galaxy, cls, systemId, gameScene, onLeave }
|
||
* ship — the Ship (credits + cargo).
|
||
* galaxy — the generated galaxy (Economy pricing).
|
||
* cls — the shop's economic class (Economy.economicClass).
|
||
* systemId — this system (the distance term for sell prices).
|
||
* gameScene — to refresh the credits/minerals HUD after a trade.
|
||
* onLeave — called by close() so the SurfaceScene can restore the
|
||
* surface loop (the deck's "Leave Shop" does this too).
|
||
* anchor — { x, y, w, left, right } the sub-bar's anchor: the
|
||
* deck's "Shop" button (x, w — legacy), the deck's
|
||
* top-rail y (the bar's bottom edge rests on it), and
|
||
* left/right — the deck's left/right edges. The bar
|
||
* spans the FULL deck — the same span as the main
|
||
* action bar (see SurfaceScene.shopAnchor).
|
||
*/
|
||
constructor(scene, o) {
|
||
super(scene, 0, 0);
|
||
this.scene = scene;
|
||
this.ship = o.ship;
|
||
this.galaxy = o.galaxy;
|
||
this.cls = o.cls;
|
||
this.systemId = o.systemId;
|
||
this.gameScene = o.gameScene;
|
||
this.onLeave = o.onLeave;
|
||
// The tab sub-bar anchor (the deck's span). Falls back to a
|
||
// bottom-center bar if the scene doesn't provide one (headless/dev).
|
||
this.anchor = o.anchor ?? { x: this._W() / 2, y: this._H() - 58, w: 120, left: 20, right: this._W() - 20 };
|
||
// The trade panel's TOP edge — just under the surface HUD's planet text
|
||
// (the scene computes it from its own hudName/hudLine). Falls back to a
|
||
// small top margin if the scene doesn't provide one (headless/dev).
|
||
this.topY = Number.isFinite(o.topY) ? o.topY : (this._H() * 0.16);
|
||
|
||
this.maxSlots = Math.max(1, Math.floor(Number(config.get('economy.cargo.maxSlots', 16)) || 16));
|
||
this.capacity = this.ship.cargo ? this.ship.cargo.capacity : 0;
|
||
|
||
// --- session state ---------------------------------------------------
|
||
this.tab = 'trade'; // 'trade' | 'buyback'
|
||
this.soldThisSession = []; // [{ id, name, qty, price }] (buyback source)
|
||
this.buybackSel = new Map(); // goodId -> qty to buy back
|
||
this.sellGrid = null;
|
||
this.buyList = null;
|
||
this._content = null; // the active content container
|
||
this._netLabel = null; // the sub-bar NET label (persistent)
|
||
this._netValue = null; // the sub-bar NET value (live)
|
||
this._confirmBtn = null;
|
||
this._clearBtn = null;
|
||
this._tabBuyback = null;
|
||
|
||
this._buildTabs();
|
||
this.enter();
|
||
|
||
// Present in the scene, above the shop clip (depth 10) + deck (50), below
|
||
// toasts. setScrollFactor(0) = screen-fixed (the SurfaceScene is a full
|
||
// overlay). Best-effort so a headless fake scene still constructs.
|
||
this.setScrollFactor?.(0);
|
||
this.setDepth?.(100);
|
||
this.scene.add?.existing?.(this);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// ENTRY + TABS
|
||
// ---------------------------------------------------------------------
|
||
enter() {
|
||
// Entry state: the shop video + tab bar only. The player must click
|
||
// "Buy/Sell" to reveal the trade panel (this keeps the screen open so the
|
||
// shop clip plays before the UI takes over). Buyback is grayed until a
|
||
// sale exists this visit.
|
||
this.tab = null;
|
||
this._refreshTabs();
|
||
return this;
|
||
}
|
||
|
||
isBuybackEnabled() {
|
||
return this.soldThisSession.some((r) => r.qty > 0);
|
||
}
|
||
|
||
setTab(t) {
|
||
if (t === 'buyback' && !this.isBuybackEnabled()) return this; // locked
|
||
this.tab = t;
|
||
this._destroyContent();
|
||
if (t === 'trade') this._showTrade();
|
||
else this._showBuyback();
|
||
this._refreshTabs();
|
||
return this;
|
||
}
|
||
|
||
_buildTabs() {
|
||
// The tab sub-bar: the same recipe as the deck's Menu sub-bar
|
||
// (js/ui/MenuSubBar.js) — a console-blue panel with cut corners + the
|
||
// signature top rail, holding cyberpunk MenuButtons. It rests ABOVE the
|
||
// command deck, right-aligned to the deck's "Shop" button (this.anchor),
|
||
// so it reads as the same family of UI as the Menu drawer.
|
||
//
|
||
// EXTENDED (data/shopui.json → preview + buttons): the trade ACTIONS
|
||
// (Clear + Confirm) and the live NET credit readout ride on the same
|
||
// console, packed at the RIGHT edge —
|
||
// [tabs ···console··· actions] │ [NET value]
|
||
// while the tabs pack at the LEFT edge. One glance sees state, the
|
||
// pending credit delta, and the button that executes it (entry state
|
||
// included, where the actions hide and the readout dims to "0 cr").
|
||
const a = this.anchor;
|
||
const H = config.get('save.subBar.height', 58);
|
||
const pad = config.get('save.subBar.padding', 16);
|
||
const gap = config.get('save.subBar.gap', 12);
|
||
const tabs = config.get('shopui.tabs', {});
|
||
const c = config.section('save.colors', {});
|
||
const btnCfg = config.section('save.subBar.button', {});
|
||
const pv = config.section('shopui.preview', {});
|
||
|
||
const items = [
|
||
{ id: 'trade', label: tabs.buySell ?? 'Buy/Sell', accent: tabs.activeAccent ?? c.neon ?? '#00e5ff' },
|
||
{ id: 'buyback', label: tabs.buyback ?? 'Buyback', accent: c.dim ?? '#7d92c4' },
|
||
];
|
||
|
||
// Build the buttons first (they measure their own width) so the row
|
||
// layout uses the REAL widths — no second, divergent text-measure pass.
|
||
const mkBtn = (label, accent, onClick) => new MenuButton(
|
||
this.scene, 0, -H / 2, String(label), onClick,
|
||
{
|
||
screenFixed: true,
|
||
fontSize: btnCfg.fontSize ?? 13,
|
||
paddingX: btnCfg.paddingX ?? 18,
|
||
paddingY: btnCfg.paddingY ?? 9,
|
||
letterSpacing: btnCfg.letterSpacing ?? 2,
|
||
upper: true,
|
||
textColor: c.ink ?? '#eaf6ff',
|
||
bgColor: c.cardBg ?? '#0a1222',
|
||
hoverColor: c.cardBg ?? '#0a1222',
|
||
borderColor: toCss(accent ?? c.neon ?? '#00e5ff'),
|
||
},
|
||
);
|
||
|
||
const btns = items.map((it) => mkBtn(String(it.label ?? it.id), it.accent, () => this._onTabTap(it.id)));
|
||
const widths = btns.map((b) => b.style?.width ?? 120);
|
||
const tabsW = widths.reduce((s, w) => s + w, 0) + gap * (widths.length - 1);
|
||
|
||
// The trade actions — Clear (secondary, dim) + Confirm (primary, green)
|
||
// — live on the bar too (both trade AND buyback confirm here, since
|
||
// preview()/confirm() already branch on the tab).
|
||
const buttons = config.section('shopui.buttons', {});
|
||
this._clearBtn = mkBtn(buttons.clearLabel ?? 'Clear', buttons.clearAccent ?? c.dim ?? '#7d92c4', () => this.clear());
|
||
this._confirmBtn = mkBtn(buttons.confirmLabel ?? 'Confirm', buttons.confirmAccent ?? '#7ce8a4', () => this.confirm());
|
||
this._confirmBtn.setAlpha?.(0); // hidden until a selection exists (_syncPreview)
|
||
this._clearBtn.setAlpha?.(0);
|
||
this._confirmBtn.setDisabled?.(true); // + invalid-trade gray, via _syncPreview
|
||
const clearW = this._clearBtn.style?.width ?? 90;
|
||
const confirmW = this._confirmBtn.style?.width ?? 110;
|
||
const actionsW = clearW + gap + confirmW;
|
||
|
||
// The NET readout — created BEFORE the panel body so its REAL width feeds
|
||
// the bar width (a headless fake without text metrics falls back to an
|
||
// estimate). The value is RIGHT-ANCHORED (origin 1, 0.5) at the bar's
|
||
// end, so a longer number ("−9,999 cr") extends LEFT and never spills
|
||
// past the bar or shifts the label. The label sits clear of the WIDEST
|
||
// plausible value (reserved below) so nothing overlaps at any total.
|
||
const labelStr = String(pv.label ?? 'NET');
|
||
const valueFont = Math.max(8, Number(pv.valueFontSize) || 22);
|
||
// Reserve the value slot with the widest plausible reading so the label
|
||
// never overlaps a long total (the value itself only grows leftward).
|
||
const reserveStr = String(pv.reserve ?? '\u221299,999 cr');
|
||
this._netLabel = this._makeText(0, -H / 2, labelStr, {
|
||
fontSize: `${Math.max(8, Number(pv.labelFontSize) || 12)}px`,
|
||
color: toCss(pv.labelColor ?? c.dim ?? '#7d92c4'),
|
||
align: 'left',
|
||
});
|
||
this._netValue = this._makeText(0, -H / 2, reserveStr, {
|
||
fontSize: `${valueFont}px`,
|
||
color: toCss(pv.zeroColor ?? pv.labelColor ?? '#7d92c4'),
|
||
align: 'left',
|
||
});
|
||
const labelW = (Number(this._netLabel?.width) > 0 ? this._netLabel.width : labelStr.length * 8) || 30;
|
||
const valueW = (Number(this._netValue?.width) > 0 ? this._netValue.width : reserveStr.length * valueFont * 0.55) || 90;
|
||
this._netValueW = valueW; // reserved (widest) width — the label keeps clear of it
|
||
// Reset to the live (zero) reading and anchor the RIGHT edge so the
|
||
// value stays pinned to the bar's end as its length changes.
|
||
this._netValue.setText?.('0 cr');
|
||
this._netValue.setOrigin?.(1, 0.5);
|
||
const divW = Math.max(1, Number(pv.divider?.width) || 2);
|
||
const divH = Math.max(10, Number(pv.divider?.height) || Math.round(H * 0.45));
|
||
|
||
// Row: [ BUY/SELL ][ BUYBACK ] ···console··· [ CLEAR ][ CONFIRM ] │ NET value
|
||
// The bar spans the FULL DECK (anchor.left/right — the main action
|
||
// bar's left and right edges): tabs packed at the LEFT edge, the trade
|
||
// actions + credit readout packed at the RIGHT edge, the value
|
||
// right-aligned at the bar's end (a growing number never shifts the
|
||
// label, the buttons, or the tabs — nothing overlaps on either end).
|
||
const sceneW = this._W();
|
||
const fixedW = pad * 2 + tabsW + divW * 2 + actionsW + labelW + valueW;
|
||
const span = (Number.isFinite(a.left) && Number.isFinite(a.right) && a.right - a.left > fixedW + 28)
|
||
? { left: a.left, right: a.right }
|
||
: null;
|
||
// Seven gap slots: tab1·tab2, tab2·div1, div1·clear, clear·confirm,
|
||
// confirm·div2, div2·label, label·value. If the content can't fit the
|
||
// span (a narrow deck), the gaps compress — never the button widths.
|
||
let W, g;
|
||
if (span) {
|
||
W = span.right - span.left;
|
||
g = Math.min(gap, Math.max(4, (W - fixedW) / 7));
|
||
} else {
|
||
g = gap;
|
||
W = Math.min(sceneW - 24, fixedW + 7 * g);
|
||
}
|
||
const cx = span ? (span.left + span.right) / 2 : sceneW / 2;
|
||
|
||
// All the x's, bar-local (the bar's origin is its BOTTOM CENTER, a.y):
|
||
// the right group packs inward from the bar's right edge; the tabs
|
||
// pack outward from the left; the dividers sit between the groups.
|
||
const lEdge = -W / 2 + pad;
|
||
const rEdge = W / 2 - pad;
|
||
const tX = [lEdge + widths[0] / 2, lEdge + widths[0] + g + widths[1] / 2];
|
||
const vX = rEdge; // NET value — right edge anchored at the bar's end (origin 1,0.5)
|
||
const lCx = rEdge - valueW - g - labelW / 2; // NET label, clear of the widest value
|
||
const d2X = lCx - labelW / 2 - g - divW / 2; // divider: actions │ NET
|
||
const cCx = d2X - divW / 2 - g - confirmW / 2; // Confirm
|
||
const qCx = cCx - confirmW / 2 - g - clearW / 2; // Clear
|
||
const d1X = qCx - clearW / 2 - g - divW / 2; // divider: tabs │ actions
|
||
|
||
// Position: bottom edge on the deck's top rail (a.y), centred on the
|
||
// deck's span. The sub-bar is a CHILD of the ShopView (which stays at
|
||
// the screen origin, 0,0) at (cx, a.y) — so the trade panel (a SIBLING
|
||
// at 0,0) still renders in screen space, not offset down to the deck.
|
||
const bar = new Phaser.GameObjects.Container(this.scene, cx, a.y);
|
||
bar.setScrollFactor?.(0);
|
||
this.subBar = bar;
|
||
this.subBarW = W;
|
||
this.subBarH = H;
|
||
this.add?.(bar);
|
||
|
||
// The body FIRST (v4 paints children in list order — the opaque panel
|
||
// fill must come before the buttons or it would cover them). The
|
||
// hairline dividers are part of the body, so they paint under both.
|
||
const bodyG = this.scene.add?.graphics?.();
|
||
if (bodyG) {
|
||
bodyG.setScrollFactor?.(0);
|
||
bar.add?.(bodyG);
|
||
this._drawSubBarBody(bodyG, W, H, c, [d1X, d2X], divH);
|
||
}
|
||
|
||
// The buttons LAST (above the body): tabs at the left edge, the trade
|
||
// actions + NET readout at the right edge.
|
||
items.forEach((it, i) => {
|
||
const btn = btns[i];
|
||
btn.setX?.(tX[i]);
|
||
bar.add?.(btn);
|
||
if (it.id === 'trade') this._tabTrade = btn;
|
||
else this._tabBuyback = btn;
|
||
});
|
||
this._clearBtn.setX?.(qCx);
|
||
this._confirmBtn.setX?.(cCx);
|
||
bar.add?.(this._clearBtn);
|
||
bar.add?.(this._confirmBtn);
|
||
this._netLabel.setPosition?.(lCx, -H / 2);
|
||
this._netValue.setPosition?.(vX, -H / 2);
|
||
bar.add?.(this._netLabel);
|
||
bar.add?.(this._netValue);
|
||
|
||
// Buyback starts grayed (disabled) until a sale exists this visit.
|
||
this._refreshTabs();
|
||
}
|
||
|
||
/**
|
||
* The sub-bar panel body (the MenuSubBar recipe at full height).
|
||
* `dividers` (optional) — hairline divider x's (one between the tabs and
|
||
* the actions, one between the actions and the NET readout) — drawn as
|
||
* body so they paint under the buttons + text.
|
||
*/
|
||
_drawSubBarBody(g, W, H, c, dividers, divH) {
|
||
if (!g || typeof g.clear !== 'function') return;
|
||
const panelTop = toColor(c.panelTop ?? '#0e1930');
|
||
const panelBottom = toColor(c.panelBottom ?? '#050912');
|
||
const neon = toColor(c.neon ?? '#00e5ff');
|
||
const magenta = toColor(c.magenta ?? '#ff2d6f');
|
||
const ink = toColor(c.ink ?? '#eaf6ff');
|
||
const cut = Math.max(3, Math.min(12, H * 0.18));
|
||
g.clear();
|
||
const pts = [
|
||
{ x: -W / 2 + cut, y: -H }, { x: W / 2 - cut, y: -H },
|
||
{ x: W / 2, y: -H + cut }, { x: W / 2, y: 0 },
|
||
{ x: -W / 2, y: 0 }, { x: -W / 2, y: -H + cut },
|
||
];
|
||
const has = (fn) => typeof g[fn] === 'function';
|
||
if (has('fillPoints')) {
|
||
g.fillStyle(panelBottom, 1); g.fillPoints(pts, true);
|
||
g.fillStyle(panelTop, 0.55); g.fillPoints(pts, true);
|
||
}
|
||
if (has('fillRect')) {
|
||
g.fillStyle(neon, 0.05); g.fillRect(-W / 2, -H, 26, H); // cyan left
|
||
g.fillStyle(magenta, 0.06); g.fillRect(W / 2 - 26, -H, 26, H); // magenta right
|
||
const rail = 2;
|
||
g.fillStyle(neon, 0.9); g.fillRect(-W / 2 + cut, -H, W - cut * 2, rail);
|
||
g.fillStyle(ink, 0.8); g.fillRect(-W / 2 + cut, -H + 0.5, W - cut * 2, 0.8);
|
||
g.fillStyle(magenta, 0.5); g.fillRect(-W / 2 + cut, -H + rail, W - cut * 2, 1);
|
||
g.fillStyle(magenta, 0.35); g.fillRect(-W / 2, -1.5, W, 1.5); // seam
|
||
const divs = Array.isArray(dividers) ? dividers : (typeof dividers === 'number' ? [dividers] : []);
|
||
if (divs.length > 0 && divH > 0) {
|
||
g.fillStyle(toColor(c.border ?? '#22405f'), 0.9);
|
||
for (const dx of divs) g.fillRect(dx - 1, -H / 2 - divH / 2, 2, divH); // section dividers
|
||
}
|
||
}
|
||
}
|
||
|
||
/** A tab button press (MenuButton → _onTabTap). */
|
||
_onTabTap(id) {
|
||
if (id === 'trade') this.setTab('trade');
|
||
else if (id === 'buyback' && this.isBuybackEnabled()) this.setTab('buyback');
|
||
}
|
||
|
||
_refreshTabs() {
|
||
// MenuButtons carry their own state (base/hover/disabled) — the only thing
|
||
// that changes here is Buyback's locked state (grayed until a sale exists).
|
||
this._tabBuyback?.setDisabled?.(!this.isBuybackEnabled());
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// CONTENT — the trade panel (SELL grid + BUY list, side by side)
|
||
// ---------------------------------------------------------------------
|
||
_showTrade() {
|
||
const grid = config.get('shopui.grid', {});
|
||
// The two panels sit NEXT TO each other with just a bit of padding
|
||
// between (the trade actions + NET readout ride on the tab sub-bar —
|
||
// see _buildTabs — so the panel is pure selection).
|
||
const centerW = grid.centerW ?? 16;
|
||
const W = this._W();
|
||
// The panel's LEFT edge = the surface HUD's planet text's LEFT edge —
|
||
// the same margin key (data/landing.json → landing.hud.marginX) the
|
||
// name/line are drawn at (origin 0,0), so the cargo grid lines up
|
||
// vertically with the planet name above it. The BUY list then STRETCHES
|
||
// to the right, ending at the SAME padding from the screen's right edge.
|
||
const leftPad = Math.max(8, Number(config.get('landing.hud.marginX')) || 24);
|
||
|
||
const sellGrid = new TradeGrid(this.scene, {
|
||
side: 'sell', maxSlots: this.maxSlots, capacity: this.capacity,
|
||
cls: this.cls, systemId: this.systemId,
|
||
sellUnit: (id) => E.sellPrice(id, this.cls, this.systemId, this.galaxy),
|
||
});
|
||
// The BUY side: a scrollable LIST of stock rows (wide bars — icon +
|
||
// name + description + price + −/qty/+ stepper). Sized to the SELL
|
||
// grid's height so the two panels align top AND bottom; the list scrolls
|
||
// when the stock outgrows the viewport (it always does — 8–16 rows).
|
||
// Width: from just past the SELL grid out to the right padding — the
|
||
// wide row gets all the room (the 440 floor is the narrow-window
|
||
// fallback, where stretching to the right edge isn't possible).
|
||
const buyW = Math.max(440, W - leftPad - (leftPad + sellGrid.width + centerW));
|
||
const buyList = new BuyList(this.scene, { width: buyW, height: sellGrid.height });
|
||
this.sellGrid = sellGrid;
|
||
this.buyList = buyList;
|
||
|
||
// Layout: [SELL grid] [gap] [BUY list]. The panel's TOP edge sits at
|
||
// this.topY — just under the surface HUD's planet text (upper-left) —
|
||
// so the whole panel reads as one unit near the top of the screen (not
|
||
// hanging down to the deck/sub-bar); its LEFT edge is the planet text's
|
||
// left edge (leftPad), and the BUY list ends at the right padding.
|
||
//
|
||
// IMPORTANT: a TradeGrid/BuyList lays its plate out in local (0,0)→(w,h)
|
||
// and a Container's (x,y) is a pure TRANSLATION of that local space
|
||
// (verified with dev/cbox-test.html) — so the panel's position IS its
|
||
// top-left corner. Treating it as a centered origin (topY + h/2) drops
|
||
// the panel half a grid lower and clips the bottom rows.
|
||
const leftX = leftPad;
|
||
sellGrid.setPosition(leftX, this.topY);
|
||
const rightX = leftX + sellGrid.width + centerW;
|
||
buyList.setPosition(rightX, this.topY);
|
||
|
||
const content = new Phaser.GameObjects.Container(this.scene, 0, 0);
|
||
content.setScrollFactor?.(0);
|
||
content.add?.(sellGrid);
|
||
content.add?.(buyList);
|
||
|
||
// Confirm / Clear live on the tab sub-bar (persistent — see
|
||
// _buildTabs); the panel is pure selection.
|
||
this._content = content;
|
||
this.add?.(content);
|
||
|
||
// Data + live preview wiring.
|
||
sellGrid.refresh({ cargo: this.ship.cargo ? this.ship.cargo.snapshot() : [] });
|
||
buyList.refresh({ stock: E.shopFor(this.cls, this.systemId, this.galaxy).buy });
|
||
sellGrid.onSelectionChange = () => this._syncPreview();
|
||
buyList.onSelectionChange = () => this._syncPreview();
|
||
this._syncPreview();
|
||
|
||
// Reveal: SELL slides in from the left, BUY from the right.
|
||
sellGrid.slideIn();
|
||
buyList.slideIn();
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// CONTENT — the buyback panel (goods sold this session, buy back)
|
||
// ---------------------------------------------------------------------
|
||
_showBuyback() {
|
||
const W = this._W();
|
||
const content = new Phaser.GameObjects.Container(this.scene, 0, 0);
|
||
content.setScrollFactor?.(0);
|
||
const rows = this._bbRows();
|
||
const contentY = this._H() / 2;
|
||
const cx = W / 2;
|
||
|
||
const title = this._makeText(cx, contentY + 10, 'BUY BACK', {
|
||
fontSize: '21px', color: '#eaf6ff', align: 'center', fontFamily: fontStack('header') }); // Ethnocentric — section face
|
||
content.add?.(title);
|
||
|
||
let y = contentY + 56;
|
||
const rowH = 56;
|
||
for (const r of rows) {
|
||
const line = this._makeText(cx - 120, y, `${r.name} · sold ${r.qty} @ ${Math.round(r.price)} cr`, {
|
||
fontSize: '15px', color: '#eaf6ff', align: 'left' });
|
||
content.add?.(line);
|
||
const minus = this._makeText(cx + 60, y, '−', { fontSize: '20px', color: '#7d92c4', align: 'center' });
|
||
const qty = this._makeText(cx + 110, y, String(r.sel), { fontSize: '20px', color: '#00e5ff', align: 'center' });
|
||
const plus = this._makeText(cx + 160, y, '+', { fontSize: '20px', color: '#7d92c4', align: 'center' });
|
||
for (const el of [line, minus, qty, plus]) content.add?.(el);
|
||
const hit = [-16, -14, 32, 28];
|
||
this._bindTap(minus, () => this.bumpBuyback(r.id, -1), hit);
|
||
this._bindTap(plus, () => this.bumpBuyback(r.id, +1), hit);
|
||
y += rowH;
|
||
}
|
||
|
||
// Confirm / Clear / the live NET readout all ride on the tab sub-bar
|
||
// (persistent — see _buildTabs); the buyback panel is the pure list of
|
||
// sold goods.
|
||
this._content = content;
|
||
this.add?.(content);
|
||
this._syncPreview();
|
||
}
|
||
|
||
_bbRows() {
|
||
return this.soldThisSession.map((r) => ({
|
||
id: r.id, name: r.name ?? r.id, qty: r.qty, price: r.price,
|
||
sel: this.buybackSel.get(r.id) ?? 0,
|
||
}));
|
||
}
|
||
|
||
bumpBuyback(id, d = 1) {
|
||
const row = this.soldThisSession.find((r) => r.id === id);
|
||
if (!row) return this;
|
||
const cur = this.buybackSel.get(id) ?? 0;
|
||
const next = Math.max(0, Math.min(row.qty, cur + Math.floor(Number(d) || 0)));
|
||
if (next === 0) this.buybackSel.delete(id);
|
||
else this.buybackSel.set(id, next);
|
||
this._syncPreview();
|
||
return this;
|
||
}
|
||
|
||
getBuybackMap() {
|
||
const m = {};
|
||
for (const [id, q] of this.buybackSel) if (q > 0) m[id] = q;
|
||
return m;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// PREVIEW + CONFIRM + CLEAR (the testable core)
|
||
// ---------------------------------------------------------------------
|
||
preview() {
|
||
const cargo = this.ship.cargo ? this.ship.cargo.snapshot() : [];
|
||
const capacity = this.capacity;
|
||
const credits = this.ship.credits;
|
||
if (this.tab === 'trade') {
|
||
return E.tradePreview({
|
||
cls: this.cls, systemId: this.systemId, galaxy: this.galaxy,
|
||
cargo, capacity, credits,
|
||
sellMap: this.sellGrid ? this.sellGrid.getSellMap() : {},
|
||
buyMap: this.buyList ? this.buyList.getBuyMap() : {},
|
||
});
|
||
}
|
||
// buyback — priced at the sale price (buyOverrides), a neutral undo.
|
||
const buyMap = {};
|
||
const buyOverrides = {};
|
||
for (const r of this._bbRows()) {
|
||
if (r.sel > 0) { buyMap[r.id] = r.sel; buyOverrides[r.id] = r.price; }
|
||
}
|
||
return E.tradePreview({
|
||
cls: this.cls, systemId: this.systemId, galaxy: this.galaxy,
|
||
cargo, capacity, credits,
|
||
sellMap: {}, buyMap, buyOverrides,
|
||
});
|
||
}
|
||
|
||
confirm() {
|
||
const pv = this.preview();
|
||
if (!pv.valid) {
|
||
this._setStatus(`CAN'T TRADE — ${pv.errors.join(', ')}`, true);
|
||
return false;
|
||
}
|
||
this._applyTrade(pv);
|
||
this._afterTrade(pv);
|
||
return true;
|
||
}
|
||
|
||
clear() {
|
||
if (this.tab === 'trade') {
|
||
this.sellGrid?.clearSelection();
|
||
this.buyList?.clearSelection();
|
||
} else {
|
||
this.buybackSel = new Map();
|
||
}
|
||
this._syncPreview();
|
||
return this;
|
||
}
|
||
|
||
_applyTrade(pv) {
|
||
const ship = this.ship;
|
||
if (pv.sellTotal > 0) ship.addCredits(pv.sellTotal);
|
||
if (pv.buyTotal > 0) ship.spendCredits(pv.buyTotal);
|
||
for (const s of pv.sell) ship.cargo.remove(s.id, s.qty); // free bays first
|
||
for (const b of pv.buy) ship.cargo.add(Array(b.qty).fill(b.id));
|
||
}
|
||
|
||
_afterTrade(pv) {
|
||
if (this.tab === 'trade') {
|
||
for (const s of pv.sell) this._addSold(s.id, s.qty, s.unit, s.name);
|
||
this.sellGrid?.clearSelection();
|
||
this.buyList?.clearSelection();
|
||
} else {
|
||
for (const b of pv.buy) this._reduceSold(b.id, b.qty);
|
||
this.buybackSel = new Map();
|
||
}
|
||
this.sellGrid?.refresh({ cargo: this.ship.cargo ? this.ship.cargo.snapshot() : [] });
|
||
this.refreshHud();
|
||
this._syncPreview();
|
||
this._refreshTabs();
|
||
this._setStatus(`CONFIRMED — ${pv.net >= 0 ? '+' : ''}${Math.round(pv.net)} cr → hold ${pv.cargoAfter}/${this.capacity}`, false);
|
||
}
|
||
|
||
_addSold(id, qty, price, name) {
|
||
let row = this.soldThisSession.find((r) => r.id === id);
|
||
if (!row) { row = { id, name: name ?? id, qty: 0, price: price ?? 0 }; this.soldThisSession.push(row); }
|
||
row.qty += qty;
|
||
if (price) row.price = price;
|
||
}
|
||
|
||
_reduceSold(id, qty) {
|
||
const row = this.soldThisSession.find((r) => r.id === id);
|
||
if (!row) return;
|
||
row.qty -= qty;
|
||
if (row.qty <= 0) this.soldThisSession = this.soldThisSession.filter((r) => r.id !== id);
|
||
}
|
||
|
||
refreshHud() {
|
||
this.gameScene?.refreshCreditsHud?.();
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// PREVIEW SYNC (live NET + Confirm/Clear visibility)
|
||
// ---------------------------------------------------------------------
|
||
_syncPreview() {
|
||
const pv = this.preview();
|
||
const anySel = this._hasAnySelection();
|
||
// The live NET readout lives on the tab sub-bar (this._netValue) — one
|
||
// glance sees the tabs AND the pending trade's credit delta. Right-
|
||
// aligned, so a growing number never shifts the "NET" label.
|
||
if (this._netValue && typeof this._netValue.setText === 'function') {
|
||
const n = Math.round(pv.net);
|
||
this._netValue.setText(n === 0 ? '0 cr' : `${n > 0 ? '+' : ''}${n} cr`);
|
||
const col = n === 0
|
||
? config.get('shopui.preview.zeroColor', '#7d92c4')
|
||
: (n > 0 ? config.get('shopui.preview.posColor', '#7ce8a4') : config.get('shopui.preview.negColor', '#ff2d6f'));
|
||
if (typeof this._netValue.setColor === 'function') this._netValue.setColor(col);
|
||
}
|
||
const confirmOn = anySel;
|
||
const confirmEnabled = anySel && pv.valid;
|
||
// MenuButton: hide (alpha) when no selection, and GRAY (setDisabled) while
|
||
// the trade is invalid — a disabled button swallows its own clicks.
|
||
if (this._confirmBtn) {
|
||
this._confirmBtn.setAlpha?.(confirmOn ? 1 : 0);
|
||
this._confirmBtn.setDisabled?.(!confirmEnabled);
|
||
}
|
||
this._clearBtn?.setAlpha?.(confirmOn ? 1 : 0);
|
||
}
|
||
|
||
_hasAnySelection() {
|
||
if (this.tab === 'trade') return (this.sellGrid?.hasSelection() ?? false) || (this.buyList?.hasSelection() ?? false);
|
||
return [...this.buybackSel.values()].some((q) => q > 0);
|
||
}
|
||
|
||
_setStatus(msg, bad) {
|
||
// Best-effort status line (headless no-ops). The credits HUD count-up is
|
||
// the primary feedback; this is the in-panel confirmation.
|
||
if (this._statusText && typeof this._statusText.setText === 'function') {
|
||
this._statusText.setText(msg);
|
||
if (typeof this._statusText.setColor === 'function')
|
||
this._statusText.setColor(bad ? config.get('shopui.preview.negColor', '#ff2d6f') : config.get('shopui.preview.posColor', '#7ce8a4'));
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// LIFECYCLE
|
||
// ---------------------------------------------------------------------
|
||
close() {
|
||
this._destroyContent();
|
||
this.destroy();
|
||
if (typeof this.onLeave === 'function') this.onLeave();
|
||
return this;
|
||
}
|
||
|
||
_destroyContent() {
|
||
// The panel content goes; the sub-bar (tabs + actions + NET readout)
|
||
// PERSISTS across tab switches — it's not part of the content.
|
||
if (this._content) {
|
||
this._content.destroy?.();
|
||
this._content = null;
|
||
}
|
||
this.sellGrid?.destroy?.();
|
||
this.buyList?.destroy?.();
|
||
this.sellGrid = null;
|
||
this.buyList = null;
|
||
}
|
||
|
||
destroy() {
|
||
this._destroyContent();
|
||
this._tabTrade?.destroy?.();
|
||
this._tabBuyback?.destroy?.();
|
||
this._confirmBtn?.destroy?.();
|
||
this._clearBtn?.destroy?.();
|
||
this._netLabel?.destroy?.();
|
||
this._netValue?.destroy?.();
|
||
this._tabTrade = null;
|
||
this._tabBuyback = null;
|
||
this._confirmBtn = null;
|
||
this._clearBtn = null;
|
||
this._netLabel = null;
|
||
this._netValue = null;
|
||
this.subBar?.destroy?.();
|
||
this.subBar = null;
|
||
if (typeof super.destroy === 'function') super.destroy();
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// SMALL HELPERS (Phaser-agnostic; the headless fake provides add.text/
|
||
// graphics and the stub Container; real Phaser provides the rest)
|
||
// ---------------------------------------------------------------------
|
||
_W() {
|
||
return this.scene.scale?.width ?? 1280;
|
||
}
|
||
|
||
_H() {
|
||
return this.scene.scale?.height ?? 720;
|
||
}
|
||
|
||
_makeText(x, y, str, style = {}) {
|
||
// Owned by whichever container the caller adds it to (or this) — real
|
||
// Phaser tears the whole tree down on destroy(); the headless stub doesn't
|
||
// recurse, but the tests build a fresh scene each time so that's fine.
|
||
const t = this.scene.add?.text?.(x, y, str, { align: 'center', fontFamily: fontStack('body'), ...style }); // Centauri default; callers may override
|
||
if (t) t.setOrigin?.(0.5, 0.5);
|
||
return t;
|
||
}
|
||
|
||
_makeButton(label, w, h, accent) {
|
||
const g = this.scene.add?.graphics?.();
|
||
const t = this.scene.add?.text?.(0, 0, label, { fontSize: '18px', color: '#eaf6ff', align: 'center', fontFamily: fontStack('body') });
|
||
const btn = new Phaser.GameObjects.Container(this.scene, 0, 0);
|
||
if (g) { this._drawBtn(g, w, h, accent); btn.add?.(g); }
|
||
if (t) { t.setOrigin?.(0.5, 0.5); btn.add?.(t); }
|
||
const api = {
|
||
container: btn,
|
||
setPosition: (x, y) => { btn.setPosition?.(x, y); },
|
||
setAlpha: (a) => { btn.setAlpha?.(a); },
|
||
setAccent: (color) => { this._drawBtn(g, w, h, color); },
|
||
tap: (fn) => { this._bindTap(g ?? t, fn, [-w / 2, -h / 2, w, h]); },
|
||
destroy: () => { g?.destroy?.(); t?.destroy?.(); btn.destroy?.(); },
|
||
};
|
||
return api;
|
||
}
|
||
|
||
_drawBtn(g, w, h, accent) {
|
||
if (!g || typeof g.clear !== 'function') return;
|
||
g.clear?.();
|
||
if (typeof g.fillStyle === 'function') {
|
||
const a = _hex(accent ?? '#00e5ff');
|
||
g.fillStyle(a, 0.16);
|
||
g.lineStyle?.(1, a, 1);
|
||
}
|
||
g.fillRect?.(-w / 2, -h / 2, w, h);
|
||
}
|
||
|
||
_bindTap(obj, fn, hitRect) {
|
||
if (!obj || typeof obj.setInteractive !== 'function' || typeof obj.on !== 'function') return;
|
||
// Phaser v4 (Giedi): a bare setInteractive() leaves no hitAreaCallback and
|
||
// crashes the input (MenuButton sets an explicit hitArea + callback for this).
|
||
const opts = { useHandCursor: true };
|
||
const Rect = Phaser.Geom?.Rectangle;
|
||
if (Rect && hitRect) {
|
||
const area = new Rect(hitRect[0], hitRect[1], hitRect[2], hitRect[3]);
|
||
opts.hitArea = area;
|
||
opts.hitAreaCallback = (p, px, py) => Rect.Contains(p, px, py);
|
||
}
|
||
obj.setInteractive(opts).on('pointerdown', (p) => { p?.stopPropagation?.(); fn(); });
|
||
}
|
||
}
|
||
|
||
function _hex(v) {
|
||
const m = String(v).trim().match(/^#?([0-9a-f]{6})$/i);
|
||
return m ? parseInt(m[1], 16) : 0xffffff;
|
||
}
|