${translatePhase('Final')}
-
-
-
-
-
- ${t('bracket.champion')}
- ${champion ? champion.label : t('app.tbd')}
-
- ${matchNodeHTML(finalNode)}
-
- })
`
+ : '';
+ return `
+
+ ${flag}
+ `;
+}
+
+function radialInnerHTML(tree, L) {
+ const G = TGEO;
+ const { cx, cy } = L;
+ const favorites = getFavorites();
+ const roundsById = new Map(tree.rounds.map((r) => [r.id, r]));
+ const polar = (slot, n, r) => {
+ const th = ((slot + 0.5) / n) * 2 * Math.PI;
+ return { x: cx + r * Math.sin(th), y: cy - r * Math.cos(th), th, r };
+ };
+
+ const tokens = [];
+ const lines = [];
+ const dots = [];
+ // elbow: out of the participant radially, then straight to the winner slot
+ const addLine = (from, to, node, sideTeamId, fromRef) => {
+ const rMid = to.r != null ? to.r + (from.r - (to.r ?? 0)) * 0.5 : from.r * 0.5;
+ const bend = { x: cx + rMid * Math.sin(from.th), y: cy - rMid * Math.cos(from.th) };
+ const adv = Boolean(node.winner && node.winner === sideTeamId);
+ const state = adv ? (node.simulated ? 'is-sim' : 'is-adv') : '';
+ lines.push(`
+
+ ${simChampion ? `${t('sim.chip')}` : ''}
+
+ ${champion?.team ? `})
` : ''}
+ ${champion ? `${champion.label}` : ''}
+ `;
+
+ // third place: a small labeled pair below the circle (SF losers)
+ const third = tree.third;
+ const thirdTip = matchTip(third);
+ const thirdToken = (side) => {
+ const display = slotDisplay(third[side]);
+ const win = Boolean(third.winner && third[side].teamId === third.winner);
+ const flag = display.team
+ ? ``
+ : '';
+ return `
+ ${flag}`;
+ };
+ const thirdHTML = `
+
+ ${node.simulated ? `${t('sim.chip')}` : ''}
+ `;
+}
+
+// status fragment shared by chart microlines and pager cards
+function statusLine(node) {
+ const status = node.result?.status;
+ if (status === 'live') return ``;
+ if (status === 'finished') return ``;
+ return node.match ? `${kickoffShort(node.match)}` : '';
+}
+
+// microline at the foot of a card: kickoff (upcoming) / LIVE pulse / FT.
+// The Final's hero card also carries its venue.
+function metaHTML(node) {
+ if (!node.match) return '';
+ const venue = node.ref === 'FINAL'
+ ? `${node.match.stadium} · ${node.match.city}`
+ : '';
+ return ``;
+}
+
+// ------------------------------------------------------- rounds pager
+// Round-by-round view: chip buttons switch the visible page (R32 → R16 →
+// QF → SF → Finals) — button navigation only, no horizontal scrolling.
+// Cards are the fuller variant (venue + city). Same data-ref/data-match-id
+// contract, so the root delegation (modal + sim editor) works unchanged.
+
+let pagerIndex = null; // survives re-renders (langchange etc.), not reloads
+
+const PAGER_PAGES = [
+ { id: 'R32', phase: 'Round of 32' },
+ { id: 'R16', phase: 'Round of 16' },
+ { id: 'QF', phase: 'Quarterfinals' },
+ { id: 'SF', phase: 'Semifinals' },
+ { id: 'FINALS', phase: 'Final' },
+];
+
+// first round that still has an unfinished match — the page worth opening on
+function firstOpenPage(tree) {
+ for (let i = 0; i < 4; i += 1) {
+ const round = tree.rounds.find((r) => r.id === PAGER_PAGES[i].id);
+ if (round.nodes.some((n) => n.result?.status !== 'finished')) return i;
+ }
+ return 4;
+}
+
+function pcardHTML(node, hero = false) {
+ const home = slotDisplay(node.home);
+ const away = slotDisplay(node.away);
+ const live = node.result?.status === 'live';
+ const favorites = getFavorites();
+ const hasFav = favorites.includes(node.home.teamId) || favorites.includes(node.away.teamId);
+ const classes = [
+ 'bk-pcard',
+ hero ? 'bk-pcard-hero' : '',
+ live ? 'is-live' : '',
+ node.simulated ? 'is-sim' : '',
+ hasFav ? 'has-fav' : '',
+ simMode && isSimulatable(node) ? 'simulatable' : '',
+ ].filter(Boolean).join(' ');
+ const interactive = node.match
+ ? `data-match-id="${node.match.id}" tabindex="0" role="button"
+ aria-label="${home.label} ${t('hero.vs')} ${away.label} — ${translatePhase(node.phase)}"`
+ : '';
+ const top = node.match
+ ? `
${node.simulated ? `${t('sim.chip')}` : ''}
+ ${top}
${teamRowHTML(home, node, 'home')}
${teamRowHTML(away, node, 'away')}
`;
}
+function pagerFinalsHTML(tree) {
+ const finalNode = tree.nodesByRef.get('FINAL');
+ const champion = tree.champion ? slotDisplay({ teamId: tree.champion }) : null;
+ const simChampion = Boolean(tree.champion && finalNode?.simulated);
+ const flag = champion?.team
+ ? ``
+ : '';
+ return `
+ ${body} `;
+ }).join('');
+ return `
+
-
+ ${translatePhase('Third Place')}
- ${matchNodeHTML(tree.third)} -
+
`;
}
-function matchNodeHTML(node) {
+function wallchartInnerHTML(tree, L) {
+ let cardsHTML = '';
+ for (const round of tree.rounds) {
+ for (const node of round.nodes) cardsHTML += matchNodeHTML(node, L.cards.get(node.ref));
+ }
+ cardsHTML += matchNodeHTML(tree.third, L.cards.get('THIRD-PLACE'));
+ return `
+ ${sceneryHTML(L)}
+ ${linksHTML(L)}
+ ${L.labels.map((lb) => `
+
+ ${translatePhase(lb.phase)}`).join('')}
+ ${cardsHTML}
+ ${centerHTML(tree, L)}`;
+}
+
+// -------------------------------------------------- radial (orbit) view
+
+// short tooltip line for a match: score when played, kickoff otherwise
+function matchTip(node) {
+ if (!node.match) return '';
+ const home = slotDisplay(node.home);
+ const away = slotDisplay(node.away);
+ const { result } = node;
+ if (result && result.status !== 'scheduled' && node.home.teamId && node.away.teamId) {
+ const pens = result.penalties ? ` (${result.penalties.home}-${result.penalties.away})` : '';
+ return `${home.label} ${result.homeScore}–${result.awayScore} ${away.label}${pens}`;
+ }
+ if (node.simulated && node.simScore) {
+ return `${home.label} ${node.simScore.home}–${node.simScore.away} ${away.label} · ${t('sim.chip')}`;
+ }
+ return `${home.label} ${t('hero.vs')} ${away.label} · ${kickoffShort(node.match)}`;
+}
+
+function radialTokenHTML(pos, d, display, node, opts = {}) {
+ const classes = [
+ 'bk-token',
+ opts.ring ? `tk-${opts.ring}` : '',
+ display.team ? '' : 'tk-tbd',
+ opts.out ? 'tk-out' : '',
+ opts.winner ? (node.simulated ? 'tk-sim' : 'tk-winner') : '',
+ opts.live ? 'tk-live' : '',
+ opts.fav ? 'tk-fav' : '',
+ opts.slot && simMode && isSimulatable(node) ? 'simulatable' : '',
+ ].filter(Boolean).join(' ');
+ const tip = opts.slot ? matchTip(node) : display.label;
+ const interactive = node.match
+ ? `data-match-id="${node.match.id}" tabindex="0" role="button"
+ aria-label="${matchTip(node) || display.label} — ${translatePhase(node.phase)}"`
+ : '';
+ const flag = display.team
+ ? `
+
+ ${inner}
+ ${translatePhase('Third Place')}
+ ${thirdToken('home')}${thirdToken('away')}
+
`;
+
+ const orbits = [G.outerR, G.winners.R32.r, G.winners.R16.r, G.winners.QF.r]
+ .map((r) => `
+ ${simChampion ? `${t('sim.chip')}` : ''}
+
+ ${t('bracket.champion')}
+ ${champion ? `${flag}${champion.label}` : t('app.tbd')}
+
+
+ ${translatePhase('Third Place')}`;
+}
+
+function matchNodeHTML(node, pos) {
const home = slotDisplay(node.home);
const away = slotDisplay(node.away);
const live = node.result?.status === 'live';
@@ -412,6 +858,7 @@ function matchNodeHTML(node) {
const hasFav = favorites.includes(node.home.teamId) || favorites.includes(node.away.teamId);
const classes = [
'bracket-match',
+ `bk-${pos.tier.toLowerCase()}`,
live ? 'is-live' : '',
node.simulated ? 'is-sim' : '',
hasFav ? 'has-fav' : '',
@@ -421,14 +868,148 @@ function matchNodeHTML(node) {
? `data-match-id="${node.match.id}" tabindex="0" role="button"
aria-label="${home.label} ${t('hero.vs')} ${away.label} — ${translatePhase(node.phase)}"`
: '';
+ return `
+
+ ${teamRowHTML(home, node, 'home')}
+ ${teamRowHTML(away, node, 'away')}
+
+ ${metaHTML(node)}
+
+ ${node.match.stadium} · ${node.match.city}
+ ${statusLine(node)}
+
`
+ : '';
return `
+ ${simChampion ? `${t('sim.chip')}` : ''}
+
+ ${t('bracket.champion')}
+ ${champion ? `${flag}${champion.label}` : t('app.tbd')}
+
+ ${pcardHTML(finalNode, true)}
+ ${translatePhase('Third Place')}
+ ${pcardHTML(tree.third)}`; +} + +function pagerHTML(tree) { + const roundsById = new Map(tree.rounds.map((r) => [r.id, r])); + const chips = PAGER_PAGES.map((page, i) => ` + `).join(''); + const pages = PAGER_PAGES.map((page) => { + const body = page.id === 'FINALS' + ? `${pagerFinalsHTML(tree)}
`
+ : `${roundsById.get(page.id).nodes.map((n) => pcardHTML(n)).join('')}
`;
+ return `
+
+
`;
+}
+
+function initPager(tree) {
+ const pages = [...document.querySelectorAll('#bk-pages .bk-page')];
+ const chips = [...document.querySelectorAll('#bk-pager-nav .bk-page-btn')];
+ if (pagerIndex === null) pagerIndex = firstOpenPage(tree);
+
+ const show = (i) => {
+ pagerIndex = Math.max(0, Math.min(PAGER_PAGES.length - 1, i));
+ pages.forEach((page, k) => { page.hidden = k !== pagerIndex; });
+ chips.forEach((chip, k) => {
+ chip.classList.toggle('active', k === pagerIndex);
+ chip.setAttribute('aria-pressed', String(k === pagerIndex));
+ });
+ };
+ chips.forEach((chip, i) => chip.addEventListener('click', () => show(i)));
+ show(pagerIndex);
+}
+
// ----------------------------------------------------- simulation (step 9)
let simMode = false;
@@ -550,35 +1131,53 @@ function openSimEditor(ref) {
// ------------------------------------------------- interactions (step 8)
const ROUND_ORDER = ['R32', 'R16', 'QF', 'SF', 'FINAL'];
-// zoom level survives re-renders (language switch) but not reloads
-const view = { scale: 1, natW: 0, natH: 0 };
-const MIN_SCALE = 0.4;
+// Zoom state survives re-renders (language switch) but not reloads.
+// The fit scale (whole chart visible) is the resting point and the zoom
+// label's "100%"; it's recomputed by a ResizeObserver because the panel is
+// usually hidden when render() first runs (clientWidth 0 — gotcha class).
+const view = { scale: 1, fit: 0, natW: 0, natH: 0, userZoomed: false };
const MAX_SCALE = 2;
+let fitRO = null;
-function initInteractions() {
+function initInteractions(layout) {
const wrap = document.getElementById('bracket-wrap');
const zoomBox = document.getElementById('bracket-zoom');
const canvas = document.getElementById('bracket-canvas');
- view.natW = 0; // re-measure lazily — panel may be hidden right now (offsetWidth 0)
- if (view.scale !== 1) applyScale(wrap, zoomBox, canvas);
+ if (view.layoutId !== layout.id) { // wallchart ↔ radial: fresh fit, not inherited zoom
+ view.layoutId = layout.id;
+ view.userZoomed = false;
+ view.fit = 0;
+ }
+ view.natW = layout.w; // geometry is computed, not measured — always known
+ view.natH = layout.h;
+ if (view.fit) {
+ if (!view.userZoomed) view.scale = view.fit;
+ applyScale(wrap, zoomBox, canvas);
+ }
updateZoomLabel();
- const ensureMeasured = () => {
- if (view.natW) return true;
- if (!canvas.offsetWidth) return false;
- view.natW = canvas.offsetWidth;
- view.natH = canvas.offsetHeight;
- return true;
- };
+ if (fitRO) fitRO.disconnect();
+ fitRO = new ResizeObserver(() => {
+ const cw = wrap.clientWidth;
+ const ch = wrap.clientHeight;
+ if (cw <= 0 || ch <= 0) return; // panel hidden — wait for the tab to open
+ view.fit = Math.min(cw / view.natW, ch / view.natH, 1);
+ if (!view.userZoomed || view.scale < view.fit) view.scale = Math.max(view.fit, view.userZoomed ? view.scale : 0);
+ if (!view.userZoomed) view.scale = view.fit;
+ applyScale(wrap, zoomBox, canvas);
+ updateZoomLabel();
+ });
+ fitRO.observe(wrap);
const setScale = (next, cx, cy) => {
- if (!ensureMeasured()) return;
- const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, next));
+ if (!view.fit) return;
+ const scale = Math.min(MAX_SCALE, Math.max(view.fit, next));
if (scale === view.scale) return;
const rect = wrap.getBoundingClientRect();
const px = (cx - rect.left + wrap.scrollLeft) / view.scale;
const py = (cy - rect.top + wrap.scrollTop) / view.scale;
view.scale = scale;
+ view.userZoomed = true;
applyScale(wrap, zoomBox, canvas);
wrap.scrollLeft = px * scale - (cx - rect.left);
wrap.scrollTop = py * scale - (cy - rect.top);
@@ -593,8 +1192,9 @@ function initInteractions() {
document.getElementById('zoom-in').addEventListener('click', () => zoomAtCenter(1.25));
document.getElementById('zoom-out').addEventListener('click', () => zoomAtCenter(1 / 1.25));
document.getElementById('zoom-reset').addEventListener('click', () => {
- if (!ensureMeasured()) return;
- view.scale = 1;
+ if (!view.fit) return;
+ view.scale = view.fit;
+ view.userZoomed = false;
applyScale(wrap, zoomBox, canvas);
updateZoomLabel();
});
@@ -672,34 +1272,29 @@ function initInteractions() {
}
}, true);
- // hover/focus path highlight
+ // hover/focus path highlight — any ref-carrying element (card or token)
canvas.addEventListener('mouseover', (event) => {
- const node = event.target.closest('.bracket-match');
+ const node = event.target.closest('[data-ref]');
if (node) showPath(node.dataset.ref);
});
canvas.addEventListener('mouseout', () => clearPath());
canvas.addEventListener('focusin', (event) => {
- const node = event.target.closest('.bracket-match');
+ const node = event.target.closest('[data-ref]');
if (node) showPath(node.dataset.ref);
});
canvas.addEventListener('focusout', () => clearPath());
}
function applyScale(wrap, zoomBox, canvas) {
- if (view.natW) {
- zoomBox.style.width = `${view.natW * view.scale}px`;
- zoomBox.style.height = `${view.natH * view.scale}px`;
- }
- canvas.style.transform = view.scale === 1 ? '' : `scale(${view.scale})`;
- if (view.scale === 1) {
- zoomBox.style.width = '';
- zoomBox.style.height = '';
- }
+ zoomBox.style.width = `${view.natW * view.scale}px`;
+ zoomBox.style.height = `${view.natH * view.scale}px`;
+ canvas.style.transform = `scale(${view.scale})`;
}
+// 100% = the whole-chart fit, not natural card size
function updateZoomLabel() {
const label = document.getElementById('zoom-reset');
- if (label) label.textContent = `${Math.round(view.scale * 100)}%`;
+ if (label) label.textContent = `${Math.round((view.scale / (view.fit || 1)) * 100)}%`;
}
// ----------------------------------------------------- path highlight
@@ -743,12 +1338,15 @@ function showPath(ref) {
const canvas = document.getElementById('bracket-canvas');
clearPath();
canvas.classList.add('has-path');
- for (const r of pathRefs(ref)) {
- const el = canvas.querySelector(`[data-ref="${r}"]`);
- if (!el) continue;
- el.classList.add('path-on');
- el.closest('.bracket-slot')?.classList.add('path-on');
- el.closest('.bracket-pair')?.classList.add('path-on');
+ const refs = pathRefs(ref);
+ for (const r of refs) {
+ // cards (wallchart), tokens/center/third group (radial) — anything owning the ref
+ for (const el of canvas.querySelectorAll(`[data-ref="${r}"]`)) el.classList.add('path-on');
+ }
+ // a connector lights up when both of its endpoints are on the path
+ // (the champion stem carries FINAL→FINAL, so it follows the final)
+ for (const path of canvas.querySelectorAll('.bk-links path')) {
+ if (refs.has(path.dataset.from) && refs.has(path.dataset.to)) path.classList.add('path-on');
}
}
diff --git a/assets/js/i18n.js b/assets/js/i18n.js
index a20349a..cf061d4 100644
--- a/assets/js/i18n.js
+++ b/assets/js/i18n.js
@@ -95,6 +95,11 @@ const dicts = {
'bracket.groupRunnerUp': 'Group {g} Runner-up',
'bracket.bestThird': 'Best 3rd #{n}',
'bracket.champion': 'Champion',
+ 'bracket.ft': 'FT',
+ 'bracket.viewLabel': 'Bracket view',
+ 'bracket.viewRounds': 'Rounds',
+ 'bracket.viewWallchart': 'Wallchart',
+ 'bracket.viewRadial': 'Radial',
'bracket.zoomIn': 'Zoom in',
'bracket.zoomOut': 'Zoom out',
'bracket.zoomReset': 'Reset zoom',
@@ -275,6 +280,11 @@ const dicts = {
'bracket.groupRunnerUp': '2º do Grupo {g}',
'bracket.bestThird': 'Melhor 3º #{n}',
'bracket.champion': 'Campeão',
+ 'bracket.ft': 'FIM',
+ 'bracket.viewLabel': 'Visualização do mata-mata',
+ 'bracket.viewRounds': 'Fases',
+ 'bracket.viewWallchart': 'Chaveamento',
+ 'bracket.viewRadial': 'Radial',
'bracket.zoomIn': 'Aproximar',
'bracket.zoomOut': 'Afastar',
'bracket.zoomReset': 'Restaurar zoom',
${pages}
+