${node.simulated ? `${t('sim.chip')}` : ''}
${teamRowHTML(home, node, 'home')}
${teamRowHTML(away, node, 'away')}
${metaHTML(node)}
`;
}
// status fragment shared by chart microlines and pager cards
function statusLine(node) {
const status = node.result?.status;
if (status === 'live') return ``;
const saveBtn = dialog.querySelector('#sim-save');
const homeInput = dialog.querySelector('#sim-score-home');
const awayInput = dialog.querySelector('#sim-score-away');
const select = (teamId) => {
selected = teamId;
for (const btn of dialog.querySelectorAll('.sim-team')) {
btn.classList.toggle('active', btn.dataset.team === teamId);
}
saveBtn.disabled = !selected;
};
for (const btn of dialog.querySelectorAll('.sim-team')) {
btn.addEventListener('click', () => select(btn.dataset.team));
}
// an unequal score implies the winner; a draw needs an explicit pick (pens)
const onScoreInput = () => {
const h = homeInput.value === '' ? null : Number(homeInput.value);
const a = awayInput.value === '' ? null : Number(awayInput.value);
if (h === null || a === null || h === a) return;
select(h > a ? node.home.teamId : node.away.teamId);
};
homeInput.addEventListener('input', onScoreInput);
awayInput.addEventListener('input', onScoreInput);
dialog.setAttribute('aria-label', `${t('sim.title')} — ${home.label} ${t('hero.vs')} ${away.label}`);
dialog.querySelector('[data-close]').addEventListener('click', () => dialog.close());
dialog.querySelector('#sim-clear').addEventListener('click', () => {
const simulation = getSimulation();
delete simulation[ref];
storageSet('simulation', simulation);
dialog.close();
refreshAfterSimChange();
});
saveBtn.addEventListener('click', () => {
if (!selected) return;
const h = homeInput.value === '' ? (selected === node.home.teamId ? 1 : 0) : Number(homeInput.value);
const a = awayInput.value === '' ? (selected === node.away.teamId ? 1 : 0) : Number(awayInput.value);
const simulation = getSimulation();
simulation[ref] = { winner: selected, score: `${h}-${a}` };
storageSet('simulation', simulation);
dialog.close();
refreshAfterSimChange();
});
dialog.showModal();
}
// ------------------------------------------------- interactions (step 8)
const ROUND_ORDER = ['R32', 'R16', 'QF', 'SF', 'FINAL'];
// 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(layout) {
const wrap = document.getElementById('bracket-wrap');
const zoomBox = document.getElementById('bracket-zoom');
const canvas = document.getElementById('bracket-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();
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 (!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);
updateZoomLabel();
};
const zoomAtCenter = (factor) => {
const rect = wrap.getBoundingClientRect();
setScale(view.scale * factor, rect.left + rect.width / 2, rect.top + rect.height / 2);
};
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 (!view.fit) return;
view.scale = view.fit;
view.userZoomed = false;
applyScale(wrap, zoomBox, canvas);
updateZoomLabel();
});
wrap.addEventListener('wheel', (event) => {
event.preventDefault();
setScale(view.scale * (event.deltaY < 0 ? 1.12 : 1 / 1.12), event.clientX, event.clientY);
}, { passive: false });
// drag to pan (1 pointer) + pinch to zoom (2 pointers)
const pointers = new Map();
let dragging = false;
let dragMoved = false;
let start = null;
let pinch = null;
wrap.addEventListener('pointerdown', (event) => {
pointers.set(event.pointerId, event);
// IMPORTANT: do NOT setPointerCapture here — capturing retargets the
// eventual click to the wrap, which kills match-node clicks (modal and
// simulation). Capture only once a real drag/pinch begins.
if (pointers.size === 1) {
dragging = true;
dragMoved = false;
start = { x: event.clientX, y: event.clientY, left: wrap.scrollLeft, top: wrap.scrollTop };
} else if (pointers.size === 2) {
dragging = false;
for (const p of pointers.values()) {
try { wrap.setPointerCapture(p.pointerId); } catch { /* pointer already gone */ }
}
const [a, b] = [...pointers.values()];
pinch = { dist: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY), scale: view.scale };
}
});
wrap.addEventListener('pointermove', (event) => {
if (!pointers.has(event.pointerId)) return;
pointers.set(event.pointerId, event);
if (pointers.size === 2 && pinch) {
const [a, b] = [...pointers.values()];
const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
setScale(pinch.scale * (dist / pinch.dist), (a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
} else if (dragging) {
const dx = event.clientX - start.x;
const dy = event.clientY - start.y;
if (!dragMoved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
dragMoved = true;
try { wrap.setPointerCapture(event.pointerId); } catch { /* pointer already gone */ }
wrap.classList.add('dragging');
}
if (dragMoved) {
wrap.scrollLeft = start.left - dx;
wrap.scrollTop = start.top - dy;
}
}
});
const endPointer = (event) => {
pointers.delete(event.pointerId);
if (pointers.size < 2) pinch = null;
if (pointers.size === 0) {
dragging = false;
wrap.classList.remove('dragging');
}
};
wrap.addEventListener('pointerup', endPointer);
wrap.addEventListener('pointercancel', endPointer);
// a real drag must not fire the match-node click underneath
wrap.addEventListener('click', (event) => {
if (dragMoved) {
event.stopPropagation();
event.preventDefault();
dragMoved = false;
}
}, true);
// hover/focus path highlight — any ref-carrying element (card or token)
canvas.addEventListener('mouseover', (event) => {
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('[data-ref]');
if (node) showPath(node.dataset.ref);
});
canvas.addEventListener('focusout', () => clearPath());
}
function applyScale(wrap, zoomBox, canvas) {
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 / (view.fit || 1)) * 100)}%`;
}
// ----------------------------------------------------- path highlight
function refOf(roundIndex, nodeIndex) {
const id = ROUND_ORDER[roundIndex];
return id === 'FINAL' ? 'FINAL' : `${id}-${nodeIndex + 1}`;
}
// full path = the hovered node, every feeder below it, and its winner's
// route up to the final
function pathRefs(ref) {
const refs = new Set([ref]);
if (ref === 'THIRD-PLACE') {
refs.add('SF-1');
refs.add('SF-2');
return refs;
}
const [roundId, num] = ref === 'FINAL' ? ['FINAL', '1'] : ref.split('-');
const r = ROUND_ORDER.indexOf(roundId);
if (r < 0) return refs;
let i = Number(num) - 1;
for (let rr = r, ii = i; rr < ROUND_ORDER.length - 1; rr += 1) {
ii = Math.floor(ii / 2);
refs.add(refOf(rr + 1, ii));
}
const stack = [[r, i]];
while (stack.length) {
const [cr, ci] = stack.pop();
if (cr === 0) continue;
for (const child of [ci * 2, ci * 2 + 1]) {
refs.add(refOf(cr - 1, child));
stack.push([cr - 1, child]);
}
}
return refs;
}
function showPath(ref) {
const canvas = document.getElementById('bracket-canvas');
clearPath();
canvas.classList.add('has-path');
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');
}
}
function clearPath() {
const canvas = document.getElementById('bracket-canvas');
canvas.classList.remove('has-path');
for (const el of canvas.querySelectorAll('.path-on')) el.classList.remove('path-on');
}
function teamRowHTML(display, node, side) {
const { result } = node;
let score = '';
if (result && result.status !== 'scheduled' && node.home.teamId && node.away.teamId) {
const goals = side === 'home' ? result.homeScore : result.awayScore;
const pens = result.penalties
? `