bracketryjs

Visualize a knockout tournament in the browser

Lifecycle methods

These are the members of an object returned from createBracket():

• moveToPreviousRound
• moveToNextRound
• moveToLastRound
• setBaseRoundIndex
• getNavigationState


• replaceData
• applyMatchesUpdates
• getAllData


• applyNewOptions
• getUserOptions


• highlightContestantHistory
• uninstall

// for example

import { createBracket } from 'bracketry'

const bracket = createBracket(your_data, your_wrapper_element, your_options)

bracket.setBaseRoundIndex(2)

moveToPreviousRound()

Calling this method will increment the base round index. You may need it when you implement your own navigation mechanism instead of a default one.

moveToNextRound()

Calling this method will decrement the base round index. You may need it when you implement your own navigation mechanism instead of a default one.

moveToLastRound()

Calling this method will set the base round index to a maximum possible number. You may need it when you implement your own navigation mechanism instead of a default one.

setBaseRoundIndex()

• baseRoundIndex
  A 0-based index of a "base" round, i.e. round which will become the leftmost visible one.

Calling this method will set the base round index to a given number. This number can be fractional if you like. You may need it when you implement your own navigation mechanism instead of a default one. You can also use this method to show Nth round at the very beginning (the last contentful round perhaps. But it will be your job to define the last contentful round):

import { createBracket } from 'bracketry'
        
const bracket = createBracket(data, wrapper)

bracket.setBaseRoundIndex(4)

getNavigationState()

• lastRoundIsFullyVisible (boolean)
• allRoundsAreVisible (boolean)
• baseRoundIndex (number) - an index of the leftmost visible round
• maxBaseRoundIndex (number) - maximum base round to which you can navigate. (It has to do with economy of horizontal space and is equal to data.rounds.length - visibleRoundsCount)
• visibleRoundsCount (number) - number of fully visible rounds at the moment

replaceData()

• data
  - all tournament data of the same format as the data passed to createBracket()

This method replaces the old data entirely. It's NOT a merge of old and new. If you need to update not the entire tournament but individual matches, then you probably need applyMatchesUpdates method instead of replaceData.

applyMatchesUpdates()

• matches

An array of matches that you want to update. Every such match must be a complete Match object because an old match (that with the same roundIndex and matchOrder) will be replaced by a new match data, i.e. it's NOT a merge of old and new.

See this method in action here

getAllData()

     An object containing all the tournament data which was previously provided to createBracket() or replaceData()

applyNewOptions()

• options

An object where keys are names of options (like "visibleRoundsCount") and values are... option values! In short, it's the same type of object that you pass to createBracket() as the third argument. This object will be merged to the existing options.

Some options are not updatable, i.e. they will be ignored when passed to applyNewOptions:

   - all functional options (like "getMatchElement")
   - "verticalScrollMode"

import { createBracket } from 'bracketry'
        
const bracket = createBracket(your_data, your_wrapper_element, your_options)

bracket.applyNewOptions({ visibleRoundsCount: 1 })

getUserOptions()

     An object containing all the options provided to createBracket() and (if applyNewOptions was called) merged with options provided to applyNewOptions()

highlightContestantHistory()

• contestantId
  - id of a Contestant whose history needs to be highlighted

If a Contestant will be found for a given contestantId, such contestant's path within a tournament will be highlighted (connecting lines will attain a color specified by "highlightedConnectionLinesColor" option and contestant's title will attain a color specified by "highlightedPlayerTitleColor" option) To unhighlight what was highlighted before call highlightContestantHistory(null)

uninstall()

Calling this method is recommended if you decide to install another bracket into the same wrapper element. Calling uninstall() in such cases will help release some precious memory. Though in most cases the best decision will be NOT to install another bracket into the same wrapper. If you need to switch to another tournament, better use replaceData().