diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx index 709a347..e09176b 100644 --- a/apps/web/src/components/combatant-row.tsx +++ b/apps/web/src/components/combatant-row.tsx @@ -10,6 +10,7 @@ import { Brain, Pencil, X } from "lucide-react"; import { type Ref, useCallback, useEffect, useRef, useState } from "react"; import { useEncounterContext } from "../contexts/encounter-context.js"; import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js"; +import { useRulesEditionContext } from "../contexts/rules-edition-context.js"; import { useSidePanelContext } from "../contexts/side-panel-context.js"; import { useLongPress } from "../hooks/use-long-press.js"; import { cn } from "../lib/utils.js"; @@ -415,12 +416,14 @@ function InitiativeDisplay({ function rowBorderClass( isActive: boolean, isConcentrating: boolean | undefined, + isPf2e: boolean, ): string { - if (isActive && isConcentrating) + const showConcentration = isConcentrating && !isPf2e; + if (isActive && showConcentration) return "border border-l-2 border-active-row-border border-l-purple-400 bg-active-row-bg card-glow"; if (isActive) return "border border-l-2 border-active-row-border bg-active-row-bg card-glow"; - if (isConcentrating) + if (showConcentration) return "border border-l-2 border-transparent border-l-purple-400"; return "border border-l-2 border-transparent"; } @@ -455,6 +458,8 @@ export function CombatantRow({ const { selectedCreatureId, showCreature, toggleCollapse } = useSidePanelContext(); const { handleRollInitiative } = useInitiativeRollsContext(); + const { edition } = useRulesEditionContext(); + const isPf2e = edition === "pf2e"; // Derive what was previously conditional props const isStatBlockOpen = combatant.creatureId === selectedCreatureId; @@ -495,12 +500,16 @@ export function CombatantRow({ const tempHpDropped = prevTempHp !== undefined && (combatant.tempHp ?? 0) < prevTempHp; - if ((realHpDropped || tempHpDropped) && combatant.isConcentrating) { + if ( + (realHpDropped || tempHpDropped) && + combatant.isConcentrating && + !isPf2e + ) { setIsPulsing(true); clearTimeout(pulseTimerRef.current); pulseTimerRef.current = setTimeout(() => setIsPulsing(false), 1200); } - }, [currentHp, combatant.tempHp, combatant.isConcentrating]); + }, [currentHp, combatant.tempHp, combatant.isConcentrating, isPf2e]); useEffect(() => { if (!combatant.isConcentrating) { @@ -518,24 +527,33 @@ export function CombatantRow({ ref={ref} className={cn( "group rounded-lg pr-3 transition-colors", - rowBorderClass(isActive, combatant.isConcentrating), + rowBorderClass(isActive, combatant.isConcentrating, isPf2e), isPulsing && "animate-concentration-pulse", )} > -