Match with multiple rounds, e.g. best-of-3 match, could render results of each round of a match. Current rendering corresponds to BO1 style for matches. BO3 could have 2 or 3 results displayed next to each other in the match container.

I am trying to use this with brackets that are taller then a single line of text and this seems to destroy the layout. I can probably debug this myself if there is an unminified version of the library that I can use.

Currently the bracket, no matter whether it's single or double-elimination, has a consolation round to determine 3rd and 4th place. Generally, in double-elimination tournaments, 3rd place is automatically determined as the loser of the lower bracket finals since they are the last to exit the tournament before the grand finals. Thus, it would be convenient to have this automatically disabled since most tournaments would not use this.

Also, some tournaments do not have a second final match even if the lower bracket finalist wins due to the structure of the finals. Thus, it would be helpful if there was an option to disable the second final match.

How can I always show participating teams in Ascending Order of their seed? For example, my init data is:

init: {
    teams: [
        [{name: "aaaaaa"}, {name: "bbbbbb"}],
        [{name: "cccccc"}, {name: "dddddd"}]
    ],
    results: [[[[]]],[],[]]
}

But sometimes they're are in reverse order in loserBracket and finalBracket:

Is it possible for me to display the matches between [dddddd, aaaaa] & [cccccc, aaaaaa] as [aaaaaa, dddddd] & [aaaaaa, cccccc]?

What kind of License does this plugin fall under?

First of all thumbs up for your work!

My question is about the layout (css) of this project:
I would love to have more space in the class team="team" because i would like to use name and surename and in the best case a picture (nations flag) 24x24px .
The container for the team would be something like 250px width by 40px height.

I tried to edit the css but i keep messing up the whole thing.

Could you give me a hint where to start?

It would be nice to have an possability to write something in front of an Match for example a server number or whatever (clickable), and the same before every team in the Brackets, for example i want to write an A before every flag of the teams which are topper and B to the lowers, in the looser bracket victe-versa.

Can you make it where you can use a team of 12? Thanks for the great plugin.

Hello, I guess I'm having trouble just using the plugin and making the brackets render on the page. Could you give me a quick rundown of how to render brackets on the page?

Hi again!

I like your link option showing path of winners but just in order to improve this plugin I would like to suggest some option for other people:
the possibility to disable it and have arrow centered between team names instead.

Something like:
http://erik5388.github.io/jquery.gracket.js/
or
https://en.wikipedia.org/wiki/2014_FIFA_World_Cup#Knockout_stage
or
http://www.lequipe.fr/Tennis/SH_RG.html

Is it already possible?

It is not a issue or something, but I opened it to say you thanks for this great contribution to the public!!!

Your Bracket system made us getting quite successfull, and now we are hosting a Tournament at the ESWC mainstage @ Paris Games Week Paris :).

http://league.paragon-esports.com/cup/256

Thanks for your awesome work!!!!!

Hi!

It's me again for the last request of the day (I swear).
Last request but not least is about flags.

For some large tournament with several countries, the webpage could take some more time to load because of number of flags.

That's why it would be great to have flag sprites (or base64 encoded).

There are some flag sprites here:
https://www.flag-sprites.com/

And base64 encoded flag example here:
https://gist.github.com/Plutor/3516352

I think sprites are faster and consume less data but I might be wrong in flag case.

What should be great is to add "title" for flag images in case some visitor doesn't know some flag, he just mouse hover it and will see country name.

I already added it for myself with current code but it's not perfect.

In order to add "title" on flags what I did is adding country name inside team's parameter:

[{name: "Team 1", flag: 'gb', country:'United Kingdom'}, {name: "Team 2", flag: 'fr', country:'France'}]

etc.

And I added:

  function render_fn(container, data, score) {
    if (!data.flag || !data.name)
      return
    container.append('<img src="images/flags/'+data.flag+'.png" title="'+data.country+'" /> ').append(data.name)
  }

It's working but the problem is that I'm repeating country names if there are several teams from the same country.
How could I add it once for each country? (And still have the possibility to translate country name for other language section of the site.)

If you explain me how to do add CSS sprite and country name in the title attribute for one flag, I'll be glad to update the code for all country flags.

Please let me know about it.

Hi,

Is there a way to set a BOx (Best Of x) for matches ?
Thanks in advance !

Sam

In the current version 7.0.1 is the score '0' is not recognized when the points field was empty before.

Start with a blank Tournament

