search

moodysalem / react-tournament-bracket

React components for rendering a tournament bracket
https://moodysalem.github.io/react-tournament-bracket/
MIT License
258 stars 81 forks source link

BracketGenerator more than 3 rounds #28

Closed hoseajsap closed 4 years ago

hoseajsap commented 4 years ago

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.

Screenshot_10

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"
            }
        }
    }
}]
moodysalem commented 4 years ago

it should horizontally scroll

hoseajsap commented 4 years ago

I think it's not detecting more than 3 rounds because it's not horizontally scrollable and the title is still detecting 3 rounds.

moodysalem commented 4 years ago

i'm not sure what you mean by not detecting--the container should be scrollable. if it's not, did you override the style? afaict from the screenshot, the game on the far left is cut off by overflow

moodysalem commented 4 years ago

nvm, something is definitely wrong with the json, it says winner of b4 goes to game b4

hoseajsap commented 4 years ago

do you have any JSON example using more than 3 rounds? i can't get working bracket with more than 3 rounds. always get cut in the left.

hoseajsap commented 4 years ago

i figured it out that each sourceGame in seed need ID, scheduled, and name value. i forgot to add the ID part. thanks

CintBX commented 4 years ago

I'm attempting to make a bracket with more than 3 rounds also, and I'm having the same issue even though I'm supplying each sourceGame with ID, scheduled and name.

hoseajsap commented 4 years ago

I'm attempting to make a bracket with more than 3 rounds also, and I'm having the same issue even though I'm supplying each sourceGame with ID, scheduled and name.

Make sure you add "sides" with "home" and "visitor" object. I can make about 8 rounds now and didn't have any problem.

CintBX commented 4 years ago

Thanks for replying. I'll post a picture of my stuff. Is there a particular convention I need to follow with 'id' and 'rank' ? Or can they all just be 1 ?

CintBX commented 4 years ago

UPDATE: I cleaned up some properties that don't seem necessary "gameGroup", "team" for example.

Also, I changed the ids so that each nested sourceGame is id + 1

Example: The finals, which is the root of the tree, is id: 1 The next nested home/visitor group is id: 2, The next one is id: 3, and so on.

I'm building more. Will post here or create a new issue if necessary. Thanks!

CintBX commented 4 years ago

UPDATE: This is driving me a little crazy. I managed to get another sourceGame working connected to "Winner of A1" to render a bracket for 9 players.

To get a bracket for 10 players, I'm trying to create another sourceGame connected to where it says "Winner of A2"

The code is exactly the same as "Winner of A1" yet it renders nothing.

code:

home: {
  score: { score: 0 },
  seed: {
    sourceGame: {
      id: 4,
      scheduled: null,
      name: "A1",
      sides: {
        home: {
          score: { score: 0 },
          seed: {
            sourceGame: null,
            rank: 1,
             displayName: "Seed 0"
           }
         },
         visitor: {
           score: { score: 0 },
           seed: {
             sourceGame: null, 
             rank: 1,
             displayName: "Seed 1"
           }
         }
       }
     },
     rank: 1,
     displayName: "Winner of A1"
   }
 }

To render a new left-side round, I do the same convention:

But again, it only works if I do it on the uppermost seed/sourceGame.
When I try to do that same thing connecting to "Seed 2" it actually doesn't work.

BRACKET-9 first

CintBX commented 4 years ago

Any help is appreciated. Maybe you can show me how some of your larger brackets are rendered? I'm trying to make brackets for sizes 8-16 players.

On Wed, Oct 21, 2020 at 9:05 AM hoseajsap notifications@github.com wrote:

I'm attempting to make a bracket with more than 3 rounds also, and I'm having the same issue even though I'm supplying each sourceGame with ID, scheduled and name.

Make sure you add "sides" with "home" and "visitor" object. I can make about 8 rounds now and didn't have any problem.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/moodysalem/react-tournament-bracket/issues/28#issuecomment-713554546, or unsubscribe https://github.com/notifications/unsubscribe-auth/AITL6CL62MLGVM4CRGXZEIDSL3MCTANCNFSM4N6JP44Q .

CintBX commented 4 years ago

It appears the culprit was the 'rank' property. If the node is gonna have a sourceGame, it has to have a rank of 1 to render it.

On Wed, Oct 21, 2020 at 10:50 AM Dustin Cintron d.cint88@gmail.com wrote:

Any help is appreciated. Maybe you can show me how some of your larger brackets are rendered? I'm trying to make brackets for sizes 8-16 players.

On Wed, Oct 21, 2020 at 9:05 AM hoseajsap notifications@github.com wrote:

I'm attempting to make a bracket with more than 3 rounds also, and I'm having the same issue even though I'm supplying each sourceGame with ID, scheduled and name.

Make sure you add "sides" with "home" and "visitor" object. I can make about 8 rounds now and didn't have any problem.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/moodysalem/react-tournament-bracket/issues/28#issuecomment-713554546, or unsubscribe https://github.com/notifications/unsubscribe-auth/AITL6CL62MLGVM4CRGXZEIDSL3MCTANCNFSM4N6JP44Q .