Show hit and crit damage in DPS metric

app.js

@@ -214,13 +214,15 @@ function renderGear() {
 function updateAnalysis() {
   const profile = PROFILES[state.profile];
   const totals = calculateTotals();
-  const dps = calculateDps(totals, state.combatStyle);
+  const damageDetails = calculateDamageDetails(totals, state.combatStyle);
+  const dps = damageDetails.dps;
   const survivability = calculateSurvivability(totals);
   const pieceScores = state.pieces.map((piece) => scorePiece(piece, profile, totals));
 
   $("#totalDamage").textContent = fmt(totals.baseDamage);
   $("#totalHealth").textContent = fmt(totals.baseHealth);
   $("#dpsValue").textContent = fmt(dps);
+  $("#hitDamageDetails").innerHTML = `Hit ${fmt(damageDetails.singleHit)}<br>Crit ${fmt(damageDetails.critHit)}`;
   $("#defenseScore").textContent = fmt(calculateGroupScore(totals, profile, ["defense", "hybrid"], "health"));
 
   document.querySelectorAll(".gear-card").forEach((card, index) => {
@@ -247,17 +249,27 @@ function calculateTotals() {
 }
 
 function calculateDps(totals, combatStyle = "melee") {
+  return calculateDamageDetails(totals, combatStyle).dps;
+}
+
+function calculateDamageDetails(totals, combatStyle = "melee") {
   const effects = totals.effects;
   const baseDamage = Math.max(0, totals.baseDamage);
   const globalDamage = 1 + effects.damage / 100;
   const styleDamage = 1 + getStyleDamageBonus(effects, combatStyle) / 100;
+  const singleHit = baseDamage * globalDamage * styleDamage;
   const attackSpeed = 1 + effects.attackSpeed / 100;
   const doubleHit = 1 + effects.doubleChance / 100;
   const critChance = effects.critChance / 100;
   const critDamage = effects.critDamage / 100;
   const crit = 1 + critChance * critDamage;
+  const critHit = singleHit * (1 + critDamage);
   const cooldown = combatStyle === "skill" ? 1 / Math.max(0.05, 1 - effects.skillCooldown / 100) : 1;
-  return baseDamage * globalDamage * styleDamage * attackSpeed * doubleHit * crit * cooldown;
+  return {
+    singleHit,
+    critHit,
+    dps: singleHit * attackSpeed * doubleHit * crit * cooldown,
+  };
 }
 
 function calculateSurvivability(totals) {

index.html

@@ -68,7 +68,7 @@
       <section class="summary-grid" aria-label="Build summary">
         <article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>
         <article class="metric"><span>Total health base</span><strong id="totalHealth">0</strong></article>
-        <article class="metric"><span>Calculated DPS</span><strong id="dpsValue">0</strong></article>
+        <article class="metric"><span>Calculated DPS</span><strong id="dpsValue">0</strong><small id="hitDamageDetails"></small></article>
         <article class="metric"><span>Defense score</span><strong id="defenseScore">0</strong></article>
       </section>
 

styles.css

@@ -151,6 +151,7 @@ h3 { margin-bottom: 0; }
 .metric { padding: 1rem; }
 .metric span { display: block; color: var(--muted); margin-bottom: 0.35rem; }
 .metric strong { font-size: 1.8rem; }
+.metric small { display: block; margin-top: 0.4rem; color: var(--muted); line-height: 1.35; }
 
 .results { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
 .recommendation-list { display: grid; gap: 0.75rem; padding-left: 1.5rem; }