tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,486 @@
+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: 17,
+    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'}}>COURT
+              x | GROUP x-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={2} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={5} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+          </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'}}>
+            <td height={20} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            {/* Round 2 Top Player | Index 2 */}
+            {team(2)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            <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 colSpan={3} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={4} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            <td rowSpan={2} className={styles.xl00}>2</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 6 Top Player | Index 10 */}
+            {team(10)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={3} 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.borderBottom}>&nbsp;</td>
+            <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'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            {/* Round 2 Bottom Player | Index 3 */}
+            {team(3)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={2} 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.borderRight}>&nbsp;</td>
+            <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 />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <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 />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>6</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 8 Top Player | Index 14 */}
+            {team(14)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            {/* Round 3 Top Player | Index 4 */}
+            {team(4)}
+            <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.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.borderLeft}>&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'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            <td />
+            <td rowSpan={2} className={styles.xl00}>3</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 6 Bottom Player | Index 11 */}
+            {team(11)}
+            <td className={styles.borderBottom}>&nbsp;</td>
+            <td className={styles.borderLeft}>&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'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            <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.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            {/* Round 3 Bottom Player | Index 5 */}
+            {team(5)}
+            <td className={styles.borderRight}>&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.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            <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.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.xl00}><span style={{msoSpacerun: 'yes'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style={{display: 'none'}}><span style={{msoSpacerun: 'yes'}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></td>
+            <td rowSpan={2} className={styles.xl00}>8</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Finalist | Index 16 */}
+            {team(16)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.xl00} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            {/* Round 4 Top Player | Index 6 */}
+            {team(6)}
+            <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} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            <td />
+            <td rowSpan={2} className={styles.xl00}>4</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 7 Top Player | Index 12 */}
+            {team(12)}
+            <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.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl00} />
+            <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.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} />
+            {/* Round 4 Bottom Player | Index 7 */}
+            {team(7)}
+            <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.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.borderTop}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} 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 />
+            <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.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</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>
+            <td />
+            <td className={styles.xl00} />
+            <td />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>7</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 8 Bottom Player | Index 15 */}
+            {team(15)}
+            <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={2} style={{msoIgnore: 'colspan'}} />
+            <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'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderRightExpanded}>1</td>
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            {/* Round 5 Top Player | Index 9 */}
+            {team(9)}
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={4} 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.borderTop}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&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 />
+            <td rowSpan={2} className={styles.xl00}>5</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 7 Bottom Player | Index 13 */}
+            {team(13)}
+            <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.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            {/* Round 5 Bottom Player | Index 8 */}
+            {team(8)}
+            <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} colSpan={3} style={{height: '15.75pt', msoIgnore: 'colspan'}} />
+            <td className={styles.borderTop}>&nbsp;</td>
+          </tr>
+        </tbody></table>
+    </>
+  );
+}