function MainComponent() { const [draft, setDraft] = React.useState([]); const [userTeams, setUserTeams] = React.useState([]); const [currentPick, setCurrentPick] = React.useState(0); const [isDrafting, setIsDrafting] = React.useState(true); const totalTeams = 10; const maxPicksPerUser = 10; const handleDraftSchool = (school)=>{ if (draft.length < totalTeams * maxPicksPerUser && !draft.includes(school)) { setDraft([ ...draft, school ]); const teamIndex = currentPick % userTeams.length; updateTeamWithSchool(school, teamIndex); setCurrentPick((current)=>current + 1); if (currentPick + 1 === totalTeams * maxPicksPerUser) { setIsDrafting(false); } } }; const handleSubmitTeam = (e)=>{ e.preventDefault(); const teamName = e.target.teamName.value; setUserTeams([ ...userTeams, { teamName, draftedSchools: [] } ]); }; const updateTeamWithSchool = (school, teamIndex)=>{ const updatedUserTeams = userTeams.map((userTeam, index)=>{ if (index === teamIndex) { return { ...userTeam, draftedSchools: [ ...userTeam.draftedSchools, school ] }; } return userTeam; }); setUserTeams(updatedUserTeams); }; const draftingOrder = ()=>{ const order = []; for(let i = 0; i < maxPicksPerUser; i++){ const roundTeamNumbers = Array.from({ length: totalTeams }, (_, j)=>j); if (i % 2 === 0) { order.push(...roundTeamNumbers); } else { order.push(...roundTeamNumbers.reverse()); } } return order; }; const draftedSchoolsList = userTeams.flatMap((ut)=>ut.draftedSchools.map((school, index)=>/*#__PURE__*/ React.createElement("div", { key: school, style: { animationDuration: `${index + 1}s` }, className: "py-2 px-4 bg-[#f7f7f7] rounded shadow-md flex justify-between items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, `${index + 1}. ${school} (${ut.teamName})`)))); const draftEnabled = draft.length < totalTeams * maxPicksPerUser && isDrafting; const currentTeamIndex = draftingOrder()[currentPick % (totalTeams * maxPicksPerUser)]; const userTeamList = userTeams.map((userTeam, index)=>/*#__PURE__*/ React.createElement("div", { key: userTeam.teamName, className: "bg-[#ebebeb] p-4 rounded shadow-md mt-2", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, userTeam.teamName), userTeam.draftedSchools.map((school, index)=>/*#__PURE__*/ React.createElement("div", { key: `${index}-${school}`, className: "flex justify-between items-center border-t border-[#ccc] pt-2 mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, school))), index === currentTeamIndex && isDrafting && /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#00FF00]", __source: { fileName: "", lineNumber: 72, columnNumber: 52 }, __self: this }, "Drafting..."))); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmitTeam, className: "mb-6 flex gap-4 items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "teamName", placeholder: "Enter team name", className: "border-2 border-[#ccc] rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2 px-4 bg-green-500 hover:bg-green-700 text-white font-bold rounded", disabled: userTeams.length >= totalTeams, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Add Team")), userTeams.length === totalTeams && isDrafting ? /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 mb-4 bg-yellow-500 hover:bg-yellow-700 text-white font-bold rounded w-full", onClick: ()=>setIsDrafting(false), __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Finish Drafting") : null, draftEnabled ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2 mb-6", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, Array.from({ length: maxPicksPerUser * totalTeams }, (_, idx)=>`Division 1 School ${idx + 1}`).map((school)=>/*#__PURE__*/ React.createElement("button", { key: school, className: `py-2 px-4 ${draft.includes(school) ? 'bg-gray-200 text-gray-500 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700 text-white'} font-bold rounded`, onClick: ()=>handleDraftSchool(school), disabled: !draftEnabled || draft.includes(school), __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, school))) : null, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "User Teams"), userTeamList.length > 0 ? userTeamList : /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 123, columnNumber: 55 }, __self: this }, "No teams created yet")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Drafted Schools"), draftedSchoolsList.length > 0 ? draftedSchoolsList : /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 127, columnNumber: 67 }, __self: this }, "No schools drafted yet")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, ` @keyframes fadeInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } div[style*="animation-duration"] { animation-name: fadeInUp; animation-timing-function: ease-out; animation-fill-mode: both; } `)); }