47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { Character } from "../types";
|
|
import { generateAttacks } from "../utils/derived-attacks";
|
|
import StatBlock from "./StatBlock";
|
|
import AttackBlock from "./AttackBlock";
|
|
import styles from "./StatsPanel.module.css";
|
|
|
|
interface StatsPanelProps {
|
|
character: Character;
|
|
mode: "view" | "edit";
|
|
campaignId: number;
|
|
onStatChange: (characterId: number, statName: string, value: number) => void;
|
|
}
|
|
|
|
export default function StatsPanel({
|
|
character,
|
|
mode,
|
|
campaignId,
|
|
onStatChange,
|
|
}: StatsPanelProps) {
|
|
const attacks = generateAttacks(character);
|
|
|
|
return (
|
|
<div className={styles.panel}>
|
|
<div className={styles.sectionTitle}>Ability Scores</div>
|
|
<StatBlock
|
|
stats={character.stats}
|
|
onStatChange={(statName, value) =>
|
|
onStatChange(character.id, statName, value)
|
|
}
|
|
mode={mode}
|
|
campaignId={campaignId}
|
|
characterId={character.id}
|
|
characterName={character.name}
|
|
characterColor={character.color}
|
|
/>
|
|
<hr className={styles.separator} />
|
|
<AttackBlock
|
|
attacks={attacks}
|
|
campaignId={campaignId}
|
|
characterId={character.id}
|
|
characterName={character.name}
|
|
characterColor={character.color}
|
|
mode={mode}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|