function AdminCourtInput({ value, onChange }) { return /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "number", placeholder: "Enter number of courts", name: "courts-count", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function AdminCourtInputStory() { const [courtsCount, setCourtsCount] = React.useState(0); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Demo of AdminCourtInput"), /*#__PURE__*/ React.createElement(AdminCourtInput, { value: courtsCount, onChange: (e)=>setCourtsCount(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [numPlayers, setNumPlayers] = React.useState(null); const [numCourts, setNumCourts] = React.useState(1); const [players, setPlayers] = React.useState([]); const [currentGame, setCurrentGame] = React.useState([]); const [scores, setScores] = React.useState({}); const [gameHistory, setGameHistory] = React.useState([]); React.useEffect(()=>{ const timer = setTimeout(()=>{ if (numCourts === null || numCourts === 0) { setNumCourts(1); } }, 30000); return ()=>clearTimeout(timer); }, [ numCourts ]); const handleSubmit = (e)=>{ e.preventDefault(); const playersArray = Array.from({ length: numPlayers }, (_, i)=>({ id: i + 1, score: 0 })); setPlayers(playersArray); generateNextGame(playersArray, []); }; const generateNextGame = (players, playedPlayers)=>{ const remainingPlayers = players.filter((player)=>!playedPlayers.includes(player.id)); if (remainingPlayers.length < 4) { alert("All players have played."); return; } const randomPlayers = remainingPlayers.sort(()=>0.5 - Math.random()).slice(0, 4); setCurrentGame(randomPlayers); }; const handleGameEnd = (winnerIds)=>{ const updatedScores = { ...scores }; winnerIds.forEach((id)=>{ if (!updatedScores[id]) { updatedScores[id] = 0; } updatedScores[id] += 1; }); const losersIds = currentGame.map((p)=>p.id).filter((id)=>!winnerIds.includes(id)); losersIds.forEach((id)=>{ if (!updatedScores[id]) { updatedScores[id] = 0; } updatedScores[id] -= 1; }); setScores(updatedScores); setGameHistory([ ...gameHistory, { game: currentGame, scores: updatedScores } ]); const playedPlayers = currentGame.map((p)=>p.id); generateNextGame(players, playedPlayers); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, !players.length ? /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-[90%] max-w-[400px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Pickleball Rotation Schedule"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "numPlayers", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Number of Players"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 p-2 border border-gray-300 rounded", type: "number", id: "numPlayers", name: "numPlayers", onChange: (e)=>setNumPlayers(Number(e.target.value)), required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "numCourts", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Number of Courts"), /*#__PURE__*/ React.createElement(AdminCourtInput, { value: numCourts, onChange: (e)=>setNumCourts(Number(e.target.value)), __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Generate Schedule")) : /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-[600px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Current Game"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-between mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, currentGame.map((player)=>/*#__PURE__*/ React.createElement("div", { key: player.id, className: "w-[45%] p-2 border border-gray-200 mb-2 rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, "Player ", player.id)))), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-green-500 text-white rounded font-roboto", onClick: ()=>handleGameEnd([ currentGame[0].id, currentGame[1].id ]), __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "End Game: Players ", currentGame[0].id, " & ", currentGame[1].id, " Won"))); }