g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
219 stars 69 forks source link

Bug: Bracket Height is calculated incorrectly when skips are present. #35

Open ted537 opened 2 years ago

ted537 commented 2 years ago

Visible by adding this snippet to double-elim.stories.jsx.

export const DoubleEliminationUnbalanced = () => {                                                       
  const [width, height] = useWindowSize();                                                               
  const finalWidth = Math.max(width - 50, 500);                                                          
  const finalHeight = Math.max(height - 100, 500);                                                       

  const simpleDoubleClipped = {                                                                          
    lower: simpleDoubleFull.lower.filter(                                                                
      match => match.name !== 'LB 1.1'                                                                   
    ),                                                                                                   
    upper: simpleDoubleFull.upper.filter(                                                                
      match => match.name !== 'UB 1.1'                                                                   
    )                                                                                                    
  };                                                                                                     

  return (                                                                                               
    <DoubleElimBracketLeaderboard                                                                        
      matches={simpleDoubleClipped}                                                                      
      matchComponent={Match}                                                                             
      svgWrapper={({ children, ...props }) => (                                                          
        <StyledSvgViewer width={finalWidth} height={finalHeight} {...props}>                             
          {children}                                                                                     
        </StyledSvgViewer>                                                                               
      )}                                                                                                 
    />                                                                                                   
  );                                                                                                     
};

Note that this mock data might not entirely make sense but if the brackets are required to be balanced, then a warning should be issued when they are not. For my use case at least, the ideal solution would either a) account for the missing games when calculating dimensions or b) Fill in the "WALK OVER" matches automatically.