feat: add 10 UX improvements from interface review
- Stale data banner after 3 consecutive fetch failures, auto-clears on recovery - Date navigation with left/right arrows (Yesterday/Today/Tomorrow labels), fetches from NHL API for non-today dates, disables auto-refresh on history - Empty state message when no games are scheduled - Series detail page auto-refreshes every 30s when a game is live - Notification permission deferred until a playoff OT actually occurs - Scroll position saved/restored when navigating to/from series detail - Team records rendered with better contrast and tabular nums - Active bracket round highlighted with gold heading + underline, completed rounds dimmed more aggressively, mobile accordion auto-opens current round - Browser tab title shows live game count (e.g. "NHL Scoreboard (3 Live)") - Service worker update shows a dismissable toast instead of force-reloading Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+117
-14
@@ -1,13 +1,65 @@
|
||||
let failCount = 0;
|
||||
const STALE_THRESHOLD = 3;
|
||||
|
||||
// ── Date Navigation ──────────────────────────────────
|
||||
|
||||
function localDateStr() {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
let viewingDate = localDateStr();
|
||||
|
||||
function isToday() {
|
||||
return viewingDate === localDateStr();
|
||||
}
|
||||
|
||||
function shiftDate(offset) {
|
||||
const [y, m, d] = viewingDate.split('-').map(Number);
|
||||
const dt = new Date(y, m - 1, d + offset);
|
||||
viewingDate = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`;
|
||||
updateDateLabel();
|
||||
startAutoRefresh();
|
||||
}
|
||||
|
||||
function formatDateLabel(dateStr) {
|
||||
if (dateStr === localDateStr()) return 'Today';
|
||||
const [y, m, d] = dateStr.split('-').map(Number);
|
||||
const dt = new Date(y, m - 1, d);
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
if (dt.toDateString() === yesterday.toDateString()) return 'Yesterday';
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
if (dt.toDateString() === tomorrow.toDateString()) return 'Tomorrow';
|
||||
return dt.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function updateDateLabel() {
|
||||
const label = document.getElementById('date-label');
|
||||
if (label) label.textContent = formatDateLabel(viewingDate);
|
||||
}
|
||||
|
||||
async function fetchScoreboardData() {
|
||||
const url = isToday() ? '/scoreboard' : `/scoreboard?date=${viewingDate}`;
|
||||
try {
|
||||
const res = await fetch('/scoreboard');
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(res.status);
|
||||
failCount = 0;
|
||||
setStale(false);
|
||||
updateScoreboard(await res.json());
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch scoreboard data:', e);
|
||||
failCount++;
|
||||
if (failCount >= STALE_THRESHOLD) setStale(true);
|
||||
}
|
||||
}
|
||||
|
||||
function setStale(stale) {
|
||||
document.getElementById('stale-banner').classList.toggle('hidden', !stale);
|
||||
document.querySelector('main').classList.toggle('stale', stale);
|
||||
}
|
||||
|
||||
function updateScoreboard(data) {
|
||||
applyMeta(data.meta);
|
||||
|
||||
@@ -34,6 +86,14 @@ function updateScoreboard(data) {
|
||||
if (hasGames) restoreClocks(grid, clockSnapshot);
|
||||
}
|
||||
|
||||
const anyGames = sections.some(s => s.games && s.games.length > 0);
|
||||
document.getElementById('empty-state').classList.toggle('hidden', anyGames);
|
||||
|
||||
restoreScroll();
|
||||
|
||||
const liveCount = (data.live_games || []).length + (data.intermission_games || []).length + (data.pinned_games || []).filter(g => g['Game State'] === 'LIVE').length;
|
||||
document.title = liveCount ? `NHL Scoreboard (${liveCount} Live)` : 'NHL Scoreboard';
|
||||
|
||||
updateGauges();
|
||||
maybeNotifyOT(data);
|
||||
}
|
||||
@@ -372,10 +432,17 @@ function persistSeenOT(set) {
|
||||
|
||||
function maybeNotifyOT(data) {
|
||||
if (!('Notification' in window)) return;
|
||||
|
||||
const candidates = [...(data.pinned_games || []), ...(data.live_games || [])];
|
||||
const hasPlayoffOT = candidates.some(g => g['Playoff OT']);
|
||||
|
||||
if (hasPlayoffOT && Notification.permission === 'default') {
|
||||
Notification.requestPermission().catch(() => {});
|
||||
return;
|
||||
}
|
||||
if (Notification.permission !== 'granted') return;
|
||||
|
||||
const seen = seenOTKeys();
|
||||
const candidates = [...(data.pinned_games || []), ...(data.live_games || [])];
|
||||
let changed = false;
|
||||
for (const g of candidates) {
|
||||
if (!g['Playoff OT']) continue;
|
||||
@@ -396,32 +463,68 @@ function maybeNotifyOT(data) {
|
||||
if (changed) persistSeenOT(seen);
|
||||
}
|
||||
|
||||
function requestNotificationPermission() {
|
||||
if (!('Notification' in window)) return;
|
||||
if (Notification.permission !== 'default') return;
|
||||
Notification.requestPermission().catch(() => {});
|
||||
// ── Update Toast ─────────────────────────────────────
|
||||
|
||||
function showUpdateToast() {
|
||||
if (document.getElementById('update-toast')) return;
|
||||
const toast = document.createElement('div');
|
||||
toast.id = 'update-toast';
|
||||
toast.className = 'update-toast';
|
||||
toast.innerHTML = 'New version available <button class="update-toast-btn">Reload</button>';
|
||||
toast.querySelector('button').addEventListener('click', () => location.reload());
|
||||
document.body.appendChild(toast);
|
||||
}
|
||||
|
||||
// ── Scroll Restoration ───────────────────────────────
|
||||
|
||||
const SCROLL_KEY = 'nhl_scroll_y';
|
||||
let scrollRestored = false;
|
||||
|
||||
function saveScroll() {
|
||||
sessionStorage.setItem(SCROLL_KEY, String(window.scrollY));
|
||||
}
|
||||
|
||||
function restoreScroll() {
|
||||
if (scrollRestored) return;
|
||||
scrollRestored = true;
|
||||
const y = parseInt(sessionStorage.getItem(SCROLL_KEY) || '0', 10);
|
||||
if (y > 0) {
|
||||
requestAnimationFrame(() => window.scrollTo(0, y));
|
||||
}
|
||||
sessionStorage.removeItem(SCROLL_KEY);
|
||||
}
|
||||
|
||||
// ── Init ─────────────────────────────────────────────
|
||||
|
||||
function autoRefresh() {
|
||||
let refreshTimer = null;
|
||||
|
||||
function startAutoRefresh() {
|
||||
stopAutoRefresh();
|
||||
fetchScoreboardData();
|
||||
setTimeout(autoRefresh, 5000);
|
||||
if (isToday()) {
|
||||
refreshTimer = setTimeout(startAutoRefresh, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
function stopAutoRefresh() {
|
||||
if (refreshTimer) { clearTimeout(refreshTimer); refreshTimer = null; }
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
requestNotificationPermission();
|
||||
autoRefresh();
|
||||
updateDateLabel();
|
||||
document.getElementById('date-prev').addEventListener('click', () => shiftDate(-1));
|
||||
document.getElementById('date-next').addEventListener('click', () => shiftDate(1));
|
||||
document.addEventListener('click', e => {
|
||||
if (e.target.closest('.series-link')) saveScroll();
|
||||
});
|
||||
startAutoRefresh();
|
||||
setInterval(tickClocks, 1000);
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js').catch(err => {
|
||||
console.warn('Service worker registration failed:', err);
|
||||
});
|
||||
let reloading = false;
|
||||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||||
if (reloading) return;
|
||||
reloading = true;
|
||||
location.reload();
|
||||
showUpdateToast();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
+123
-3
@@ -54,6 +54,46 @@ header {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Date Navigation ───────────────────────────── */
|
||||
|
||||
.date-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background: var(--badge-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.date-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.date-btn:focus-visible {
|
||||
outline: 2px solid var(--cup-gold-1);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
min-width: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Layout ─────────────────────────────────────── */
|
||||
|
||||
main {
|
||||
@@ -71,6 +111,78 @@ main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.update-toast {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.update-toast-btn {
|
||||
background: var(--cup-gold-1);
|
||||
color: #1a1200;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.update-toast-btn:hover {
|
||||
background: var(--cup-gold-2);
|
||||
}
|
||||
|
||||
.stale-banner {
|
||||
text-align: center;
|
||||
padding: 0.45rem 1rem;
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: #fca5a5;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.stale-banner.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main.stale {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.empty-state.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.empty-state-heading {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.empty-state-sub {
|
||||
font-size: 0.85rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
@@ -232,8 +344,10 @@ main {
|
||||
}
|
||||
|
||||
.team-record {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
@@ -1020,7 +1134,13 @@ main {
|
||||
}
|
||||
|
||||
.bracket-matchup-complete {
|
||||
opacity: 0.75;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.bracket-col-active {
|
||||
color: var(--cup-gold-2);
|
||||
border-bottom: 2px solid var(--cup-gold-1);
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.bracket-matchup-empty {
|
||||
|
||||
Reference in New Issue
Block a user