53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import type { Stat } from "../types";
|
||
import { getModifier, formatModifier } from "../utils/modifiers";
|
||
import styles from "./StatBlock.module.css";
|
||
|
||
const STAT_ORDER = ["STR", "DEX", "CON", "INT", "WIS", "CHA"];
|
||
|
||
interface StatBlockProps {
|
||
stats: Stat[];
|
||
onStatChange: (statName: string, newValue: number) => void;
|
||
mode?: "view" | "edit";
|
||
}
|
||
|
||
export default function StatBlock({
|
||
stats,
|
||
onStatChange,
|
||
mode = "view",
|
||
}: StatBlockProps) {
|
||
const statMap = new Map(stats.map((s) => [s.stat_name, s.value]));
|
||
|
||
return (
|
||
<div className={styles.statGrid}>
|
||
{STAT_ORDER.map((name) => {
|
||
const value = statMap.get(name) ?? 10;
|
||
const mod = getModifier(value);
|
||
return (
|
||
<div key={name} className={styles.stat}>
|
||
<span className={styles.statName}>{name}</span>
|
||
<div className={styles.statRow}>
|
||
{mode === "edit" && (
|
||
<button
|
||
className={styles.btn}
|
||
onClick={() => onStatChange(name, value - 1)}
|
||
>
|
||
−
|
||
</button>
|
||
)}
|
||
<span className={styles.modifier}>{formatModifier(mod)}</span>
|
||
{mode === "edit" && (
|
||
<button
|
||
className={styles.btn}
|
||
onClick={() => onStatChange(name, value + 1)}
|
||
>
|
||
+
|
||
</button>
|
||
)}
|
||
</div>
|
||
<span className={styles.score}>{value}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|