From 4cc8af7eb540ac4d8f77f76545e04d150d463565 Mon Sep 17 00:00:00 2001 From: thornxyz Date: Mon, 6 Jan 2025 23:23:45 +0530 Subject: [PATCH 1/2] using number of teams --- app/createBracket/page.jsx | 217 +++++++++++++++---------------------- 1 file changed, 86 insertions(+), 131 deletions(-) diff --git a/app/createBracket/page.jsx b/app/createBracket/page.jsx index 4245ef6..3877525 100644 --- a/app/createBracket/page.jsx +++ b/app/createBracket/page.jsx @@ -36,10 +36,6 @@ const bracketSchema = z.object({ grandFinalType: z.enum(["simple", "double"]), }); -const teamSchema = z.object({ - teams: z.array(z.string().min(1)), -}); - const storage = new InMemoryDatabase(); const manager = new BracketsManager(storage); @@ -50,6 +46,24 @@ export default function Page() { const [stageData, setStageData] = useState(null); const [info, setInfo] = useState(null); const [isBracketsViewerReady, setIsBracketsViewerReady] = useState(false); + const [teams, setTeams] = useState(""); + const [error, setError] = useState(""); + + const handleInputChange = (e) => { + setTeams(e.target.value); + setError(""); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + if (isNaN(teams) || teams === "") { + setError("Please enter a valid number."); + } else { + onTeamSubmit(teams); + setTeams(""); + } + }; const bracketForm = useForm({ resolver: zodResolver(bracketSchema), @@ -61,35 +75,23 @@ export default function Page() { }, }); - const teamForm = useForm({ - resolver: zodResolver(teamSchema), - defaultValues: { - teams: ["", "", "", ""], - }, - }); - function onBracketSubmit(values) { setBracketInfo(values); setBracketCreated(true); } function onTeamSubmit(values) { - if (values.teams.length < 4) { - toast.error("Please enter at least 4 team names."); + if (values < 4) { + toast.error("Number of teams must be greater than 4"); return; - } - if ((values.teams.length & (values.teams.length - 1)) !== 0) { + } else if ((values & (values - 1)) !== 0) { toast.error("Number of teams must be a power of 2 (e.g. 4, 8, 16, etc.)"); return; } - const uniqueTeams = new Set(values.teams); - if (uniqueTeams.size !== values.teams.length) { - toast.error("Team names must be unique."); - return; - } + const teams = Array.from({ length: values }, (_, i) => `Team${i + 1}`); - const res = { ...bracketInfo, ...values }; + const res = { ...bracketInfo, teams }; setInfo(res); console.log("Bracket Info", JSON.stringify(info, null, 2)); @@ -133,56 +135,54 @@ export default function Page() { async function rerendering() { if (!isBracketsViewerReady || !stageData) return; - try { - const bracketsViewerNode = document.querySelector(".brackets-viewer"); - bracketsViewerNode?.replaceChildren(); - - window.bracketsViewer.onMatchClicked = async (match) => { - try { - await manager.update.match({ - id: match.id, - opponent1: { score: 5 }, - opponent2: { score: 7, result: "win" }, - }); - } catch (error) {} - const tourneyData2 = await manager.get.currentMatches(0); - const tourneyData = await manager.get.stageData(0); - setStageData(tourneyData); - }; + // window.bracketsViewer.onMatchClicked = async (match) => { + // try { + // await manager.update.match({ + // id: match.id, + // opponent1: { score: 5 }, + // opponent2: { score: 7, result: "win" }, + // }); + // } catch (error) {} + // const tourneyData2 = await manager.get.currentMatches(0); + // const tourneyData = await manager.get.stageData(0); + // setStageData(tourneyData); + // }; - if (stageData.participant) { - window.bracketsViewer.setParticipantImages( - stageData.participant.map((participant) => ({ - participantId: participant.id, - imageUrl: "https://github.githubassets.com/pinned-octocat.svg", - })), - ); - } + window.bracketsViewer.setParticipantImages( + stageData.participant.map((participant) => ({ + participantId: participant.id, + imageUrl: "https://github.githubassets.com/pinned-octocat.svg", + })), + ); - window.bracketsViewer.render( - { - stages: stageData.stage, - matches: stageData.match, - matchGames: stageData.match_game, - participants: stageData.participant, - }, - { - customRoundName: (info, t) => { - if (info.fractionOfFinal === 1 / 2) { + await window.bracketsViewer.render( + { + stages: stageData.stage, + matches: stageData.match, + matchGames: stageData.match_game, + participants: stageData.participant, + }, + { + customRoundName: (info, t) => { + if (info.fractionOfFinal === 1 / 2) { + if (info.groupType === "single-bracket") { return "Semi Finals"; + } else { + return `${t(`abbreviations.${info.groupType}`)} Semi Finals`; } - if (info.fractionOfFinal === 1 / 4) { - return "Quarter Finals"; - } - if (info.finalType === "grand-final") { - return `Grand Final`; - } - }, + } }, - ); - } catch (error) { - console.error("Error during rerendering:", error); - } + }, + { + onMatchClick: (match) => console.log("A match was clicked", match), + selector: "#example", + participantOriginPlacement: "before", + separatedChildCountLabel: true, + showSlotsOrigin: true, + showLowerBracketSlotsOrigin: true, + highlightParticipantOnHover: true, + }, + ); } useEffect(() => { @@ -203,13 +203,6 @@ export default function Page() { } }, [isBracketsViewerReady, stageData]); - const removeParticipant = (index) => { - const updatedTeams = teamForm - .getValues("teams") - .filter((_, i) => i !== index); - teamForm.setValue("teams", updatedTeams); - }; - return (
@@ -323,67 +316,29 @@ export default function Page() { ) : ( -
- -

Enter Team Names

-

- Please enter at least 4 team names. -

- {teamForm.watch("teams").map((_, index) => ( - ( - -
-
- - Team {index + 1} - -
- - - - -
- - )} - /> - ))} + +

Enter Number of Teams

+

+ The number of teams must be a power of 2 (e.g., 4, 8, 16, etc.). +

+ + {error &&

{error}

} +
-
- -
- - +
+ )}
{showBrackets ? ( From 10a38ca520870d299f8724b7725c5d05f3ea7b06 Mon Sep 17 00:00:00 2001 From: thornxyz Date: Tue, 7 Jan 2025 01:44:02 +0530 Subject: [PATCH 2/2] bye logic --- app/createBracket/page.jsx | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/app/createBracket/page.jsx b/app/createBracket/page.jsx index 3877525..182010d 100644 --- a/app/createBracket/page.jsx +++ b/app/createBracket/page.jsx @@ -84,9 +84,6 @@ export default function Page() { if (values < 4) { toast.error("Number of teams must be greater than 4"); return; - } else if ((values & (values - 1)) !== 0) { - toast.error("Number of teams must be a power of 2 (e.g. 4, 8, 16, etc.)"); - return; } const teams = Array.from({ length: values }, (_, i) => `Team${i + 1}`); @@ -106,12 +103,22 @@ export default function Page() { async function rendering() { if (!info) return; + const teamArray = info.teams; + const len = teamArray.length; + const nearestPowerOf2 = Math.pow(2, Math.ceil(Math.log2(len))); + const byesCount = nearestPowerOf2 - len; + + const paddedTeams = [ + ...teamArray, + ...Array.from({ length: byesCount }, (_, i) => `Bye ${i + 1}`), + ]; + try { await manager.create.stage({ name: info.tournament_name, tournamentId: 0, type: info.format, - seeding: info.teams, + seeding: paddedTeams, settings: { consolationFinal: info.consolationFinal, grandFinal: info.grandFinalType, @@ -135,14 +142,20 @@ export default function Page() { async function rerendering() { if (!isBracketsViewerReady || !stageData) return; + // const bracketsViewerNode = document.querySelector(".brackets-viewer"); + // bracketsViewerNode?.replaceChildren(); + // window.bracketsViewer.onMatchClicked = async (match) => { + // console.log("Match clicked", match); // try { // await manager.update.match({ // id: match.id, // opponent1: { score: 5 }, // opponent2: { score: 7, result: "win" }, // }); - // } catch (error) {} + // } catch (error) { + // console.error("Error during match update:", error); + // } // const tourneyData2 = await manager.get.currentMatches(0); // const tourneyData = await manager.get.stageData(0); // setStageData(tourneyData); @@ -173,15 +186,6 @@ export default function Page() { } }, }, - { - onMatchClick: (match) => console.log("A match was clicked", match), - selector: "#example", - participantOriginPlacement: "before", - separatedChildCountLabel: true, - showSlotsOrigin: true, - showLowerBracketSlotsOrigin: true, - highlightParticipantOnHover: true, - }, ); } @@ -317,10 +321,7 @@ export default function Page() { ) : (
-

Enter Number of Teams

-

- The number of teams must be a power of 2 (e.g., 4, 8, 16, etc.). -

+

Enter Number of Teams