tournament-brackets-ui 0.1.0

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

@@ -0,0 +1,300 @@
+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;
+}
+.teamID {
+  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;
+}
+.teamIDExpanded {
+  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: 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: 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;
+}

package/src/components/_internal/ExpandedBase.jsx

@@ -0,0 +1,60 @@
+import { useCallback, useMemo, useState } from "react";
+import { sanitizeScore } from "../../scripts/scoreUtils";
+
+export function ExpandedBase({
+  initialPlayers = [],
+  maxSlots,
+  mode,                // "view" | "fillable"
+  fontFamily = "Arial, sans-serif",
+  playerIDFontSize,
+  playerNameFontSize,
+}) {
+  // State
+  const [players, setPlayers] = useState(() =>
+    Array.from({ length: maxSlots }, (_, i) =>
+      initialPlayers[i] ? { ...initialPlayers[i] } : { id: "", name: "", club: "", score: "" }
+    )
+  );
+
+  const updatePlayer = useCallback((index, patch) => {
+    setPlayers((ps) => {
+      const copy = [...ps];
+      copy[index] = { ...copy[index], ...patch };
+      return copy;
+    });
+  }, []);
+
+  // Styles
+  const playerIDStyle = useMemo(
+    () => ({ fontSize: `${playerIDFontSize}pt`, fontFamily }),
+    [playerIDFontSize, fontFamily]
+  );
+  const playerNameStyle = useMemo(
+    () => ({ fontSize: `${playerNameFontSize}pt`, fontFamily }),
+    [playerNameFontSize, fontFamily]
+  );
+
+  // Handlers (index-aware)
+  const handleScoreChange = useCallback(
+    (i) => (e) => updatePlayer(i, { score: sanitizeScore(e.target.value) }),
+    [updatePlayer]
+  );
+  const handleIDChange = useCallback(
+    (i) => (e) => updatePlayer(i, { id: e.target.value.toUpperCase() }),
+    [updatePlayer]
+  );
+  const handleNameChange = useCallback(
+    (i) => (e) => updatePlayer(i, { name: e.target.value }),
+    [updatePlayer]
+  );
+
+  return {
+    players,
+    mode,
+    playerIDStyle,
+    playerNameStyle,
+    handleScoreChange,
+    handleIDChange,
+    handleNameChange,
+  };
+}

package/src/components/_internal/TeamsBase.jsx

@@ -0,0 +1,45 @@
+import { useCallback, useMemo, useState } from "react";
+
+export function TeamsBase({
+  initialTeams = [],
+  maxSlots,
+  mode, // "view" | "fillable"
+  teamIDFontFamily = "Arial, sans-serif",
+  teamIDColor,
+  teamIDFontSize = 12,
+}) {
+  const [teams, setTeams] = useState(() =>
+    Array.from({ length: maxSlots }, (_, i) => initialTeams[i] ?? "")
+  );
+
+  // Style object is memoized
+  const teamIDStyle = useMemo(
+    () => ({
+      fontFamily: teamIDFontFamily,
+      color: teamIDColor,
+      fontSize: teamIDFontSize ? `${teamIDFontSize}pt` : undefined,
+    }),
+    [teamIDFontFamily, teamIDColor, teamIDFontSize]
+  );
+
+  // Update helpers
+  const updateTeam = useCallback((index, patch) => {
+    setTeams((ps) => {
+      const copy = [...ps];
+      copy[index] = { ...copy[index], ...patch };
+      return copy;
+    });
+  }, []);
+
+  const handleTeamChange = useCallback(
+    (i) => (e) => updateTeam(i, e.target.value),
+    [updateTeam]
+  );
+
+  return {
+    teams,
+    mode,
+    teamIDStyle,
+    handleTeamChange,
+  };
+}

package/src/components/_internal/VariantFacade.jsx

@@ -0,0 +1,26 @@
+import React, { Suspense } from "react";
+
+export function VariantFacade(registry, displayName) {
+  const Facade = ({ entity = "teams", size, ...props }) => {
+    const key = String(entity).toLowerCase();
+    const Comp = registry[key]?.[size];
+    if (!Comp) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`${displayName}: no variant for entity="${entity}" size=${size}`);
+      }
+      return null;
+    }
+    return (
+      <Suspense fallback={null}>
+        <Comp {...props} />
+      </Suspense>
+    );
+  };
+  Facade.displayName = displayName;
+
+  // Ergonomic sugar
+  Facade.Teams = (p) => <Facade entity="teams" {...p} />;
+  Facade.Individuals = (p) => <Facade entity="individuals" {...p} />;
+
+  return Facade;
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as CollapsedLeft }  from "./components/Facades/CollapsedLeft";
+export { default as CollapsedRight } from "./components/Facades/CollapsedRight";
+export { default as Expanded }       from "./components/Facades/Expanded";

