feat: redesign expanded row with detail-grid + history chart (#7)

views/partials/player-history.ejs

@@ -1,12 +1,55 @@
-<% if (history && history.length > 0) { %>
-    <div class="chart-container" id="chart-<%= pdgaNumber %>"
-         data-history="<%= JSON.stringify(history) %>"
-         style="position: relative;">
-        <div class="loading-chart">Loading chart...</div>
+<%
+var monthChange = (typeof player !== 'undefined' && player) ? player.ratingChange : null;
+var monthPillText = monthChange != null ? (monthChange > 0 ? '+' + monthChange : monthChange.toString()) : null;
+var monthPillClass = monthChange > 0 ? 'up' : monthChange < 0 ? 'down' : 'flat';
+
+var gapPredicted = (typeof player !== 'undefined' && player) ? (player.deltaPredicted ?? null) : null;
+var gapPillText = gapPredicted != null ? (gapPredicted > 0 ? '+' + gapPredicted : gapPredicted.toString()) : null;
+var gapPillClass = gapPredicted > 0 ? 'up' : gapPredicted < 0 ? 'down' : 'flat';
+
+var hasPlayer = (typeof player !== 'undefined' && player);
+var chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
+%>
+<div class="player-detail">
+  <% if (hasPlayer) { %>
+  <dl class="detail-grid">
+    <div>
+      <dt>Current rating</dt>
+      <dd><%= player.rating ?? '—' %></dd>
     </div>
-    <div class="chart-tooltip" id="tooltip-<%= pdgaNumber %>"></div>
-<% } else { %>
-    <div class="chart-container">
-        <div class="loading-chart">No rating history available</div>
+    <div>
+      <dt>Last month</dt>
+      <dd><%= player.lastMonthRating ?? '—' %></dd>
     </div>
-<% } %>
+    <div>
+      <dt>Change vs last month</dt>
+      <dd>
+        <% if (monthPillText) { %>
+        <span class="delta-pill <%= monthPillClass %>"><%= monthPillText %></span>
+        <% } else { %>—<% } %>
+      </dd>
+    </div>
+    <div>
+      <dt>Predicted next update</dt>
+      <dd><%= player.predictedRating ?? '—' %></dd>
+    </div>
+    <div>
+      <dt>Gap to predicted</dt>
+      <dd>
+        <% if (gapPillText) { %>
+        <span class="delta-pill delta-predicted-pill <%= gapPillClass %>"><%= gapPillText %></span>
+        <% } else { %>—<% } %>
+      </dd>
+    </div>
+  </dl>
+  <% } %>
+
+  <% if (history && history.length > 0) { %>
+  <div class="player-chart" id="chart-<%= chartPdgaNumber %>"
+       data-history="<%= JSON.stringify(history) %>">
+  </div>
+  <% } else { %>
+  <div class="loading-chart">No rating history available</div>
+  <% } %>
+</div>
+<div class="chart-tooltip" id="tooltip-<%= chartPdgaNumber %>"></div>

views/partials/ratings-table.ejs

@@ -53,7 +53,7 @@ function renderSparkline(values) {
 
                 var sparklineSvg = renderSparkline(player.monthlyHistory || []);
             %>
-            <tr id="row-<%= player.pdgaNumber %>" class="expandable-row" onclick="togglePlayerHistory(<%= player.pdgaNumber %>)">
+            <tr id="row-<%= player.pdgaNumber %>" class="expandable-row" tabindex="0" onclick="togglePlayerHistory(<%= player.pdgaNumber %>)">
                 <td class="mobile-hide"><%= index + 1 %></td>
                 <td class="player-name">
                     <a href="https://www.pdga.com/player/<%= player.pdgaNumber %>" target="_blank" onclick="event.stopPropagation()"><%= player.name %></a>