fix(hero): resolve knockout matchup teams (R32+ showed "A definir")

The home hero read match.homeTeam/awayTeam directly; knockout matches (ids 73-104) carry only bracketRef and resolve teams at runtime, so once the next match became an R32 game the hero showed "A definir vs A definir". Resolve via resolveBracketTeams(match) like schedule cards and the modal; heroTeamHTML now takes a {team,label} slot.
This commit is contained in:
Lucas Kalil 2026-06-28 12:51:57 -03:00
parent 0a2010691f
commit 7b404e678f

View file

@ -8,7 +8,7 @@ import { initSchedule } from './schedule.js';
import { initGroups } from './groups.js';
import { initStadiums } from './stadiums.js';
import { initModal } from './modal.js';
import { initBracket, invalidateBracket } from './bracket.js';
import { initBracket, invalidateBracket, resolveBracketTeams } from './bracket.js';
import { initStats } from './stats.js';
// ---------------------------------------------------------------- data
@ -298,13 +298,15 @@ function heroSignature(featured, now) {
.join('|');
}
function heroTeamHTML(teamId) {
const team = data.teamById.get(teamId);
if (!team) return `<div class="hero-team"><span class="hero-team-name">${t('app.tbd')}</span></div>`;
// Accepts a resolved slot ({ team, label }) from resolveBracketTeams, so the hero
// works for knockout matches (which carry bracketRef, not teams) the same way the
// schedule cards and modal do — falls back to the slot's label when unresolved.
function heroTeamHTML(slot) {
if (!slot.team) return `<div class="hero-team"><span class="hero-team-name">${slot.label}</span></div>`;
return `
<div class="hero-team">
<img class="flag flag-lg" src="${flagSrc(team)}" alt="" width="64" height="43">
<span class="hero-team-name">${team.name}</span>
<img class="flag flag-lg" src="${flagSrc(slot.team)}" alt="" width="64" height="43">
<span class="hero-team-name">${slot.team.name}</span>
</div>`;
}
@ -331,11 +333,12 @@ function heroMatchupHTML(match, now, multi) {
? `${match.stadium}, ${match.city}`
: `${formatMatchTime(match, stadium)} · ${match.stadium}, ${match.city}`;
const slots = resolveBracketTeams(match);
return `
<div class="hero-matchup">
${heroTeamHTML(match.homeTeam)}
${heroTeamHTML(slots.home)}
${center}
${heroTeamHTML(match.awayTeam)}
${heroTeamHTML(slots.away)}
</div>
<p class="hero-meta">${meta}</p>`;
}