Merge pull request 'fix: move std-dev info to accordion, remove broken tooltip (#19)' (#20) from fix/std-dev-tooltip-positioning-and-discoverability-19 into main

public/css/players.css

@@ -94,24 +94,6 @@
     box-shadow: var(--shadow-lg);
 }
 
-/* ── Tooltips ─────────────────────────────────── */
-
-.std-dev-tooltip {
-    position: absolute;
-    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: nowrap;
-    box-shadow: var(--shadow-lg);
-    font-weight: 400;
-}
-
 /* ── Debug Icon ───────────────────────────────── */
 
 .debug-icon:hover {

public/js/players.js

@@ -57,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;
         }
@@ -67,31 +66,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);
-        const stdDev = parseInt(span.dataset.stddev);
-        const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
-
-        if (rating && stdDev && tooltip) {
-            const minRating = rating - stdDev;
-            const maxRating = rating + stdDev;
-            setupTooltip(span, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
-        }
-    });
-}
-
 function togglePlayerHistory(pdgaNumber) {
     const historyRow = document.getElementById('history-' + pdgaNumber);
     const contentDiv = document.getElementById('history-content-' + pdgaNumber);
@@ -191,16 +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) {
-                    const minRating = rating - stdDev;
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
-                }
             }
 
             const deltaMonthPill = ratingCell ? ratingCell.querySelector('.delta-pill') : null;
@@ -232,11 +196,6 @@ async function refreshRoundHistory(pdgaNumber) {
                 if (predictedValue) {
                     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}`);
-                    }
                 }
             }
 
@@ -245,16 +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) {
-                    const minRating = rating - stdDev;
-                    const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, ratingTooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
-                }
             }
         }
     } catch (error) {

views/partials/player-history.ejs

@@ -26,6 +26,16 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
         <dt>Gap to predicted</dt>
         <dd><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %></dd>
       </div>
+      <% if (player.stdDev != null && player.rating) { %>
+      <div>
+        <dt>Round spread</dt>
+        <dd>±<%= player.stdDev %></dd>
+      </div>
+      <div>
+        <dt>Rating range</dt>
+        <dd><%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %></dd>
+      </div>
+      <% } %>
     </dl>
     <button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>
   </div>

views/partials/ratings-cards.ejs

@@ -114,6 +114,16 @@ function renderSparkline(values, opts) {
                     <dt>Gap to predicted</dt>
                     <dd><span class="delta-pill <%= predCls %> delta-predicted-pill"><span class="delta-glyph"><%= predGlyph %></span><span class="delta-num"><%= predNum %></span></span></dd>
                 </div>
+                <% if (player.stdDev != null && player.rating) { %>
+                <div>
+                    <dt>Round spread</dt>
+                    <dd>±<%= player.stdDev %></dd>
+                </div>
+                <div>
+                    <dt>Rating range</dt>
+                    <dd><%= player.rating - player.stdDev %>–<%= player.rating + player.stdDev %></dd>
+                </div>
+                <% } %>
             </dl>
         </div>
     </div>

views/partials/ratings-table.ejs

@@ -67,7 +67,6 @@ function renderSparkline(values, opts) {
                     <% } else { %>
                     <span class="rating-pending">Click to load</span>
                     <% } %>
-                    <div class="std-dev-tooltip" id="tooltip-rating-<%= player.pdgaNumber %>"></div>
                 </td>
                 <td class="col-predicted" id="predicted-<%= player.pdgaNumber %>">
                     <% if (player.predictedRating) { %>
@@ -78,7 +77,6 @@ function renderSparkline(values, opts) {
                     <% } else { %>
                     <span class="rating-pending">—</span>
                     <% } %>
-                    <div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
                 </td>
                 <td class="col-actions cell-actions" onclick="event.stopPropagation()">
                     <button class="icon-btn refresh-icon" onclick="refreshPlayerData(<%= player.pdgaNumber %>)" title="Refresh rating + prediction" aria-label="Refresh rating and prediction">