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

refactor: design-fidelity pass on players page

Browse Source
This commit is contained in:
Samuel Enocsson
2026-05-21 15:15:29 +02:00
parent 686d7ca00c
commit 16d375ae10
7 changed files with 463 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/players.js
+34 -21
View File
@@ -5,9 +5,25 @@ let openPdgaNumber = null;
// ── Delta-pill helper ─────────────────────────────
function renderDeltaPill(value, extraClass) {
if (value == null) return null;
const cls = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
const text = value > 0 ? '+' + value : String(value);
return { text, cls };
const cls = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
const glyph = value > 0 ? '▲' : value < 0 ? '▼' : '–';
const num = value > 0 ? '+' + value : String(value);
return { glyph, num, cls };
}
function applyDeltaPill(pillEl, value) {
if (!pillEl || value == null) return;
const pill = renderDeltaPill(value);
pillEl.className = 'delta-pill ' + pill.cls;
while (pillEl.firstChild) pillEl.removeChild(pillEl.firstChild);
const glyphSpan = document.createElement('span');
glyphSpan.className = 'delta-glyph';
glyphSpan.textContent = pill.glyph;
const numSpan = document.createElement('span');
numSpan.className = 'delta-num';
numSpan.textContent = pill.num;
pillEl.appendChild(glyphSpan);
pillEl.appendChild(numSpan);
}
function setupTooltipsAfterSwap() {
@@ -120,8 +136,8 @@ async function clearCache() {
}
async function refreshPlayer(pdgaNumber) {
const icon = document.querySelector(`#row-${pdgaNumber} .rating .refresh-icon`);
icon.classList.add('spinning');
const icon = document.querySelector(`#row-${pdgaNumber} .cell-actions .refresh-icon`);
if (icon) icon.classList.add('spinning');
try {
const response = await fetch(`/api/refresh-player/${pdgaNumber}`, { method: 'POST' });
@@ -129,12 +145,12 @@ async function refreshPlayer(pdgaNumber) {
if (data.success) {
const row = document.getElementById(`row-${pdgaNumber}`);
const ratingCell = row.querySelector('.rating');
const ratingCell = row.querySelector('.cell-rating');
const nameLink = row.querySelector('.player-name a');
nameLink.textContent = data.player.name;
if (nameLink) nameLink.textContent = data.player.name;
const ratingValue = ratingCell.querySelector('.rating-value');
const ratingValue = ratingCell ? ratingCell.querySelector('.rating-value') : null;
if (ratingValue) {
ratingValue.textContent = data.player.rating || 'N/A';
ratingValue.dataset.rating = data.player.rating || '';
@@ -150,24 +166,20 @@ async function refreshPlayer(pdgaNumber) {
}
}
const deltaMonthPill = ratingCell.querySelector('.delta-pill');
if (deltaMonthPill && data.player.ratingChange != null) {
const pill = renderDeltaPill(data.player.ratingChange);
deltaMonthPill.textContent = pill.text;
deltaMonthPill.className = `delta-pill ${pill.cls}`;
}
const deltaMonthPill = ratingCell ? ratingCell.querySelector('.delta-pill') : null;
applyDeltaPill(deltaMonthPill, data.player.ratingChange);
}
} catch (error) {
console.error('Error refreshing player:', error);
alert('Failed to refresh player data');
} finally {
icon.classList.remove('spinning');
if (icon) icon.classList.remove('spinning');
}
}
async function refreshRoundHistory(pdgaNumber) {
const icon = document.querySelector(`#predicted-${pdgaNumber} .refresh-icon`);
icon.classList.add('spinning');
const icon = document.querySelector(`#row-${pdgaNumber} .cell-actions .refresh-icon`);
if (icon) icon.classList.add('spinning');
try {
const response = await fetch(`/api/refresh-round-history/${pdgaNumber}`, { method: 'POST' });
@@ -197,8 +209,8 @@ async function refreshRoundHistory(pdgaNumber) {
}
const row = document.getElementById(`row-${pdgaNumber}`);
const ratingCell = row.querySelector('.rating');
const ratingValue = ratingCell.querySelector('.rating-value');
const ratingCell = row.querySelector('.cell-rating');
const ratingValue = ratingCell ? ratingCell.querySelector('.rating-value') : null;
if (ratingValue && data.stdDev) {
ratingValue.dataset.stddev = data.stdDev;
@@ -244,7 +256,7 @@ async function refreshRoundHistory(pdgaNumber) {
const fullMessage = errorDetails ? errorMessage + '\n\n' + errorDetails : errorMessage;
alert(fullMessage);
} finally {
icon.classList.remove('spinning');
if (icon) icon.classList.remove('spinning');
}
}
@@ -307,7 +319,8 @@ function closeDebugModal(event) {
document.getElementById('debug-modal').style.display = 'none';
}
async function searchAndAddPlayer() {
async function searchAndAddPlayer(event) {
if (event) event.preventDefault();
const input = document.getElementById('pdga-number-input');
const pdgaNumber = input.value.trim();