francy51
7c93b8a1ae
- Add MiniStarMap, NpcMarketPanel, ShipStatusPanel, useKeyboardShortcuts - Add progress bars for approach/mining operations and cargo fill indicator - Rewrite docs from spreadsheet-first to exploration-first open-world RPG - Replace dev:db + dev:standalone with unified dev script (scripts/dev.sh) - Add Vite chunk splitting for three.js and spacetimedb - Fix displayName dependency in useSpacetimeConnection - Remove stale usePlayerSession.ts - Add AGENTS.md files across all packages
44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
import { Panel } from "@void-nav/ui";
|
|
import type { CargoItem, Ship } from "../module_bindings/types";
|
|
|
|
export function CargoPanel({ cargo, ship }: { cargo: CargoItem[]; ship?: Ship }) {
|
|
const used = cargo.reduce((total, item) => total + item.quantity, 0n);
|
|
const capacity = ship?.cargoCapacity ?? 0n;
|
|
const fillPct = capacity > 0n ? Math.min(100, Math.round((Number(used) / Number(capacity)) * 100)) : 0;
|
|
const barColor = fillPct >= 90 ? "#ef4444" : fillPct >= 60 ? "#f0a030" : "#22d3ee";
|
|
|
|
return (
|
|
<Panel className="p-4">
|
|
<div className="flex items-baseline justify-between gap-3">
|
|
<p className="m-0 font-mono text-xs uppercase tracking-[0.1em] text-muted">Cargo</p>
|
|
<span className="font-mono text-xs text-fg-dim">
|
|
{used.toString()} / {capacity.toString()} m³
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 h-2 overflow-hidden rounded-full bg-surface-raised">
|
|
<div
|
|
className="h-full rounded-full transition-[width] duration-300"
|
|
style={{ width: `${fillPct}%`, backgroundColor: barColor }}
|
|
/>
|
|
</div>
|
|
<div className="mt-3 grid gap-2">
|
|
{cargo.length > 0 ? (
|
|
cargo.map((item) => (
|
|
<div key={String(item.cargoItemId)} className="rounded-md border border-border bg-bg-subtle px-3 py-2">
|
|
<div className="flex items-center justify-between gap-3 text-sm">
|
|
<span className="font-semibold text-fg-bright">{item.itemName}</span>
|
|
<span className="font-mono text-xs text-cyan">{item.quantity.toString()}</span>
|
|
</div>
|
|
<div className="mt-1 font-mono text-xs uppercase tracking-[0.08em] text-muted">
|
|
{item.category} / {item.unitPrice.toString()} ISK per unit
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="m-0 rounded-md border border-border bg-bg-subtle p-3 text-sm text-fg-dim">Cargo hold empty.</p>
|
|
)}
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|