tournament-brackets-ui 0.1.0

package/src/components/Teams/14-Team/Expanded.jsx

@@ -0,0 +1,661 @@
+import { TeamsBase } from '../../_internal/TeamsBase';
+import { Team } from '../../Team';
+import { TeamFillable } from '../../TeamFillable';
+import styles from '../stylesheet.module.css';
+
+export default function Expanded(props) {
+  const {
+    teams, mode,
+    teamIDStyle, handleTeamChange,
+  } = TeamsBase({
+    initialTeams: props.teams,
+    maxSlots: 27,
+    mode: "view",   // "view" | "fillable"
+    teamIDFontFamily: props.fontFamily,
+    teamIDColor: props.teamIDColor,
+    teamIDFontSize: props.teamIDFontSize,
+  });
+
+  const team = (i) => mode === "view" ? 
+    <Team
+      team={teams[i]}
+      teamIDStyle={teamIDStyle}
+    /> : 
+    <TeamFillable
+      team={teams[i]}
+      onTeamChange={handleTeamChange(i)}
+      teamIDStyle={teamIDStyle}
+    />;
+
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={1903} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup><col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <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={163} style={{height: '15.75pt', 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={163} style={{width: '122pt'}} />
+            <td className={styles.xl00} width={35} style={{width: '26pt'}} />
+            <td className={styles.groupTitle} colSpan={5} width={431} style={{msoIgnore: 'colspan', width: '322pt'}}>GROUP
+              x-x | COURT x</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Top Player | Index 0 */}
+            {team(0)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+          </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'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>1</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 7 Top Player | Index 14 */}
+            {team(14)}
+          </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.borderRight}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Bottom Player | Index 1 */}
+            {team(1)}
+            <td className={styles.borderRightBottom}>&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'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>7</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            {/* Round 11 Top Player | Index 20 */}
+            {team(20)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTop} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Top Player | Index 2 */}
+            {team(2)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} 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>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>2</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 7 Bottom Player | Index 15 */}
+            {team(15)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <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.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 2 Bottom Player | Index 3 */}
+            {team(3)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&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.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>11</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 13 Top Player | Index 24 */}
+            {team(24)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <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} style={{height: '15.75pt'}} />
+            <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 className={styles.borderLeft}>&nbsp;</td>
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+            <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 */}
+            {team(4)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&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.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.borderRight}>&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} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>3</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 8 Top Player | Index 16 */}
+            {team(16)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&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.borderRight}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&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 3 Bottom Player | Index 5 */}
+            {team(5)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>8</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            {/* Round 11 Bottom Player | Index 21 */}
+            {team(21)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&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.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 8 Bottom Player | Index 12 */}
+            {team(12)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} 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.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <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>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Top Player | Index 6 */}
+            {team(6)}
+            <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 colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>13</td>
+            <td className={styles.borderBottomLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+            {/* Finalist | Index 26 */}
+            {team(26)}
+          </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 colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none', borderLeft: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>4</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 9 Top Player | Index 17 */}
+            {team(17)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&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.borderRight}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Bottom Player | Index 7 */}
+            {team(7)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&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.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>9</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            {/* Round 12 Top Player | Index 22 */}
+            {team(22)}
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTop} style={{borderTop: 'none'}}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 5 Top Player | Index 8 */}
+            {team(8)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <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.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>5</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 9 Bottom Player | Index 18 */}
+            {team(18)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <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.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td />
+            <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 5 Bottom Player | Index 9 */}
+            {team(9)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td />
+            <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.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>12</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            {/* Round 13 Bottom Player | Index 25 */}
+            {team(25)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderTopLeft}>&nbsp;</td>
+            <td className={styles.borderTop}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <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 className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 6 Top Player | Index 10 */}
+            {team(10)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} 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>
+            <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={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>6</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 10 Top Player | Index 19 */}
+            {team(19)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <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.borderRight}>&nbsp;</td>
+            <td className={styles.borderTopRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 6 Bottom Player | Index 11 */}
+            {team(11)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>10</td>
+            <td className={styles.borderBottom}>&nbsp;</td>
+            {/* Round 12 Bottom Player | Index 23 */}
+            {team(23)}
+            <td className={styles.borderRightBottom}>&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'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 10 Bottom Player | Index 13 */}
+            {team(13)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}