refactor: move power play indicator onto the team row, drop the team name
CI / Lint (push) Successful in 11s
CI / Test (push) Successful in 12s
CI / Build & Push (push) Successful in 27s

The header PP badge repeated the team name that was already visible a row below. Put the indicator on the team that actually has the advantage: "PP 01:47" appears inline next to SOG, and the old ppBadge + .badge-pp styling go away.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-19 18:45:14 -04:00
parent e908139323
commit 9eb8a8534a
2 changed files with 15 additions and 20 deletions
+8 -11
View File
@@ -150,7 +150,6 @@ function renderLiveGame(game, opts = {}) {
<div class="badges">
${periodBadge}
<span class="badge" ${clockAttrs}>${time}</span>
${ppBadge(game)}
</div>
${dot}
</div>
@@ -241,9 +240,14 @@ function teamRow(game, side, state) {
const score = game[`${side} Score`];
const sog = game[`${side} Shots`];
const record = game[`${side} Record`];
const pp = game[`${side} Power Play`];
const sogHtml = (state === 'live' || state === 'final') && sog !== undefined
? `<span class="team-sog">${sog} SOG</span>` : '';
const ppHtml = state === 'live' && pp ? teamPpIndicator(pp) : '';
const subParts = [sogHtml, ppHtml].filter(Boolean).join('');
const subline = subParts ? `<div class="team-subline">${subParts}</div>` : '';
const right = state === 'pre'
? `<span class="team-record">${record}</span>`
@@ -254,24 +258,17 @@ function teamRow(game, side, state) {
<img src="${logo}" alt="${name} logo" class="team-logo">
<div class="team-meta">
<span class="team-name">${name}</span>
${sogHtml}
${subline}
</div>
${right}
</div>`;
}
function ppBadge(game) {
const awayPP = game['Away Power Play'];
const homePP = game['Home Power Play'];
const pp = awayPP || homePP;
if (!pp) return '';
const team = awayPP ? game['Away Team'] : game['Home Team'];
function teamPpIndicator(pp) {
const timeStr = pp.replace('PP ', '');
const seconds = timeToSeconds(timeStr);
const attrs = `data-seconds="${seconds}" data-received-at="${Date.now()}" data-pp-clock`;
return `<span class="badge badge-pp">PP ${team} <span ${attrs}>${timeStr}</span></span>`;
return `<span class="team-pp">PP <span ${attrs}>${timeStr}</span></span>`;
}
function gameKey(game) {