render flat delta pill for null values per design spec

This commit is contained in:
Samuel Enocsson
2026-05-21 15:51:17 +02:00
parent 96ae7d7dac
commit 4b145094bf
3 changed files with 15 additions and 18 deletions
+8 -7
View File
@@ -1,11 +1,12 @@
<%/* delta-pill.ejs — renders a Δ-pill span.
Locals:
value {number|null} — the delta value
value {number|null} — the delta value (null/undefined → flat pill with '—')
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 _glyph = value > 0 ? '' : value < 0 ? '' : '';
const _num = value > 0 ? '+' + value : value.toString();
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : '';
%><span class="delta-pill <%= _cls %><%= _xtra %>"><span class="delta-glyph"><%= _glyph %></span><span class="delta-num"><%= _num %></span></span><% } %>
<%
const _isNull = (typeof value === 'undefined' || value == null);
const _cls = _isNull ? 'flat' : value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
const _glyph = (_isNull || value === 0) ? '' : value > 0 ? '▲' : '▼';
const _num = _isNull ? '—' : value > 0 ? '+' + value : value.toString();
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : '';
%><span class="delta-pill <%= _cls %><%= _xtra %>"><span class="delta-glyph"><%= _glyph %></span><span class="delta-num"><%= _num %></span></span>
+2 -6
View File
@@ -16,9 +16,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
</div>
<div>
<dt>Change vs last month</dt>
<dd>
<% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %>
</dd>
<dd><%- include('delta-pill', { value: player.ratingChange }) %></dd>
</div>
<div>
<dt>Predicted next update</dt>
@@ -26,9 +24,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
</div>
<div>
<dt>Gap to predicted</dt>
<dd>
<% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %>
</dd>
<dd><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %></dd>
</div>
</dl>
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>