Add PF2e spell description popovers in stat blocks
Clicking a spell name in a PF2e creature's stat block now opens a popover (desktop) or bottom sheet (mobile) showing full spell details: description, traits, rank, range, target, area, duration, defense, action cost icons, and heightening rules. All data is sourced from the embedded Foundry VTT spell items already in the bestiary cache. - Add SpellReference type replacing bare string spell arrays - Extract full spell data in pf2e-bestiary-adapter (description, traits, traditions, range, target, area, duration, defense, action cost, heightening, overlays) - Strip inline heightening text from descriptions to avoid duplication - Bold save outcome labels (Critical Success/Failure) in descriptions - Bump DB_VERSION to 6 for cache invalidation - Add useSwipeToDismissDown hook for mobile bottom sheet - Portal popover to document.body to escape transformed ancestors Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lukas
296
apps/web/src/components/spell-detail-popover.tsx
Normal file
296
apps/web/src/components/spell-detail-popover.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import type { ActivityCost, SpellReference } from "@initiative/domain";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useClickOutside } from "../hooks/use-click-outside.js";
|
||||
import { useSwipeToDismissDown } from "../hooks/use-swipe-to-dismiss.js";
|
||||
import { cn } from "../lib/utils.js";
|
||||
import { ActivityIcon } from "./stat-block-parts.js";
|
||||
|
||||
interface SpellDetailPopoverProps {
|
||||
readonly spell: SpellReference;
|
||||
readonly anchorRect: DOMRect;
|
||||
readonly onClose: () => void;
|
||||
}
|
||||
|
||||
const RANK_LABELS = [
|
||||
"Cantrip",
|
||||
"1st",
|
||||
"2nd",
|
||||
"3rd",
|
||||
"4th",
|
||||
"5th",
|
||||
"6th",
|
||||
"7th",
|
||||
"8th",
|
||||
"9th",
|
||||
"10th",
|
||||
];
|
||||
|
||||
function formatRank(rank: number | undefined): string {
|
||||
if (rank === undefined) return "";
|
||||
return RANK_LABELS[rank] ?? `Rank ${rank}`;
|
||||
}
|
||||
|
||||
function parseActionCost(cost: string): ActivityCost | null {
|
||||
if (cost === "free") return { number: 1, unit: "free" };
|
||||
if (cost === "reaction") return { number: 1, unit: "reaction" };
|
||||
const n = Number(cost);
|
||||
if (n >= 1 && n <= 3) return { number: n, unit: "action" };
|
||||
return null;
|
||||
}
|
||||
|
||||
function SpellActionCost({ cost }: Readonly<{ cost: string | undefined }>) {
|
||||
if (!cost) return null;
|
||||
const activity = parseActionCost(cost);
|
||||
if (activity) {
|
||||
return (
|
||||
<span className="shrink-0 text-lg">
|
||||
<ActivityIcon activity={activity} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="shrink-0 text-muted-foreground text-xs">{cost}</span>;
|
||||
}
|
||||
|
||||
function SpellHeader({ spell }: Readonly<{ spell: SpellReference }>) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="font-bold text-lg text-stat-heading">{spell.name}</h3>
|
||||
<SpellActionCost cost={spell.actionCost} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpellTraits({ traits }: Readonly<{ traits: readonly string[] }>) {
|
||||
if (traits.length === 0) return null;
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
function LabeledValue({
|
||||
label,
|
||||
value,
|
||||
}: Readonly<{ label: string; value: string }>) {
|
||||
return (
|
||||
<>
|
||||
<span className="font-semibold">{label}</span> {value}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SpellRangeLine({ spell }: Readonly<{ spell: SpellReference }>) {
|
||||
const items: { label: string; value: string }[] = [];
|
||||
if (spell.range) items.push({ label: "Range", value: spell.range });
|
||||
if (spell.target) items.push({ label: "Target", value: spell.target });
|
||||
if (spell.area) items.push({ label: "Area", value: spell.area });
|
||||
|
||||
if (items.length === 0) return null;
|
||||
return (
|
||||
<div>
|
||||
{items.map((item, i) => (
|
||||
<span key={item.label}>
|
||||
{i > 0 ? "; " : ""}
|
||||
<LabeledValue label={item.label} value={item.value} />
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpellMeta({ spell }: Readonly<{ spell: SpellReference }>) {
|
||||
const hasTraditions =
|
||||
spell.traditions !== undefined && spell.traditions.length > 0;
|
||||
return (
|
||||
<div className="space-y-0.5 text-xs">
|
||||
{spell.rank === undefined ? null : (
|
||||
<div>
|
||||
<span className="font-semibold">{formatRank(spell.rank)}</span>
|
||||
{hasTraditions ? (
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
({spell.traditions?.join(", ")})
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
<SpellRangeLine spell={spell} />
|
||||
{spell.duration ? (
|
||||
<div>
|
||||
<LabeledValue label="Duration" value={spell.duration} />
|
||||
</div>
|
||||
) : null}
|
||||
{spell.defense ? (
|
||||
<div>
|
||||
<LabeledValue label="Defense" value={spell.defense} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SAVE_OUTCOME_REGEX =
|
||||
/(Critical Success|Critical Failure|Success|Failure)/g;
|
||||
|
||||
function SpellDescription({ text }: Readonly<{ text: string }>) {
|
||||
const parts = text.split(SAVE_OUTCOME_REGEX);
|
||||
const elements: React.ReactNode[] = [];
|
||||
let offset = 0;
|
||||
for (const part of parts) {
|
||||
if (SAVE_OUTCOME_REGEX.test(part)) {
|
||||
elements.push(<strong key={`b-${offset}`}>{part}</strong>);
|
||||
} else if (part) {
|
||||
elements.push(<span key={`t-${offset}`}>{part}</span>);
|
||||
}
|
||||
offset += part.length;
|
||||
}
|
||||
return <p className="whitespace-pre-line text-foreground">{elements}</p>;
|
||||
}
|
||||
|
||||
function SpellDetailContent({ spell }: Readonly<{ spell: SpellReference }>) {
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<SpellHeader spell={spell} />
|
||||
<SpellTraits traits={spell.traits ?? []} />
|
||||
<SpellMeta spell={spell} />
|
||||
{spell.description ? (
|
||||
<SpellDescription text={spell.description} />
|
||||
) : (
|
||||
<p className="text-muted-foreground italic">
|
||||
No description available.
|
||||
</p>
|
||||
)}
|
||||
{spell.heightening ? (
|
||||
<p className="whitespace-pre-line text-foreground text-xs">
|
||||
{spell.heightening}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DesktopPopover({
|
||||
spell,
|
||||
anchorRect,
|
||||
onClose,
|
||||
}: Readonly<SpellDetailPopoverProps>) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const popover = el.getBoundingClientRect();
|
||||
const vw = document.documentElement.clientWidth;
|
||||
const vh = document.documentElement.clientHeight;
|
||||
// Prefer placement to the LEFT of the anchor (panel is on the right edge)
|
||||
let left = anchorRect.left - popover.width - 8;
|
||||
if (left < 8) {
|
||||
left = anchorRect.right + 8;
|
||||
}
|
||||
if (left + popover.width > vw - 8) {
|
||||
left = vw - popover.width - 8;
|
||||
}
|
||||
let top = anchorRect.top;
|
||||
if (top + popover.height > vh - 8) {
|
||||
top = vh - popover.height - 8;
|
||||
}
|
||||
if (top < 8) top = 8;
|
||||
setPos({ top, left });
|
||||
}, [anchorRect]);
|
||||
|
||||
useClickOutside(ref, onClose);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="card-glow fixed z-50 max-h-[calc(100vh-16px)] w-80 max-w-[calc(100vw-16px)] overflow-y-auto rounded-lg border border-border bg-card p-4 shadow-lg"
|
||||
style={pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }}
|
||||
role="dialog"
|
||||
aria-label={`Spell details: ${spell.name}`}
|
||||
>
|
||||
<SpellDetailContent spell={spell} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileSheet({
|
||||
spell,
|
||||
onClose,
|
||||
}: Readonly<{ spell: SpellReference; onClose: () => void }>) {
|
||||
const { offsetY, isSwiping, handlers } = useSwipeToDismissDown(onClose);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", handler);
|
||||
return () => document.removeEventListener("keydown", handler);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<button
|
||||
type="button"
|
||||
className="fade-in absolute inset-0 animate-in bg-black/50"
|
||||
onClick={onClose}
|
||||
aria-label="Close spell details"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"panel-glow absolute right-0 bottom-0 left-0 max-h-[80vh] rounded-t-2xl border-border border-t bg-card",
|
||||
!isSwiping && "animate-slide-in-bottom",
|
||||
)}
|
||||
style={
|
||||
isSwiping ? { transform: `translateY(${offsetY}px)` } : undefined
|
||||
}
|
||||
{...handlers}
|
||||
role="dialog"
|
||||
aria-label={`Spell details: ${spell.name}`}
|
||||
>
|
||||
<div className="flex justify-center pt-2 pb-1">
|
||||
<div className="h-1 w-10 rounded-full bg-muted-foreground/40" />
|
||||
</div>
|
||||
<div className="max-h-[calc(80vh-24px)] overflow-y-auto p-4">
|
||||
<SpellDetailContent spell={spell} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SpellDetailPopover({
|
||||
spell,
|
||||
anchorRect,
|
||||
onClose,
|
||||
}: Readonly<SpellDetailPopoverProps>) {
|
||||
const [isDesktop, setIsDesktop] = useState(
|
||||
() => globalThis.matchMedia("(min-width: 1024px)").matches,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const mq = globalThis.matchMedia("(min-width: 1024px)");
|
||||
const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
}, []);
|
||||
|
||||
// Portal to document.body to escape any CSS transforms on ancestors
|
||||
// (the side panel uses translate-x for collapse animation, which would
|
||||
// otherwise become the containing block for fixed-positioned children).
|
||||
const content = isDesktop ? (
|
||||
<DesktopPopover spell={spell} anchorRect={anchorRect} onClose={onClose} />
|
||||
) : (
|
||||
<MobileSheet spell={spell} onClose={onClose} />
|
||||
);
|
||||
return createPortal(content, document.body);
|
||||
}
|
||||
Reference in New Issue
Block a user