From 6b901b364fb3d74260e4445a9a80fae446b5a936 Mon Sep 17 00:00:00 2001 From: aneesazc Date: Thu, 29 Aug 2024 17:49:40 +0530 Subject: [PATCH 1/2] improve bracket generator page --- components/TournamentBracket.jsx | 189 ++++++++++++++++++------------- public/double-elimination.png | Bin 0 -> 30271 bytes public/single-elimination.png | Bin 0 -> 23671 bytes 3 files changed, 109 insertions(+), 80 deletions(-) create mode 100644 public/double-elimination.png create mode 100644 public/single-elimination.png diff --git a/components/TournamentBracket.jsx b/components/TournamentBracket.jsx index 1b64096..d31ccbd 100644 --- a/components/TournamentBracket.jsx +++ b/components/TournamentBracket.jsx @@ -3,18 +3,32 @@ import React, { useState, useEffect } from "react"; import { generateBracket } from "../lib/generateBracket"; import html2canvas from "html2canvas"; +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "../@/components/ui/card"; +import { Button } from "../@/components/ui/button"; +import { Input } from "../@/components/ui/input"; +import Image from "next/image"; const TournamentBracket = () => { const [tournaments, setTournaments] = useState([]); const [selectedTournament, setSelectedTournament] = useState(""); const [tournamentName, setTournamentName] = useState(""); - const [tournamentType, setTournamentType] = useState("single"); - const [participants, setParticipants] = useState(["", ""]); + const [tournamentType, setTournamentType] = useState("single-elimination"); + const [participants, setParticipants] = useState(""); const [bracket, setBracket] = useState([]); const [isSetup, setIsSetup] = useState(false); const [isSaving, setIsSaving] = useState(false); const [isLoading, setIsLoading] = useState(true); + const formatImages = { + "single-elimination": "/single-elimination.png", + "double-elimination": "/double-elimination.png", + }; + useEffect(() => { const fetchTournaments = async () => { setIsLoading(true); @@ -56,11 +70,13 @@ const TournamentBracket = () => { alert("Please select a tournament."); return; } - const validParticipants = participants.filter((p) => p.trim() !== ""); + const participantsArray = participants.split("\n"); + const validParticipants = participantsArray.filter((p) => p.trim() !== ""); if (validParticipants.length < 2) { alert("Please enter at least 2 participants."); return; } + // Here you would typically set up the bracket based on the inputs setBracket(generateBracket(validParticipants)); setIsSetup(true); }; @@ -127,22 +143,82 @@ const TournamentBracket = () => { if (!isSetup) { return ( -
-

- Tournament Setup -

- -
- {isLoading ? ( -

Loading tournaments...

- ) : ( -
- +
+
+ {" "} +

+ Tournament Bracket Generator +

+
+

+ Tournament Format +

+
+ {Object.entries(formatImages).map(([format, imageSrc]) => ( + setTournamentType(format)} + > + {format.replace("-", +
+ + {format.replace("-", " ")} + +
+
+ ))} +
+
+
+
+ +