From 1ff768e2fa8cd3cf132553253f5de301ee7f5965 Mon Sep 17 00:00:00 2001
From: Samuel Enocsson <samuel.enocsson@consid.se>
Date: Sat, 23 May 2026 06:45:39 +0200
Subject: [PATCH] fix: address std-dev inline span refresh + style fixes (#19)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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           |  3 +--
 public/js/players.js             | 45 ++++++++++++++++++--------------
 views/partials/ratings-table.ejs |  2 +-
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/public/css/players.css b/public/css/players.css
index 512ec21..0e758cc 100644
--- a/public/css/players.css
+++ b/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 {
diff --git a/public/js/players.js b/public/js/players.js
index dd4cb6d..e4c3910 100644
--- a/public/js/players.js
+++ b/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;
-            const maxRating = rating + stdDev;
-            setupTooltip(span, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
+            setupTooltip(span, tooltip, () => stdDevTooltipText(rating, stdDev));
         }
     });
 }
@@ -187,9 +206,7 @@ async function refreshPlayer(pdgaNumber) {
                 const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
 
                 if (rating && stdDev && tooltip) {
-                    const minRating = rating - stdDev;
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
+                    replaceWithTooltip(ratingValue, tooltip, () => stdDevTooltipText(rating, stdDev));
                 }
             }
 
@@ -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');
-                    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';
-                        }
-                    }
+                    updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
                 }
             }
 
@@ -247,9 +255,7 @@ async function refreshRoundHistory(pdgaNumber) {
                 const ratingTooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
 
                 if (rating && stdDev && ratingTooltip) {
-                    const minRating = rating - stdDev;
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, ratingTooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
+                    replaceWithTooltip(ratingValue, ratingTooltip, () => stdDevTooltipText(rating, stdDev));
                 }
             }
         }
@@ -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);
             }
         }
 
diff --git a/views/partials/ratings-table.ejs b/views/partials/ratings-table.ejs
index f889e6d..c722a7d 100644
--- a/views/partials/ratings-table.ejs
+++ b/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>