diff --git a/app/static/script.js b/app/static/script.js index ae301a9..9282d56 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -150,7 +150,6 @@ function renderLiveGame(game, opts = {}) {
${periodBadge} ${time} - ${ppBadge(game)}
${dot} @@ -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 ? `${sog} SOG` : ''; + const ppHtml = state === 'live' && pp ? teamPpIndicator(pp) : ''; + + const subParts = [sogHtml, ppHtml].filter(Boolean).join(''); + const subline = subParts ? `
${subParts}
` : ''; const right = state === 'pre' ? `${record}` @@ -254,24 +258,17 @@ function teamRow(game, side, state) {
${name} - ${sogHtml} + ${subline}
${right} `; } -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 `PP ${team} ${timeStr}`; + return `PP ${timeStr}`; } function gameKey(game) { diff --git a/app/static/styles.css b/app/static/styles.css index 0ec49fc..71d2bbd 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -209,6 +209,13 @@ main { font-size: 0.68rem; color: var(--red); font-weight: 600; + font-variant-numeric: tabular-nums; +} + +.team-subline { + display: flex; + align-items: baseline; + gap: 0.5rem; } .team-score { @@ -229,15 +236,6 @@ main { white-space: nowrap; } -/* ── Power Play Badge (inline in card header) ─── */ - -.badge-pp { - background: rgba(239, 68, 68, 0.15); - color: var(--red); - border: 1px solid rgba(239, 68, 68, 0.35); - font-variant-numeric: tabular-nums; -} - /* ── Hype Meter ─────────────────────────────────── */ .hype-meter {