bracketryjs

Visualize a knockout tournament in the browser

It's a single entry point to Bracketry.

import { createBracket } from 'bracketry'

...

const lifecycle_methods = createBracket(data, wrapper, options)

• Data (required): a data of certain shape that describes rounds and matches
• Wrapper element (required): an element in which bracket's markup will be installed.
• Options (optional)

• An object containing lifecycle methods:
  • moveToPreviousRound
  • moveToNextRound
  • moveToLastRound
  • setBaseRoundIndex
  • getNavigationState
  • applyNewOptions
  • getUserOptions
  • replaceData
  • applyMatchesUpdates
  • getAllData
  • highlightContestantHistory
  • uninstall

You may install as much brackets on your page as you like. It's also possible to call createBracket() with the same wrapper element twice, in such case a new instance will be installed in place of an old one. Though doing so makes little sense. If you need to switch to another tournament, better use replaceData method instead of calling createBracket() again.

In most cases it makes sense to set explicit height on your wrapper element and keep "width" and "height" options at a default "100%". You can also provide a wrapper without height but set more explicit width and height options on bracket. In such case you will also get the desired height but there's a caveat: you will likely get a height jump during bracket's installation. If you don't provide any heights (neither on your wrapper nor in bracket's options), bracket will expand to the full height of its content. If this is what you need, mind one little problem: "full height" is volatile, i.e. it changes when you navigate to later rounds (it gets twice shorter with every next round in order to use vertical space more efficiently). And it means that all content after bracket will be pushed back and forth. So if you really want "full height", make sure to set useClassicalLayout option to true. It will instruct bracketry not to change height on navigation.

// example of full-height bracket
        
...

createBracket(
    some_data,
    wrapper_element, // element without explicit height,
    { useClassicalLayout: true }
)