package/src/scripts/convert-html-to-jsx.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * convert-html-to-jsx.js
+ *
+ * Usage:
+ *   node convert-html-to-jsx.js path/to/input.htm path/to/OutputComponent.jsx
+ */
+
+const fs = require('fs');
+const path = require('path');
+const HTMLtoJSX = require('htmltojsx');
+
+// Grab CLI args
+const [,, inputFile, outputFile] = process.argv;
+if (!inputFile || !outputFile) {
+  console.error('Usage: node convert-html-to-jsx.js <input.htm> <Output.jsx>');
+  process.exit(1);
+}
+
+// 1) Read your .htm
+const html = fs.readFileSync(inputFile, 'utf8');
+
+// 2) Strip out <head>, scripts, excel-metadata, etc.
+const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+const innerHtml = bodyMatch ? bodyMatch[1] : html;
+
+// 3) Convert to JSX
+const converter = new HTMLtoJSX({ createClass: false });
+let jsxCode = converter.convert(innerHtml);
+
+// 4) Wrap in a functional component
+const componentName = path.basename(outputFile).replace(/\..+$/, '');
+const component = `import React from 'react';
+import './${componentName}.css'; // adjust path as needed
+
+export default function ${componentName}() {
+  return (
+    <>
+${jsxCode.replace(/^/gm, '      ')}
+    </>
+  );
+}
+`;
+
+fs.writeFileSync(outputFile, component, 'utf8');
+console.log(`✅ Wrote ${outputFile}`);

package/src/scripts/inject-players.js

@@ -0,0 +1,45 @@
+// inject-players.js
+const fs   = require('fs');
+const path = require('path');
+
+// Usage:
+//   node inject-players.js input.jsx [output.jsx]
+const [,, inputFile, outputFile] = process.argv;
+
+if (!inputFile) {
+  console.error('Usage: node inject-players.js <input.jsx> [output.jsx]');
+  process.exit(1);
+}
+
+const srcPath = path.resolve(process.cwd(), inputFile);
+const outPath = outputFile
+  ? path.resolve(process.cwd(), outputFile)
+  : srcPath;
+
+// read in your component
+let content = fs.readFileSync(srcPath, 'utf8');
+
+// 1) replace all Bxx → {players[i].id}
+let idIndex = 0;
+content = content.replace(/>(C\w{2})</g, (_match, _id) => {
+  return `>{players[${idIndex++}].id}<`;
+});
+
+// 2) replace "Firstname Lastname (CLUB)" → {`${players[i].name} (${players[i].club})`}
+let nameIndex = 0;
+content = content.replace(
+  /([A-Za-z]+ [A-Za-z]+) \(([A-Za-z0-9]+)\)/g,
+  () => {
+    const i = nameIndex++;
+    return (
+      '{`' +
+        '${players[' + i + '].name} (' +
+        '${players[' + i + '].club})' +
+      '`}'
+    );
+  }
+);
+
+// write back (either to a new file or in-place)
+fs.writeFileSync(outPath, content, 'utf8');
+console.log(`✅  ${outputFile ? 'Transformed' : 'Updated'} ${outPath}`);

package/src/scripts/scoreUtils.js

@@ -0,0 +1,25 @@
+export const CIRCLED = { M: "Ⓜ", K: "Ⓚ", D: "Ⓓ", T: "Ⓣ" };
+export const RAW = Object.fromEntries(Object.entries(CIRCLED).map(([k, v]) => [v, k]));
+export const ALLOWED = Object.keys(CIRCLED);
+
+/** sanitize free-text → canonical raw string (e.g. " m k " -> "MK") */
+export function sanitizeScore(input = "") {
+  const noSpaces = String(input).replace(/\s+/g, "");
+  let first = "";
+  if (noSpaces) {
+    const c0 = noSpaces[0];
+    first = RAW[c0] || c0.toUpperCase();
+    if (!ALLOWED.includes(first)) first = "";
+  }
+  const rest = Array.from(noSpaces.slice(1).toUpperCase())
+    .filter((ch) => ALLOWED.includes(ch))
+    .join("");
+  return first + rest;
+}
+
+/** "MK" -> "Ⓜ K" (for display inputs) */
+export function displayScore(raw = "") {
+  if (!raw) return "";
+  const head = CIRCLED[raw[0]] ?? raw[0];
+  return [head, ...raw.slice(1)].join(" ");
+}

package/src/scripts/update-classnames.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+const fs   = require('fs');
+const path = require('path');
+
+function processFile(filePath) {
+  let src = fs.readFileSync(filePath, 'utf8');
+  let dst = src.replace(
+    /className="([A-Za-z0-9_-]+)"/g,
+    'className={styles.$1}'
+  );
+  if (dst !== src) {
+    fs.writeFileSync(filePath, dst, 'utf8');
+    console.log('→ updated', filePath);
+  }
+}
+
+function walk(dir) {
+  for (let name of fs.readdirSync(dir)) {
+    let full = path.join(dir, name);
+    if (fs.statSync(full).isDirectory()) walk(full);
+    else if (full.match(/\.(jsx?|tsx?)$/)) processFile(full);
+  }
+}
+
+// point this at your component folder:
+walk(path.resolve(__dirname, '../components/Teams/16-Team'));