`;
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 level survives re-renders (language switch) but not reloads
const view = { scale: 1, natW: 0, natH: 0 };
const MIN_SCALE = 0.4;
const MAX_SCALE = 2;
function initInteractions() {
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);
updateZoomLabel();
const ensureMeasured = () => {
if (view.natW) return true;
if (!canvas.offsetWidth) return false;
view.natW = canvas.offsetWidth;
view.natH = canvas.offsetHeight;
return true;
};
const setScale = (next, cx, cy) => {
if (!ensureMeasured()) return;
const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, 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;
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 (!ensureMeasured()) return;
view.scale = 1;
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
canvas.addEventListener('mouseover', (event) => {
const node = event.target.closest('.bracket-match');
if (node) showPath(node.dataset.ref);
});
canvas.addEventListener('mouseout', () => clearPath());
canvas.addEventListener('focusin', (event) => {
const node = event.target.closest('.bracket-match');
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 = '';
}
}
function updateZoomLabel() {
const label = document.getElementById('zoom-reset');
if (label) label.textContent = `${Math.round(view.scale * 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');
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');
}
}
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
? `