Create Single-Elimination Tournament Brackets Create single-elimination tournament brackets with seeded or random draws and interactive winner selection.

The Tournament Bracket Generator relies on the Fisher-Yates shuffle algorithm to randomize participant order when the "random" seeding option is selected, ensuring an unbiased draw. This is achieved by using JavaScript's built-in `Math.random()` and `Math.floor()` functions in conjunction with array manipulation. The tool also utilizes React's `useState` and `useCallback` hooks to manage state changes and memoize the `generateBracket` function, which improves performance by preventing unnecessary re-renders. When generating the bracket, it employs a power-of-2 sizing strategy via the formula 2^ceil(log2(N)), where N is the number of participants, to determine the total number of rounds required. The resulting bracket is represented as an array of rounds, with each round containing an array of match objects that store information about the competing players and the winner of each match.

The tool's data structure consists of a nested array of match objects, where each object contains properties such as `id`, `player1`, `player2`, `winner`, and `round`. This allows for efficient storage and retrieval of match data, making it easy to propagate winners through subsequent rounds. Winner propagation is handled using a simple yet effective approach: when a winner is selected, the corresponding match index is used to determine the position of the winner in the next round, with `floor(matchIndex/2)` calculating the index of the next match and `matchIndex % 2` determining whether the winner should be assigned to the first or second position. This logic enables seamless progression through the tournament bracket, from the initial rounds to the final championship match. By leveraging React's component-based architecture and JavaScript's built-in mathematical functions, the tool provides a robust and scalable solution for generating and managing single-elimination brackets.