bracketryjs

Visualize a knockout tournament in the browser

How to handle clicks on a Match or Side

Use onMatchClick and onMatchSideClick options to do whatever you need when a user clicks a match or one of its sides (teams)

options.onMatchClick()

• match
  - an object containing data of a match that was clicked

Here's a slightly simplified code for an example above:

...

const options = {
    onMatchClick: match => {
        const name1 = data.contestants[match.sides[0].contestantId].players[0].title
        const name2 = data.contestants[match.sides[1].contestantId].players[0].title
        displayPopup(`...Some details of the match between ${name1} and ${name2}`)
    },
}

createBracket(data, wrapper_element, options)

If you provide onMatchClick, a border will be drawn around a match under cursor. Width of this border will be determined by connectionLinesWidth option, color of this border - hoveredMatchBorderColor. If you provide onMatchClick, it will automatically "disable highlight": contestant's tournament path will not be highlighted on click (as if "disableHighlight" option was set to true). Another (but surely more laborious) way to get a custom click behaviour is via getMatchElement option. You can attach whatever handlers you like to an Element returned from this function.

options.onMatchSideClick()

• match
  - an object containing data of a match whose side was clicked
• sideIndex
  - number 0 or 1 that indicates which side of a match was clicked

The following code makes matches' sides bahave as links to google search:

...

const options = {
    onMatchSideClick: (match, sideIndex) => {
        const contestant = data.contestants[match.sides[sideIndex]?.contestantId]
        if (contestant !== undefined) {
            window.open(
                `http://google.com/search?q=${contestant.players[0].title}`,
                '_blank'
            ).focus()
        }
    },
}

createBracket(data, wrapper_element, options)

Though if you only need a link to some URL, getPlayerTitleHTML can be a better option. You can use it for example to insert an <a> tag instead of a plain title. If you provide onMatchSideClick, it will automatically "disable highlight": contestant's tournament path will not be highlighted on click (as if "disableHighlight" option was set to true).