shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

render flat delta pill for null values per design spec

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/js/players.js
+5 -5
View File
@@ -4,15 +4,15 @@ let openPdgaNumber = null;
// ── Delta-pill helper ───────────────────────────── // ── Delta-pill helper ─────────────────────────────
function renderDeltaPill(value, extraClass) { function renderDeltaPill(value, extraClass) {
if (value == null) return null; const isNull = (value == null);
const cls = value > 0 ? 'up' : value < 0 ? 'down' : 'flat'; const cls = isNull ? 'flat' : value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
const glyph = value > 0 ? '▲' : value < 0 ? '▼' : '–'; const glyph = (isNull || value === 0) ? '–' : value > 0 ? '▲' : '▼';
const num = value > 0 ? '+' + value : String(value); const num = isNull ? '—' : value > 0 ? '+' + value : String(value);
return { glyph, num, cls }; return { glyph, num, cls };
} }
function applyDeltaPill(pillEl, value) { function applyDeltaPill(pillEl, value) {
if (!pillEl || value == null) return; if (!pillEl) return;
const pill = renderDeltaPill(value); const pill = renderDeltaPill(value);
pillEl.className = 'delta-pill ' + pill.cls; pillEl.className = 'delta-pill ' + pill.cls;
while (pillEl.firstChild) pillEl.removeChild(pillEl.firstChild); while (pillEl.firstChild) pillEl.removeChild(pillEl.firstChild);
views/partials/delta-pill.ejs
+8 -7
View File
@@ -1,11 +1,12 @@
<%/* delta-pill.ejs — renders a Δ-pill span. <%/* delta-pill.ejs — renders a Δ-pill span.
Locals: 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') 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 _isNull = (typeof value === 'undefined' || value == null);
const _glyph = value > 0 ? '▲' : value < 0 ? '▼' : '–'; const _cls = _isNull ? 'flat' : value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
const _num = value > 0 ? '+' + value : value.toString(); const _glyph = (_isNull || value === 0) ? '–' : value > 0 ? '▲' : '▼';
const _xtra = (typeof extraClass !== 'undefined' && extraClass) ? ' ' + extraClass : ''; const _num = _isNull ? '—' : value > 0 ? '+' + value : value.toString();
%><span class="delta-pill <%= _cls %><%= _xtra %>"><span class="delta-glyph"><%= _glyph %></span><span class="delta-num"><%= _num %></span></span><% } %> 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>
views/partials/player-history.ejs
+2 -6
View File
@@ -16,9 +16,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
</div> </div>
<div> <div>
<dt>Change vs last month</dt> <dt>Change vs last month</dt>
<dd> <dd><%- include('delta-pill', { value: player.ratingChange }) %></dd>
<% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %>
</dd>
</div> </div>
<div> <div>
<dt>Predicted next update</dt> <dt>Predicted next update</dt>
@@ -26,9 +24,7 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
</div> </div>
<div> <div>
<dt>Gap to predicted</dt> <dt>Gap to predicted</dt>
<dd> <dd><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %></dd>
<% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %>
</dd>
</div> </div>
</dl> </dl>
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button> <button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>