2nd Annual Ocean State Classic

").addClass("connector-column")); } });groupDiv.append(columnsContainer); groupScrollWrapper.append(groupDiv);const groupNumbers = Object.keys(groups); // make sure 'groups' is defined and validconst importantMatchExists = Object.values(groupMatches) .flat() .some(m => m.is_importantlast === "1");setTimeout(() => { if (importantMatchExists) { const currentGroupNumber = group; const currentIndex = groupNumbers.indexOf(currentGroupNumber); const prevGroupNumber = currentIndex > 0 ? groupNumbers[currentIndex - 1] : null; const lastChecked = true;positionMatcheslast(groupMatches, currentGroupNumber, prevGroupNumber, lastChecked); }positionMatches(groupMatches, group); //waitForLayoutAndDraw(serialMap, 20); waitForLayoutAndDrawStable(serialMap, 20); }, 100);}bracketDiv.append(groupScrollWrapper);const observer = new MutationObserver(() => { const visible = $(".bracket_wrapper:visible").length > 0; if (visible) { setTimeout(() => { //waitForLayoutAndDraw(window._lastSerialMap || {}, 20); waitForLayoutAndDrawStable(window._lastSerialMap || {}, 20);}, 100); } });observer.observe(document.body, { childList: true, subtree: true }); window.globalSerialMap = serialMap; } function isElementVisible(el) { if (!el) return false; const style = window.getComputedStyle(el); const rect = el.getBoundingClientRect();return ( style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && rect.width > 0 && rect.height > 0 && document.body.contains(el) ); }function positionMatcheslast(groupMatches, group, prevGroupNumber, isLastCheckboxChecked = false) { if (!isLastCheckboxChecked) { // If checkbox not checked, hide and clear SVG just in case const existingSvg = document.getElementById('global-connector-svg'); if (existingSvg) { existingSvg.style.display = 'none'; while (existingSvg.firstChild) existingSvg.removeChild(existingSvg.firstChild); console.log("❌ Checkbox not checked — hiding SVG and clearing lines."); } return; }const prevGroup = document.querySelector(`.group[data-group="${prevGroupNumber}"]`); const currGroup = document.querySelector(`.group[data-group="${group}"]`);let svg = document.getElementById('global-connector-svg'); if (!svg) { svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.id = 'global-connector-svg'; svg.style.position = 'absolute'; svg.style.top = '0'; svg.style.left = '0'; svg.style.zIndex = '9999'; svg.style.pointerEvents = 'none'; document.body.appendChild(svg); console.log("📦 Created global SVG container with id='global-connector-svg'"); }// Always update size svg.style.width = document.documentElement.scrollWidth + 'px'; svg.style.height = document.documentElement.scrollHeight + 'px';if (isElementVisible(prevGroup) && isElementVisible(currGroup)) { const prevRect = prevGroup.getBoundingClientRect(); const currRect = currGroup.getBoundingClientRect();const prevPos = { x: prevRect.left + window.scrollX + prevRect.width, y: prevRect.top + window.scrollY + prevRect.height / 2 };const currPos = { x: currRect.left + window.scrollX, y: currRect.top + window.scrollY + currRect.height / 2 };// Clear old lines while (svg.firstChild) { svg.removeChild(svg.firstChild); }// Draw new line const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", prevPos.x); line.setAttribute("y1", prevPos.y); line.setAttribute("x2", currPos.x); line.setAttribute("y2", currPos.y); line.setAttribute("stroke", "#999"); line.setAttribute("stroke-width", "2");svg.appendChild(line);svg.style.display = 'block'; // show SVG console.log("✅ Line appended to global SVG and SVG shown"); } else { // No visible groups → clear and hide SVG while (svg.firstChild) { svg.removeChild(svg.firstChild); } svg.style.display = 'none'; console.warn("⚠️ One or both group elements are hidden or missing — hiding SVG"); } }function formatStartDateTime(start_date, start_time) { // Check for null, undefined, or empty values if (!start_date || !start_time || typeof start_time !== 'string' || !start_time.includes(' ')) { return ""; }const timePart = start_time.split(' ')[1]; if (!timePart) return "";const timeObj = new Date(`1970-01-01T${timePart}`); if (isNaN(timeObj.getTime())) { return ""; }// Convert start_date from "YYYY-MM-DD" to "MM/DD/YYYY" const [year, month, day] = start_date.split('-'); if (!year || !month || !day) return "";const formattedDate = `${month}/${day}/${year}`;const timeFormatted = timeObj.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true, // 24-hour format });return `${formattedDate} ${timeFormatted} EST`; }function positionMatches(groupMatches, group) { const levels = Object.keys(groupMatches).sort((a, b) => +a - +b); const matchCenters = {}; const spacing = 200; let bottomMost = 0; const totalMatches = Object.values(groupMatches).flat().length; const isFiveTeamLayout = totalMatches === 4; const isSixTeamLayout = totalMatches === 5; const isSevenTeamLayout = totalMatches === 6; const isTenTeamLayout = totalMatches === 9; const isNineTeamLayout = totalMatches === 8; const isTwelveTeamLayout = totalMatches === 11;if (isTwelveTeamLayout) { const serialPositions = { 1: 200, // Round 1 2: 400, 3: 600, 4: 800, 5: 100, 6: 300, // Quarterfinals 7: 500, 8: 700, 9: 200, 10: 600, // Semifinal 1 11: 400 // Final };// Position matches Object.keys(serialPositions).forEach((serialStr) => { const serial = parseInt(serialStr); const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } });// Draw connector lines (you may need to tweak based on actual match setup) drawConnectorLine(group, 1, 5, 'left', 'bottom'); drawConnectorLine(group, 2, 6, 'left', 'bottom'); drawConnectorLine(group, 3, 7, 'left', 'bottom'); drawConnectorLine(group, 4, 8, 'left', 'bottom'); drawConnectorLine(group, 5, 9, 'right', 'top'); drawConnectorLine(group, 6, 9, 'right', 'bottom'); drawConnectorLine(group, 7, 10, 'right', 'top'); drawConnectorLine(group, 8, 10, 'right', 'bottom'); drawConnectorLine(group, 9, 11, 'right', 'top'); drawConnectorLine(group, 10, 11, 'right', 'bottom'); drawChampionLine(group, 11);$(`.group[data-group="${group}"]`).css("height", `${bottomMost + 250}px`); return; }if (isNineTeamLayout) { const serialPositions = { 1: 200, // Game 1 (Round 1) 2: 100, // Game 2 (Round 2) 3: 300, // Game 3 4: 500, // Game 4 5: 700, // Game 5 6: 200, // Game 6 (Round 3) 7: 600, // Game 7 8: 400 // Game 8 (Final) };[1, 2, 3, 4, 5, 6, 7, 8].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } }); // Draw connector lines based on logical flow drawConnectorLine(group, 1, 2); // Game 1 → Game 2 drawConnectorLine(group, 2, 6); // Game 2 → Game 6 drawConnectorLine(group, 3, 6); // Game 3 → Game 6 drawConnectorLine(group, 4, 7); // Game 4 → Game 7 drawConnectorLine(group, 5, 7); // Game 5 → Game 7 drawConnectorLine(group, 6, 8); // Game 6 → Game 8 drawConnectorLine(group, 7, 8); // Game 7 → Game 8 drawChampionLine(group, 8);bottomMost = 0; [1, 2, 3, 4, 5, 6, 7, 8].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } }); drawChampionLine(group, 8); // Apply accurate height to container $(`.group[data-group="${group}"]`).css("height", `${bottomMost + 250}px`); return; }// Ten Team Layout if (isTenTeamLayout) { const serialPositions = { 1: 200, 2: 600, 3: 100, 4: 300, 5: 500, 6: 700, 7: 200, 8: 600, 9: 400 };// Loop through matches 1 to 9 to set positions [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } });// Draw connector lines for Round 1, 2, and 3 drawConnectorLine(group, 1, 3, 'left', 'bottom'); drawConnectorLine(group, 2, 5, 'left', 'bottom'); drawConnectorLine(group, 3, 7, 'right', 'top'); drawConnectorLine(group, 4, 7, 'right', 'bottom'); drawConnectorLine(group, 5, 8, 'right', 'top'); drawConnectorLine(group, 6, 8, 'right', 'bottom'); drawConnectorLine(group, 7, 9, 'right', 'top'); drawConnectorLine(group, 8, 9, 'right', 'bottom'); drawChampionLine(group, 9);bottomMost = 0; [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } }); drawChampionLine(group, 9); $(`.group[data-group="${group}"]`).css("height", `${bottomMost + 250}px`); return; } if (isSevenTeamLayout) { const matchCenters = {}; let bottomMost = 0;// More generous vertical spacing between 1 → 2 → 3 (adjusted for more matches) const serialPositions = { 1: 0, // Match 1 at the top 2: 180, // Match 2 below Match 1 3: 400, // Match 3 below Match 2 4: 620, // Match 4 below Match 3 (between 1 & 2) 5: 840, // Match 5 below Match 4 (between 2 & 3) 6: 1060, // Match 6 below Match 5 (between 4 & 5) 7: 1280 // Match 7 at the bottom (below Match 6) };// Position Matches 1–7 (Play-ins) [1, 2, 3, 4, 5, 6, 7].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } }); console.log('Height1'+bottomMost); // Adjust positions for the additional matches if necessary: // Match 4: between 1 & 2 (Positioned earlier in `serialPositions`) const $match4 = $(`#match-serial-${group}-4`).closest(".match-container"); if ($match4.length) { const centerY = (matchCenters[1] + matchCenters[2]) / 2 - $match4.outerHeight() / 2; $match4.css({ position: "absolute", top: `${centerY}px` }); matchCenters[4] = centerY + $match4.outerHeight() / 2; bottomMost = Math.max(bottomMost, centerY + $match4.outerHeight()); }// Match 5: between 2 and 3 — center with slight right offset const $match5 = $(`#match-serial-${group}-5`).closest(".match-container"); if ($match5.length && matchCenters[2] && matchCenters[3]) { const centerY = (matchCenters[2] + matchCenters[3]) / 2 - $match5.outerHeight() / 2; const rightOffset = 40; // slight offset to center horizontally $match5.css({ position: "absolute", top: `${centerY}px` }); matchCenters[5] = centerY + $match5.outerHeight() / 2; bottomMost = Math.max(bottomMost, centerY + $match5.outerHeight()); }// Match 6: between match 4 and 5, centered to the right const $match6 = $(`#match-serial-${group}-6`).closest(".match-container"); if ($match6.length && matchCenters[4] && matchCenters[5]) { const centerY = (matchCenters[4] + matchCenters[5]) / 2 - $match6.outerHeight() / 2; const rightOffset = 60; // adjust as needed for proper placement $match6.css({ position: "absolute", top: `${centerY}px` }); matchCenters[6] = centerY + $match6.outerHeight() / 2; bottomMost = Math.max(bottomMost, centerY + $match6.outerHeight()); }// Match 7: below match 6, at the bottom-most position const $match7 = $(`#match-serial-${group}-7`).closest(".match-container"); if ($match7.length && matchCenters[6]) { const centerY = matchCenters[6] + 180; // 180px down from match 6 $match7.css({ position: "absolute", top: `${centerY}px` }); matchCenters[7] = centerY + $match7.outerHeight() / 2; bottomMost = Math.max(bottomMost, centerY + $match7.outerHeight()); }// Draw connector lines between matches drawConnectorLine(group, 1, 4); drawConnectorLine(group, 2, 5); drawConnectorLine(group, 3, 5); drawConnectorLine(group, 4, 6); drawConnectorLine(group, 5, 6); drawConnectorLine(group, 6, 7); // Adding connector line for Match 7 drawChampionLine(group, 7);// Set container height based on the bottom-most position // Recalculate actual bottom-most point after all matches are positioned bottomMost = 0; [1, 2, 3, 4, 5, 6, 7].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const top = parseFloat($match.css("top")) || 0; const height = $match.outerHeight() || 0; bottomMost = Math.max(bottomMost, top + height); } }); // Apply accurate height to container drawChampionLine(group, 6); $(`.group[data-group="${group}"]`).css("height", `${bottomMost + 250}px`); return; } if (isSixTeamLayout) { const serialPositions = { 1: 225, // Game 1 2: 400, // Game 2 3: 100, // Game 3 (Winner G1 vs Team 5) 4: 525, // Game 4 (Winner G2 vs Team 6) 5: 300 // Game 5 (Final) };[1, 2, 3, 4, 5].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const y = serialPositions[serial]; $match.css({ position: "absolute", top: `${y}px` }); matchCenters[serial] = y + $match.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $match.outerHeight()); } });// Draw correct connector lines //drawConnectorLine(group, 1, 3, 'right', 'top'); //drawConnectorLine(group, 2, 4, 'right', 'bottom'); //drawConnectorLine(group, 3, 5, 'right', 'top'); //drawConnectorLine(group, 4, 5, 'right', 'bottom');// Adjust container height bottomMost = 0; [1, 2, 3, 4, 5].forEach((serial) => { const $match = $(`#match-serial-${group}-${serial}`).closest(".match-container"); if ($match.length) { const top = parseFloat($match.css("top")) || 0; const height = $match.outerHeight() || 0; bottomMost = Math.max(bottomMost, top + height); } }); drawChampionLine(group, 5); $(`.group[data-group="${group}"]`).css("height", `${bottomMost + 250}px`); return; }// Helper function function drawConnectorLine(group, fromSerial, toSerial) { const fromEl = $(`#match-serial-${group}-${fromSerial}`).closest(".match-container"); const toEl = $(`#match-serial-${group}-${toSerial}`).closest(".match-container");if (!fromEl.length || !toEl.length) { console.warn(`Cannot draw line: from ${fromSerial} or to ${toSerial} not found.`); return; }const $group = $(`.group[data-group="${group}"]`); const $svg = $group.find("svg.connector-layer");if (!$svg.length) { console.warn(`Missing SVG layer in group ${group}`); return; }const fromOffset = fromEl.position(); const toOffset = toEl.position();const fromX = fromEl.position().left + fromEl.outerWidth(); const fromY = fromOffset.top + fromEl.outerHeight() / 2; const toX = toEl.position().left; const toY = toOffset.top + toEl.outerHeight() / 2;const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", fromX); line.setAttribute("y1", fromY); line.setAttribute("x2", toX); line.setAttribute("y2", toY); line.setAttribute("stroke", "#333"); line.setAttribute("stroke-width", "2");$svg.append(line); }// Positioning for 5-team layout if (isFiveTeamLayout) { const serialPositions = { 1: 200, // First round (Play-in) 3: 80, // Semifinal 1 (top) 2: 320, // Semifinal 2 (bottom) 4: 200 // Final (centered between semi 1 and 2) };Object.entries(groupMatches).forEach(([level, matches]) => { matches.forEach((match) => { const matchId = `match-serial-${group}-${match.serial}`; const $el = $(`#${matchId}`).closest(".match-container");if (!$el.length) return;const y = serialPositions[match.serial] ?? 0; $el.css({ position: "absolute", top: `${y}px` });matchCenters[match.serial] = y + $el.outerHeight() / 2; bottomMost = Math.max(bottomMost, y + $el.outerHeight()); }); }); drawChampionLine(group, 4); $(`.group[data-group="${group}"]`).css("height", bottomMost + 160); return; }// Default layout for other brackets 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 (!$el.length) return;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 + 180); const lastLevel = levels[levels.length - 1]; const lastMatch = groupMatches[lastLevel]?.[0]; if (lastMatch) drawChampionLine(group, lastMatch.serial);} function drawChampionLine(group, finalMatchSerial) { console.log(`drawChampionLine called with group=${group}, finalMatchSerial=${finalMatchSerial}`);const finalMatch = $(`#match-serial-${group}-${finalMatchSerial}`).closest(".match-container"); if (!finalMatch.length) { console.warn("Final match element not found"); return; }const $group = $(`.group[data-group="${group}"]`); let $svg = $group.find("svg.connector-layer");if (!$svg.length) { console.warn(`Missing SVG layer in group ${group}, creating one.`); $svg = $(``); $group.append($svg); }const matchOffset = finalMatch.offset(); const svgOffset = $svg.offset();const matchRightX = matchOffset.left - svgOffset.left + finalMatch.outerWidth(); const matchCenterY = matchOffset.top - svgOffset.top + finalMatch.outerHeight() / 2;const $teams = finalMatch.find(".team-row"); let championName = ""; let highScore = -1;$teams.each(function () { const teamName = $(this).find(".team-name").text().trim(); const score = parseInt($(this).find(".score").text().trim(), 10); if (!isNaN(score) && score > 0 && score > highScore) { highScore = score; championName = teamName; } });if (!championName) { console.warn("Could not determine champion team"); return; }const lowerChampionName = championName.toLowerCase(); const skipKeywords = ["winner", "winner of game"]; const shouldSkip = skipKeywords.some(keyword => lowerChampionName.includes(keyword));if (shouldSkip) { console.log(`Skipping champion line: name "${championName}" includes skip keyword.`); return; }console.log(`Champion team: ${championName} with score ${highScore}`);const svgNS = "http://www.w3.org/2000/svg"; const lineLength = 180; const offsetY = 29; // how much to move everything down from matchCenterYconst lineY = matchCenterY + offsetY;// Draw line const line = document.createElementNS(svgNS, "line"); line.setAttribute("x1", matchRightX); line.setAttribute("y1", lineY); line.setAttribute("x2", matchRightX + lineLength); line.setAttribute("y2", lineY); line.setAttribute("stroke", "#ccc"); line.setAttribute("stroke-width", "2"); $svg.append(line);const centerX = matchRightX + lineLength / 2; // Champion name (above the line) const nameText = document.createElementNS(svgNS, "text"); nameText.setAttribute("x", centerX); nameText.setAttribute("y", lineY - 16); // slightly above the line nameText.setAttribute("text-anchor", "middle"); nameText.setAttribute("font-size", "15px"); nameText.setAttribute("font-weight", "bold"); nameText.setAttribute("fill", "#000"); nameText.setAttribute("style", "text-shadow: 1px 1px 2px #ccc;"); nameText.textContent = `${championName}`; $svg.append(nameText);// "Champion" label (below the line) const championText = document.createElementNS(svgNS, "text"); championText.setAttribute("x", centerX); championText.setAttribute("y", lineY + 26); // slightly below the line championText.setAttribute("text-anchor", "middle"); championText.setAttribute("font-size", "14px"); championText.setAttribute("font-style", "italic"); championText.setAttribute("fill", "#000"); championText.setAttribute("style", "text-shadow: 1px 1px 1px #eee;"); championText.textContent = "Champion"; $svg.append(championText);console.log("Champion line and labels drawn."); }function debounce(func, delay) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; } function waitForLayoutAndDraw(serialMap, maxTries = 10) { if (window._isDrawingScheduled) return;window._isDrawingScheduled = true; window._lastSerialMap = serialMap;let tries = 0;function tryDraw() { const wrapper = document.querySelector(".bracket_wrapper");if (!wrapper) { if (tries < maxTries) { tries++; requestAnimationFrame(tryDraw); } else { window._isDrawingScheduled = false; } return; }const rect = wrapper.getBoundingClientRect(); if (rect.width < 100 || rect.height < 100) { if (tries < maxTries) { tries++; requestAnimationFrame(tryDraw); } else { window._isDrawingScheduled = false; } return; }// ✅ Draw once per layout if (!wrapper.dataset.hasDrawn) { drawBracketConnectors(serialMap, true); wrapper.dataset.hasDrawn = "true";document.querySelectorAll(".group").forEach(group => { const maxHeight = 900; if (group.offsetHeight > maxHeight && !group.classList.contains("group-scroll")) { group.classList.add("group-scroll"); console.log("✅ group-scroll added to:", group); } }); }// 🟢 Reset draw flag after timeout setTimeout(() => { window._isDrawingScheduled = false; wrapper.dataset.hasDrawn = ""; }, 1000);// ✅ ADD SCROLL LISTENER FOR MOBILE ONLY console.log("Window width:", window.innerWidth); // Inside tryDraw() const scrollTarget = document.querySelector(".group-scroll-wrapper");if (!scrollTarget.dataset.scrollListenerAdded && window.innerWidth <= 768) { console.log("🟢 Mobile scroll listener added");scrollTarget.addEventListener( "scroll", debounce(() => { console.log("🔁 Scrolling (mobile)"); drawBracketConnectors(window._lastSerialMap, true); }, 2) );scrollTarget.dataset.scrollListenerAdded = "true"; }}requestAnimationFrame(tryDraw); }function waitForLayoutAndDrawStable(serialMap, maxTries = 10) { let tries = 0;function attempt() { const wrapper = document.querySelector(".bracket_wrapper"); const groupReady = Array.from(document.querySelectorAll(".group")).every(el => el.offsetHeight > 200);if (!groupReady && tries < maxTries) { tries++; return setTimeout(attempt, 100); // Wait for layout }waitForLayoutAndDraw(serialMap); // ⬅️ Only call once layout is stable }attempt(); } function drawBracketConnectors(serialMap, forceRedraw = false) { console.log("Ketan test"); const svgNS = "http://www.w3.org/2000/svg"; let svg = document.getElementById("bracket-connector-svg"); const wrapper = document.querySelector(".bracket_wrapper");const wrapperRect = wrapper.getBoundingClientRect(); const scrollLeft = wrapper.scrollLeft; const scrollTop = wrapper.scrollTop;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";const layoutHash = JSON.stringify( Object.values(serialMap).map(m => { const el = document.getElementById(`match-serial-${m.group}-${m.serial}`); 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 }; }) );if (!forceRedraw && window._lastLayoutHash === layoutHash) return; window._lastLayoutHash = layoutHash;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; const isThreeTeam = matches.length === 2 && matchMap["1"] && matchMap["2"]; if ( matches.length === 11 && matchMap["1"] && matchMap["2"] && matchMap["3"] && matchMap["4"] && matchMap["5"] && matchMap["6"] && matchMap["7"] && matchMap["8"] && matchMap["9"] && matchMap["10"] && matchMap["11"] ) { const m = matchMap;// Round 1 → Round 2 drawLConnectorCustom(m[1].rect, m[5].rect, "bottom", 40); drawLConnectorCustom(m[2].rect, m[6].rect, "bottom", 40);drawLConnectorCustom(m[3].rect, m[7].rect, "bottom", 40); drawLConnectorCustom(m[4].rect, m[8].rect, "bottom", 40);// Seeds 1-4 with byes go directly to M7–M10 // Assume M5 feeds M7, M6 feeds M8, and so ondrawLConnectorCustom(m[5].rect, m[9].rect, "top", 40); drawLConnectorCustom(m[6].rect, m[9].rect, "bottom", 40);drawLConnectorCustom(m[7].rect, m[10].rect, "top", 40); // adjust if seed logic differs drawLConnectorCustom(m[8].rect, m[10].rect, "bottom", 40);// Round 2 → Semifinal drawLConnectorCustom(m[9].rect, m[11].rect, "top", 40); drawLConnectorCustom(m[10].rect, m[11].rect, "bottom", 40);continue; }if ( matches.length === 9 && matchMap["1"] && matchMap["2"] && matchMap["3"] && matchMap["4"] && matchMap["5"] && matchMap["6"] && matchMap["7"] && matchMap["8"] && matchMap["9"] ) { const m1 = matchMap[1]; const m2 = matchMap[2]; const m3 = matchMap[3]; const m4 = matchMap[4]; const m5 = matchMap[5]; const m6 = matchMap[6]; const m7 = matchMap[7]; const m8 = matchMap[8]; const m9 = matchMap[9];// Round 1 if (m1?.rect && m5?.rect) drawLConnectorCustom(m1.rect, m3.rect, "bottom", 40); if (m2?.rect && m6?.rect) drawLConnectorCustom(m2.rect, m5.rect, "bottom", 40);// Round 2 if (m3?.rect && m7?.rect) drawLConnectorCustom(m3.rect, m7.rect, "top", 40); if (m4?.rect && m7?.rect) drawLConnectorCustom(m4.rect, m7.rect, "bottom", 40); if (m5?.rect && m8?.rect) drawLConnectorCustom(m5.rect, m8.rect, "top", 40); if (m6?.rect && m8?.rect) drawLConnectorCustom(m6.rect, m8.rect, "bottom", 40);// Round 3 (Final) if (m7?.rect && m9?.rect) drawLConnectorCustom(m7.rect, m9.rect, "top", 40); if (m8?.rect && m9?.rect) drawLConnectorCustom(m8.rect, m9.rect, "bottom", 40);continue; } if (matches.length === 5) { // Adjusted for 5 matches console.log("matches.length === 5", matches); // log matches array console.log("matchMap:", matchMap); // log matchMap objectconst m1 = matchMap[1]; const m2 = matchMap[2]; const m3 = matchMap[3]; const m4 = matchMap[4]; const m5 = matchMap[5]; // Remove m6 because it's not available// Round 1 → Round 2 // M1 → M4 (top) if (m1?.rect && m3?.rect) { console.log("Drawing connector for M1 to M3"); drawLConnectorCustom(m1.rect, m3.rect, "top", 40); }// M2 → M5 (top) if (m2?.rect && m4?.rect) { console.log("Drawing connector for M2 to M4"); drawLConnectorCustom(m2.rect, m4.rect, "top", 40); }// M3 → M5 (bottom) if (m3?.rect && m5?.rect) { console.log("Drawing connector for M3 to M5"); drawLConnectorCustom(m3.rect, m5.rect, "bottom", 40); }// Round 2 → Final // M4 → (no M6, adjust logic based on match availability) if (m4?.rect && m5?.rect) { console.log("Drawing connector for M4 to the final match"); // Draw a connector to the final match (if you have a final setup) // You might have a fallback if there's no M6 drawLConnectorCustom(m4.rect,m5.rect, "top", 40); }continue; // use continue, not return — don't break whole function }if (matches.length === 6 && matchMap["1"] && matchMap["2"] && matchMap["3"] && matchMap["4"] && matchMap["5"] && matchMap["6"]) {const m1 = matchMap[1]; const m2 = matchMap[2]; const m3 = matchMap[3]; const m4 = matchMap[4]; const m5 = matchMap[5]; const m6 = matchMap[6];// Round 1 → Round 2 // M1 → M4 (top) if (m1?.rect && m4?.rect) drawLConnectorCustom(m1.rect, m4.rect, "top", 40);// M2 → M5 (top) if (m2?.rect && m5?.rect) drawLConnectorCustom(m2.rect, m5.rect, "top", 40);// M3 → M5 (bottom) if (m3?.rect && m5?.rect) drawLConnectorCustom(m3.rect, m5.rect, "bottom", 40);// Round 2 → Final // M4 → M6 (top) if (m4?.rect && m6?.rect) drawLConnectorCustom(m4.rect, m6.rect, "top", 40);// M5 → M6 (bottom) if (m5?.rect && m6?.rect) drawLConnectorCustom(m5.rect, m6.rect, "bottom", 40);continue; }if (isThreeTeam) { console.log("This is a testing"); const fromMatch = matchMap[1]; const toMatch = matchMap[2];if (fromMatch?.rect && toMatch?.rect) { drawLConnectorCustom(fromMatch.rect, toMatch.rect, "right", 40); }continue; // only skip current group } /*if (matches.length === 5) { const m1 = matchMap[1], m2 = matchMap[2]; const m3 = matchMap[3], m4 = matchMap[4], m5 = matchMap[5];if (m1?.rect && m4?.rect) drawLConnectorCustom(m1.rect, m4.rect, "top", 40); if (m2?.rect && m4?.rect) drawLConnectorCustom(m2.rect, m4.rect, "bottom", 40); if (m3?.rect && m5?.rect) drawLConnectorCustom(m3.rect, m5.rect, "top", 40); if (m4?.rect && m5?.rect) drawLConnectorCustom(m4.rect, m5.rect, "bottom", 40); }*/if (isFiveMatch) { const s1 = matchMap[1], s2 = matchMap[2], s3 = matchMap[3], s4 = matchMap[4];if (s1?.rect && s3?.rect) drawLConnectorCustom(s1.rect, s2.rect, "top"); if (s2?.rect && s4?.rect) drawLConnectorCustom(s2.rect, s4.rect, "top", 40); if (s3?.rect && s4?.rect) drawLConnectorCustom(s3.rect, s4.rect, "bottom", 80);continue; // use continue, not return — don't break whole function }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?.rect && input2?.rect && targetMatch?.rect) { drawLConnectorCustom(input1.rect, targetMatch.rect, "top", 40); drawLConnectorCustom(input2.rect, targetMatch.rect, "bottom", 40); } else if ((input1?.rect || input2?.rect) && targetMatch?.rect) { const fromRect = input1?.rect || input2?.rect; const direction = input1?.rect ? "top" : "bottom"; drawLConnectorCustom(fromRect, targetMatch.rect, direction, 40); } } }function drawLConnectorCustom(fromRect, toRect, toPoint = "center", elbowOffset = 40) { const startX = fromRect.right - wrapperRect.left + scrollLeft; const startY = fromRect.top + fromRect.height / 2 - wrapperRect.top + scrollTop;let toY; const headerOffset = 48;if (toPoint === "top") { toY = toRect.top + headerOffset + 10 - wrapperRect.top + scrollTop; } else if (toPoint === "bottom") { toY = toRect.bottom - 10 - wrapperRect.top + scrollTop; } else { toY = toRect.top + toRect.height / 2 - wrapperRect.top + scrollTop; }const endX = toRect.left - wrapperRect.left + scrollLeft + 5;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#999"); path.setAttribute("stroke-width", "1.5"); path.setAttribute("fill", "none"); path.setAttribute("stroke-linecap", "round");const d = ` M ${startX},${startY} H ${endX} V ${toY} `;path.setAttribute("d", d.trim().replace(/\s+/g, " ")); svg.appendChild(path); }function drawTConnector(fromRect, toRect) { const startX = fromRect.right - wrapperRect.left + scrollLeft; const startY = fromRect.top + fromRect.height / 2 - wrapperRect.top + scrollTop;const endX = toRect.left - wrapperRect.left + scrollLeft; const endY = toRect.top + toRect.height / 2 - wrapperRect.top + scrollTop; const midX = (startX + endX) / 2;const path1 = document.createElementNS(svgNS, "path"); path1.setAttribute("stroke", "#999"); path1.setAttribute("stroke-width", "1.5"); path1.setAttribute("fill", "none"); path1.setAttribute("stroke-linecap", "round"); path1.setAttribute("d", `M ${startX},${startY} H ${midX}`); svg.appendChild(path1);const path2 = document.createElementNS(svgNS, "path"); path2.setAttribute("stroke", "#999"); path2.setAttribute("stroke-width", "1.5"); path2.setAttribute("fill", "none"); path2.setAttribute("stroke-linecap", "round"); path2.setAttribute("d", `M ${endX},${endY} H ${midX}`); svg.appendChild(path2);const verticalLine = document.createElementNS(svgNS, "path"); verticalLine.setAttribute("stroke", "#999"); verticalLine.setAttribute("stroke-width", "1.5"); verticalLine.setAttribute("fill", "none"); verticalLine.setAttribute("stroke-linecap", "round"); verticalLine.setAttribute("d", `M ${midX},${startY} V ${endY}`); svg.appendChild(verticalLine); }function drawHorizontalConnector(fromRect, toRect) { const startX = fromRect.right - wrapperRect.left + scrollLeft; const startY = fromRect.top + fromRect.height / 2 - wrapperRect.top + scrollTop;const endX = toRect.left - wrapperRect.left + scrollLeft;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#999"); path.setAttribute("stroke-width", "1.5"); path.setAttribute("fill", "none"); path.setAttribute("stroke-linecap", "round");const d = `M ${startX},${startY} H ${endX}`; path.setAttribute("d", d.trim().replace(/\s+/g, " ")); svg.appendChild(path); }function drawRightThenVertical(fromRect, toRect, align = "top") { const startX = fromRect.right - wrapperRect.left + scrollLeft; const startY = fromRect.top + fromRect.height / 2 - wrapperRect.top + scrollTop; const elbowX = startX + 40;const toY = align === "top" ? toRect.top - wrapperRect.top + scrollTop : toRect.bottom - wrapperRect.top + scrollTop;const toX = toRect.left - wrapperRect.left + scrollLeft;const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", "#888"); path.setAttribute("stroke-width", "4"); path.setAttribute("fill", "none"); path.setAttribute("stroke-linejoin", "round"); path.setAttribute("stroke-linecap", "round");const d = ` M ${startX},${startY} H ${elbowX} V ${toY} H ${toX} `; path.setAttribute("d", d.trim().replace(/\s+/g, " ")); svg.appendChild(path); }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 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); } } }