tournament-brackets-ui 0.1.0

package/src/components/Individuals/08-Player/CollapsedLeft.jsx

@@ -0,0 +1,340 @@
+import { ScoreRow } from '../../ScoreRow';
+import { NameRow } from '../../NameRow';
+import styles from '../stylesheet.module.css';
+
+export default function CollapsedLeft({
+  players,
+  fontFamily = 'Arial, sans-serif',
+  playerIDFontSize = 11,
+  playerNameFontSize = 11,
+}) {
+  const playerIDStyle = { fontSize:  `${playerIDFontSize}pt`, fontFamily };
+  const playerNameStyle = { fontSize:  `${playerNameFontSize}pt`, fontFamily };
+  
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={1458} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+          <col width={35} span={6} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[0]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[0]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>1</td>
+            <td className={styles.borderBottomLeft} style={{borderLeft: 'none'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[1]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderLeft} style={{height: '15.75pt', borderLeft: 'none'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[1]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>5</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[2]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[2]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>2</td>
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[3]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[3]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.xl01}>7</td>
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[4]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[4]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>3</td>
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[5]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[5]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>6</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <ScoreRow
+              player={players[6]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderTopRight} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[6]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>4</td>
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none', borderLeft: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[7]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRight} />
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[7]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}

package/src/components/Individuals/08-Player/CollapsedRight.jsx

@@ -0,0 +1,276 @@
+import { ScoreRow } from '../../ScoreRow';
+import { NameRow } from '../../NameRow';
+import styles from '../stylesheet.module.css';
+
+export default function CollapsedRight({
+  players,
+  fontFamily = 'Arial, sans-serif',
+  playerIDFontSize = 11,
+  playerNameFontSize = 11,
+}) {
+  const playerIDStyle = { fontSize:  `${playerIDFontSize}pt`, fontFamily };
+  const playerNameStyle = { fontSize:  `${playerNameFontSize}pt`, fontFamily };
+
+  return (
+    <>
+      <table border={0} cellPadding={0} cellSpacing={0} width={1072} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={35} span={4} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+        </colgroup>
+        <tbody>
+          <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.xl01} />
+            <td className={styles.xl01} />
+            <ScoreRow
+              player={players[0]}
+              playerIDStyle={playerIDStyle}
+            />
+          </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.xl01} />
+            <td className={styles.borderTopLeft} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>1</td>
+            <NameRow
+              player={players[0]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            <ScoreRow
+              player={players[1]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>5</td>
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[1]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopLeft} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <ScoreRow
+              player={players[2]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTRL} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>2</td>
+            <NameRow
+              player={players[2]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRBL} />
+            <ScoreRow
+              player={players[3]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[3]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderLeft}>7</td>
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <ScoreRow
+              player={players[4]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>3</td>
+            <NameRow
+              player={players[4]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            <ScoreRow
+              player={players[5]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTop}></td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>6</td>
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[5]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <ScoreRow
+              player={players[6]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTRL} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>4</td>
+            <NameRow
+              player={players[6]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+          </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.xl01} />
+            <td className={styles.borderRBL} />
+            <ScoreRow
+              player={players[7]}
+              playerIDStyle={playerIDStyle}
+            />
+          </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.xl01} />
+            <td className={styles.borderTop} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[7]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}