Color-code max-roll effect gains

app.js

@@ -287,14 +287,26 @@ function cloneTotalsWithEffectDelta(totals, effectType, delta) {
   };
 }
 
-function describeMaxRollGain(effect, totals, currentDps, currentSurvivability) {
+function calculateMaxRollGain(effect, totals, currentDps, currentSurvivability) {
   const withMaxRoll = cloneTotalsWithEffectDelta(totals, effect.id, effect.cap);
   const dpsGain = percentChange(currentDps, calculateDps(withMaxRoll, state.combatStyle));
   const survivabilityGain = percentChange(currentSurvivability, calculateSurvivability(withMaxRoll));
   const parts = [];
   if (Math.abs(dpsGain) >= 0.05) parts.push(`+${fmt(dpsGain)}% DPS`);
   if (Math.abs(survivabilityGain) >= 0.05) parts.push(`+${fmt(survivabilityGain)}% survivability`);
-  return parts.length ? parts.join(" / ") : "no effect for current style";
+  return {
+    label: parts.length ? parts.join(" / ") : "no effect for current style",
+    score: Math.max(0, dpsGain, survivabilityGain),
+  };
+}
+
+function classifyGain(score, bestScore) {
+  if (bestScore <= 0 || score <= 0.05) return "gain-low";
+  const ratio = score / bestScore;
+  if (ratio >= 0.75) return "gain-best";
+  if (ratio >= 0.4) return "gain-good";
+  if (ratio >= 0.15) return "gain-mid";
+  return "gain-low";
 }
 
 function percentChange(from, to) {
@@ -333,11 +345,20 @@ function scorePiece(piece, profile, totals) {
 }
 
 function renderEffectTotals(totals, currentDps, currentSurvivability) {
-  $("#effectTotals").innerHTML = EFFECTS.map((effect) => `
+  const gains = EFFECTS.map((effect) => ({
+    effect,
+    gain: calculateMaxRollGain(effect, totals, currentDps, currentSurvivability),
+  }));
+  const bestScore = Math.max(...gains.map(({ gain }) => gain.score), 0);
+
+  $("#effectTotals").innerHTML = gains.map(({ effect, gain }) => `
     <div class="effect-pill">
       <span>${effect.label}</span>
       <strong>${fmt(totals.effects[effect.id])}%</strong>
-      <small>Max roll +${effect.cap}%: ${describeMaxRollGain(effect, totals, currentDps, currentSurvivability)}</small>
+      <small class="max-roll-row">
+        <span>Max roll +${effect.cap}%</span>
+        <strong class="${classifyGain(gain.score, bestScore)}">${gain.label}</strong>
+      </small>
     </div>
   `).join("");
 }