dostulata/initiative
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve PF2e stat block action icons, triggers, and tag handling

Browse Source 
- Replace unicode action cost chars with custom SVG icons (diamond
  with chevron for actions, outlined diamond for free, curved arrow
  for reaction) rendered inline via ActivityCost on TraitBlock
- Add activity icons to attacks (all Strikes default to single action)
- Add trigger/effect rendering for reaction abilities (bold labels)
- Fix nested tag stripping ({@b ...{@spell ...}...}) by looping
- Move icon after ability name to match AoN format

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-04-08 10:36:30 +02:00
parent 57278e0c82
commit 0c235112ee
7 changed files with 187 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/web/src/components/stat-block-parts.tsx
View File

@@ -1,4 +1,8 @@
import type { TraitBlock, TraitSegment } from "@initiative/domain";
import type {
ActivityCost,
TraitBlock,
TraitSegment,
} from "@initiative/domain";
export function PropertyLine({
label,
@@ -57,10 +61,91 @@ function TraitSegments({
);
}
const ACTION_DIAMOND = "M50 2 L96 50 L50 98 L4 50 Z M48 28 L78 50 L48 72 Z";
const ACTION_DIAMOND_SOLID = "M50 2 L96 50 L50 98 L4 50 Z";
const FREE_ACTION_DIAMOND =
"M50 2 L96 50 L50 98 L4 50 Z M50 12 L12 50 L50 88 L88 50 Z";
const FREE_ACTION_CHEVRON = "M48 28 L78 50 L48 72 Z";
const REACTION_ARROW =
"M75 15 A42 42 0 1 0 85 55 L72 55 A30 30 0 1 1 65 25 L65 40 L92 20 L65 0 L65 15 Z";
function ActivityIcon({ activity }: Readonly<{ activity: ActivityCost }>) {
const cls = "inline-block h-[1em] align-[-0.1em]";
if (activity.unit === "free") {
return (
<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
<path d={FREE_ACTION_DIAMOND} fill="currentColor" fillRule="evenodd" />
<path d={FREE_ACTION_CHEVRON} fill="currentColor" />
</svg>
);
}
if (activity.unit === "reaction") {
return (
<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
<g transform="translate(100,100) rotate(180)">
<path d={REACTION_ARROW} fill="currentColor" />
</g>
</svg>
);
}
const count = activity.number;
if (count === 1) {
return (
<svg aria-hidden="true" className={cls} viewBox="0 0 100 100">
<path d={ACTION_DIAMOND} fill="currentColor" fillRule="evenodd" />
</svg>
);
}
if (count === 2) {
return (
<svg aria-hidden="true" className={cls} viewBox="0 0 140 100">
<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
<path
d="M90 2 L136 50 L90 98 L44 50 Z M88 28 L118 50 L88 72 Z"
fill="currentColor"
fillRule="evenodd"
/>
</svg>
);
}
return (
<svg aria-hidden="true" className={cls} viewBox="0 0 180 100">
<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
<path d="M90 2 L136 50 L90 98 L44 50 Z" fill="currentColor" />
<path
d="M130 2 L176 50 L130 98 L84 50 Z M128 28 L158 50 L128 72 Z"
fill="currentColor"
fillRule="evenodd"
/>
</svg>
);
}
export function TraitEntry({ trait }: Readonly<{ trait: TraitBlock }>) {
return (
<div className="text-sm">
<span className="font-semibold italic">{trait.name}.</span>
<span className="font-semibold italic">
{trait.name}
{trait.activity ? null : "."}
{trait.activity ? (
<>
{" "}
<ActivityIcon activity={trait.activity} />
</>
) : null}
</span>
{trait.trigger ? (
<>
{" "}
<span className="font-semibold">Trigger</span> {trait.trigger}
{trait.segments.length > 0 ? (
<>
{" "}
<span className="font-semibold">Effect</span>
</>
) : null}
</>
) : null}
<TraitSegments segments={trait.segments} />
</div>
);