function MainComponent() { const [players, setPlayers] = React.useState([]); const [databasePlayers, setDatabasePlayers] = React.useState([]); const [teams, setTeams] = React.useState([]); const [playerName, setPlayerName] = React.useState(''); const [playerRating, setPlayerRating] = React.useState(1); const [editingIndex, setEditingIndex] = React.useState(null); const [totalRating, setTotalRating] = React.useState(0); const addPlayerToDatabase = ()=>{ if (playerName.trim()) { const newPlayer = { name: playerName, rating: Number(playerRating) }; setDatabasePlayers([ ...databasePlayers, newPlayer ]); setPlayerName(''); setPlayerRating(1); } }; const addPlayer = (player)=>{ setPlayers([ ...players, player ]); }; const editPlayer = (index)=>{ setPlayerName(players[index].name); setPlayerRating(players[index].rating); setEditingIndex(index); }; const updatePlayer = ()=>{ const updatedPlayers = players.map((player, index)=>index === editingIndex ? { name: playerName, rating: Number(playerRating) } : player); setPlayers(updatedPlayers); setEditingIndex(null); setPlayerName(''); setPlayerRating(1); }; const deletePlayer = (index)=>{ setPlayers(players.filter((_, i)=>i !== index)); }; const generateTeams = ()=>{ if (players.length < 2) return; const shuffledPlayers = [ ...players ].sort(()=>0.5 - Math.random()); const [teamA, teamB] = [ [], [] ]; let [ratingA, ratingB] = [ 0, 0 ]; while(shuffledPlayers.length){ const player = shuffledPlayers.pop(); if (ratingA <= ratingB && teamA.length < Math.ceil(players.length / 2) || teamB.length === Math.ceil(players.length / 2)) { teamA.push(player); ratingA += player.rating; } else { teamB.push(player); ratingB += player.rating; } } setTeams([ teamA, teamB ]); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto p-6 bg-gray-100", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Soccer Team Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "playerName", value: playerName, onChange: (e)=>setPlayerName(e.target.value), placeholder: "Player Name", className: "p-2 rounded border w-full mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "playerRating", value: playerRating, onChange: (e)=>setPlayerRating(Number(e.target.value)), className: "p-2 rounded border w-full mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: 1, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { value: 2, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("option", { value: 3, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "3")), /*#__PURE__*/ React.createElement("button", { onClick: editingIndex !== null ? updatePlayer : addPlayerToDatabase, className: "bg-blue-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, editingIndex !== null ? 'Update Player' : 'Add to Database')), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Database Players"), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, databasePlayers.map((player, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, player.name, " - Rating: ", player.rating), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addPlayer(player), className: "bg-green-500 text-white p-1 rounded", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Add to Team"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Selected Players"), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, players.map((player, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, player.name, " - Rating: ", player.rating), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>editPlayer(index), className: "bg-yellow-500 text-white p-1 rounded mr-2", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deletePlayer(index), className: "bg-red-500 text-white p-1 rounded", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "Delete")))))), /*#__PURE__*/ React.createElement("button", { onClick: generateTeams, className: "bg-green-500 text-white p-2 rounded w-full mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, "Generate Teams"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, teams.map((team, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Team ", index + 1), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, team.map((player, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, className: "mb-1", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, player.name, " - Rating: ", player.rating))))))); }