moodysalem / react-tournament-bracket Goto Github PK

View Code? Open in Web Editor NEW

258.0 17.0 79.0 1.24 MB

React components for rendering a tournament bracket

Home Page: https://moodysalem.github.io/react-tournament-bracket/

License: MIT License

TypeScript 100.00%

react tournament brackets challonge

react-tournament-bracket's Introduction

react-tournament-bracket

React components for rendering a tournament bracket

Demo

Go here

Install

npm i react-tournament-bracket

Usage

These bracket components rely on a cyclical graph data structure.
Thus, to render a bracket, you pass in only the final game. If you have a set of games matching the model, you can pass them all in to render all the brackets. The Bracket Generator will discover which games are considered 'finals' and order the rendered brackets by the height of the winning path.

import { Bracket } from 'react-tournament-bracket';
import { render } from 'react-dom';

render(<Bracket game={game}/>, document.getElementById('app'));

Development

TODO

Component documentation
Better handling of mouse team highlighting (currently, when moving between teams in a particular game, the mouse events fire in inconsistent order and can result in the wrong team left highlighted)
Consider simplifying the game model passed to this component
Add tests

react-tournament-bracket's People

Contributors

Stargazers

Watchers

Forkers

jagged3dge cranesandcaff sandersnewmedia montazze awfskoo pharserror odinzu saikishorekumar trendingtechnology mdsportz21 jimfung codemode9 jslucas kammodze vaztic jsonrice kubowler99 ktabriga baomastr iisbigfish bojodimov luizfilipe lucaasdfg hameed0z dybushnell ryanocallaghan zloom superjjang1 andrewtack lynhan96 givtaj clm1100 shashank-msr batlglobal fsoubes hmigueltomas ricardoahumada aburakovskiy digitalbil andresnunes hoseajsap mschleif1 kiyotakamatsushita jquilty bispulm sambacha kaleckh matchdrum tyrese-r corrado2797 itsjp18 davwheat akashthakur05 adityoprambudhi djtabor91 smlbiobot fightkick felixcary rudihermanto23 heardofdezz coder-chris-git paulyeo23 iamdsoft champkos hnomkeng iversonlv troy-johnson camilocamachov emmanuel97423 mitchgibbstek cold6lanket emrb9 pinelover jacktimothy shenlinhai veloki jimf99 xigua pontusg45

react-tournament-bracket's Issues

DATA BASIC

Hello sir!
Do you have data basic to run this tournament bracket. My BE returns for me a data json. But i don't know where to start with your tournament bracket
Thank you.

How do I use underscore with my application data

When I try to use _.findWhere I got an error "Cannot read property 'id' of undefined"

buy full version

can I buy and attach it to my website?

BracketGenerator more than 3 rounds

hello, want to ask. Does this components can make more than 3 rounds? i am trying to add to 4 but things starting to break.

this is my JSOG data

