tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,490 @@
+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={1001} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={35} span={5} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={57} style={{msoWidthSource: 'userset', msoWidthAlt: 1834, width: '43pt'}} />
+          <col width={163} style={{msoWidthSource: 'userset', msoWidthAlt: 5205, width: '122pt'}} />
+        </colgroup>
+        <tbody>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            {/* Round 1 Top Player | Index 0 */}
+            <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.xl01} />
+            <td className={styles.borderTRL} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', 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 rowSpan={2} className={styles.borderLeft}>1</td>
+            <NameRow
+              player={players[0]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            {/* Round 1 Bottom Player | Index 1 */}
+            <ScoreRow
+              player={players[1]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <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.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>6</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.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderBottom} />
+            {/* Round 2 Top Player | Index 2 */}
+            <ScoreRow
+              player={players[2]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <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.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderRBL} />
+            {/* Round 2 Bottom Player | Index 3 */}
+            <ScoreRow
+              player={players[3]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>10</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[3]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderTopLeft} />
+          </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} />
+            <td className={styles.borderBottom} />
+            {/* Round 3 Top Player | Index 4 */}
+            <ScoreRow
+              player={players[4]}
+              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.xl01} />
+            <td className={styles.borderTRL} 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.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.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+            <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.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            {/* Round 3 Bottom Player | Index 5 */}
+            <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.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>7</td>
+          </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[5]}
+              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.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.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            {/* Round 7 Bottom Player | Index 10 */}
+            <ScoreRow
+              player={players[10]}
+              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.xl01} />
+            <td className={styles.borderTop} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderBottom} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.borderLeft}>12</td>
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[6]}
+              playerNameStyle={playerNameStyle}
+            />
+          </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} className={styles.xl01} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            {/* Round 4 Top Player | Index 6 */}
+            <ScoreRow
+              player={players[6]}
+              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.xl01} />
+            <td className={styles.borderTRL} style={{borderTop: 'none'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>4</td>
+            <NameRow
+              player={players[7]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            {/* Round 4 Bottom Player | Index 7 */}
+            <ScoreRow
+              player={players[7]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>8</td>
+          </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.xl01} />
+            <NameRow
+              player={players[8]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottom} />
+            <td className={styles.borderBottom} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.borderBottom} />
+            {/* Round 8 Bottom Player | Index 11 */}
+            <ScoreRow
+              player={players[11]}
+              playerIDStyle={playerIDStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} 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.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[9]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>11</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.xl01} />
+            <td className={styles.borderBottom} />
+            {/* Round 5 Top Player | Index 8 */}
+            <ScoreRow
+              player={players[8]}
+              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.borderLeft} />
+            <td className={styles.xl01} />
+            <td className={styles.borderTRL} 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.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.xl01} />
+            <td rowSpan={2} className={styles.borderLeft}>5</td>
+            <NameRow
+              player={players[10]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl01} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderTopLeft} />
+            <td className={styles.borderBottom} />
+            <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.borderLeft} />
+            <td className={styles.borderLeft} />
+            <td className={styles.borderRBL} />
+            {/* Round 5 Bottom Player | Index 9 */}
+            <ScoreRow
+              player={players[9]}
+              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.borderBottomLeft} />
+            <td rowSpan={2} className={styles.borderLeft}>9</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.xl01} />
+            <td className={styles.xl01} />
+            <NameRow
+              player={players[11]}
+              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.xl01} />
+            <td className={styles.xl01} />
+            <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.xl01} />
+            <td className={styles.xl01} />
+            <td className={styles.borderBottomLeft} />
+            <td className={styles.xl01} />
+            {/* Round 9 Bottom Player | Index 12 */}
+            <ScoreRow
+              player={players[12]}
+              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.xl01} />
+            <td className={styles.borderTop} />
+          </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.xl01} />
+            <NameRow
+              player={players[12]}
+              playerNameStyle={playerNameStyle}
+            />
+          </tr>
+        </tbody></table>
+    </>
+  );
+}