From c3fb850de3aa9f1b53c58676b08a9d19a6d34138 Mon Sep 17 00:00:00 2001 From: Samuel Enocsson Date: Sat, 23 May 2026 06:40:08 +0200 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20reposition=20std-dev=20tooltip=20and?= =?UTF-8?q?=20surface=20=C2=B1-spread=20inline=20(#19)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/players.css | 12 ++++++++++-- public/js/players.js | 28 ++++++++++++---------------- views/partials/ratings-table.ejs | 2 +- 3 files changed, 23 insertions(+), 19 deletions(-) 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) {
<%= player.predictedRating %> <%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %> + <% if (player.stdDev) { %>±<%= player.stdDev %><% } %>
<% } else { %> — <% } %> -
diff --git a/views/partials/ratings-cards.ejs b/views/partials/ratings-cards.ejs index 6e72ef0..6110dca 100644 --- a/views/partials/ratings-cards.ejs +++ b/views/partials/ratings-cards.ejs @@ -114,6 +114,12 @@ function renderSparkline(values, opts) {
Gap to predicted
<%= predGlyph %><%= predNum %>
+ <% if (player.stdDev != null && player.rating) { %> +
+
Round spread
+
±<%= player.stdDev %> (range <%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %>)
+
+ <% } %> diff --git a/views/partials/ratings-table.ejs b/views/partials/ratings-table.ejs index c722a7d..9e67a54 100644 --- a/views/partials/ratings-table.ejs +++ b/views/partials/ratings-table.ejs @@ -67,14 +67,12 @@ function renderSparkline(values, opts) { <% } else { %> Click to load <% } %> -
<% if (player.predictedRating) { %>
<%= player.predictedRating %> <%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %> - <% if (player.stdDev != null) { %>±<%= player.stdDev %><% } %>
<% } else { %> — -- 2.52.0 From 088e283dcf0e4a955f3753b4efde2661360cb9c3 Mon Sep 17 00:00:00 2001 From: Samuel Enocsson Date: Mon, 25 May 2026 08:02:05 +0200 Subject: [PATCH 4/4] refactor: split round spread and rating range into separate accordion rows (#19) --- views/partials/player-history.ejs | 6 +++++- views/partials/ratings-cards.ejs | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/views/partials/player-history.ejs b/views/partials/player-history.ejs index c2373d9..7df494a 100644 --- a/views/partials/player-history.ejs +++ b/views/partials/player-history.ejs @@ -29,7 +29,11 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber; <% if (player.stdDev != null && player.rating) { %>
Round spread
-
±<%= player.stdDev %> (range <%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %>)
+
±<%= player.stdDev %>
+
+
+
Rating range
+
<%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %>
<% } %> diff --git a/views/partials/ratings-cards.ejs b/views/partials/ratings-cards.ejs index 6110dca..bd6d81f 100644 --- a/views/partials/ratings-cards.ejs +++ b/views/partials/ratings-cards.ejs @@ -117,7 +117,11 @@ function renderSparkline(values, opts) { <% if (player.stdDev != null && player.rating) { %>
Round spread
-
±<%= player.stdDev %> (range <%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %>)
+
±<%= player.stdDev %>
+
+
+
Rating range
+
<%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %>
<% } %> -- 2.52.0