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) {