tournament-brackets-ui 0.1.0

package/src/components/Individuals/stylesheet.module.css

@@ -0,0 +1,360 @@
+tr {
+  mso-height-source: auto;
+}
+col {
+  mso-width-source: auto;
+}
+br {
+  mso-data-placement: same-cell;
+}
+.style0 {
+  mso-number-format: General;
+  text-align: general;
+  vertical-align: bottom;
+  white-space: nowrap;
+  mso-rotate: 0;
+  mso-background-source: auto;
+  mso-pattern: auto;
+  color: black;
+  font-size: 10pt;
+  font-weight: 400;
+  font-style: normal;
+  text-decoration: none;
+  font-family: Arial;
+  mso-generic-font-family: auto;
+  mso-font-charset: 0;
+  border: none;
+  mso-protection: locked visible;
+  mso-style-name: Normal;
+  mso-style-id: 0;
+}
+td {
+  mso-style-parent: style0;
+  padding-top: 1px;
+  padding-right: 1px;
+  padding-left: 1px;
+  mso-ignore: padding;
+  color: black;
+  font-size: 10pt;
+  font-weight: 400;
+  font-style: normal;
+  text-decoration: none;
+  font-family: Arial;
+  mso-generic-font-family: auto;
+  mso-font-charset: 0;
+  mso-number-format: General;
+  text-align: general;
+  vertical-align: bottom;
+  border: none;
+  mso-background-source: auto;
+  mso-pattern: auto;
+  mso-protection: locked visible;
+  white-space: nowrap;
+  mso-rotate: 0;
+}
+.groupTitle {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 24pt;
+  font-weight: 700;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: left;
+  vertical-align: middle;
+}
+.playerName {
+  mso-style-parent: style0;
+  font-size: 11pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+}
+.playerNameExpanded {
+  mso-style-parent: style0;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  border-top: 0.5pt solid black;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+.playerID {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 11pt;
+  font-weight: 700;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+.playerIDExpanded {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 14pt;
+  font-weight: 700;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+.borderTop {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+.borderRight {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: none;
+}
+.borderRightExpanded {
+  mso-style-parent: style0;
+  color: black;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: none;
+}
+.borderBottom {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: none;
+  border-bottom: 0.5pt solid black;
+  border-left: none;
+}
+.borderLeft {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+.borderTopRight {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: none;
+}
+.borderRightLeft {
+  mso-style-parent: style0;
+  color: windowtext;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+.borderBottomLeft {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: none;
+  border-bottom: 0.5pt solid black;
+  border-left: 0.5pt solid black;
+}
+.borderRightBottom {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: 0.5pt solid black;
+  border-bottom: 0.5pt solid black;
+  border-left: none;
+}
+.borderTopLeft {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: none;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+.borderRBL {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: none;
+  border-right: 0.5pt solid black;
+  border-bottom: 0.5pt solid black;
+  border-left: 0.5pt solid black;
+}
+.borderTRL {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-top: 0.5pt solid black;
+  border-right: 0.5pt solid black;
+  border-bottom: none;
+  border-left: 0.5pt solid black;
+}
+
+.xl00 {
+  mso-style-parent: style0;
+  color: black;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+.xl01 {
+  mso-style-parent: style0;
+  color: black;
+  font-size: 12pt;
+  font-family: Arial, sans-serif;
+  mso-font-charset: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.inlineInput {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  resize: none;
+  overflow: hidden;
+  font: inherit;
+  text-align: center;
+  line-height: 1;
+}
+.inlineInput::placeholder {
+  color: #aaa;
+  opacity: 1;
+}
+
+.winnerNameInput {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  resize: none;
+  overflow: hidden;
+  font: inherit;
+  line-height: 1;
+}
+.winnerNameInput::placeholder {
+  color: #aaa;
+  opacity: 1;
+}
+
+.tooltipWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-15px);
+  padding: 6px 10px;
+  background: #f5f5f5;
+  color: #333;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px;
+  border-style: solid;
+  border-color: #d3d3d3 transparent transparent transparent;
+}
+
+/* show the tooltip when the input is focused */
+.tooltipWrapper:focus-within .tooltip {
+  visibility: visible;
+  opacity: 1;
+}

package/src/components/NameRow.jsx

@@ -0,0 +1,21 @@
+import styles from "./Individuals/stylesheet.module.css";
+
+export function NameRow({ player, playerNameStyle }) {
+  const club = player?.club?.trim();
+  return (
+    <>
+      <td
+        colSpan={2}
+        height={20}
+        className={styles.playerName}
+        style={{
+          height: "15.75pt",
+          ...playerNameStyle,
+        }}
+      >
+        {player?.name}
+        {club ? ` (${club})` : ""}
+      </td>
+    </>
+  );
+}

package/src/components/NameRowFillable.jsx

@@ -0,0 +1,30 @@
+import styles from "./Individuals/stylesheet.module.css";
+
+export function NameRowFillable({ player, onNameChange, playerNameStyle }) {
+  return (
+    <>
+      {player.name ? (
+        <td
+          colSpan={2}
+          height={20}
+          className={styles.playerNameExpanded}
+          style={{
+            height: "15.75pt",
+            ...playerNameStyle,
+          }}
+        >
+          {`${player.name} (${player.club})`}
+        </td>
+      ) : (
+        <td colSpan={2} className={styles.playerNameExpanded}>
+          <input
+            type="text"
+            className={styles.winnerNameInput}
+            placeholder="Name (CLUB)"
+            onChange={onNameChange}
+          />
+        </td>
+      )}
+    </>
+  );
+}

package/src/components/ScoreRow.jsx

@@ -0,0 +1,29 @@
+import styles from "./Individuals/stylesheet.module.css";
+
+export function ScoreRow({
+  player,
+  playerIDStyle,
+}) {
+  return (
+    <>
+      <td
+        rowSpan="2"
+        className={styles.playerIDExpanded}
+        style={{
+          borderBottom: ".5pt solid black",
+          height: "31.5pt",
+          ...playerIDStyle,
+        }}
+      >
+        {player.id}
+      </td>
+      <td
+        rowSpan={2}
+        className={styles.borderTopRight}
+        style={{ borderBottom: ".5pt solid black" }}
+      >
+        &nbsp;
+      </td>
+    </>
+  );
+}

package/src/components/ScoreRowFillable.jsx

@@ -0,0 +1,64 @@
+import styles from "./Individuals/stylesheet.module.css";
+
+const CIRCLED = { M: "Ⓜ", K: "Ⓚ", D: "Ⓓ", T: "Ⓣ" };
+
+export function ScoreRowFillable({
+  player,
+  onScoreChange,
+  onIDChange,
+  playerIDStyle,
+  showTooltip = false,
+}) {
+  // build display: first char circled, rest raw + spaced
+  const score = player?.score || "";
+  const displayScore = score
+    ? [CIRCLED[score[0]], ...score.slice(1).split("")].join(" ")
+    : "";
+
+  return (
+    <>
+      <td
+        rowSpan={2}
+        className={styles.playerIDExpanded}
+        style={{
+          borderBottom: ".5pt solid black",
+          height: "31.5pt",
+          ...playerIDStyle,
+        }}
+      >
+        <input
+          type="text"
+          className={styles.inlineInput}
+          placeholder="ID"
+          onChange={onIDChange}
+        />
+      </td>
+      <td
+        rowSpan="2"
+        className={styles.borderTopRight}
+        style={{ borderBottom: ".5pt solid black" }}
+      >
+        {showTooltip ? (
+          <div className={styles.tooltipWrapper}>
+            <input
+              type="text"
+              className={styles.inlineInput}
+              placeholder="SCORE"
+              value={displayScore}
+              onChange={onScoreChange}
+            />
+            <div className={styles.tooltip}>Enter score, ex. M, K, D, ...</div>
+          </div>
+        ) : (
+          <input
+            type="text"
+            className={styles.inlineInput}
+            placeholder="SCORE"
+            value={displayScore}
+            onChange={onScoreChange}
+          />
+        )}
+      </td>
+    </>
+  );
+}

package/src/components/Team.jsx

@@ -0,0 +1,20 @@
+import styles from "./Teams/stylesheet.module.css";
+
+export function Team({ team, teamIDStyle }) {
+  return (
+    <>
+      <td
+        rowSpan={2}
+        height={40}
+        className={styles.teamIDExpanded}
+        style={{
+          borderBottom: ".5pt solid black",
+          height: "31.5pt",
+          ...teamIDStyle,
+        }}
+      >
+        {team}
+      </td>
+    </>
+  );
+}

package/src/components/TeamFillable.jsx

@@ -0,0 +1,25 @@
+import styles from "./Teams/stylesheet.module.css";
+
+export function TeamFillable({ team, onTeamChange, teamIDStyle }) {
+  return (
+    <>
+      <td
+        rowSpan={2}
+        height={40}
+        className={styles.teamIDExpanded}
+        style={{
+          borderBottom: ".5pt solid black",
+          height: "31.5pt",
+          ...teamIDStyle,
+        }}
+      >
+        <input
+          type="text"
+          className={styles.inlineInput}
+          placeholder="Team ID"
+          onChange={onTeamChange}
+        />
+      </td>
+    </>
+  );
+}