fix: address code review findings — DRY delta-pill, var→const/let, tokenize colors
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<%/* delta-pill.ejs — renders a Δ-pill span.
|
||||
Locals:
|
||||
value {number|null} — the delta value
|
||||
extraClass {string} — optional additional CSS class (e.g. 'delta-predicted-pill')
|
||||
*/%>
|
||||
<% if (typeof value !== 'undefined' && value != null) {
|
||||
const _cls = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
|
||||
const _text = value > 0 ? '+' + value : value.toString();
|
||||
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : '';
|
||||
%><span class="delta-pill <%= _cls %><%= _xtra %>"><%= _text %></span><% } %>
|
||||
@@ -1,14 +1,6 @@
|
||||
<%
|
||||
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;
|
||||
const hasPlayer = (typeof player !== 'undefined' && player);
|
||||
const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
|
||||
%>
|
||||
<div class="player-detail">
|
||||
<% if (hasPlayer) { %>
|
||||
@@ -24,9 +16,7 @@ var chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
|
||||
<div>
|
||||
<dt>Change vs last month</dt>
|
||||
<dd>
|
||||
<% if (monthPillText) { %>
|
||||
<span class="delta-pill <%= monthPillClass %>"><%= monthPillText %></span>
|
||||
<% } else { %>—<% } %>
|
||||
<% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
@@ -36,9 +26,7 @@ var chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
|
||||
<div>
|
||||
<dt>Gap to predicted</dt>
|
||||
<dd>
|
||||
<% if (gapPillText) { %>
|
||||
<span class="delta-pill delta-predicted-pill <%= gapPillClass %>"><%= gapPillText %></span>
|
||||
<% } else { %>—<% } %>
|
||||
<% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
@@ -43,15 +43,7 @@ function renderSparkline(values) {
|
||||
</thead>
|
||||
<tbody>
|
||||
<% ratings.forEach(function(player, index) {
|
||||
var ratingChange = player.ratingChange;
|
||||
var ratingChangePillText = ratingChange != null ? (ratingChange > 0 ? '+' + ratingChange : ratingChange.toString()) : null;
|
||||
var ratingChangePillClass = ratingChange > 0 ? 'up' : ratingChange < 0 ? 'down' : 'flat';
|
||||
|
||||
var deltaPredicted = player.deltaPredicted ?? null;
|
||||
var deltaPredictedPillText = deltaPredicted != null ? (deltaPredicted > 0 ? '+' + deltaPredicted : deltaPredicted.toString()) : null;
|
||||
var deltaPredictedPillClass = deltaPredicted > 0 ? 'up' : deltaPredicted < 0 ? 'down' : 'flat';
|
||||
|
||||
var sparklineSvg = renderSparkline(player.monthlyHistory || []);
|
||||
const sparklineSvg = renderSparkline(player.monthlyHistory || []);
|
||||
%>
|
||||
<tr id="row-<%= player.pdgaNumber %>" class="expandable-row" tabindex="0" onclick="togglePlayerHistory(<%= player.pdgaNumber %>)">
|
||||
<td class="mobile-hide"><%= index + 1 %></td>
|
||||
@@ -65,9 +57,7 @@ function renderSparkline(values) {
|
||||
<span class="rating-value" data-rating="<%= player.rating || '' %>" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%- player.rating || '<span style="color: var(--text-muted); font-style: italic;">Click refresh</span>' %></span>
|
||||
<i class="fas fa-sync-alt refresh-icon" onclick="refreshPlayer(<%= player.pdgaNumber %>)" title="Refresh player data"></i>
|
||||
</div>
|
||||
<% if (ratingChangePillText) { %>
|
||||
<span class="delta-pill <%= ratingChangePillClass %>"><%= ratingChangePillText %></span>
|
||||
<% } %>
|
||||
<%- include('delta-pill', { value: player.ratingChange }) %>
|
||||
<% if (sparklineSvg) { %>
|
||||
<span class="sparkline"><%- sparklineSvg %></span>
|
||||
<% } %>
|
||||
@@ -79,9 +69,7 @@ function renderSparkline(values) {
|
||||
<i class="fas fa-question-circle debug-icon" onclick="showDebugInfo(<%= player.pdgaNumber %>)" title="Show calculation details" style="margin-left: 5px; color: var(--text-muted); cursor: pointer; opacity: 0.6;"></i>
|
||||
<i class="fas fa-sync-alt refresh-icon" onclick="refreshRoundHistory(<%= player.pdgaNumber %>)" title="Refresh prediction data"></i>
|
||||
</div>
|
||||
<% if (deltaPredictedPillText) { %>
|
||||
<span class="delta-pill delta-predicted-pill <%= deltaPredictedPillClass %>"><%= deltaPredictedPillText %></span>
|
||||
<% } %>
|
||||
<%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %>
|
||||
<div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user