function MainComponent() { const [selectedDice, setSelectedDice] = React.useState(''); const [result, setResult] = React.useState(''); const [possibleResults, setPossibleResults] = React.useState([]); const [customResult, setCustomResult] = React.useState(''); const rollDice = ()=>{ if (selectedDice > 0) { const roll = Math.floor(Math.random() * selectedDice) + 1; setResult(possibleResults[roll - 1]); } }; const handleDiceChange = (e)=>{ setSelectedDice(Number(e.target.value)); }; const handleResultChange = (e)=>{ setCustomResult(e.target.value); }; const addResult = ()=>{ setPossibleResults([ ...possibleResults, customResult ]); setCustomResult(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen space-y-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto space-y-2", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dice", className: "text-[#121212]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Dice sides:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "dice", value: selectedDice, onChange: handleDiceChange, className: "border rounded text-[#121212] bg-white mx-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customResult", className: "text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Add custom result:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "customResult", value: customResult, onChange: handleResultChange, className: "border rounded text-[#121212] bg-white mx-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addResult, className: "px-4 py-2 bg-[#007BFF] text-white rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("ul", { className: "list-disc", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, possibleResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, result)))), /*#__PURE__*/ React.createElement("button", { onClick: rollDice, className: "px-4 py-2 bg-[#007BFF] text-white rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Roll"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Result: ", result && /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 49, columnNumber: 28 }, __self: this }, result))); }