With this data format, we can't know if a match is ended, in progress or to be determined...

We also have to compute every time the ordering etc. This should only be done when the match is created and when scores are updated.

Let's just use the same data format as in brackets-manager.js...

It would be good to replace "WB Round 4" by "WB Final Round". Same for single elimination stages.

Could be cool to enable this (Toornament does it).

A track: https://github.com/kmturley/touch-scroll

Related to #7

Don't do multiple configs, but do a multi-entry config instead.

https://webpack.js.org/concepts/output/

Hello! How to import brackets-viewer module in component ?

I do :

@import { bracketsViewer } from 'brackets-viewer'
@import bracketsViewer  from 'brackets-viewer'

But dependency not found... The brackets-viewers its ok in node_modules.

@Drarig29 @ozgurg @Pustur Can you help me ?

Best regard,

Connector are well aligned currently. But they are kind of hardcoded and can be offset when we add some things, like images. Maybe try to calculate the values with calc()?

Screenshot from here.

Currently, if you have multiple elements with the class .bracket-viewer, only the first one is chosen, and you can't choose another one.

We should be able to give a custom selector if we want.

• If multiple roots are found, there should be an error
• If the .bracket-viewer class is not given, there should be an error because the styling rules would not apply to it

• Make an example of pools tournament data. The data format might be harder to adapt.
• Update the library to display it.

Here, the ranking should be:

Example from jQuery Bracket

• Make an example of single elimination tournament data.
• Update the library to display it.

The library does not support this Toornament generated bracket.

Here, some LB Round 2 matches are directly seeded by the seeding of the stage. And the number of matches in LB Round 1 is not even.

If you duplicate the render() call in the demo HTML file, the result is the following:

The library should be able to render a tournament not only when it's ended.

The 'W' for win and 'L' for loss aren't aligned horizontally... it could be achived thanks to a grid.

As you can see here, a double elimination stage could have only one group (upper bracket).

There is currently an error in this case with the viewer.

Hi,

I try to update your package to latest version on Node. And I have an issue :

➜  gamubs-web git:(tournaments-single-bracket) ✗ npm install
npm ERR! prepareGitDep 1> 
npm ERR! prepareGitDep > [email protected] prepare /Users/quentin/.npm/_cacache/tmp/git-clone-74a22fcf
npm ERR! prepareGitDep > npm run build
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > [email protected] build /Users/quentin/.npm/_cacache/tmp/git-clone-74a22fcf
npm ERR! prepareGitDep > npx webpack --mode production
npm ERR! prepareGitDep 
npm ERR! prepareGitDep assets by status 73.2 KiB [cached] 2 assets
npm ERR! prepareGitDep Entrypoint main = brackets-viewer.min.css brackets-viewer.min.js
npm ERR! prepareGitDep orphan modules 2.68 KiB [orphan] 8 modules
npm ERR! prepareGitDep runtime modules 670 bytes 3 modules
npm ERR! prepareGitDep cacheable modules 133 KiB
npm ERR! prepareGitDep   javascript modules 129 KiB
npm ERR! prepareGitDep     modules by path ./src/ 39.5 KiB
npm ERR! prepareGitDep       modules by path ./src/*.ts 39 KiB 4 modules
npm ERR! prepareGitDep       ./src/style.scss 50 bytes [built] [code generated]
npm ERR! prepareGitDep       ./src/i18n/index.ts 494 bytes [built] [code generated]
npm ERR! prepareGitDep     modules by path ./node_modules/ 89.8 KiB
npm ERR! prepareGitDep       modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 755 bytes 2 modules
npm ERR! prepareGitDep       3 modules
npm ERR! prepareGitDep   json modules 3.75 KiB
npm ERR! prepareGitDep     ./src/i18n/en/translation.json 1.87 KiB [built] [code generated]
npm ERR! prepareGitDep     ./src/i18n/fr/translation.json 1.88 KiB [built] [code generated]
npm ERR! prepareGitDep css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss 5.52 KiB [code generated]
npm ERR! prepareGitDep 
npm ERR! prepareGitDep ERROR in /Users/quentin/.npm/_cacache/tmp/git-clone-74a22fcf/src/main.ts
npm ERR! prepareGitDep ./src/main.ts 323:62-64
npm ERR! prepareGitDep [tsl] ERROR in /Users/quentin/.npm/_cacache/tmp/git-clone-74a22fcf/src/main.ts(323,63)
npm ERR! prepareGitDep       TS2339: Property 'id' does not exist on type 'MatchResults'.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep webpack 5.27.1 compiled with 1 error in 4580 ms
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] build: `npx webpack --mode production`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] build script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /Users/quentin/.npm/_logs/2021-03-22T06_12_24_771Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] prepare: `npm run build`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /Users/quentin/.npm/_logs/2021-03-22T06_12_24_848Z-debug.log
npm ERR! prepareGitDep 
npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/quentin/.npm/_logs/2021-03-22T06_12_25_284Z-debug.log

The library would generate virtual dom and there would be two possible renderers: one client-side and one server-side.

Just need to find something to handle virtual dom and diffing or make my own. (Try to stay small in size).

Also, apparently i18next (one of the dependencies) works on Node.js.

This would enable the library to display Toornament data.

Make another project which will be able to showcase this, with an API call to get data. And the compatibility layer would be used to convert this data to something usable for the viewer. Both schemas are really close to each other.

If I add this in this library, I have to make sure to export this compatibility layer in another file, so that it's not shipped with the base of the library.

Import the library using jsDelivr:
Or using npm:

This is not really correct, because both solutions use jsDelivr. Should say jsDelivr & GitHub vs. jsDelivr & npm.

Currently, the JS part works with any given selector thanks to jQuery.

However, the SCSS part is hardcoded with #root. Maybe we don't want to be forced to have an element with ID "root" because it could be something else than the root (semantically) of the document...

Prefer using a class like brackets-viewer or brackets-container:

• Remove first argument in render()
• Replace #root with the chosen class
• Update usages

Is there any planning for adding translation support, or at least simple label scheme instead of hardcoded labels(e.g. BYE, WB etc)

As english is the fallback I woul'd love to fall back to english and send a warning instead of throwing a compile exception when theres no french translation at the moment.

I don't like having this in this repo.

I'd prefer having it in the storage folder of the manager repo.

Add a level of DOM to add multiple stages in the same container, which will have data-stage-id attribute.

Will need to rename .bracket-viewer to .brackets-viewer for semantic reasons (multiple stages/brackets will be added) and be backward compatible (easy to change).

Hello, what is the algorithm to create Groups for Round objects? I found this types, but I have no idea how many Groups do I need to display tournament grid.

/**
 * A group of a stage.
 */
