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 "}