diff --git a/public/css/players.css b/public/css/players.css index ac98cae..512ec21 100644 --- a/public/css/players.css +++ b/public/css/players.css @@ -14,6 +14,7 @@ .rating-value { font-variant-numeric: tabular-nums; + cursor: help; } .pdga-number { @@ -46,6 +47,13 @@ font-variant-numeric: tabular-nums; } +.std-dev-inline { + color: var(--text-muted); + font-size: 11px; + font-variant-numeric: tabular-nums; + margin-left: 4px; +} + .difference { font-weight: 600; } @@ -97,7 +105,7 @@ /* ── Tooltips ─────────────────────────────────── */ .std-dev-tooltip { - position: absolute; + position: fixed; background: var(--navy-900); color: var(--text-inverse); padding: 6px 10px; @@ -107,7 +115,7 @@ pointer-events: none; z-index: 10000; display: none; - white-space: nowrap; + white-space: pre; box-shadow: var(--shadow-lg); font-weight: 400; } diff --git a/public/js/players.js b/public/js/players.js index c46e7b6..dd4cb6d 100644 --- a/public/js/players.js +++ b/public/js/players.js @@ -68,16 +68,6 @@ function setupAfterTableSwap() { } function initRatingsTooltips() { - document.querySelectorAll('.predicted-value').forEach(span => { - const pdgaNumber = span.dataset.pdga; - const stdDev = span.dataset.stddev; - const tooltip = document.getElementById(`tooltip-stddev-${pdgaNumber}`); - - if (stdDev && tooltip) { - setupTooltip(span, tooltip, () => `Standard Deviation: \u00b1${stdDev}`); - } - }); - document.querySelectorAll('.rating-value').forEach(span => { const pdgaNumber = span.dataset.pdga; const rating = parseInt(span.dataset.rating); @@ -87,7 +77,7 @@ function initRatingsTooltips() { if (rating && stdDev && tooltip) { const minRating = rating - stdDev; const maxRating = rating + stdDev; - setupTooltip(span, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`); + setupTooltip(span, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`); } }); } @@ -199,7 +189,7 @@ async function refreshPlayer(pdgaNumber) { if (rating && stdDev && tooltip) { const minRating = rating - stdDev; const maxRating = rating + stdDev; - replaceWithTooltip(ratingValue, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`); + replaceWithTooltip(ratingValue, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`); } } @@ -233,9 +223,15 @@ async function refreshRoundHistory(pdgaNumber) { predictedValue.textContent = data.predictedRating || 'N/A'; predictedValue.dataset.stddev = data.stdDev || ''; - const tooltip = document.getElementById(`tooltip-stddev-${pdgaNumber}`); - if (data.stdDev && tooltip) { - replaceWithTooltip(predictedValue, tooltip, () => `Standard Deviation: \u00b1${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'; + } } } } @@ -253,7 +249,7 @@ async function refreshRoundHistory(pdgaNumber) { if (rating && stdDev && ratingTooltip) { const minRating = rating - stdDev; const maxRating = rating + stdDev; - replaceWithTooltip(ratingValue, ratingTooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`); + replaceWithTooltip(ratingValue, ratingTooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`); } } } diff --git a/views/partials/ratings-table.ejs b/views/partials/ratings-table.ejs index 3d049ee..f889e6d 100644 --- a/views/partials/ratings-table.ejs +++ b/views/partials/ratings-table.ejs @@ -74,11 +74,11 @@ function renderSparkline(values, opts) {