[{
    "@id": "15",
    "scheduled": 1592127724000,
    "name": "Cup",
    "sides": {
        "home": {
            "team": null,
            "score": null,
            "seed": {
                "sourceGame": {
                    "@id": "20",
                    "id": "b6e869cc-e6ad-4151-9186-5df828b45802",
                    "scheduled": 1592127724000,
                    "name": "C1",
                    "gameGroup": null,
                    "sides": {
                        "home": {
                            "team": null,
                            "score": null,
                            "seed": {
                                "sourceGame": {
                                    "@id": "1",
                                    "scheduled": 1592127724000,
                                    "name": "B1",
                                    "sides": {
                                        "home": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "sourceGame": {
                                                    "@id": "1",
                                                    "scheduled": 1592127724000,
                                                    "name": "b3",
                                                    "sides": {
                                                        "home": {
                                                            "team": {
                                                                "@id": "11",
                                                                "name": "West Salem Panthers"
                                                            },
                                                            "score": null,
                                                        },
                                                        "visitor": {
                                                            "team": null,
                                                            "score": null,
                                                        }
                                                    }
                                                },
                                                "sourcePool": null,
                                                "rank": 2,
                                                "displayName": "Winner of A1"
                                            }
                                        },
                                        "visitor": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "sourceGame": null,
                                                "sourcePool": null,
                                                "rank": 3,
                                                "displayName": "Winner of A2"
                                            }
                                        }
                                    }
                                },
                                "sourcePool": null,
                                "rank": 1,
                                "displayName": "Winner of B1"
                            }
                        },
                        "visitor": {
                            "team": null,
                            "score": null,
                            "seed": {
                                "sourceGame": {
                                    "@id": "1",
                                    "scheduled": 1592127724000,
                                    "name": "B2",
                                    "sides": {
                                        "home": {
                                            "team": {
                                                "@ref": "13"
                                            },
                                            "score": null,
                                            "seed": {
                                                "sourceGame": null,
                                                "sourcePool": {
                                                    "@ref": "14"
                                                },
                                                "rank": 2,
                                                "displayName": "Winner of A3"
                                            }
                                        },
                                        "visitor": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "sourceGame": null,
                                                "sourcePool": {
                                                    "@ref": "12"
                                                },
                                                "rank": 3,
                                                "displayName": "Winner of A4"
                                            }
                                        }
                                    }
                                },
                                "sourcePool": null,
                                "rank": 1,
                                "displayName": "Winner of B2"
                            }
                        }
                    },
                },
                "sourcePool": null,
                "rank": 1,
                "displayName": "Winner of C1"
            }
        },
        "visitor": {
            "team": null,
            "score": null,
            "seed": {
                "sourceGame": {
                    "@id": "17",
                    "id": "5dd25794-429b-4a1b-9926-bca93438a799",
                    "scheduled": 1592127724000,
                    "name": "C2",
                    "sides": {
                        "home": {
                            "team": null,
                            "score": null,
                            "seed": {
                                "sourceGame": {
                                    "@id": "18",
                                    "id": "b43e7160-9a6a-4fef-8d6a-1dfb73473653",
                                    "scheduled": 1592127724000,
                                    "name": "B3",
                                    "sides": {
                                        "home": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "displayName": "Winner of A5"
                                            }
                                        },
                                        "visitor": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "displayName": "Winner of A6"
                                            }
                                        }
                                    },
                                },
                                "sourcePool": null,
                                "rank": 1,
                                "displayName": "Winner of B3"
                            }
                        },
                        "visitor": {
                            "team": null,
                            "score": null,
                            "seed": {
                                "sourceGame": {
                                    "@id": "18",
                                    "id": "b43e7160-9a6a-4fef-8d6a-1dfb73473653",
                                    "scheduled": 1592127724000,
                                    "name": "B4",
                                    "sides": {
                                        "home": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "sourceGame": {
                                                    "@id": "18",
                                                    "id": "b43e7160-9a6a-4fef-8d6a-1dfb73473653",
                                                    "scheduled": 1592127724000,
                                                    "name": "B4",
                                                    "sides": {
                                                        "home": {
                                                            "team": null,
                                                            "score": null,
                                                            "seed": {
                                                                "displayName": "Winner of A7"
                                                            }
                                                        },
                                                        "visitor": {
                                                            "team": null,
                                                            "score": null,
                                                            "seed": {
                                                                "displayName": "Winner of A8"
                                                            }
                                                        }
                                                    },
                                                },
                                                "sourcePool": null,
                                                "rank": 1,
                                                "displayName": "Winner of B4"
                                            }
                                        },
                                        "visitor": {
                                            "team": null,
                                            "score": null,
                                            "seed": {
                                                "sourceGame": {
                                                    "@id": "18",
                                                    "id": "b43e7160-9a6a-4fef-8d6a-1dfb73473653",
                                                    "scheduled": 1592127724000,
                                                    "name": "B4",
                                                    "sides": {
                                                        "home": {
                                                            "team": null,
                                                            "score": null,
                                                            "seed": {
                                                                "displayName": "Winner of A7"
                                                            }
                                                        },
                                                        "visitor": {
                                                            "team": null,
                                                            "score": null,
                                                            "seed": {
                                                                "displayName": "Winner of A8"
                                                            }
                                                        }
                                                    },
                                                },
                                                "sourcePool": null,
                                                "rank": 1,
                                                "displayName": "Winner of B4"
                                            }
                                        }
                                    },
                                },
                                "sourcePool": null,
                                "rank": 1,
                                "displayName": "Winner of B4"
                            }
                        }
                    }
                },
                "sourcePool": null,
                "rank": 1,
                "displayName": "Winner of C2"
            }
        }
    }
}]

react_controllables_1.default is not a function

using "react-tournament-bracket": "0.2.0"

image

Add documentation to readme

I'm interested in using this repo as the foundation for a project, but I'm having trouble understanding exactly what the data structure and props of a game is supposed to look like.

@moodysalem if you can quickly explain to me how it works, or even point to the source code used in the demo, I can submit a PR to update the docs in the readme.

time and date in topText

how can i get both date and time in topText?

in the BracketGame component date is transforming toLocaleDateString()
how can i transform date toLocaleString() like in the screenshot?

react-tournament-bracket/src/components/BracketGame.tsx

Line 47 in 436b4ab

topText: ({ scheduled }: Game) => new Date(scheduled).toLocaleDateString(),

5 Teams Tournamnet

Hi @moodysalem

The library allow this kind of brackets?

Thanks

How to adjust bracket styles?

I see the style props are:

styles?: {
    backgroundColor: string;
    hoverBackgroundColor: string;
    scoreBackground: string;
    winningScoreBackground: string;
    teamNameStyle: React.CSSProperties;
    teamScoreStyle: React.CSSProperties;
    gameNameStyle: React.CSSProperties;
    gameTimeStyle: React.CSSProperties;
    teamSeparatorStyle: React.CSSProperties;
  };

How, when rendering the component, can you adjust or override these? (Making the lines white instead of black, or the bracket sizes a bit bigger for example)

Provide @types/react-tournament-bracket

Please provide a @types/react-tournament-bracket module so we can do the following:

npm i @types/react-tournament-bracket

yarn add @types/react-tournament-bracket

That way we can apply your module to TypeScript based React-TSX files.

Worked around this by setting seed to null in Side object.