export interface Group {
    /** ID of the group. */
    id: number,

    /** ID of the parent stage. */
    stage_id: number,

    /** The number of the group in its stage. */
    number: number,
}

/**
 * A round of a group.
 */
export interface Round {
    /** ID of the round. */
    id: number,

    /** ID of the parent stage. */
    stage_id: number,

    /** ID of the parent group. */
    group_id: number,

    /** The number of the round in its group. */
    number: number,
}

We could remove jQuery as it's an unnecessary dependency.

Same as Drarig29/brackets-manager.js#53

This case is similar to #50 and it could be good to support it too. Try to do same as #50 (comment).

It would be really helpful if we have details about using on react or other libraries

When the data changes I'd like the viewer to have a function to update its view rather than having to destroy the entire item and recreate it or even reloading the entire page.

Here, in the GF round 1, there is a #1 and it should be a P1 so that it's not confused with the initial seeding.

The viewer should not have much logic. It should just display data created by the manager.

So round-robin ranking calculation should go in the manager's get module. Just as the standings.

Related: Drarig29/brackets-manager.js#69 Drarig29/brackets-manager.js#72

• Add labels to matches
  
• Add the seed of TBD participant when known (use ParticipantResult.position)
• Add a click event on a match to redirect to a custom route
• Add a popup for match games' results
• Add dragging with mouse
• Add data-* attributes to link DOM elements to their ids (see documentation)
• Add a dark mode

Some ideas:

• Expose event callbacks (e.g. a match clicked event, see #7)
• Expose properties not useful
• Support diff-ing data to partially render matches would be over-engineered

See this article from Digital Ocean.

Example of use (taken from here):

I think a function should provide images (or null) for each participant before calling render().

I installed three packages:

"brackets-manager": "^1.2.7",
"brackets-model": "^1.3.5",
"brackets-viewer": "^1.3.1"

But after this operation I could not find a detailed example of the installation. I was able to run the example with db.json and index html file, but that's all.

Therefore, I wanted to know if it can be run under angular and if so, how?

I don't like the manager/viewer folder structure as we're in the viewer repo. So, once #68 is fixed, remove this structure, and move this file in the parent folder, src.

If we manually change language at runtime, some elements are not refreshed:

• abbreviations
• BYE
• headers

Transform them into getters.

Keep JS and CSS files separated, and add sourcemaps for both (not inlined).

Hello everyone! Here is bracket from toornament:

https://play.toornament.com/en_US/tournaments/4937113874654773248/stages/4937116239538454528/

Is there a way to enhance connectors, when you handle uneven number of participants like on this bracket?

Thanks!

Currently, there is no overflow or scroll property for the root element.

It could be cool for the user of the lib not to have to do this manually (example).

Hi @Drarig29 . I want to add a link to match page for each seed. I check the bracket-viewer.js but i be carefull .
You are a best practise for that ?
Best Regard,

This would enable the user to choose what keywords are shown in the viewer.

• Match width should match parent column width
• Style the table
• Add tooltips to headers
• Link hover to the table

Currently, if the grand final of a double elimination stage is a double final (with two rounds), the 2nd match is always shown.

It would be good to show it only if the Lower Bracket winner wins the first match (which resets the final).