From 5791d8e34f92705a3101e3a49bf1d0bc4162578a Mon Sep 17 00:00:00 2001 From: Samuel Enocsson Date: Mon, 25 May 2026 07:54:46 +0200 Subject: [PATCH] refactor: move std-dev info to accordion, remove tooltip (#19) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add "Round spread" row (±stdDev, range lo–hi) to desktop accordion (player-history.ejs) and mobile card expanded section (ratings-cards.ejs) - Remove .std-dev-tooltip div and .std-dev-inline span from table partial - Remove stdDevTooltipText, updateStdDevInline, initRatingsTooltips helpers and all call sites from players.js - Remove .std-dev-tooltip and .std-dev-inline CSS rules; drop cursor:help from .rating-value --- public/css/players.css | 25 -------------- public/js/players.js | 54 ------------------------------- views/partials/player-history.ejs | 6 ++++ views/partials/ratings-cards.ejs | 6 ++++ views/partials/ratings-table.ejs | 2 -- 5 files changed, 12 insertions(+), 81 deletions(-) diff --git a/public/css/players.css b/public/css/players.css index 0e758cc..ce221a3 100644 --- a/public/css/players.css +++ b/public/css/players.css @@ -14,7 +14,6 @@ .rating-value { font-variant-numeric: tabular-nums; - cursor: help; } .pdga-number { @@ -47,12 +46,6 @@ font-variant-numeric: tabular-nums; } -.std-dev-inline { - color: var(--text-muted); - font-size: 12px; - font-variant-numeric: tabular-nums; -} - .difference { font-weight: 600; } @@ -101,24 +94,6 @@ box-shadow: var(--shadow-lg); } -/* ── Tooltips ─────────────────────────────────── */ - -.std-dev-tooltip { - position: fixed; - background: var(--navy-900); - color: var(--text-inverse); - padding: 6px 10px; - border-radius: var(--radius-sm); - font-size: 12px; - font-family: var(--font-mono); - pointer-events: none; - z-index: 10000; - display: none; - white-space: pre; - box-shadow: var(--shadow-lg); - font-weight: 400; -} - /* ── Debug Icon ───────────────────────────────── */ .debug-icon:hover { diff --git a/public/js/players.js b/public/js/players.js index e4c3910..45d3841 100644 --- a/public/js/players.js +++ b/public/js/players.js @@ -26,27 +26,6 @@ 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; @@ -78,7 +57,6 @@ function setupAfterTableSwap() { document.body.addEventListener('htmx:afterSwap', function(event) { const target = event.detail.target; if (target.id === 'ratings-table') { - initRatingsTooltips(); initChartsIn(target); return; } @@ -88,19 +66,6 @@ function setupAfterTableSwap() { }); } -function initRatingsTooltips() { - document.querySelectorAll('.rating-value').forEach(span => { - const pdgaNumber = span.dataset.pdga; - const rating = parseInt(span.dataset.rating); - const stdDev = parseInt(span.dataset.stddev); - const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`); - - if (rating && stdDev && tooltip) { - setupTooltip(span, tooltip, () => stdDevTooltipText(rating, stdDev)); - } - }); -} - function togglePlayerHistory(pdgaNumber) { const historyRow = document.getElementById('history-' + pdgaNumber); const contentDiv = document.getElementById('history-content-' + pdgaNumber); @@ -200,14 +165,6 @@ async function refreshPlayer(pdgaNumber) { if (ratingValue) { ratingValue.textContent = data.player.rating || 'N/A'; ratingValue.dataset.rating = data.player.rating || ''; - - const stdDev = parseInt(ratingValue.dataset.stddev); - const rating = parseInt(data.player.rating); - const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`); - - if (rating && stdDev && tooltip) { - replaceWithTooltip(ratingValue, tooltip, () => stdDevTooltipText(rating, stdDev)); - } } const deltaMonthPill = ratingCell ? ratingCell.querySelector('.delta-pill') : null; @@ -239,8 +196,6 @@ async function refreshRoundHistory(pdgaNumber) { if (predictedValue) { predictedValue.textContent = data.predictedRating || 'N/A'; predictedValue.dataset.stddev = data.stdDev || ''; - - updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev); } } @@ -249,14 +204,6 @@ async function refreshRoundHistory(pdgaNumber) { const ratingValue = ratingCell ? ratingCell.querySelector('.rating-value') : null; if (ratingValue && data.stdDev) { ratingValue.dataset.stddev = data.stdDev; - - const rating = parseInt(ratingValue.dataset.rating); - const stdDev = parseInt(data.stdDev); - const ratingTooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`); - - if (rating && stdDev && ratingTooltip) { - replaceWithTooltip(ratingValue, ratingTooltip, () => stdDevTooltipText(rating, stdDev)); - } } } } catch (error) { @@ -772,7 +719,6 @@ 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/player-history.ejs b/views/partials/player-history.ejs index 29af37b..c2373d9 100644 --- a/views/partials/player-history.ejs +++ b/views/partials/player-history.ejs @@ -26,6 +26,12 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
Gap to predicted
<%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %>
+ <% 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-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 { %> —