function MainComponent() { const [betResult, setBetResult] = React.useState(""); const [totalBets, setTotalBets] = React.useState({ "1": 0, "X": 0, "2": 0 }); const [userBet, setUserBet] = React.useState({ option: "", amount: 0 }); const handleSubmit = (e)=>{ e.preventDefault(); const updatedBets = { ...totalBets, [userBet.option]: totalBets[userBet.option] + userBet.amount }; setTotalBets(updatedBets); const winningAmount = Object.keys(updatedBets).reduce((acc, cur)=>acc + updatedBets[cur], 0); if (betResult === userBet.option) { alert(`You won! Your prize is ${Math.round(userBet.amount / updatedBets[betResult] * winningAmount)} points.`); } else { alert("Unfortunately, your bet did not win. Please try again."); } }; const handleOptionChange = (e)=>{ setUserBet({ ...userBet, option: e.target.value }); }; const handleAmountChange = (e)=>{ setUserBet({ ...userBet, amount: parseInt(e.target.value, 10) }); }; const handleResultChange = (e)=>{ setBetResult(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Soccer Betting App"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-sm", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "match", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Match"), /*#__PURE__*/ React.createElement("input", { name: "match", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", type: "text", placeholder: "Enter Match Teams", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-bold text-sm mb-2 block font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Your Bet"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bet", value: "1", className: "form-radio", onChange: handleOptionChange, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "1 (Home Win)"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bet", value: "X", className: "form-radio", onChange: handleOptionChange, __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "X (Draw)"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bet", value: "2", className: "form-radio", onChange: handleOptionChange, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "2 (Away Win)"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "betAmount", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Bet Amount"), /*#__PURE__*/ React.createElement("input", { name: "betAmount", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", type: "number", placeholder: "Enter Bet Amount", onChange: handleAmountChange, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "submit", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Place Bet"))), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Choose 1 for Home Win, X for Draw, or 2 for Away Win and place your bet amount."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Winners will share the total bet amount proportionally based on their bet size."))); }