Add PF2e equipment display with detail popovers in stat blocks
Extract shared DetailPopover shell from spell popovers. Normalize weapon/consumable/equipment/armor items from Foundry data into mundane (Items line) and detailed (Equipment section with clickable popovers). Scrolls/wands show embedded spell info. Bump IDB cache v7. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
72
apps/web/src/components/equipment-detail-popover.tsx
Normal file
72
apps/web/src/components/equipment-detail-popover.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import type { EquipmentItem } from "@initiative/domain";
|
||||
import { DetailPopover } from "./detail-popover.js";
|
||||
import { RichDescription } from "./rich-description.js";
|
||||
|
||||
interface EquipmentDetailPopoverProps {
|
||||
readonly item: EquipmentItem;
|
||||
readonly anchorRect: DOMRect;
|
||||
readonly onClose: () => void;
|
||||
}
|
||||
|
||||
function EquipmentDetailContent({ item }: Readonly<{ item: EquipmentItem }>) {
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<h3 className="font-bold text-lg text-stat-heading">{item.name}</h3>
|
||||
{item.traits && item.traits.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{item.traits.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
|
||||
>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-0.5 text-xs">
|
||||
<div>
|
||||
<span className="font-semibold">Level</span> {item.level}
|
||||
</div>
|
||||
{item.category ? (
|
||||
<div>
|
||||
<span className="font-semibold">Category</span>{" "}
|
||||
{item.category.charAt(0).toUpperCase() + item.category.slice(1)}
|
||||
</div>
|
||||
) : null}
|
||||
{item.spellName ? (
|
||||
<div>
|
||||
<span className="font-semibold">Spell</span> {item.spellName}
|
||||
{item.spellRank === undefined ? "" : ` (Rank ${item.spellRank})`}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{item.description ? (
|
||||
<RichDescription
|
||||
text={item.description}
|
||||
className="whitespace-pre-line text-foreground"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-muted-foreground italic">
|
||||
No description available.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function EquipmentDetailPopover({
|
||||
item,
|
||||
anchorRect,
|
||||
onClose,
|
||||
}: Readonly<EquipmentDetailPopoverProps>) {
|
||||
return (
|
||||
<DetailPopover
|
||||
anchorRect={anchorRect}
|
||||
onClose={onClose}
|
||||
ariaLabel={`Equipment details: ${item.name}`}
|
||||
>
|
||||
<EquipmentDetailContent item={item} />
|
||||
</DetailPopover>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user