function MainComponent() { const [attackerPokemon, setAttackerPokemon] = React.useState(''); const [defenderPokemon, setDefenderPokemon] = React.useState(''); const [attackStat, setAttackStat] = React.useState(''); const [defenseStat, setDefenseStat] = React.useState(''); const [movePower, setMovePower] = React.useState(''); const [damageResult, setDamageResult] = React.useState(''); const calculateDamage = (e)=>{ e.preventDefault(); const damage = Math.floor((2 * 100 / 5 + 2) * movePower * (attackStat / defenseStat) / 50) + 2; setDamageResult(damage); }; const pokemonOptions = Array.from({ length: 1000 }).fill(null).map((_, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: `Pokemon${index + 1}`, __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, "Pokemon ", index + 1)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7] font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#333333] mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Pokemon Battle Damage Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: calculateDamage, className: "w-full max-w-[500px] p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Attacker"), /*#__PURE__*/ React.createElement("select", { name: "attackerPokemon", value: attackerPokemon, onChange: (e)=>setAttackerPokemon(e.target.value), className: "shadow border rounded w-full py-2 px-3 text-gray-700", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, pokemonOptions)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Defender"), /*#__PURE__*/ React.createElement("select", { name: "defenderPokemon", value: defenderPokemon, onChange: (e)=>setDefenderPokemon(e.target.value), className: "shadow border rounded w-full py-2 px-3 text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, pokemonOptions)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "attackStat", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Attack Stat"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "attackStat", value: attackStat, onChange: (e)=>setAttackStat(e.target.value), className: "shadow border rounded w-full py-2 px-3 text-gray-700", min: "0", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "defenseStat", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Defense Stat"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "defenseStat", value: defenseStat, onChange: (e)=>setDefenseStat(e.target.value), className: "shadow border rounded w-full py-2 px-3 text-gray-700", min: "0", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "movePower", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Move Power"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "movePower", value: movePower, onChange: (e)=>setMovePower(e.target.value), className: "shadow border rounded w-full py-2 px-3 text-gray-700", min: "0", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#3498db] hover:bg-[#2980b9] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Calculate Damage")), damageResult !== '' && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Damage: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 44 }, __self: this }, damageResult))))); }