You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
import type { HeroState, LootDrop } from '../game/types';
|
|
|
|
interface InventoryStripProps {
|
|
/** Kept for call sites; gold is shown on HUD and in the inventory tab. */
|
|
hero: HeroState;
|
|
/** Most recent victory loot (gold + optional item); persists after popup fades */
|
|
lastLoot?: LootDrop | null;
|
|
}
|
|
|
|
function formatLastLootLine(loot: LootDrop): string {
|
|
const parts: string[] = [];
|
|
if (loot.goldAmount > 0) {
|
|
parts.push(`+${loot.goldAmount.toLocaleString()} gold`);
|
|
}
|
|
if (loot.bonusItem?.itemName) {
|
|
parts.push(loot.bonusItem.itemName);
|
|
} else if (loot.itemName && !loot.bonusItem) {
|
|
parts.push(loot.itemName);
|
|
}
|
|
return parts.join(' \u00B7 ') || 'Victory';
|
|
}
|
|
|
|
const stripStyle: CSSProperties = {
|
|
marginTop: 4,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
padding: '4px 8px',
|
|
borderRadius: 8,
|
|
background: 'rgba(10, 16, 24, 0.72)',
|
|
border: '1px solid rgba(255, 255, 255, 0.14)',
|
|
fontSize: 12,
|
|
minHeight: 28,
|
|
};
|
|
|
|
const lastLootStyle: CSSProperties = {
|
|
fontSize: 10,
|
|
color: 'rgba(220, 230, 255, 0.7)',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
maxWidth: '100%',
|
|
};
|
|
|
|
export function InventoryStrip({ lastLoot }: InventoryStripProps) {
|
|
if (!lastLoot) return null;
|
|
return (
|
|
<div style={stripStyle}>
|
|
<div style={lastLootStyle} title={formatLastLootLine(lastLoot)}>
|
|
{formatLastLootLine(lastLoot)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|