Shenato / react-tournament-brackets

React components for displaying double elimination brackets and single elimination brackets
https://www.npmjs.com/package/react-tournament-brackets
GNU Lesser General Public License v2.1
4 stars 0 forks source link

Funky Misalignment #3

Open OwenMelbz opened 3 days ago

OwenMelbz commented 3 days ago

Hey,

Just came across your package as it looked promising and starting to poke around, I tried to pull some tournament data from League of Legends to see if I could re-create it.

This is the official brackets: (double elim) https://lolesports.com/standings/lec/lec_season_finals_2024/regional_finals

and this is the scratch pad I'm using to have a play: https://codesandbox.io/p/sandbox/brackets-h7h445

As a whole it worked really well, the single elim test I did was fine, then I started moving onto the double elim (above) however I got this strange alignment on one of the games, and cant see what I could be doing wrong?

Please advise! The data I'm using is all hardcoded into the codesandbox link i sent.

image

Shenato commented 2 days ago

Where do SK Gaming and GIANTX come from in the Upper rounds???

The double elimination bracket this library supports always has this pattern image

with a ratio of 2 to 1 of upper bracket matches in a given round to lower bracket matches played with the the looser teams from the upper one.

Your bracket data is telling it to do two games in the lower bracket while you only have two games in the upper one.

If you merge the BDS vs SK and G2 vs GX matches into one match where BDS and G2 Sports fight each-other instead of two teams that don't exist in the upper bracket it should work out like normal.

Short answer, the current double elimination bracket follows the standard specification * for a double elimination game, the lower bracket doesn't support adding new teams that didn't get eliminated in the upper bracket.

which means it always has to maintain a 2 to 1 ratio at any given round. that's why your bracket isn't aligning properly.

*You'll notice in the example double elimination bracket in that page it is also following a 2 to 1 ratio without inserting any teams from outside the upper bracket.

Shenato commented 2 days ago

Perhaps this is new specification the library should support? if so you're welcome to write up a well defined ticket or give me the name of this type of double elimination bracket so I can read up on it.

OwenMelbz commented 2 days ago

Ah I see I see, this makes sense I get why it's struggling.

I'm not sure what industry you're aiming to cover so I can't be sure that it should be covered or not.

The eSport industry however does often use this style of double elimination e.g. https://lol.fandom.com/wiki/LEC/2024_Season/Season_Finals#:~:text=It%20is%20the%20second%20season,and%20qualification%20to%20Worlds%202024.

Typically it's used from when transitioning from a "league table" or "group stages" format into knock out stages.

In the example provided, the teams which finish the league or group in the top 4 positions go into the upper bracket, which if they win their games go straight to the finals.

If they lose a game, they can try the lower bracket run to get another chance of making it back to the finals.

So the missing teams you mentioned were not in the upper bracket because they didn't finish in the top 4, so they have to go the lower bracket path.

I'm not sure how familiar you are with eSports or Riot Games but this is how they run it for games like Valorant and League of Legends, also some Counter-Strike tournaments, so it's fairly common for tier 1 competitive gaming.

Happy to answer any other questions if you are interested in it.