"results":[[[[null,null],[null,null],[null,null],[null,null]...

Input Scores with '0'

Old version from October:

"results":[[[[0,1],[0,5],[5,0],[null,null]...

New version 0.7.1

"results":[[[[null,1],[null,5],[5,null],[null,null]...

Thank you for this great library

Hi!

I'm looking for some way to display winner or loser without showing scores.

For now I simply use "1" for winner and "0" for loser and add this CSS to hide score and show winner with bold font:

.score{visibility:hidden}
.win{font-weight:bold}

But instead of score I would like to have:
-for losers some red x mark like this: ✗
-and for winners a green check mark like this: ✓

Others marks could be used like:
https://en.wikipedia.org/wiki/X_mark
https://en.wikipedia.org/wiki/Check_mark

Or even some text could be used instead.

How could I achieve this?

What would be the easiest/best way to set the score while in edit mode via javascript, rather than the edit field, and re-render the bracket?

The json encoding done with jquery.json-2.2.js works fine (The bracket information is stored correctly in the data/ directory).
However, when I reload the page, none of the saved brackets populate in the drop down list to select.
Any ideas on howto get this functionality working?

Nice work. Easily the best looking and functioning tournament scheduler i've seen,

--Ian

Please help me through the saveOutput,dataOutput functionality.

I'm using the brackets version which shows some text information when you hover or click a match.

My question is if it's possible to include links in the #matchCallback area where this text is displayed. It seems that all the data which is stored in the matchData arrays is parsed as string. Is there any way to have match click events display links for each selected match too?

Also, does this plugin support more fields for results, such as:

[ResultPlayer1, ResultPlayer2, MatchData, SomethingExtraHere] ?

Hi,
I'm trying to implement this for a fencing tournament, but ran into an issue.
According to the rules, fencers can be disqualified. It implies that the score cannot be trusted by itself to declare a winner.
I was wondering how I could redefine the function that declares the winner of a match.

Thanks!

when I add more teams to the list it errors out after 16.
Message:
Uncaught TypeError: Cannot read property 'winner' of undefined jquery.bracket.max.js:296

Would be cool if there was numbered version or published date in files.

Thanks for writing this plugin. It has been very useful for our tournament.

I have been working on mixing brackets created with this plugin with an Owl carousel, which would serve different content in slides on top of the brackets. So, the behaviour I'm trying to get is this:
A match is clicked in the brackets => the carousel jumps to a video or slide with information.

However, I noticed that the function which handles onclick events is only used for editing text or displaying some match data.
Is it possible to make the matches divs behave like links? I would need to use those links for callbacks for the carousel slides.

I have tried a few things until now, such as appending links in a div which are created using data from the match information (from the brackets array). That's not a great solution, though, since it's a 2-step process to first create the links and then click them to have content displayed in the carousel.
I've also tried to use jQuery to identify these newly created links and to trigger click events on them, but again, for some reason it doesn't work.

So is there any way to make the brackets divs behave like links which can have a href attribute and be used for callbacks in another plugin?

if all matchs of competition are generated in the beginning, not played matchs scores are null in the DB and then 'null' in the bracket object.

The bracket then set scores to 0 to not played matchs.

So I've made a correction on teamElement function (line 161 on actual master branch):

if (!isNumber(team.score))
            team.score = 0

replaced by

if (!isNumber(team.score))
            team.score = '--'

I need it to authenticate players.

Hello,
Thanks for your great Bracket library, I really like it and wan't to use it for a bigger project.

it would be nice if you could include a possability to set a score on a Match which is not the final score, just the current score of a match Progres (so not automatically set teams into the next round, as long a score is marked as live or something).

Best regards,
Lukas

Is there a way to link two or more brackets together?

For example, I have a LR bracket and RL bracket and I need to link them together so the winner from the LR bracket plays the winner of the RL bracket.

To display on a main page by example, the current part of the bracket, it would be cool to choose which part of the bracket to display.

Examples :

• one team, its position on the bracket by displaying next and two last opponents,
• on a main page, only current or two last phases of the bracket

Hey,

I am requesting that when you mouse over a match, where the winner goes is highlighted in green and where the loser goes in red. Some users find it an issue as to where they'd drop to in the loser's bracket when they lose.

Thanks,

Sorry for bad title.

Hi!

First of all, thanks a lot for this great code I really appreciate it.
I’m trying to configure it to suits my needs but I’m a bit lost.

What I’m trying to do is being able to click on a match to see some webpage with match details.

I take a look at: http://www.aropupu.fi/bracket/#matches
So I added some match details like:

[[1,0,'http://www.mywebpage.com “Match Details”’]

But I can’t find what to write instead of:

function onclick(data) {
  $('#customHandlers').text("" + data + "")
}

I tried:

function onclick(data) {
                 $('#customHandlers').click(function(){  window.location = "" + data + "";});

}

I did some test here : http://output.jsbin.com/yiyumabuli

But it only seems to work for my third tournament, my code is probably wrong.
Plus I don’t know how to have some working title in order to see text “Click for match details” or so when mouse hovering a match.

In fact, I’m just trying to achieve this inside your JQuery:

<a href="http://www.mylink.com" title="Match details">Team 1 vs Team 2</a>

Please let me know.

Hi

(sorry for my english, i m french !)

Can you try this page : http://www.fifaversus.com/arbre/test.php#tabs1-html

Bracket in on tab 3 but there is a graphic problem

Can you help us ?

Thanks

This plugin is fantastic, thank you for your work on this!

Is it possible to have the Incremental button add just one match to the brackets instead of doubling the brackets?

I am looking to use this for some dart tournaments amongst an extended group of friends. Not everyone can make every event, and some say they will and never show, and some say they can't but show up the day of, etc. It would be nice to be able to add in a match after the tournament started for those that show up a bit late and not have to double the whole bracket.

Thank you.

this does not include bye system for uneven number of teams.
is this something that someone can add to it?

Currently, bracket generation is limited to powers of 2. However, the ability to produce brackets that were not perfect would be useful.

This could be accomplished by allowing the script to continue to operate on the premise of a power of 2. Non-powers of 2 would be accommodated by padding the seeded list with "null seeds" until the next-largest power of 2 was reached (e.g. a 9-player tournament would get 7 "null seeds" to get 16 seeds). The tournament would then be run on the premise that any match against a "null seed" would result in a victory for the real seed (i.e. a bye).

This setup would apply to most if not all tournaments, and would not require a very vast change as far as data handling and tournament structure goes. All that would be required is setting a value that signals a "null seed" (e.g. null), and not visibly rendering a match that has a team with that value.

Would it be possible to implement this?

A Judo tournament is generally a double elemination tournament with a winner and loser bracket. The final of the winner bracket generates the winner and second place.
There is no final in the loser brackets. Finalist of the loser bracket do not play a losersfinal: they both end as third places.
Subsequently there is no final between winner winner bracket and winner loser bracket.
Is this configurable?

In some tournaments it happens that one or both players do not show or that a player gets a bye because there is a odd number of participants or because of tournament rules (example: the top seeded players skip the first N rounds). There are many fringe cases but the most basic one is the do not show. Implementing that would be enough for implementing many tournament use cases.

Let's consider these matches in a larger tournament.

A ____
B     |
      |_____ E _____
      |      F      |
C ____|             |_____ G
D                   |        H
                 ___|

If the player at A doesn't play, the player at B wins and advances to seat E. We could assign a default score to the game A-B, maybe 0-1. The script handles that right now without any problem.

However if both players don't play, they both lose and I believe there is no way to handle this case right now (maybe a score of 0-0?). Let's suppose this is implemented. The seat E must be marked as "permanently empty" because of the double do not show in A-B.

Let's say C-D ends with a 2-1 score. The player at C advances to seat F. The seat E is empty so that player gets a bye and advances to G in the next round.

Nothing changes if C-D ends with a do not show for any of the two player. We handle that with a default 1-0 score.

However if C-D also ends with a double do not show and both players lose, both the seats E and F are empty and that match ends with another both players lose. Nobody advances to seat G to play with whoever made it to seat H. The player at H gets a bye.

To recap, it seems that two new game results are needed: 1) "both player lose", which yields a bye in the next round and 2) "win by a bye".

Is there any chance to get that implemented? Thanks (by the way, the script is great).

First let me say this is an awesome plugin! Nothing else I've found comes close to providing the extent of features jquery-bracket offers. Thanks for making this!

I have a bracketing system on the back-end of my app. My app uses a restful API so I can make calls to progress a bracket like POST /api/tournament/5/match/4.

Currently I've written code for the back-end that let's me generate output formatted for jquery-bracket as well as consume json to construct a bracket. So, technically, I could use the data parameter from save and just send the whole bracket back to the my app to be constructed and then stored -- however this inefficient for me since I have the ability to update individual matches.

I'm going to take a few days to read through your code and hopefully hack something together but I was hoping you could push me in the right direction for the things I'd like to do:

Why can't a match array also have match information when edit mode in on?

In init:

if (opts.save && (opts.onMatchClick || opts.onMatchHover))
        $.error('Match callbacks may not be passed in edit mode (in conjunction with save callback)')

Without match callbacks jquery-bracket does not include match information in each match array in results, even if it is part of the original data.

Building off the above, how could I include the modified bracket as a parameter in the save callback?

If I can achieve these things then I can use my match id (stored as match information) and the scores to update individual matches through my API.

Thanks!

I want to use it in a node project.
Could you push it to npmjs.com?

How can I generate bracket with a odd number of players like you can see on challonge : http://challonge.com/tournaments/bracket_generator?ref=XWHIv0THLr ?
Actually only support even number of players.
it will be good to have prequalification matches.

I'm trying to build the library and I'm running into the error discussed here
https://typescript.codeplex.com/discussions/456724

>> .../jquery-bracket/lib/jquery.d.ts(192,11):
>> error TS2189: Interface 'JQueryEventObject' cannot simultaneously extend types 'BaseJQueryEventObject' and 'JQueryInputEventObject':
>> Named properties 'metaKey' of types 'BaseJQueryEventObject' and 'JQueryInputEventObject' are not identical.
>> .../jquery-bracket/src/jquery.bracket.ts(12,13):
>> error TS2134: Subsequent variable declarations must have the same type.  Variable 'jQuery' must be of type 'JQueryStatic', but here has type 'any'.

I didn't find any solution at the pages linked there and I tried with many different versions of typescript (0.9.7, 0.9.5, 0.8.3). Always the same problem.
Which version of the compiler are you using?
Thanks.

Hi,
I'm not good in javascript. Need idea from everybody.
Use case:
user click on match
popup a modal windows with url is a local php script with parameter of third value of each match
Popup modal window displaying detail match information.

Thanks.

Is it possible to allow editing of just the scores and not the teams?

Hi!

Something else I did to suits my needs was to edit:

to have for example:

And for 2nd display "Vice Finnish champion 2015", etc.

The problem is that I don't want to change it inside the code as it would be different depending on the tournament (and depending of language section of the site for multilingual websites).
For example I could use the same code on another webpage but instead of "1st" this time display: "World champion 2015", etc.

Is it possible to add this option please?

Hey there,

I'm using the saveFn function to save results to the database. The problem i'm having is that this doesn't work with Double Elimination since detecting whether or not it's double elimination depends on the data itself. Is there a flag i can use to force it to double elimination?

Hi,
I'm trying to init the bracket, with a complete but empty looser and final bracket.
Teams are known, but not results.
So I made a bigData var like :
"teams" : [ ["Team1","Team2"],["Team3","Team4"],["Team5","Team6"],["Team7","Team8"]],
"results" : [ ],[ ],[ ]

This gives only a single winner bracket. How can I get the others bracket too ?
Need I to init every empty matchs of tournament too (really heavy in code) ?

Thank you very much

Hi!

Something else I'm trying to do is to display some "versus" text between each team (or players).
A bit like on this website:
http://www.lequipe.fr/Tennis/SH_RG.html
But the difference is that I would like to align "versus" with team names (and hide score as I explained on other topic).

Optionally the icon or text could be different depending on website section for multilingual websites.

Is there any way to achieve this?

Please let me know.

I want to define custom session name for each team matches,
for example:

teams: [
    "A": ["Team 1", "Team 2"],
    "B": ["Team 3", "Team 4"]
]

and show it on bracket,
also can show "Loser of A" or something hint when using double elimination.

Is there any way to represent when nobody wins in a match?

This occurs when a unplayed match expires.. nobody wins

e.g.

Hi!

Once again, I'm stuck with something I can't do.

On top of each round I would like to write its name.
For example: "Eighth-finals", "Quarter-finals", "Semi-finals", "Final".

As it is the case on this website:
http://www.lequipe.fr/Tennis/SH_RG.html

The problem when I'm doing it out of your code is that it's not properly aligned with round columns.

Please give me some tip to do this.

Edit: I figure it out myself.

Hello! Your work is excellent, but I can't use the plugin yet under public site because I can't build right standing. Here is example of World Cup 2014. First and second level build correctly, but in third one some teams located at wrong place. Though the game scores showed correctly.

Please suggest in what order teams must be to make standing correct?