onHpChange(character.id, hp)}
/>
diff --git a/client/src/components/CharacterSheet.module.css b/client/src/components/CharacterSheet.module.css
index d3bb2ad..8086390 100644
--- a/client/src/components/CharacterSheet.module.css
+++ b/client/src/components/CharacterSheet.module.css
@@ -76,6 +76,12 @@
font-weight: 600;
}
+.hpBonus {
+ color: #4caf50;
+ font-size: 0.65rem;
+ margin-left: 0.15rem;
+}
+
.xpThreshold {
font-size: 0.75rem;
color: #666;
diff --git a/client/src/components/CharacterSheet.tsx b/client/src/components/CharacterSheet.tsx
index 56754c9..b1192c5 100644
--- a/client/src/components/CharacterSheet.tsx
+++ b/client/src/components/CharacterSheet.tsx
@@ -1,6 +1,7 @@
import { useState, useRef, useEffect } from "react";
import type { Character, GameItem } from "../types";
import { calculateAC } from "../utils/derived-ac";
+import { getTalentHpBonus } from "../utils/talent-effects";
import AcDisplay from "./AcDisplay";
import InlineNumber from "./InlineNumber";
import StatsPanel from "./StatsPanel";
@@ -51,6 +52,8 @@ export default function CharacterSheet({
const [confirmDelete, setConfirmDelete] = useState(false);
const debounceRef = useRef>();
const acBreakdown = calculateAC(character);
+ const hpBonus = getTalentHpBonus(character);
+ const effectiveHpMax = character.hp_max + hpBonus;
const xpThreshold = character.level * 10;
useEffect(() => {
@@ -122,14 +125,24 @@ export default function CharacterSheet({
/>
/
{mode === "edit" ? (
- onUpdate(character.id, { hp_max: hp })}
- className={styles.hpMax}
- min={0}
- />
+ <>
+ onUpdate(character.id, { hp_max: hp })}
+ className={styles.hpMax}
+ min={0}
+ />
+ {hpBonus > 0 && (
+ (+{hpBonus})
+ )}
+ >
) : (
- {character.hp_max}
+
+ {effectiveHpMax}
+ {hpBonus > 0 && (
+ (+{hpBonus})
+ )}
+
)}