Show damage optimizer effects in table

app.js

@@ -717,24 +717,21 @@ function findOptimalDamageSetup(totals, effectCount, combatStyle) {
   return best;
 }
 
-function formatOptimalSuggestion(counts) {
-  return Object.entries(counts)
-    .filter(([, count]) => count > 0)
-    .map(([effectId, count]) => {
-      const effect = effectById(effectId);
-      return `${count}x ${effect.cap}% ${effect.label.toLowerCase()}`;
-    })
-    .join(", ");
-}
-
-function formatCurrentEffectAverages(summary) {
-  return Object.entries(summary)
-    .filter(([, data]) => data.count > 0)
-    .map(([effectId, data]) => {
-      const effect = effectById(effectId);
-      return `${data.count}x avg ${fmt(data.total / data.count)}% ${effect.label.toLowerCase()}`;
-    })
-    .join(", ");
+function renderEffectComparisonRows(optimumCounts, currentSummary) {
+  const rows = EFFECTS.map((effect) => {
+    const optimumCount = optimumCounts[effect.id] || 0;
+    const current = currentSummary[effect.id];
+    return `
+      <tr>
+        <th scope="row">${effect.label}</th>
+        <td>${optimumCount ? optimumCount : ""}</td>
+        <td>${optimumCount ? `${effect.cap}%` : ""}</td>
+        <td>${current.count || ""}</td>
+        <td>${current.count ? `${fmt(current.total / current.count)}%` : ""}</td>
+      </tr>
+    `;
+  });
+  $("#effectComparisonRows").innerHTML = rows.join("");
 }
 
 function renderOptimalDamageSetup(totals, currentDps) {
@@ -747,12 +744,7 @@ function renderOptimalDamageSetup(totals, currentDps) {
   $("#optimumDps").textContent = fmt(optimum.dps);
   $("#optimumDpsDelta").textContent = formatDelta(delta, "%");
   $("#optimumDpsDelta").className = deltaClass(delta);
-  $("#optimumSuggestion").textContent = effectCount
-    ? formatOptimalSuggestion(optimum.counts)
-    : "Add effects to your current build to see an optimized max-roll damage mix.";
-  $("#currentEffectAverages").textContent = effectCount
-    ? formatCurrentEffectAverages(currentEffectSummary)
-    : "No current effects entered.";
+  renderEffectComparisonRows(effectCount ? optimum.counts : {}, currentEffectSummary);
 }
 
 function updateEffectImpactHints(totals, currentDps) {

index.html

@@ -99,10 +99,19 @@
           <div><span>Optimal DPS</span><strong id="optimumDps">0</strong></div>
           <div><span>Difference vs current</span><strong id="optimumDpsDelta">0</strong></div>
         </div>
-        <p id="optimumSuggestion" class="optimum-suggestion"></p>
-        <div class="current-effect-summary">
-          <h3>Current effects</h3>
-          <p id="currentEffectAverages" class="optimum-suggestion"></p>
+        <div class="effect-comparison-wrap">
+          <table class="effect-comparison-table">
+            <thead>
+              <tr>
+                <th>Effect name</th>
+                <th>Optimum count</th>
+                <th>Optimum effect</th>
+                <th>Current count</th>
+                <th>Current avg</th>
+              </tr>
+            </thead>
+            <tbody id="effectComparisonRows"></tbody>
+          </table>
         </div>
       </section>
 

styles.css

@@ -278,22 +278,32 @@ h3 { margin-bottom: 0; }
   margin-bottom: 0.25rem;
 }
 .optimum-results strong { font-size: 1.35rem; }
-.optimum-suggestion {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 800;
-  overflow-wrap: anywhere;
+.effect-comparison-wrap { overflow-x: auto; }
+.effect-comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 680px;
 }
-.current-effect-summary {
-  border-top: 1px solid var(--border);
-  padding-top: 0.75rem;
+.effect-comparison-table th,
+.effect-comparison-table td {
+  border-bottom: 1px solid var(--border);
+  padding: 0.55rem 0.65rem;
+  text-align: right;
+  white-space: nowrap;
 }
-.current-effect-summary h3 {
+.effect-comparison-table thead th {
   color: var(--muted);
-  font-size: 0.95rem;
-  margin-bottom: 0.35rem;
+  font-size: 0.82rem;
+  font-weight: 700;
 }
-.current-effect-summary .optimum-suggestion { color: var(--text); }
+.effect-comparison-table th:first-child,
+.effect-comparison-table td:first-child { text-align: left; }
+.effect-comparison-table tbody th {
+  color: var(--text);
+  font-weight: 700;
+}
+.effect-comparison-table tbody td { color: var(--accent); font-weight: 800; }
+.effect-comparison-table tbody td:empty::after { content: ""; }
 .swap-actions {
   display: flex;
   flex-wrap: wrap;