Visualize a knockout tournament in the browser

"External" navigation

("Navigation" means horizontal switching between rounds of a tournament

The following "lifecycle" methods (those returned from createBracket()) can help you implement your own navigation mechanism:

An approach described here will make more sense if you want to change how navigation behaves. If you just want to change how navigation buttons look or how they are positioned, an easier solution might be to adjust some of the navigation-related options:

navButtonsPosition

hidden

You may also want to define how much rounds will be visible at a time using these options:

Examples:

1.

You may add for example some buttons which will change the bracket's navigation state.

Example above utilizes moveToPreviousRound and moveToNextRound methods.
Built-in navigation buttons are hidden by setting navButtonsPosition option to "hidden":

import { createBracket } from 'bracketry'

const options = {
    navButtonsPosition: 'hidden',
    verticalScrollMode: 'mixed'
}

const bracket = createBracket(
    data,
    document.querySelector('.some-wrapper')
)

document.querySelector('.button-prev').addEventListener('click', () => {
    bracket.moveToPreviousRound()
})

document.querySelector('.button-next').addEventListener('click', () => {
    bracket.moveToNextRound()
})

2.

Let's add more buttons

first

last

Here setBaseRoundIndex and moveToLastRound methods are also used:

...

document.querySelector('.button-first').addEventListener('click', () => {
    bracket.setBaseRoundIndex(0)
})

document.querySelector('.button-last').addEventListener('click', () => {
    bracket.moveToLastRound()
})

document.querySelector('.button-2').addEventListener('click', () => {
    bracket.setBaseRoundIndex(2)
})

...

A number of buttons is a problem to solve:

You can't just create as many buttons as you have rounds. (Or, more precisely, you can do it if you have only 1 round visible at a time).
That's because there is a maximum base round index. (It ensures that horizontal space is used efficiently). And it depends on how many rounds are visible at a time. That is, fully visible.
If you have 3 rounds visible, then maximum index is: data.rounds.length - 3.
You can get maximum base round index from getNavigationState().maxBaseRoundIndex.
The amount of buttons then will be maxBaseRoundIndex + 1.

In the example above a number of buttons depends on how many rounds were visible at the moment of page load. (I was lazy to change it on resize but it's very doable).

3.

To highlight / enable / disable the buttons you will surely need some properties from getNavigationState

first

last

...

const bracket = createBracket(
    data,
    wrapper,
    { navButtonsPosition: 'hidden' }
)


if (bracket.getNavigationState().allRoundsAreVisible) {
    // hide or disable all buttons
}

...

buttonNext.addEventListener('click', () => {
    bracket.moveToNextRound()
    if (bracket.getNavigationState().lastRoundIsFullyVisible) {
        buttonLast.classList.add('disabled')
    }
    ...
})

...