|
|
|
@ -1,3 +1,12 @@ |
|
|
|
|
|
|
|
// Debug flag - set to false to disable all debug console logs
|
|
|
|
|
|
|
|
const DEBUG_BRACKET = false; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function debug_console(...args) { |
|
|
|
|
|
|
|
if (DEBUG_BRACKET) { |
|
|
|
|
|
|
|
console.log(...args); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function renderBracket(options) { |
|
|
|
function renderBracket(options) { |
|
|
|
const bracket = document.getElementById("bracket"); |
|
|
|
const bracket = document.getElementById("bracket"); |
|
|
|
const matchTemplates = document.getElementById("match-templates").children; |
|
|
|
const matchTemplates = document.getElementById("match-templates").children; |
|
|
|
@ -8,6 +17,12 @@ function renderBracket(options) { |
|
|
|
const displayLoserFinal = options.displayLoserFinal; |
|
|
|
const displayLoserFinal = options.displayLoserFinal; |
|
|
|
const tournamentId = options.tournamentId; |
|
|
|
const tournamentId = options.tournamentId; |
|
|
|
const isBroadcast = options.isBroadcast; |
|
|
|
const isBroadcast = options.isBroadcast; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console("=== RENDER BRACKET START ==="); |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`Options: doubleButterflyMode=${doubleButterflyMode}, displayLoserFinal=${displayLoserFinal}, isBroadcast=${isBroadcast}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// Group matches by round
|
|
|
|
// Group matches by round
|
|
|
|
Array.from(matchTemplates).forEach((template) => { |
|
|
|
Array.from(matchTemplates).forEach((template) => { |
|
|
|
const roundIndex = parseInt(template.dataset.matchRound); |
|
|
|
const roundIndex = parseInt(template.dataset.matchRound); |
|
|
|
@ -34,6 +49,10 @@ function renderBracket(options) { |
|
|
|
let nextMatchDistance = baseDistance; |
|
|
|
let nextMatchDistance = baseDistance; |
|
|
|
let minimumMatchDistance = 1; |
|
|
|
let minimumMatchDistance = 1; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`Dimensions: matchHeight=${matchHeight}, baseDistance=${baseDistance}, roundCount=${roundCount}, finalRoundIndex=${finalRoundIndex}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const screenWidth = window.innerWidth; |
|
|
|
const screenWidth = window.innerWidth; |
|
|
|
let roundTotalCount = roundCount; |
|
|
|
let roundTotalCount = roundCount; |
|
|
|
let initialPadding = 40; |
|
|
|
let initialPadding = 40; |
|
|
|
@ -41,7 +60,7 @@ function renderBracket(options) { |
|
|
|
roundTotalCount = roundCount - 1; |
|
|
|
roundTotalCount = roundCount - 1; |
|
|
|
initialPadding = 46; |
|
|
|
initialPadding = 46; |
|
|
|
} |
|
|
|
} |
|
|
|
const padding = initialPadding * roundTotalCount; // Account for some padding/margin
|
|
|
|
const padding = initialPadding * roundTotalCount; |
|
|
|
const availableWidth = screenWidth - padding; |
|
|
|
const availableWidth = screenWidth - padding; |
|
|
|
let responsiveMatchWidth = Math.min( |
|
|
|
let responsiveMatchWidth = Math.min( |
|
|
|
365, |
|
|
|
365, |
|
|
|
@ -82,6 +101,10 @@ function renderBracket(options) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`Layout: responsiveMatchWidth=${responsiveMatchWidth}, topMargin=${topMargin}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
rounds.forEach((roundMatches, roundIndex) => { |
|
|
|
rounds.forEach((roundMatches, roundIndex) => { |
|
|
|
if (rounds[0].length <= 2 && doubleButterflyMode) { |
|
|
|
if (rounds[0].length <= 2 && doubleButterflyMode) { |
|
|
|
minimumMatchDistance = 2; |
|
|
|
minimumMatchDistance = 2; |
|
|
|
@ -108,8 +131,13 @@ function renderBracket(options) { |
|
|
|
const firstMatchTemplate = roundMatches[0].closest(".match-template"); |
|
|
|
const firstMatchTemplate = roundMatches[0].closest(".match-template"); |
|
|
|
const matchGroupName = firstMatchTemplate.dataset.matchGroupName; |
|
|
|
const matchGroupName = firstMatchTemplate.dataset.matchGroupName; |
|
|
|
const matchFormat = firstMatchTemplate.dataset.matchFormat; |
|
|
|
const matchFormat = firstMatchTemplate.dataset.matchFormat; |
|
|
|
const roundId = firstMatchTemplate.dataset.roundId; // Add this line
|
|
|
|
const roundId = firstMatchTemplate.dataset.roundId; |
|
|
|
const realRoundIndex = firstMatchTemplate.dataset.roundIndex; // Add this line
|
|
|
|
const realRoundIndex = firstMatchTemplate.dataset.roundIndex; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console(`\n=== ROUND ${roundIndex} (${matchGroupName}) ===`); |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`realRoundIndex=${realRoundIndex}, matches=${roundMatches.length}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
let nameSpan = document.createElement("div"); |
|
|
|
let nameSpan = document.createElement("div"); |
|
|
|
nameSpan.className = "round-name"; |
|
|
|
nameSpan.className = "round-name"; |
|
|
|
@ -145,10 +173,16 @@ function renderBracket(options) { |
|
|
|
if (matchPositions[roundIndex] == undefined) { |
|
|
|
if (matchPositions[roundIndex] == undefined) { |
|
|
|
matchPositions[roundIndex] = {}; |
|
|
|
matchPositions[roundIndex] = {}; |
|
|
|
} |
|
|
|
} |
|
|
|
matchDisabled[roundIndex] = []; // Initialize array for this round
|
|
|
|
matchDisabled[roundIndex] = []; |
|
|
|
|
|
|
|
|
|
|
|
roundMatches.forEach((matchTemplate, matchIndex) => { |
|
|
|
roundMatches.forEach((matchTemplate, matchIndex) => { |
|
|
|
const matchTitle = matchTemplate.dataset.matchTitle; |
|
|
|
const matchTitle = matchTemplate.dataset.matchTitle; |
|
|
|
const matchRealIndex = matchTemplate.dataset.matchRealIndex; |
|
|
|
const matchRealIndex = matchTemplate.dataset.matchRealIndex; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`\n[${matchTitle}] START - roundIndex:${roundIndex}, matchIndex:${matchIndex}, realIndex:${matchRealIndex}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const matchDiv = document.createElement("div"); |
|
|
|
const matchDiv = document.createElement("div"); |
|
|
|
matchDiv.className = "butterfly-match"; |
|
|
|
matchDiv.className = "butterfly-match"; |
|
|
|
|
|
|
|
|
|
|
|
@ -159,7 +193,11 @@ function renderBracket(options) { |
|
|
|
let isOutgoingLineIsDisabled = isDisabled; |
|
|
|
let isOutgoingLineIsDisabled = isDisabled; |
|
|
|
let top; |
|
|
|
let top; |
|
|
|
const currentMatchesCount = roundMatches.length; |
|
|
|
const currentMatchesCount = roundMatches.length; |
|
|
|
|
|
|
|
|
|
|
|
if (roundIndex > finalRoundIndex) { |
|
|
|
if (roundIndex > finalRoundIndex) { |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] CASE: Reverse bracket (roundIndex > finalRoundIndex)`, |
|
|
|
|
|
|
|
); |
|
|
|
matchDiv.classList.add("reverse-bracket"); |
|
|
|
matchDiv.classList.add("reverse-bracket"); |
|
|
|
|
|
|
|
|
|
|
|
if (roundIndex <= finalRoundIndex + 2) { |
|
|
|
if (roundIndex <= finalRoundIndex + 2) { |
|
|
|
@ -167,18 +205,29 @@ function renderBracket(options) { |
|
|
|
matchPositions[roundCount - roundIndex - 1], |
|
|
|
matchPositions[roundCount - roundIndex - 1], |
|
|
|
); |
|
|
|
); |
|
|
|
top = values[matchIndex]; |
|
|
|
top = values[matchIndex]; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Reverse pos from mirror: top=${top}, mirrorRound=${roundCount - roundIndex - 1}`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
top = matchPositions[roundIndex][matchRealIndex]; |
|
|
|
top = matchPositions[roundIndex][matchRealIndex]; |
|
|
|
console.log(matchTitle, top); |
|
|
|
debug_console(`[${matchTitle}] Reverse pos direct: top=${top}`); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (roundIndex === 0) { |
|
|
|
if (roundIndex === 0) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] CASE: First round (roundIndex === 0)`); |
|
|
|
|
|
|
|
|
|
|
|
if (doubleButterflyMode == false) { |
|
|
|
if (doubleButterflyMode == false) { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Single butterfly: nextMatchDistance=0`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (realRoundIndex > 1) { |
|
|
|
if (realRoundIndex > 1) { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Double butterfly realRound>1: nextMatchDistance=0`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if (roundCount > 1) { |
|
|
|
if (roundCount > 1) { |
|
|
|
@ -186,53 +235,85 @@ function renderBracket(options) { |
|
|
|
|
|
|
|
|
|
|
|
if (currentMatchesCount == nextMatchesCount && roundCount > 2) { |
|
|
|
if (currentMatchesCount == nextMatchesCount && roundCount > 2) { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Same match count: nextMatchDistance=0`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
top = matchIndex * (matchHeight + matchSpacing) * minimumMatchDistance; |
|
|
|
top = matchIndex * (matchHeight + matchSpacing) * minimumMatchDistance; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Calc: top=${top} (matchIdx=${matchIndex}, spacing=${matchHeight + matchSpacing}, minDist=${minimumMatchDistance})`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (roundCount == 3 && doubleButterflyMode) { |
|
|
|
if (roundCount == 3 && doubleButterflyMode) { |
|
|
|
top = top + (matchHeight + matchSpacing) / 2; |
|
|
|
top = top + (matchHeight + matchSpacing) / 2; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] 3-round adjustment: top=${top}`); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (roundIndex === roundCount - 1 && doubleButterflyMode == true) { |
|
|
|
} else if (roundIndex === roundCount - 1 && doubleButterflyMode == true) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] CASE: Last round double butterfly`); |
|
|
|
|
|
|
|
|
|
|
|
if (roundCount > 3) { |
|
|
|
if (roundCount > 3) { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Large bracket: nextMatchDistance=0`); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
nextMatchDistance = nextMatchDistance / 2; |
|
|
|
nextMatchDistance = nextMatchDistance / 2; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Small bracket: nextMatchDistance=${nextMatchDistance}`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (roundIndex == finalRoundIndex && realRoundIndex == 0) { |
|
|
|
} else if (roundIndex == finalRoundIndex && realRoundIndex == 0) { |
|
|
|
//realRoundIndex 0 means final's round
|
|
|
|
debug_console(`[${matchTitle}] CASE: Final round (realRoundIndex=0)`); |
|
|
|
|
|
|
|
|
|
|
|
const values = Object.values(matchPositions[roundIndex - 1]); |
|
|
|
const values = Object.values(matchPositions[roundIndex - 1]); |
|
|
|
const parentPos1 = values[0]; |
|
|
|
const parentPos1 = values[0]; |
|
|
|
const parentPos2 = values[1]; |
|
|
|
const parentPos2 = values[1]; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Parent positions: pos1=${parentPos1}, pos2=${parentPos2}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (doubleButterflyMode == true) { |
|
|
|
if (doubleButterflyMode == true) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Double butterfly final`); |
|
|
|
let lgth = matchPositions[0].length / 2; |
|
|
|
let lgth = matchPositions[0].length / 2; |
|
|
|
let index = lgth + matchIndex - 1; |
|
|
|
let index = lgth + matchIndex - 1; |
|
|
|
// If index goes negative, use 0 instead
|
|
|
|
|
|
|
|
if (displayLoserFinal == true) { |
|
|
|
if (displayLoserFinal == true) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] With loser final`); |
|
|
|
if (matchIndex == 0) { |
|
|
|
if (matchIndex == 0) { |
|
|
|
top = parentPos1 - baseDistance / 2; |
|
|
|
top = parentPos1 - baseDistance / 2; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Winner final: top=${top}`); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
top = parentPos1 + baseDistance / 2; |
|
|
|
top = parentPos1 + baseDistance / 2; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Loser final: top=${top}`); |
|
|
|
} |
|
|
|
} |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
top = parentPos1; |
|
|
|
top = parentPos1; |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Single final: top=${top}`); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Single butterfly final`); |
|
|
|
top = (parentPos1 + parentPos2) / 2; |
|
|
|
top = (parentPos1 + parentPos2) / 2; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Center between parents: top=${top}`); |
|
|
|
|
|
|
|
|
|
|
|
if (matchIndex == 0) { |
|
|
|
if (matchIndex == 0) { |
|
|
|
nextMatchDistance = parentPos2 - parentPos1; |
|
|
|
nextMatchDistance = parentPos2 - parentPos1; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] First final match: nextMatchDistance=${nextMatchDistance}`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Second+ final match: nextMatchDistance=0`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (displayLoserFinal == true) { |
|
|
|
if (displayLoserFinal == true) { |
|
|
|
if (matchIndex == 1) { |
|
|
|
if (matchIndex == 1) { |
|
|
|
top = matchPositions[roundIndex][0] + baseDistance + 80; |
|
|
|
top = matchPositions[roundIndex][0] + baseDistance + 80; |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Loser final offset: top=${top}`); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -240,43 +321,72 @@ function renderBracket(options) { |
|
|
|
(roundIndex == finalRoundIndex && realRoundIndex != 0) || |
|
|
|
(roundIndex == finalRoundIndex && realRoundIndex != 0) || |
|
|
|
roundIndex < finalRoundIndex |
|
|
|
roundIndex < finalRoundIndex |
|
|
|
) { |
|
|
|
) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] CASE: Intermediate round`); |
|
|
|
|
|
|
|
|
|
|
|
const parentIndex1 = matchRealIndex * 2 + 1; |
|
|
|
const parentIndex1 = matchRealIndex * 2 + 1; |
|
|
|
const parentIndex2 = matchRealIndex * 2 + 2; |
|
|
|
const parentIndex2 = matchRealIndex * 2 + 2; |
|
|
|
const parentPos1 = matchPositions[roundIndex - 1][parentIndex1]; |
|
|
|
const parentPos1 = matchPositions[roundIndex - 1][parentIndex1]; |
|
|
|
const parentPos2 = matchPositions[roundIndex - 1][parentIndex2]; |
|
|
|
const parentPos2 = matchPositions[roundIndex - 1][parentIndex2]; |
|
|
|
const parent1Disable = matchDisabled[roundIndex - 1][parentIndex1]; |
|
|
|
const parent1Disable = matchDisabled[roundIndex - 1][parentIndex1]; |
|
|
|
const parent2Disable = matchDisabled[roundIndex - 1][parentIndex2]; |
|
|
|
const parent2Disable = matchDisabled[roundIndex - 1][parentIndex2]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Parents: idx1=${parentIndex1}(pos=${parentPos1}, disabled=${parent1Disable}), idx2=${parentIndex2}(pos=${parentPos2}, disabled=${parent2Disable})`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
if ( |
|
|
|
(parent1Disable == undefined || parent1Disable == true) && |
|
|
|
(parent1Disable == undefined || parent1Disable == true) && |
|
|
|
(parent2Disable == undefined || parent2Disable == true) |
|
|
|
(parent2Disable == undefined || parent2Disable == true) |
|
|
|
) { |
|
|
|
) { |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Both parents disabled, incoming line disabled`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
if ( |
|
|
|
matchPositions[roundIndex - 1][parentIndex1] != undefined && |
|
|
|
matchPositions[roundIndex - 1][parentIndex1] != undefined && |
|
|
|
matchPositions[roundIndex - 1][parentIndex2] != undefined |
|
|
|
matchPositions[roundIndex - 1][parentIndex2] != undefined |
|
|
|
) { |
|
|
|
) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Both parents exist`); |
|
|
|
top = (parentPos1 + parentPos2) / 2; |
|
|
|
top = (parentPos1 + parentPos2) / 2; |
|
|
|
|
|
|
|
|
|
|
|
if (parent1Disable && parent2Disable) { |
|
|
|
if (parent1Disable && parent2Disable) { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
const keys = Object.keys(matchPositions[roundIndex]).map(Number); |
|
|
|
const keys = Object.keys(matchPositions[roundIndex]).map(Number); |
|
|
|
const lastKey = Math.max(...keys); |
|
|
|
const lastKey = Math.max(...keys); |
|
|
|
top = |
|
|
|
top = |
|
|
|
(matchHeight + matchSpacing) * minimumMatchDistance * keys.length; |
|
|
|
(matchHeight + matchSpacing) * minimumMatchDistance * keys.length; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Both disabled: top=${top}, nextMatchDistance=0`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
nextMatchDistance = parentPos2 - parentPos1; |
|
|
|
nextMatchDistance = parentPos2 - parentPos1; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Center calc: top=${top}, nextMatchDistance=${nextMatchDistance}`, |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (matchPositions[roundIndex - 1][parentIndex1] != undefined) { |
|
|
|
} else if (matchPositions[roundIndex - 1][parentIndex1] != undefined) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Only parent1 exists`); |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
top = matchPositions[roundIndex - 1][parentIndex1]; |
|
|
|
top = matchPositions[roundIndex - 1][parentIndex1]; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Use parent1: top=${top}`); |
|
|
|
} else if (matchPositions[roundIndex - 1][parentIndex2] != undefined) { |
|
|
|
} else if (matchPositions[roundIndex - 1][parentIndex2] != undefined) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Only parent2 exists`); |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
top = matchPositions[roundIndex - 1][parentIndex2]; |
|
|
|
top = matchPositions[roundIndex - 1][parentIndex2]; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Use parent2: top=${top}`); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] No parents exist`); |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
top = 0; |
|
|
|
top = 0; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Default: top=0`); |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (roundIndex < roundCount) { |
|
|
|
} else if (roundIndex < roundCount) { |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] CASE: Setting future positions (roundIndex < roundCount)`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const parentIndex1 = matchRealIndex * 2 + 1; |
|
|
|
const parentIndex1 = matchRealIndex * 2 + 1; |
|
|
|
const parentIndex2 = matchRealIndex * 2 + 2; |
|
|
|
const parentIndex2 = matchRealIndex * 2 + 2; |
|
|
|
const parentMatch1 = rounds[roundIndex + 1].find( |
|
|
|
const parentMatch1 = rounds[roundIndex + 1].find( |
|
|
|
@ -286,57 +396,64 @@ function renderBracket(options) { |
|
|
|
(match) => parseInt(match.dataset.matchRealIndex) === parentIndex2, |
|
|
|
(match) => parseInt(match.dataset.matchRealIndex) === parentIndex2, |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Looking for children: idx1=${parentIndex1}, idx2=${parentIndex2}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Found: match1=${parentMatch1?.dataset.matchTitle || "none"}, match2=${parentMatch2?.dataset.matchTitle || "none"}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (matchPositions[roundIndex + 1] == undefined) { |
|
|
|
if (matchPositions[roundIndex + 1] == undefined) { |
|
|
|
matchPositions[roundIndex + 1] = {}; |
|
|
|
matchPositions[roundIndex + 1] = {}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if ( |
|
|
|
if ( |
|
|
|
parentMatch1 != undefined && |
|
|
|
parentMatch1 != undefined && |
|
|
|
parentMatch2 != undefined && |
|
|
|
parentMatch2 != undefined && |
|
|
|
parentMatch1.dataset.disabled == "false" && |
|
|
|
parentMatch1.dataset.disabled == "false" && |
|
|
|
parentMatch2.dataset.disabled == "false" |
|
|
|
parentMatch2.dataset.disabled == "false" |
|
|
|
) { |
|
|
|
) { |
|
|
|
console.log( |
|
|
|
debug_console( |
|
|
|
roundIndex, |
|
|
|
`[${matchTitle}] Both children active - setting their positions`, |
|
|
|
matchTitle, |
|
|
|
|
|
|
|
parentMatch1.dataset.matchTitle, |
|
|
|
|
|
|
|
parentMatch2.dataset.matchTitle, |
|
|
|
|
|
|
|
parentMatch1.dataset.disabled, |
|
|
|
|
|
|
|
parentMatch2.dataset.disabled, |
|
|
|
|
|
|
|
top, |
|
|
|
|
|
|
|
); |
|
|
|
); |
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
matchPositions[roundIndex + 1][parentIndex1] = top - baseDistance / 2; |
|
|
|
matchPositions[roundIndex + 1][parentIndex1] = top - baseDistance / 2; |
|
|
|
matchPositions[roundIndex + 1][parentIndex2] = top + baseDistance / 2; |
|
|
|
matchPositions[roundIndex + 1][parentIndex2] = top + baseDistance / 2; |
|
|
|
console.log(matchPositions[roundIndex + 1]); |
|
|
|
debug_console( |
|
|
|
// } else if (parentMatch1 != undefined) {
|
|
|
|
`[${matchTitle}] Set: [${parentIndex1}]=${matchPositions[roundIndex + 1][parentIndex1]}, [${parentIndex2}]=${matchPositions[roundIndex + 1][parentIndex2]}`, |
|
|
|
// matchPositions[roundIndex + 1][parentIndex1] = top;
|
|
|
|
); |
|
|
|
// nextMatchDistance = 0;
|
|
|
|
|
|
|
|
// } else if (parentMatch2 != undefined) {
|
|
|
|
|
|
|
|
// matchPositions[roundIndex + 1][parentIndex1] = top;
|
|
|
|
|
|
|
|
// nextMatchDistance = 0;
|
|
|
|
|
|
|
|
} else if ( |
|
|
|
} else if ( |
|
|
|
parentMatch2 != undefined && |
|
|
|
parentMatch2 != undefined && |
|
|
|
parentMatch2.dataset.disabled == "false" |
|
|
|
parentMatch2.dataset.disabled == "false" |
|
|
|
) { |
|
|
|
) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Only child2 active`); |
|
|
|
if (realRoundIndex == 1 && doubleButterflyMode) { |
|
|
|
if (realRoundIndex == 1 && doubleButterflyMode) { |
|
|
|
//if missing match in quarterfinals in double butterfly mode
|
|
|
|
|
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Quarterfinal missing match: nextMatchDistance=${baseDistance}`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
matchPositions[roundIndex + 1][parentIndex2] = top; |
|
|
|
matchPositions[roundIndex + 1][parentIndex2] = top; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Set child2: [${parentIndex2}]=${top}`); |
|
|
|
} else if ( |
|
|
|
} else if ( |
|
|
|
parentMatch1 != undefined && |
|
|
|
parentMatch1 != undefined && |
|
|
|
parentMatch1.dataset.disabled == "false" |
|
|
|
parentMatch1.dataset.disabled == "false" |
|
|
|
) { |
|
|
|
) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Only child1 active`); |
|
|
|
if (realRoundIndex == 1 && doubleButterflyMode) { |
|
|
|
if (realRoundIndex == 1 && doubleButterflyMode) { |
|
|
|
//if missing match in quarterfinals in double butterfly mode
|
|
|
|
|
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
nextMatchDistance = baseDistance; |
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] Quarterfinal missing match: nextMatchDistance=${baseDistance}`, |
|
|
|
|
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
nextMatchDistance = 0; |
|
|
|
nextMatchDistance = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
matchPositions[roundIndex + 1][parentIndex1] = top; |
|
|
|
matchPositions[roundIndex + 1][parentIndex1] = top; |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Set child1: [${parentIndex1}]=${top}`); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] No active children`); |
|
|
|
isOutgoingLineIsDisabled = true; |
|
|
|
isOutgoingLineIsDisabled = true; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -344,17 +461,24 @@ function renderBracket(options) { |
|
|
|
if (doubleButterflyMode == true) { |
|
|
|
if (doubleButterflyMode == true) { |
|
|
|
if (roundIndex >= finalRoundIndex - 2) { |
|
|
|
if (roundIndex >= finalRoundIndex - 2) { |
|
|
|
if (roundIndex == finalRoundIndex - 1) { |
|
|
|
if (roundIndex == finalRoundIndex - 1) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Semifinal adjustments`); |
|
|
|
matchDiv.classList.add("reverse-bracket"); |
|
|
|
matchDiv.classList.add("reverse-bracket"); |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
isIncomingLineIsDisabled = true; |
|
|
|
nextMatchDistance = nextMatchDistance / 2; |
|
|
|
nextMatchDistance = nextMatchDistance / 2; |
|
|
|
} |
|
|
|
} |
|
|
|
if (roundIndex == finalRoundIndex + 1) { |
|
|
|
if (roundIndex == finalRoundIndex + 1) { |
|
|
|
|
|
|
|
debug_console(`[${matchTitle}] Post-final adjustments`); |
|
|
|
matchDiv.classList.remove("reverse-bracket"); |
|
|
|
matchDiv.classList.remove("reverse-bracket"); |
|
|
|
isOutgoingLineIsDisabled = true; |
|
|
|
isOutgoingLineIsDisabled = true; |
|
|
|
nextMatchDistance = nextMatchDistance; |
|
|
|
nextMatchDistance = nextMatchDistance; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console( |
|
|
|
|
|
|
|
`[${matchTitle}] FINAL: top=${top}, nextMatchDistance=${nextMatchDistance}, disabled=${isDisabled}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
matchDiv.style.setProperty( |
|
|
|
matchDiv.style.setProperty( |
|
|
|
"--semi-final-distance", |
|
|
|
"--semi-final-distance", |
|
|
|
`${baseDistance / 2.3}px`, |
|
|
|
`${baseDistance / 2.3}px`, |
|
|
|
@ -379,25 +503,13 @@ function renderBracket(options) { |
|
|
|
matchPositions[roundIndex][matchRealIndex] = top; |
|
|
|
matchPositions[roundIndex][matchRealIndex] = top; |
|
|
|
|
|
|
|
|
|
|
|
if (matchIndex === 0) { |
|
|
|
if (matchIndex === 0) { |
|
|
|
// // Add logo for final round
|
|
|
|
|
|
|
|
// if (roundIndex == finalRoundIndex) {
|
|
|
|
|
|
|
|
// const logoDiv = document.createElement('div');
|
|
|
|
|
|
|
|
// logoDiv.className = 'round-logo';
|
|
|
|
|
|
|
|
// const logoImg = document.createElement('img');
|
|
|
|
|
|
|
|
// logoImg.src = '/static/tournaments/images/PadelClub_logo_512.png';
|
|
|
|
|
|
|
|
// logoImg.alt = 'PadelClub Logo';
|
|
|
|
|
|
|
|
// logoDiv.appendChild(logoImg);
|
|
|
|
|
|
|
|
// logoDiv.style.transform = `translateX(-50%)`;
|
|
|
|
|
|
|
|
// matchesContainer.appendChild(logoDiv);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Position title above the first match
|
|
|
|
// Position title above the first match
|
|
|
|
titleDiv.style.top = `${topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed
|
|
|
|
titleDiv.style.top = `${topMargin - roundTopMargin}px`; |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
(roundIndex == finalRoundIndex && realRoundIndex == 0) || |
|
|
|
(roundIndex == finalRoundIndex && realRoundIndex == 0) || |
|
|
|
isBroadcast == true |
|
|
|
isBroadcast == true |
|
|
|
) { |
|
|
|
) { |
|
|
|
titleDiv.style.top = `${top + topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed
|
|
|
|
titleDiv.style.top = `${top + topMargin - roundTopMargin}px`; |
|
|
|
} |
|
|
|
} |
|
|
|
titleDiv.style.position = "absolute"; |
|
|
|
titleDiv.style.position = "absolute"; |
|
|
|
if (roundCount >= 5 && doubleButterflyMode == true) { |
|
|
|
if (roundCount >= 5 && doubleButterflyMode == true) { |
|
|
|
@ -436,7 +548,7 @@ function renderBracket(options) { |
|
|
|
titleDiv.className = "round-title"; |
|
|
|
titleDiv.className = "round-title"; |
|
|
|
titleDiv.appendChild(nameSpan); |
|
|
|
titleDiv.appendChild(nameSpan); |
|
|
|
titleDiv.appendChild(formatSpan); |
|
|
|
titleDiv.appendChild(formatSpan); |
|
|
|
titleDiv.style.top = `${top + topMargin - 80}px`; // Adjust the 60px offset as needed
|
|
|
|
titleDiv.style.top = `${top + topMargin - 80}px`; |
|
|
|
titleDiv.style.position = "absolute"; |
|
|
|
titleDiv.style.position = "absolute"; |
|
|
|
matchesContainer.appendChild(titleDiv); |
|
|
|
matchesContainer.appendChild(titleDiv); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -479,24 +591,7 @@ function renderBracket(options) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// if (
|
|
|
|
matchesContainer.appendChild(matchDiv); |
|
|
|
// roundIndex == finalRoundIndex - 1 &&
|
|
|
|
|
|
|
|
// displayLoserFinal == true &&
|
|
|
|
|
|
|
|
// doubleButterflyMode == true
|
|
|
|
|
|
|
|
// ) {
|
|
|
|
|
|
|
|
// const matchDiv2 = document.createElement("div");
|
|
|
|
|
|
|
|
// matchDiv2.className = "butterfly-match";
|
|
|
|
|
|
|
|
// matchDiv2.classList.add("inward");
|
|
|
|
|
|
|
|
// matchDiv2.classList.add("semi-final");
|
|
|
|
|
|
|
|
// matchDiv2.style.setProperty(
|
|
|
|
|
|
|
|
// "--next-match-distance",
|
|
|
|
|
|
|
|
// `${baseDistance}px`,
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
// matchDiv2.style.top = `${top}px`;
|
|
|
|
|
|
|
|
// matchDiv2.innerHTML = `<div class="match-content">${rounds[0][0].innerHTML}</div>`;
|
|
|
|
|
|
|
|
// matchesContainer.appendChild(matchDiv2); // Append to matchesContainer instead of roundDiv
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
matchesContainer.appendChild(matchDiv); // Append to matchesContainer instead of roundDiv
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
bracket.appendChild(roundDiv); |
|
|
|
bracket.appendChild(roundDiv); |
|
|
|
@ -549,7 +644,7 @@ function renderBracket(options) { |
|
|
|
// Create a container that will sit at the same position for all rounds
|
|
|
|
// Create a container that will sit at the same position for all rounds
|
|
|
|
const footerContainer = document.createElement("div"); |
|
|
|
const footerContainer = document.createElement("div"); |
|
|
|
footerContainer.style.position = "absolute"; |
|
|
|
footerContainer.style.position = "absolute"; |
|
|
|
footerContainer.style.top = `${globalMaxBottom}px`; // Same position for all footers
|
|
|
|
footerContainer.style.top = `${globalMaxBottom}px`; |
|
|
|
footerContainer.style.width = "100%"; |
|
|
|
footerContainer.style.width = "100%"; |
|
|
|
footerContainer.appendChild(footerDiv); |
|
|
|
footerContainer.appendChild(footerDiv); |
|
|
|
|
|
|
|
|
|
|
|
@ -562,4 +657,6 @@ function renderBracket(options) { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, 100); |
|
|
|
}, 100); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
debug_console("=== RENDER BRACKET END ===\n"); |
|
|
|
} |
|
|
|
} |
|
|
|
|