fix: address code review findings — DRY delta-pill, var→const/let, tokenize colors

This commit is contained in:
Samuel Enocsson
2026-05-21 14:16:58 +02:00
parent 9df151f109
commit 0ded27f9df
6 changed files with 47 additions and 52 deletions
+10
View File
@@ -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><% } %>
+4 -16
View File
@@ -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>
+3 -15
View File
@@ -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>