playoffs

playoffs ·

JavaScript library that takes your data and draws the tree of a knockout tournament in the browser.
Suitable (hopefully) for any kind of sport

Basic usage

import { createPlayoffs } from 'playoffs'

createPlayoffs(your_data, your_wrapper_element)

You only need a wrapper element and some properly formatted data

Some lovely features

   🎾 Tennis: doubles, tiebreak, points within a game (15:30 etc), "serving" dot
   🍏 Live updates (and special "live" appearance of a match)
   🔦 Team's path within a tournament is highlighted on click (if you want)
   👯 Multiple instances of playoffs on a page
   📱 Can be easily tuned for mobile devices
   📺 "Fullscreen" (full browser viewport) mode
   📜 Vertical scroll can work with mousewheel or buttons or both

Plenty of options (try)

• Sizes, margins and fonts are quite flexible
• Navigation between rounds can be adjusted or built from scratch
• You can inject your own markup here and there

            you may choose to render matches yourself and use playoffs only as a positioning mechanism
            

• You can specify what happens when a match (or a side of a match) is clicked
• You may opt to display a specific number of rounds at a time

Installation: npm or yarn

npm install playoffs
# or
yarn add playoffs

Minified bundle is 49k, gzipped is 12k.

Includes a d.ts file for ease of TypeScript development

Licensing

MIT