3rd Annual All American Summer Classic – Softball

").addClass("connector-column")); } });groupDiv.append(columnsContainer); groupScrollWrapper.append(groupDiv);setTimeout(() => { positionMatches(groupMatches, group); waitForLayoutAndDraw(serialMap, 20); }, 100); }bracketDiv.append(groupScrollWrapper);const observer = new MutationObserver(() => { const visible = $(".bracket_wrapper:visible").length > 0; if (visible) { setTimeout(() => { waitForLayoutAndDraw(window._lastSerialMap || {}, 20); }, 100); } });observer.observe(document.body, { childList: true, subtree: true }); window.globalSerialMap = serialMap; }function positionMatches(groupMatches, group) { const levels = Object.keys(groupMatches).sort((a, b) => +a - +b); const matchCenters = {}; let bottomMost = 0;const isFiveTeamBracket = levels.length === 3 && groupMatches[levels[0]]?.length === 1 && groupMatches[levels[1]]?.length === 2 && groupMatches[levels[2]]?.length === 1;if (isFiveTeamBracket) { // Custom manual layout const match1 = groupMatches[levels[0]][0]; const match2 = groupMatches[levels[1]][1]; const match3 = groupMatches[levels[1]][0]; const match4 = groupMatches[levels[2]][0];const setMatchPosition = (match, top) => { const matchId = `match-serial-${group}-${match.serial}`; const $el = $(`#${matchId}`).closest(".match-container"); $el.css({ position: "absolute", top: `${top}px` }); matchCenters[match.serial] = top + $el.outerHeight() / 2; bottomMost = Math.max(bottomMost, top + $el.outerHeight()); };setMatchPosition(match1, 200); // Centered in Column 1 setMatchPosition(match3, 0); // Top of Column 2 setMatchPosition(match2, 250); // Below match3 with spacing setMatchPosition(match4, 160); // Centered in Column 3$(`.group[data-group="${group}"]`).css("height", bottomMost + 160); return; }// Default behavior (for non-5-team brackets) const spacing = 200;levels.forEach((level, levelIndex) => { const matches = groupMatches[level];matches.forEach((match, i) => { const matchId = `match-serial-${group}-${match.serial}`; const $el = $(`#${matchId}`).closest(".match-container");if (levelIndex === 0) { const pairIndex = Math.floor(i / 2); const y = i * spacing + pairIndex * 40; $el.css({ position: "absolute", top: `${y}px` }); matchCenters[match.serial] = y + $el.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $el.outerHeight()); } else { const prevLevel = levels[levelIndex - 1]; const prevMatches = groupMatches[prevLevel]; const prev1 = prevMatches[i * 2]; const prev2 = prevMatches[i * 2 + 1];if (prev1 && prev2) { const center1 = matchCenters[prev1.serial]; const center2 = matchCenters[prev2.serial]; const centerY = (center1 + center2) / 2; const topOffset = centerY - $el.outerHeight() / 2 ; $el.css({ position: "absolute", top: `${topOffset}px` }); matchCenters[match.serial] = centerY; bottomMost = Math.max(bottomMost, topOffset + $el.outerHeight()); } } }); });$(`.group[data-group="${group}"]`).css("height", bottomMost + 160); }function waitForLayoutAndDraw(serialMap, maxTries = 10) { window._lastSerialMap = serialMap;let tries = 0; function tryDraw() { const wrapper = document.querySelector(".bracket_wrapper"); const rect = wrapper?.getBoundingClientRect();if (!rect || rect.width < 100 || rect.height < 100) { if (tries < maxTries) { tries++; requestAnimationFrame(tryDraw); } return; }// Initial draw drawBracketConnectors(serialMap, true);// ✅ Scroll listener: only add once if (!window._bracketScrollListenerAttached) { window._bracketScrollListenerAttached = true;let scrollRedrawTimeout; wrapper?.addEventListener("scroll", () => { clearTimeout(scrollRedrawTimeout); scrollRedrawTimeout = setTimeout(() => { drawBracketConnectors(window._lastSerialMap, true); }, 30); }); } }requestAnimationFrame(tryDraw); }function drawBracketConnectors(serialMap, forceRedraw = false) { const svgNS = "http://www.w3.org/2000/svg"; let svg = document.getElementById("bracket-connector-svg"); const wrapper = document.querySelector(".bracket_wrapper");// 🧠 Refresh bounding and scroll AFTER DOM changes const wrapperRect = wrapper.getBoundingClientRect(); const scrollLeft = wrapper.scrollLeft; const scrollTop = wrapper.scrollTop;// Create SVG if it doesn't exist if (!svg) { svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("id", "bracket-connector-svg"); svg.style.position = "absolute"; svg.style.top = "0"; svg.style.left = "0"; svg.style.pointerEvents = "none"; wrapper.appendChild(svg); }svg.style.width = wrapper.scrollWidth + "px"; svg.style.height = wrapper.scrollHeight + "px";// 🧠 Generate layout hash ONLY from static layout (not scroll) const layoutHash = JSON.stringify( Object.values(serialMap).map(m => { const el = document.getElementById(`match-serial-${m.group}-${m.serial}`); const wrapper = document.querySelector(".bracket_wrapper"); if (wrapper) { wrapper.style.willChange = "transform"; } const rect = el?.getBoundingClientRect(); return { serial: m.serial, group: m.group, column: m.column, rect: rect ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height } : null }; }) );// 💡 Bypass hash check if forced if (!forceRedraw && window._lastLayoutHash === layoutHash) { return; }window._lastLayoutHash = layoutHash;// Clear SVG children while (svg.firstChild) svg.removeChild(svg.firstChild);const groupMap = {}; for (const serial in serialMap) { const match = serialMap[serial]; if (!groupMap[match.group]) groupMap[match.group] = []; groupMap[match.group].push(match); }for (const group in groupMap) { const matches = groupMap[group].sort((a, b) => +a.serial - +b.serial); const matchMap = {}; matches.forEach(match => { matchMap[match.serial] = match; match.el = document.getElementById(`match-serial-${group}-${match.serial}`); match.rect = match.el?.getBoundingClientRect(); });const isFiveMatch = matches.length === 4;if (isFiveMatch) { const s1 = matchMap[1], s2 = matchMap[2], s3 = matchMap[3], s4 = matchMap[4]; if (s1?.el && s3?.el) drawLine(s1, s3); if (s3?.el && s4?.el) drawLine(s3, s4); if (s2?.el && s4?.el && s3?.el) drawCustomLineAround(s2, s4, s3); continue; }const columns = [...new Set(matches.map(m => +m.column))].sort((a, b) => a - b);for (let colIndex = 1; colIndex < columns.length; colIndex++) { const currentCol = columns[colIndex]; const prevCol = columns[colIndex - 1];const currentMatches = matches.filter(m => +m.column === currentCol); const prevMatches = matches.filter(m => +m.column === prevCol);for (let i = 0; i < currentMatches.length; i++) { const targetMatch = currentMatches[i]; const input1 = prevMatches[i * 2]; const input2 = prevMatches[i * 2 + 1];if (input1 && input2) { drawDefaultConnect(input1, input2, targetMatch); } else if (input1 || input2) { drawLine(input1 || input2, targetMatch); } } }function drawLine(from, to) { if (!from?.rect || !to?.rect) return;const x1 = from.rect.right + scrollLeft - wrapperRect.left; const y1 = from.rect.top + from.rect.height / 2 + scrollTop - wrapperRect.top;const x2 = to.rect.left + scrollLeft - wrapperRect.left; const y2 = to.rect.top + to.rect.height / 2 + scrollTop - wrapperRect.top;const midX = (x1 + x2) / 2;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#999"); path.setAttribute("stroke-width", "2"); path.setAttribute("fill", "none"); path.setAttribute("d", `M ${x1},${y1} H ${midX} V ${y2} H ${x2}`); svg.appendChild(path); }function drawCustomLineAround(from, to, avoidBox) { if (!from?.rect || !to?.rect || !avoidBox?.rect) return;const x1 = from.rect.right + scrollLeft - wrapperRect.left; const y1 = from.rect.top + from.rect.height / 2 + scrollTop - wrapperRect.top;const x2 = to.rect.left + to.rect.width / 2 + scrollLeft - wrapperRect.left; const y2 = to.rect.bottom + scrollTop - wrapperRect.top;const midX1 = x1 + 40; const midY = avoidBox.rect.bottom + scrollTop - wrapperRect.top + 30;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#999"); path.setAttribute("stroke-width", "2"); path.setAttribute("fill", "none"); path.setAttribute("d", `M ${x1},${y1} H ${midX1} V ${midY} H ${x2} V ${y2}`); svg.appendChild(path); }function drawDefaultConnect(input1, input2, targetMatch) { if (!input1?.rect || !input2?.rect || !targetMatch?.rect) return;const x1 = input1.rect.right + scrollLeft - wrapperRect.left; const y1 = input1.rect.top + input1.rect.height / 2 + scrollTop - wrapperRect.top;const x2 = input2.rect.right + scrollLeft - wrapperRect.left; const y2 = input2.rect.top + input2.rect.height / 2 + scrollTop - wrapperRect.top;const toX = targetMatch.rect.left + scrollLeft - wrapperRect.left; const toY = targetMatch.rect.top + targetMatch.rect.height / 2 + scrollTop - wrapperRect.top;const midX = (x1 + toX) / 2; const midY = (y1 + y2) / 2;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#999"); path.setAttribute("stroke-width", "2"); path.setAttribute("fill", "none");const d = ` M ${x1},${y1} H ${midX} M ${x2},${y2} H ${midX} M ${midX},${y1} V ${y2} M ${midX},${midY} H ${toX} `; path.setAttribute("d", d.trim().replace(/\s+/g, ' ')); svg.appendChild(path); } } }