dostulata/initiative
1
0
Fork 0
Code Issues 8 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

55
apps/web/src/adapters/__tests__/pf2e-bestiary-adapter.test.ts
View File

@@ -197,7 +197,8 @@ describe("normalizePf2eBestiary", () => {
});
const ability = creature.abilitiesBot?.[0];
expect(ability).toBeDefined();
expect(ability?.name).toBe("\u25C6 Change Shape");
expect(ability?.name).toBe("Change Shape");
expect(ability?.activity).toEqual({ number: 1, unit: "action" });
expect(ability?.segments[0]).toEqual(
expect.objectContaining({
type: "text",
@@ -208,7 +209,7 @@ describe("normalizePf2eBestiary", () => {
);
});
it("shows free action icon", () => {
it("parses free action activity", () => {
const [creature] = normalizePf2eBestiary({
creature: [
minimalCreature({
@@ -224,10 +225,12 @@ describe("normalizePf2eBestiary", () => {
}),
],
});
expect(creature.abilitiesBot?.[0]?.name).toBe("\u25C7 Adaptive Strike");
const ability = creature.abilitiesBot?.[0];
expect(ability?.name).toBe("Adaptive Strike");
expect(ability?.activity).toEqual({ number: 1, unit: "free" });
});
it("shows reaction icon", () => {
it("parses reaction activity", () => {
const [creature] = normalizePf2eBestiary({
creature: [
minimalCreature({
@@ -243,12 +246,12 @@ describe("normalizePf2eBestiary", () => {
}),
],
});
expect(creature.abilitiesMid?.[0]?.name).toBe(
"\u21BA Attack of Opportunity",
);
const ability = creature.abilitiesMid?.[0];
expect(ability?.name).toBe("Attack of Opportunity");
expect(ability?.activity).toEqual({ number: 1, unit: "reaction" });
});
it("shows multi-action icons", () => {
it("parses multi-action activity", () => {
const [creature] = normalizePf2eBestiary({
creature: [
minimalCreature({
@@ -264,9 +267,9 @@ describe("normalizePf2eBestiary", () => {
}),
],
});
expect(creature.abilitiesBot?.[0]?.name).toBe(
"\u25C6\u25C6 Breath Weapon",
);
const ability = creature.abilitiesBot?.[0];
expect(ability?.name).toBe("Breath Weapon");
expect(ability?.activity).toEqual({ number: 2, unit: "action" });
});
it("renders ability without activity or traits normally", () => {
@@ -287,6 +290,7 @@ describe("normalizePf2eBestiary", () => {
const ability = creature.abilitiesBot?.[0];
expect(ability).toBeDefined();
expect(ability?.name).toBe("Constrict");
expect(ability?.activity).toBeUndefined();
expect(ability?.segments[0]).toEqual(
expect.objectContaining({
type: "text",
@@ -294,6 +298,35 @@ describe("normalizePf2eBestiary", () => {
}),
);
});
it("includes trigger text before entries", () => {
const [creature] = normalizePf2eBestiary({
creature: [
minimalCreature({
abilities: {
mid: [
{
name: "Wing Deflection",
activity: { number: 1, unit: "reaction" },
trigger: "The dragon is targeted with an attack.",
entries: ["The dragon raises its wing."],
},
],
},
}),
],
});
const ability = creature.abilitiesMid?.[0];
expect(ability).toBeDefined();
expect(ability?.activity).toEqual({ number: 1, unit: "reaction" });
expect(ability?.trigger).toBe("The dragon is targeted with an attack.");
expect(ability?.segments[0]).toEqual(
expect.objectContaining({
type: "text",
value: "The dragon raises its wing.",
}),
);
});
});
describe("resistances formatting", () => {

10
apps/web/src/adapters/__tests__/strip-tags.test.ts
View File

@@ -138,12 +138,20 @@ describe("stripTags", () => {
);
});
it("handles nested tags gracefully", () => {
it("handles sibling tags in the same string", () => {
expect(
stripTags("The spell {@spell Fireball|XPHB} deals {@damage 8d6}."),
).toBe("The spell Fireball deals 8d6.");
});
it("handles nested tags (outer wrapping inner)", () => {
expect(
stripTags(
"{@b Arcane Innate Spells DC 24; 3rd {@spell fireball}, {@spell slow}}",
),
).toBe("Arcane Innate Spells DC 24; 3rd fireball, slow");
});
it("handles text with no tags", () => {
expect(stripTags("Just plain text.")).toBe("Just plain text.");
});

39
apps/web/src/adapters/pf2e-bestiary-adapter.ts
View File

@@ -47,6 +47,7 @@ interface RawDefenses {
interface RawAbility {
name?: string;
activity?: { number?: number; unit?: string };
trigger?: string;
traits?: string[];
entries?: RawEntry[];
}
@@ -81,20 +82,15 @@ function capitalize(s: string): string {
return s.charAt(0).toUpperCase() + s.slice(1);
}
function formatActivityIcon(
function parseActivity(
activity: { number?: number; unit?: string } | undefined,
): string {
if (!activity) return "";
switch (activity.unit) {
case "free":
return "\u25C7 ";
case "reaction":
return "\u21BA ";
case "action":
return "\u25C6".repeat(activity.number ?? 1) + " ";
default:
return "";
): { number: number; unit: "action" | "free" | "reaction" } | undefined {
if (!activity?.unit) return undefined;
const unit = activity.unit;
if (unit === "action" || unit === "free" || unit === "reaction") {
return { number: activity.number ?? 1, unit };
}
return undefined;
}
function stripAngleBrackets(s: string): string {
@@ -262,28 +258,34 @@ function normalizeAbilities(
.filter((a) => a.name)
.map((a) => {
const raw = a as Record<string, unknown>;
const icon = formatActivityIcon(a.activity);
const activity = parseActivity(a.activity);
const trigger = a.trigger ? stripTags(a.trigger) : undefined;
const traits =
a.traits && a.traits.length > 0
? `(${a.traits.map((t) => capitalize(stripAngleBrackets(stripTags(t)))).join(", ")}) `
: "";
const prefix = traits;
const body = Array.isArray(a.entries)
? segmentizeEntries(a.entries)
: formatAffliction(raw);
const name = icon + stripTags(a.name as string);
if (traits && body.length > 0 && body[0].type === "text") {
const name = stripTags(a.name as string);
if (prefix && body.length > 0 && body[0].type === "text") {
return {
name,
activity,
trigger,
segments: [
{ type: "text" as const, value: traits + body[0].value },
{ type: "text" as const, value: prefix + body[0].value },
...body.slice(1),
],
};
}
return {
name,
segments: traits
? [{ type: "text" as const, value: traits }, ...body]
activity,
trigger,
segments: prefix
? [{ type: "text" as const, value: prefix }, ...body]
: body,
};
});
@@ -306,6 +308,7 @@ function normalizeAttacks(
: "";
return {
name: capitalize(stripTags(a.name)),
activity: { number: 1, unit: "action" as const },
segments: [
{
type: "text" as const,

30
apps/web/src/adapters/strip-tags.ts
View File

@@ -98,20 +98,26 @@ export function stripTags(text: string): string {
// Generic tags: {@tag Display|Source|...} → Display (first segment before |)
// Covers: spell, condition, damage, dice, variantrule, action, skill,
// creature, hazard, status, plus any unknown tags
result = result.replaceAll(
/\{@(\w+)\s+([^}]+)\}/g,
(_, tag: string, content: string) => {
// For tags with Display|Source format, extract first segment
const segments = content.split("|");
// Run in a loop to resolve nested tags (e.g. {@b ... {@spell fireball} ...})
// from innermost to outermost.
const tagPattern = /\{@(\w+)\s+([^}]+)\}/g;
while (tagPattern.test(result)) {
result = result.replaceAll(
tagPattern,
(_, tag: string, content: string) => {
const segments = content.split("|");
// Some tags have a third segment as display text: {@variantrule Name|Source|Display}
if ((tag === "variantrule" || tag === "action") && segments.length >= 3) {
return segments[2];
}
if (
(tag === "variantrule" || tag === "action") &&
segments.length >= 3
) {
return segments[2];
}
return segments[0];
},
);
return segments[0];
},
);
}
return result;
}

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>
);

7
packages/domain/src/creature-types.ts
View File

@@ -14,8 +14,15 @@ export interface TraitListItem {
readonly text: string;
}
export interface ActivityCost {
readonly number: number;
readonly unit: "action" | "free" | "reaction";
}
export interface TraitBlock {
readonly name: string;
readonly activity?: ActivityCost;
readonly trigger?: string;
readonly segments: readonly TraitSegment[];
}

1
packages/domain/src/index.ts
View File

@@ -24,6 +24,7 @@ export {
createPlayerCharacter,
} from "./create-player-character.js";
export {
type ActivityCost,
type AnyCreature,
type BestiaryIndex,
type BestiaryIndexEntry,