Improve bestiary icon UX and auto-update stat block on turn change
- Use Book/BookOpen icons to indicate stat block open state - Bump combatant icons (bestiary + PC) from 14px to 16px - Use text-foreground for bestiary icon visibility - Auto-update stat block panel to active combatant's creature on turn advance - Update bestiary spec edge case to reflect new behavior Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,7 @@ import {
|
||||
deriveHpStatus,
|
||||
type PlayerIcon,
|
||||
} from "@initiative/domain";
|
||||
import { BookOpen, Brain, X } from "lucide-react";
|
||||
import { Book, BookOpen, Brain, X } from "lucide-react";
|
||||
import { type Ref, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { AcShield } from "./ac-shield";
|
||||
@@ -41,6 +41,7 @@ interface CombatantRowProps {
|
||||
onToggleCondition: (id: CombatantId, conditionId: ConditionId) => void;
|
||||
onToggleConcentration: (id: CombatantId) => void;
|
||||
onShowStatBlock?: () => void;
|
||||
isStatBlockOpen?: boolean;
|
||||
onRollInitiative?: (id: CombatantId) => void;
|
||||
}
|
||||
|
||||
@@ -396,6 +397,7 @@ export function CombatantRow({
|
||||
onToggleCondition,
|
||||
onToggleConcentration,
|
||||
onShowStatBlock,
|
||||
isStatBlockOpen,
|
||||
onRollInitiative,
|
||||
}: CombatantRowProps & { ref?: Ref<HTMLDivElement> }) {
|
||||
const { id, name, initiative, maxHp, currentHp } = combatant;
|
||||
@@ -480,9 +482,9 @@ export function CombatantRow({
|
||||
onClick={onShowStatBlock}
|
||||
title="View stat block"
|
||||
aria-label="View stat block"
|
||||
className="shrink-0 text-muted-foreground transition-colors hover:text-hover-neutral"
|
||||
className="shrink-0 text-foreground transition-colors hover:text-hover-neutral"
|
||||
>
|
||||
<BookOpen size={14} />
|
||||
{isStatBlockOpen ? <BookOpen size={16} /> : <Book size={16} />}
|
||||
</button>
|
||||
)}
|
||||
{!!combatant.icon &&
|
||||
@@ -495,7 +497,7 @@ export function CombatantRow({
|
||||
];
|
||||
return PcIcon ? (
|
||||
<PcIcon
|
||||
size={14}
|
||||
size={16}
|
||||
style={{ color: iconColor }}
|
||||
className="shrink-0"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user