feat: display current party combat power as a persistent stat (#72)
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m4s
CI / Lint, Build & Test (push) Successful in 1m8s

## Summary

- Adds a `⚔️ Combat Power` entry to the always-visible resource bar
- Value is computed client-side as the sum of each adventurer's `combatPower × count`
- No new props required — computed directly from `state` via the existing `useGame()` hook
- Players can now see their combat strength at a glance before attempting boss fights or quests

## Test plan

- [ ] Verify the Combat Power stat appears in the resource bar
- [ ] Verify the value increases as more adventurers are recruited
- [ ] Verify the value displays correctly with `formatNumber` for large numbers
- [ ] Confirm lint, build, and tests all pass

Closes #58

Reviewed-on: #72
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #72.
This commit is contained in:
2026-03-19 11:55:57 -07:00
committed by Naomi Carrigan
parent d723656743
commit c4b4fba4c9
+15 -1
View File
@@ -77,8 +77,15 @@ const ResourceBar = ({
isSyncing, isSyncing,
onForceSync, onForceSync,
}: ResourceBarProperties): JSX.Element => { }: ResourceBarProperties): JSX.Element => {
const { formatNumber, syncError } = useGame(); const { formatNumber, syncError, state } = useGame();
const { gold, essence, crystals } = resources; const { gold, essence, crystals } = resources;
let partyCombatPower = 0;
if (state !== null) {
for (const adventurer of state.adventurers) {
const contribution = adventurer.combatPower * adventurer.count;
partyCombatPower = partyCombatPower + contribution;
}
}
const resourceValues = [ gold, essence, crystals ]; const resourceValues = [ gold, essence, crystals ];
const anyFull = resourceValues.some((v) => { const anyFull = resourceValues.some((v) => {
return v >= RESOURCE_CAP; return v >= RESOURCE_CAP;
@@ -135,6 +142,13 @@ const ResourceBar = ({
<span className="resource-value">{formatNumber(runestones)}</span> <span className="resource-value">{formatNumber(runestones)}</span>
<span className="resource-label">{"Runestones"}</span> <span className="resource-label">{"Runestones"}</span>
</div> </div>
<div className="resource">
<span className="resource-icon">{"⚔️"}</span>
<span className="resource-value">
{formatNumber(partyCombatPower)}
</span>
<span className="resource-label">{"Combat Power"}</span>
</div>
{apotheosisCount > 0 {apotheosisCount > 0
&& <div className="apotheosis-badge"> && <div className="apotheosis-badge">
{"✨ Apotheosis "} {"✨ Apotheosis "}