Extending jQuery Bracket library

[kmgalanakis]

Hi.

Thank you for this great library. I've already forked and customized it for one of my projects.

The customization is for tennis brackets which contain 3 results for each team/player instead of 1. The implementation, though, breaks forward compatibility for sure.

What is the best way to extend your library in order not to break future compatibility?

Thank you in advance.

[teijo]

Hi,

Safest bet would probably be to replace the result numbers with your own custom object. You would then need to add support for rendering, editing and scoring for your specific score object (i.e. which object has the points for win). These functions could be provided in the initialization as callbacks. You already have this for team objects using decorator: {edit: edit_fn, render: render_fn}.

You could have init object:

{
  init: {
    teams: ...
    results: [[{scores: [1,2,6]}, {scores: [3,2,5]}]...]
  }
}

Ideally this could be even taken into account in the typing, where the result type would be generic and passed as type argument in startup, e.g. .bracket<{scores: number[]}>(initObject) in this case.

[yoanpumar]

Hello guys,

I noted that @kmgalanakis already extended the jquery-bracket library to be used in a tennis tournament (below is the link that I found). I'm trying to use it but the documentation has not been updated yet to reflect this change and I'm having a hard time adding the scores. Can you guys please tell me what is the data structure that I have to use for the results object? I already tried with the structure mentioned above by @teijo but it did not work either. Any help will be really appreciated.

{ init: { teams: ..., results: [[{scores: [1,2,6]}, {scores: [3,2,5]}]...] }}

https://github.com/kmgalanakis/jquery-tennis-bracket

By the way, I really like this library!! You guys did a great job!

Thank you!!

[kmgalanakis]

@yoanpumar all the work done in the library found in my GitHub is done by @teijo. What I did was to slightly modify his library in order to perform the way I wanted. The customization for tennis tournaments lacks a lot of features, but for my project, these modifications cover the needs.

This is why I asked @teijo how I could extend the library further in order to retain forward compatibility, but unfortunately, I didn't have time to work more on it.

In any case, even though this is not the right place to do it, this is how I use my version of teijo's library for one of my brackets

jQuery( document ).ready( function( $ ) {
        var tournamentBracketData65304 = JSON.parse( '{"teams":[["A",null],[null,"B"],["C","D"],[null,"E"],["F",null],["G","H"],["I","K"],[null,"L"]],"results":[[[[[null,null,null],[null,null,null]],[[null,null,null],[null,null,null]],[[6,6,0],[0,3,0]],[[null,null,null],[null,null,null]],[[null,null,null],[null,null,null]],[[6,2,10],[3,6,8]],[[6,6,0],[4,4,0]],[[null,null,null],[null,null,null]]],[[[6,6,0],[1,1,0]],[[6,6,9],[4,7,11]],[[6,6,0],[2,2,0]],[[3,4,0],[6,6,0]]],[[[6,6,0],[0,1,0]],[[3,3,0],[6,6,0]]],[[[6,6,0],[0,0,0]]]]]}' );
		
		function render_fn(container, data, score, state) {
			switch(state) {
				case "empty-bye":
					container.append("BYE")
					return;
				case "empty-tbd":
					container.append("")
					return;

				case "entry-no-score":
				case "entry-default-win":
				case "entry-complete":
					container.append(data)
					return;
			}
		}
		
		function edit_fn() {
		}

        $( '#tournament-brackets-front-65304' ).bracket({
            init: tournamentBracketData65304,
			teamWidth: 200,
			skipConsolationRound: true,
			centerConnectors: true,
			decorator: {edit:edit_fn, render: render_fn},
        });
		$( '#tournament-brackets-front-65304' ).doubleScroll();

    });

[yoanpumar]

Thank you @kmgalanakis, that's exactly what I need! Those modifications will also cover my needs!

Thanks again to you both!!