From c4b4fba4c91c8187d3bc3fb09f2abb83aefef9c5 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 19 Mar 2026 11:55:57 -0700
Subject: [PATCH] feat: display current party combat power as a persistent stat
 (#72)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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: https://git.nhcarrigan.com/nhcarrigan/elysium/pulls/72
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
---
 apps/web/src/components/ui/resourceBar.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/resourceBar.tsx b/apps/web/src/components/ui/resourceBar.tsx
index d4d4ae0..0a20d27 100644
--- a/apps/web/src/components/ui/resourceBar.tsx
+++ b/apps/web/src/components/ui/resourceBar.tsx
@@ -77,8 +77,15 @@ const ResourceBar = ({
   isSyncing,
   onForceSync,
 }: ResourceBarProperties): JSX.Element => {
-  const { formatNumber, syncError } = useGame();
+  const { formatNumber, syncError, state } = useGame();
   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 anyFull = resourceValues.some((v) => {
     return v >= RESOURCE_CAP;
@@ -135,6 +142,13 @@ const ResourceBar = ({
           <span className="resource-value">{formatNumber(runestones)}</span>
           <span className="resource-label">{"Runestones"}</span>
         </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
           && <div className="apotheosis-badge">
             {"✨ Apotheosis "}