tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,514 @@
+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={1001} 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={5} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[0]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+          </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.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[1]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+          </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}>9</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[2]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRightLeft} />
+            <td className={styles.borderRight} />
+          </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.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[3]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </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} />
+          </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 rowSpan={2} className={styles.borderRight}>13</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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[4]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </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.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[5]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[5]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>10</td>
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[6]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRightLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </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 />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[7]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td />
+            <td className={styles.borderRight} />
+          </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 />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[7]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td colSpan={3} style={{msoIgnore: 'colspan'}} />
+            <td rowSpan={2} className={styles.borderRight}>15</td>
+            <td className={styles.borderBottomLeft} style={{borderLeft: 'none'}} />
+          </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'}}>
+            <ScoreRow
+              player={players[8]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+             <NameRow
+              player={players[8]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>5</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <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.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[9]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <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.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[9]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>11</td>
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[10]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRightLeft} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[10]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>6</td>
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[11]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </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} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[11]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>14</td>
+            <td className={styles.borderRight} />
+          </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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[12]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderRight} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[12]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>7</td>
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[13]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRight} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td
+              colSpan={2}
+              height={20}
+              className={styles.playerName}
+              style={{
+                height: '15.75pt',
+                ...playerNameStyle
+              }}
+            >
+              {`${players[13].name} (${players[13].club})`}
+            </td>
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderRight}>12</td>
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTop} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[14]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderRight} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderRightLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[14]}
+              playerNameStyle={playerNameStyle}
+            />
+            <td rowSpan={2} className={styles.borderRight}>8</td>
+            <td className={styles.borderRightBottom} />
+            <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'}} />
+            <td className={styles.borderBottom} />
+            <td className={styles.xl01} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <ScoreRow
+              player={players[15]}
+              playerIDStyle={playerIDStyle}
+            />
+            <td className={styles.borderRightBottom} />
+            <td className={styles.xl01} />
+            <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 colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <NameRow
+              player={players[15]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}