tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,356 @@
+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: 15,
+    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={1690} style={{borderCollapse: 'collapse', tableLayout: 'fixed', width: 'fit-content', maxWidth: '100%'}}>
+        <colgroup>
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <col width={168} style={{msoWidthSource: 'userset', msoWidthAlt: 5376, width: '126pt'}} />
+          <col width={35} span={2} style={{msoWidthSource: 'userset', msoWidthAlt: 1109, width: '26pt'}} />
+          <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.xl00} width={168} style={{height: '15.75pt', width: '126pt'}} />
+            <td className={styles.xl00} width={35} style={{width: '26pt'}} />
+            <td width={35} style={{width: '26pt'}} />
+            <td className={styles.groupTitle} colSpan={4} width={406} style={{msoIgnore: 'colspan', width: '304pt'}}>GROUP
+              x-x | COURT 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} className={styles.xl00} style={{height: '15.75pt'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 1 Top Player | Index 0 */}
+            {team(0)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}}>&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} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.xl00}>1</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 5 Top Player | Index 8 */}
+            {team(8)}
+            <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} className={styles.xl00} style={{height: '15.75pt'}} />
+            <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'}}>
+            {/* Round 1 Bottom Player | Index 1 */}
+            {team(1)}
+            <td className={styles.borderRightBottom}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={4} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderLeft} style={{height: '15.75pt', 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} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>5</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 7 Top Player | Index 12 */}
+            {team(12)}
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.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.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td />
+            <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'}}>
+            {/* Round 2 Top Player | Index 2 */}
+            {team(2)}
+            <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.borderTop} style={{height: '15.75pt'}}>&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} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.xl00}>2</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 5 Bottom Player | Index 9 */}
+            {team(9)}
+            <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.xl00} style={{height: '15.75pt'}} />
+            <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'}}>
+            {/* Round 2 Bottom Player | Index 3 */}
+            {team(3)}
+            <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.borderTop} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </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.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>7</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Finalist | Index 14 */}
+            {team(14)}
+          </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.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'}}>
+            {/* 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.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.borderTop} style={{height: '15.75pt'}}>&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>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.xl00}>3</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 className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.xl00} style={{height: '15.75pt'}} />
+            <td className={styles.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'}}>
+            {/* Round 3 Bottom Player | Index 5 */}
+            {team(5)}
+            <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.borderTop} style={{height: '15.75pt'}}>&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} style={{height: '15.75pt'}} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+            <td className={styles.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 />
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td rowSpan={2} className={styles.xl00}>6</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 7 Bottom Player | Index 13 */}
+            {team(13)}
+            <td className={styles.xl00} />
+            <td className={styles.borderLeft}>&nbsp;</td>
+          </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.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'}}>
+            {/* Round 4 Top Player | Index 6 */}
+            {team(6)}
+            <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.borderTop} style={{height: '15.75pt'}}>&nbsp;</td>
+            <td className={styles.borderLeft}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.xl00} />
+            <td className={styles.xl00} />
+            <td colSpan={2} style={{msoIgnore: 'colspan'}} />
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} style={{height: '15.75pt'}} />
+            <td rowSpan={2} className={styles.xl00}>4</td>
+            <td className={styles.borderBottomLeft}>&nbsp;</td>
+            {/* Round 6 Bottom Player | Index 11 */}
+            {team(11)}
+            <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.borderTopLeft} style={{borderTop: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            {/* Round 4 Bottom Player | Index 7 */}
+            {team(7)}
+            <td className={styles.borderRight}>&nbsp;</td>
+            <td className={styles.borderLeft} style={{borderLeft: 'none'}}>&nbsp;</td>
+          </tr>
+          <tr height={20} style={{msoHeightSource: 'userset', height: '15.75pt'}}>
+            <td height={20} className={styles.borderTop} style={{height: '15.75pt'}}>&nbsp;</td>
+          </tr>
+        </tbody></table>
+    </>
+  );
+}