fix: address std-dev inline span refresh + style fixes (#19)

- A: create inline span when missing in refreshRoundHistory (was silently dropped)
- B: updateStdDevInline also called from refreshHistoryThenCalculate
- C: extract stdDevTooltipText + updateStdDevInline helpers; replace 3 call sites
- D: remove margin-left: 4px and bump font-size to 12px on .std-dev-inline
- E: guard against stdDev === 0 in EJS (truthy → != null)

public/css/players.css

@@ -49,9 +49,8 @@
 
 .std-dev-inline {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: 12px;
     font-variant-numeric: tabular-nums;
-    margin-left: 4px;
 }
 
 .difference {

public/js/players.js

@@ -26,6 +26,27 @@ function applyDeltaPill(pillEl, value) {
     pillEl.appendChild(numSpan);
 }
 
+// ── Std-dev helpers ───────────────────────────────
+function stdDevTooltipText(rating, stdDev) {
+    return `Spridning: ±${stdDev} poäng\nIntervall: ${rating - stdDev}–${rating + stdDev}`;
+}
+
+function updateStdDevInline(predStack, stdDev) {
+    if (!predStack) return;
+    let stdDevInline = predStack.querySelector('.std-dev-inline');
+    if (stdDev) {
+        if (!stdDevInline) {
+            stdDevInline = document.createElement('span');
+            stdDevInline.className = 'std-dev-inline mono';
+            predStack.appendChild(stdDevInline);
+        }
+        stdDevInline.textContent = '±' + stdDev;
+        stdDevInline.style.display = '';
+    } else if (stdDevInline) {
+        stdDevInline.style.display = 'none';
+    }
+}
+
 function initChartsIn(rootEl) {
     rootEl.querySelectorAll('.player-chart').forEach(function(container) {
         if (container.dataset.charted === 'true') return;
@@ -75,9 +96,7 @@ function initRatingsTooltips() {
         const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
 
         if (rating && stdDev && tooltip) {
-            const minRating = rating - stdDev;
+            setupTooltip(span, tooltip, () => stdDevTooltipText(rating, stdDev));
-            const maxRating = rating + stdDev;
-            setupTooltip(span, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
         }
     });
 }
@@ -187,9 +206,7 @@ async function refreshPlayer(pdgaNumber) {
                 const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
 
                 if (rating && stdDev && tooltip) {
-                    const minRating = rating - stdDev;
+                    replaceWithTooltip(ratingValue, tooltip, () => stdDevTooltipText(rating, stdDev));
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
                 }
             }
 
@@ -223,16 +240,7 @@ async function refreshRoundHistory(pdgaNumber) {
                     predictedValue.textContent = data.predictedRating || 'N/A';
                     predictedValue.dataset.stddev = data.stdDev || '';
 
-                    const predStack = predictedValue.closest('.pred-stack');
+                    updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
-                    const stdDevInline = predStack ? predStack.querySelector('.std-dev-inline') : null;
-                    if (stdDevInline) {
-                        if (data.stdDev) {
-                            stdDevInline.textContent = '\u00b1' + data.stdDev;
-                            stdDevInline.style.display = '';
-                        } else {
-                            stdDevInline.style.display = 'none';
-                        }
-                    }
                 }
             }
 
@@ -247,9 +255,7 @@ async function refreshRoundHistory(pdgaNumber) {
                 const ratingTooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
 
                 if (rating && stdDev && ratingTooltip) {
-                    const minRating = rating - stdDev;
+                    replaceWithTooltip(ratingValue, ratingTooltip, () => stdDevTooltipText(rating, stdDev));
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, ratingTooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
                 }
             }
         }
@@ -766,6 +772,7 @@ async function refreshHistoryThenCalculate(pdgaNumber) {
             if (predictedValue) {
                 predictedValue.textContent = data.predictedRating || 'N/A';
                 predictedValue.dataset.stddev = data.stdDev || '';
+                updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
             }
         }
 

views/partials/ratings-table.ejs

@@ -74,7 +74,7 @@ function renderSparkline(values, opts) {
                     <div class="pred-stack">
                         <span class="predicted-value pred-num mono" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>"><%= player.predictedRating %></span>
                         <%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %>
-                        <% if (player.stdDev) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
+                        <% if (player.stdDev != null) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
                     </div>
                     <% } else { %>
                     <span class="rating-pending">—</span>