Brackets

Updated 2023-07-04

SPX Brackets is an application extension that comes with a collection of templates. Brackets v1.0 is for 16 team tournaments, that are divided into two groups, A and B.

The extension flows automatically just by entering the participants of the tournament into the first matches and then all subsequent progress happens simply by selecting a winning team.

Tournament progress can be shown using a collection of pre-defined templates:

Once the extension is installed to SPX and opened its operation is pretty straightforward.

Follow this basic flow:

1. Enter team names in the "Edit participants" -view. Note: the order of the teams also dictates the starting matches in the tournament.
2. Select a template and PLAY
3. Once a match is completed, select the winner and the team will be assigned as a team to the next round.
4. The "highlight" checkbox will highlight teams in the bracket if the announcer wants to focus on a specific match in the tournament chart.
5. You can select any tab and any template and PLAY to "zoom" into a section of the tournament as needed. Team colors and names are populated in graphics according to the progress of the tournament.

Helper commands have utilities for progress reset and other similar functions. It is a good idea to familiarize yourself with these commands before going to production.

The app holds (most of) its state in memory between reloads. These properties are stored in the localStorage of the browser used.

Colors and fonts can be changed by modifying CSS properties. All colors and fonts are defined in the variables.css -file.

Each template uses SVG-based Lottie-animations (https://airbnb.design/lottie/) for progressive line animations. These Lottie -animations are created in After Effects and rendered out to .json-files and linked to SPX templates using a Lottie-player library.

All "team boxes" are typical HTML div elements with color and font properties set in the CSS files.