function MainComponent() { const [oddsFormat, setOddsFormat] = useState('American'); const [betType, setBetType] = useState('2-Way'); const [bets, setBets] = useState([ { market: 'Original bet', odds: '', stake: '', payout: 0 }, { market: 'Hedge', odds: '', stake: '', payout: 0 } ]); useEffect(()=>{ setBets(betType === '2-Way' ? [ { market: 'Original bet', odds: '', stake: '', payout: 0 }, { market: 'Hedge', odds: '', stake: '', payout: 0 } ] : [ { market: 'Original bet', odds: '', stake: '', payout: 0 }, { market: 'Hedge', odds: '', stake: '', payout: 0 }, { market: '3-way Hedge', odds: '', stake: '', payout: 0 } ]); }, [ betType ]); const convertToDecimal = (odds, format)=>{ if (!odds) return 0; if (format === 'Decimal') return parseFloat(odds); if (format === 'Fractional') { const [num, den] = odds.split('/'); return parseInt(num) / parseInt(den) + 1; } const numOdds = parseFloat(odds); return numOdds >= 0 ? 1 + numOdds / 100 : 1 - 100 / numOdds; }; const calculatePayout = (stake, odds)=>{ if (!stake || !odds) return 0; const numStake = parseFloat(stake); const decimalOdds = convertToDecimal(odds, oddsFormat); return numStake * decimalOdds; }; const calculateRequiredStake = (targetPayout, odds)=>{ if (!targetPayout || !odds) return ''; const decimalOdds = convertToDecimal(odds, oddsFormat); return (targetPayout / decimalOdds).toFixed(2); }; const updateBet = (index, field, value)=>{ const newBets = [ ...bets ]; newBets[index] = { ...newBets[index], [field]: value }; if (field === 'odds' || field === 'stake') { if (index === 0) { const firstPayout = calculatePayout(newBets[0].stake, newBets[0].odds); newBets[0].payout = firstPayout; if (newBets[1].odds) { newBets[1].stake = calculateRequiredStake(firstPayout, newBets[1].odds); newBets[1].payout = firstPayout; if (betType === '3-Way' && newBets[2].odds) { newBets[2].stake = calculateRequiredStake(firstPayout, newBets[2].odds); newBets[2].payout = firstPayout; } } } else { newBets[index].payout = calculatePayout(newBets[index].stake, newBets[index].odds); } } setBets(newBets); }; const clearAll = ()=>{ setBets(betType === '2-Way' ? [ { market: 'Original bet', odds: '', stake: '', payout: 0 }, { market: 'Hedge', odds: '', stake: '', payout: 0 } ] : [ { market: 'Original bet', odds: '', stake: '', payout: 0 }, { market: 'Hedge', odds: '', stake: '', payout: 0 }, { market: '3-way Hedge', odds: '', stake: '', payout: 0 } ]); }; const totalStake = bets.reduce((sum, bet)=>sum + (parseFloat(bet.stake) || 0), 0); const totalPayout = bets[0].payout || 0; const profit = totalPayout - totalStake; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-4 md:p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl w-full space-y-6 bg-[#2196F3] rounded-2xl p-8 border border-blue-300", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/db1f2fe5-dc1e-4f91-9fe9-d2927fa43aa5/-/format/auto/", alt: "Betstamp Logo", className: "h-24 mx-auto mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-white text-center font-inter", __source: { fileName: "", lineNumber: 96, columnNumber: 1 }, __self: this }, "Arbitrage Calculator"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-center font-inter", __source: { fileName: "", lineNumber: 99, columnNumber: 1 }, __self: this }, "Enter your odds and stakes to calculate potential arbitrage opportunities. The calculator will automatically adjust stakes to ensure equal profit across all outcomes."), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2196F3] rounded-lg p-4 flex flex-wrap items-center gap-4", __source: { fileName: "", lineNumber: 103, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "bg-white border border-blue-300 rounded-md px-3 py-2 font-inter", value: oddsFormat, onChange: (e)=>setOddsFormat(e.target.value), __source: { fileName: "", lineNumber: 104, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, "American"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, "Decimal"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, "Fractional")), /*#__PURE__*/ React.createElement("div", { className: "flex border border-blue-300 rounded-md bg-white", __source: { fileName: "", lineNumber: 114, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-inter ${betType === '2-Way' ? 'bg-[#2196F3] text-white' : 'text-[#2196F3]'}`, onClick: ()=>setBetType('2-Way'), __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, "2-Way"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-inter ${betType === '3-Way' ? 'bg-[#2196F3] text-white' : 'text-[#2196F3]'}`, onClick: ()=>setBetType('3-Way'), __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, "3-Way")), /*#__PURE__*/ React.createElement("button", { className: "ml-auto px-4 py-2 border border-blue-300 rounded-md font-inter bg-white text-[#2196F3] hover:bg-[#2196F3] hover:text-white", onClick: clearAll, __source: { fileName: "", lineNumber: 129, columnNumber: 3 }, __self: this }, "Clear All")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2196F3] rounded-2xl p-4", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2196F3] rounded-lg p-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 font-bold mb-4 font-inter text-white", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Market"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Odds"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "Stake ($)"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "Payout ($)")), bets.map((bet, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "grid grid-cols-4 gap-4 mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-inter text-white", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, bet.market), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full bg-white border border-blue-300 rounded-md px-3 py-2 font-inter", value: bet.odds, onChange: (e)=>updateBet(index, 'odds', e.target.value), placeholder: oddsFormat === 'American' ? '+100' : oddsFormat === 'Decimal' ? '2.00' : '1/1', __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full bg-white border border-blue-300 rounded-md px-3 py-2 font-inter", value: bet.stake, onChange: (e)=>updateBet(index, 'stake', e.target.value), placeholder: "0.00", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-md px-3 py-2 font-inter text-[#2196F3]", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "$", bet.payout.toFixed(2)))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-4", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-inter text-[#2196F3] mb-2", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "Total Stake"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-inter text-[#2196F3]", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "$", totalStake.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-inter text-[#2196F3] mb-2", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Total Payout"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-inter text-[#2196F3]", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "$", totalPayout.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-4", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-inter text-[#2196F3] mb-2", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Profit"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-inter text-[#2196F3]", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "$", profit.toFixed(2)))))); }