Team Generator Generate balanced teams from a player list with optional skill-based balancing for fair matchups.

Under the hood, it uses React's useState and useCallback hooks to manage state changes and memoize functions. When generating teams, it splits the input string into lines, trims each line, and filters out empty strings. If skill-based team generation is enabled, it parses each line as a comma-separated name and skill value, defaulting to a skill of 5 if no value is provided. The players are then sorted in descending order by skill using the Array.prototype.sort method.

The tool implements a greedy algorithm to assign players to teams, ensuring that each team has a similar cumulative skill level. It creates an array of teams with empty member lists and assigns players to the team with the lowest current total skill. After all players have been assigned, it calculates the average skill for each team by summing the skills of its members and dividing by the number of members.

When generating teams randomly, it uses a Fisher-Yates shuffle algorithm to randomize the order of the players. This is done by iterating over the array of players from last to first, swapping each player with a randomly selected player from the unshuffled portion of the array. The shuffled players are then assigned to teams using a round-robin approach, where each team receives one player in turn.

The tool uses TypeScript to define interfaces for Player and Team objects, ensuring that the data is structured consistently throughout the application. It also utilizes React's JSX syntax to render the user interface, including a textarea for input, checkboxes and buttons for configuration, and a grid to display the generated teams. The team colors are defined as an array of CSS class names, which are applied to each team's container element to provide visual distinction.