tournament-brackets-ui 0.1.0

package/src/components/Individuals/12-Player/Expanded.jsx

@@ -0,0 +1,622 @@
+import { ExpandedBase } from '../../_internal/ExpandedBase';
+import { NameRow } from '../../NameRow';
+import { ScoreRow } from '../../ScoreRow';
+import { ScoreRowFillable } from '../../ScoreRowFillable';
+import { NameRowFillable } from '../../NameRowFillable';
+import styles from '../stylesheet.module.css';
+
+export default function Expanded(props) {
+  const {
+    players, mode,
+    playerIDStyle, playerNameStyle,
+    handleScoreChange, handleIDChange, handleNameChange
+  } = ExpandedBase({
+    initialPlayers: props.players,
+    maxSlots: 23,
+    mode: "view",   // "view" | "fillable"
+    fontFamily: props.fontFamily,
+    playerIDFontSize: 14,
+    playerNameFontSize: 12,
+  });
+
+  const nameRow = (i) => mode === "view" ? 
+    <NameRow
+      player={players[i]}
+      playerNameStyle={playerNameStyle}
+    /> : 
+    <NameRowFillable
+      player={players[i]}
+      onNameChange={handleNameChange(i)}
+      playerNameStyle={playerNameStyle}
+    />;
+
+  const scoreRow = (i) => mode === "view" ? 
+    <ScoreRow
+      player={players[i]}
+      playerNameStyle={playerNameStyle}
+    /> : 
+    <ScoreRowFillable
+      player={players[i]}
+      onScoreChange={handleScoreChange(i)}
+      onIDChange={handleIDChange(i)}
+      playerIDStyle={playerIDStyle}
+    />;
+
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={2188} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} width={57} style={{height: '15.75pt', width: '43pt'}} />
+            <td className={styles.xl00} width={163} style={{width: '122pt'}} />
+            <td className={styles.xl00} width={35} style={{width: '26pt'}} />
+            <td className={styles.xl00} width={35} style={{width: '26pt'}} />
+            <td className={styles.xl00} width={57} style={{width: '43pt'}} />
+            <td className={styles.xl00} width={163} style={{width: '122pt'}} />
+            <td className={styles.xl00} width={35} style={{width: '26pt'}} />
+            <td className={styles.groupTitle} colSpan={6} width={382} style={{msoIgnore: 'colspan', width: '286pt'}}>GROUP
+              x-x | COURT x</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Top Player | Index 0 */}
+            {scoreRow(0)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Top Player | Index 0 */}
+            {nameRow(0)}
+            <td rowSpan={2} className={styles.borderRightExpanded}>1</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 5 Top Player | Index 12 */}
+            {scoreRow(12)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Bottom Player | Index 1 */}
+            {scoreRow(1)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 5 Top Player | Index 12 */}
+            {nameRow(12)}
+            <td rowSpan={2} className={styles.xl00}>5</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 9 Top Player | Index 16 */}
+            {scoreRow(16)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Bottom Player | Index 1 */}
+            {nameRow(1)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 5 Bottom Player | Index 8 */}
+            {scoreRow(8)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 9 Top Player | Index 16 */}
+            {nameRow(16)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={5} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={5} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 5 Bottom Player | Index 8 */}
+            {nameRow(8)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={5} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>9</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 11 Top Player | Index 20 */}
+            {scoreRow(20)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Top Player | Index 2 */}
+            {scoreRow(2)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            {/* Round 11 Top Player | Index 20 */}
+            {nameRow(20)}
+            <td />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Top Player | Index 2 */}
+            {nameRow(2)}
+            <td rowSpan={2} className={styles.borderRightExpanded}>2</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 6 Top Player | Index 13 */}
+            {scoreRow(13)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Bottom Player | Index 3 */}
+            {scoreRow(3)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 6 Top Player | Index 13 */}
+            {nameRow(13)}
+            <td rowSpan={2} className={styles.xl00}>6</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 9 Bottom Player | Index 17 */}
+            {scoreRow(17)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Bottom Player | Index 3 */}
+            {nameRow(3)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 6 Bottom Player | Index 9 */}
+            {scoreRow(9)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 9 Bottom Player | Index 17 */}
+            {nameRow(17)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 6 Bottom Player | Index 9 */}
+            {nameRow(9)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>11</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Finalist | Index 22 */}
+            {scoreRow(22)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 3 Top Player | Index 4 */}
+            {scoreRow(4)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            {/* Finalist | Index 22 */}
+            {nameRow(22)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 3 Top Player | Index 4 */}
+            {nameRow(4)}
+            <td rowSpan={2} className={styles.borderRightExpanded}>3</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 7 Top Player | Index 14 */}
+            {scoreRow(14)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 3 Bottom Player | Index 5 */}
+            {scoreRow(5)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 7 Top Player | Index 14 */}
+            {nameRow(14)}
+            <td rowSpan={2} className={styles.xl00}>7</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 10 Top Player | Index 18 */}
+            {scoreRow(18)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 3 Bottom Player | Index 5 */}
+            {nameRow(5)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 7 Bottom Player | Index 10 */}
+            {scoreRow(10)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td />
+            {/* Round 10 Top Player | Index 18 */}
+            {nameRow(18)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 7 Bottom Player | Index 10 */}
+            {nameRow(10)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Top Player | Index 6 */}
+            {scoreRow(6)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>10</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 11 Bottom Player | Index 21 */}
+            {scoreRow(21)}
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Top Player | Index 6 */}
+            {nameRow(6)}
+            <td rowSpan={2} className={styles.borderRightExpanded}>4</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 8 Top Player | Index 15 */}
+            {scoreRow(15)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td />
+            {/* Round 11 Bottom Player | Index 21 */}
+            {nameRow(21)}
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Bottom Player | Index 7 */}
+            {scoreRow(7)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            {/* Round 8 Top Player | Index 15 */}
+            {nameRow(15)}
+            <td rowSpan={2} className={styles.xl00}>8</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 10 Bottom Player | Index 19 */}
+            {scoreRow(19)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Bottom Player | Index 7 */}
+            {nameRow(7)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 8 Bottom Player | Index 11 */}
+            {scoreRow(11)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+            {/* Round 10 Bottom Player | Index 19 */}
+            {nameRow(19)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={4} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            <td className={styles.borderTop}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={4} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            {/* Round 8 Bottom Player | Index 11 */}
+            {nameRow(11)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}