import { useState, useEffect } from 'react'; import { Calculator, Info, HelpCircle } from 'lucide-react'; const EachWayCalculator = () => { const [stake, setStake] = useState(10); const [oddsFormat, setOddsFormat] = useState('fractional'); const [fractionalOdds, setFractionalOdds] = useState({ numerator: 5, denominator: 1 }); const [decimalOdds, setDecimalOdds] = useState(6); const [americanOdds, setAmericanOdds] = useState(500); const [placesOffered, setPlacesOffered] = useState(3); const [placeTerms, setPlaceTerms] = useState('1/4'); const [showTooltip, setShowTooltip] = useState(false); const [tooltipContent, setTooltipContent] = useState(''); const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }); // Calculation results const [totalStake, setTotalStake] = useState(0); const [winReturn, setWinReturn] = useState(0); const [placeReturn, setPlaceReturn] = useState(0); const [totalWinReturn, setTotalWinReturn] = useState(0); const [totalPlaceReturn, setTotalPlaceReturn] = useState(0); const [winProfit, setWinProfit] = useState(0); const [placeProfit, setPlaceProfit] = useState(0); // Convert between odds formats useEffect(() => { if (oddsFormat === 'fractional') { const fracValue = fractionalOdds.numerator / fractionalOdds.denominator; setDecimalOdds(fracValue + 1); setAmericanOdds(fracValue > 0 ? Math.round(fracValue * 100) : Math.round(-100 / fracValue)); } else if (oddsFormat === 'decimal') { const fracValue = decimalOdds - 1; if (fracValue > 0) { // Find the simplest fraction const gcd = (a, b) => b ? gcd(b, a % b) : a; const numerator = fracValue * 100; const denominator = 100; const divisor = gcd(numerator, denominator); setFractionalOdds({ numerator: numerator / divisor, denominator: denominator / divisor }); } else { setFractionalOdds({ numerator: 0, denominator: 1 }); } setAmericanOdds(fracValue > 0 ? Math.round(fracValue * 100) : Math.round(-100 / fracValue)); } else if (oddsFormat === 'american') { let fracValue; if (americanOdds > 0) { fracValue = americanOdds / 100; } else { fracValue = -100 / americanOdds; } setDecimalOdds(fracValue + 1); // Find the simplest fraction const gcd = (a, b) => b ? gcd(b, a % b) : a; const numerator = fracValue * 100; const denominator = 100; const divisor = gcd(numerator, denominator); setFractionalOdds({ numerator: numerator / divisor, denominator: denominator / divisor }); } }, [oddsFormat, fractionalOdds, decimalOdds, americanOdds]); // Calculate returns useEffect(() => { // Calculate total stake (double the unit stake for each way) const calculatedTotalStake = stake * 2; setTotalStake(calculatedTotalStake); // Get decimal odds for calculations let effectiveOdds; if (oddsFormat === 'fractional') { effectiveOdds = fractionalOdds.numerator / fractionalOdds.denominator + 1; } else if (oddsFormat === 'decimal') { effectiveOdds = decimalOdds; } else { if (americanOdds > 0) { effectiveOdds = americanOdds / 100 + 1; } else { effectiveOdds = -100 / americanOdds + 1; } } // Calculate place terms as decimal const placeTermsDecimal = parseFloat(placeTerms.split('/')[0]) / parseFloat(placeTerms.split('/')[1]); // Calculate returns const calculatedWinReturn = stake * effectiveOdds; const calculatedPlaceReturn = stake * (1 + (effectiveOdds - 1) * placeTermsDecimal); setWinReturn(calculatedWinReturn); setPlaceReturn(calculatedPlaceReturn); // Total returns setTotalWinReturn(calculatedWinReturn + calculatedPlaceReturn); setTotalPlaceReturn(calculatedPlaceReturn); // Profits setWinProfit(calculatedWinReturn + calculatedPlaceReturn - calculatedTotalStake); setPlaceProfit(calculatedPlaceReturn - calculatedTotalStake); }, [stake, oddsFormat, fractionalOdds, decimalOdds, americanOdds, placeTerms]); const handleTooltip = (content, event) => { setTooltipContent(content); setTooltipPosition({ x: event.clientX, y: event.clientY }); setShowTooltip(true); }; const hideTooltip = () => { setShowTooltip(false); }; return (

Each Way Calculator

handleTooltip('An Each Way bet consists of two parts: one bet on your selection to win, and another bet on it to place (finish in the top positions).', e)} onMouseLeave={hideTooltip} >

Calculate potential returns for Each Way bets in horse racing and other sports

{/* Input Section */}

Bet Details

{/* Stake Input */}

Stake per part (£)

setStake(parseFloat(e.target.value) || 0)} className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" min="0" step="0.1" />

handleTooltip('This is the amount you bet on each part (win and place). Your total stake will be double this amount.', e)} onMouseLeave={hideTooltip} >

{/* Odds Format Selection */}

Odds Format

{/* Odds Input */}

Odds {oddsFormat === 'fractional' && (

setFractionalOdds({...fractionalOdds, numerator: parseInt(e.target.value) || 0})} className="w-full p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" min="0" />

setFractionalOdds({...fractionalOdds, denominator: parseInt(e.target.value) || 1})} className="w-full p-3 border border-gray-300 rounded-r-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" min="1" />

)} {oddsFormat === 'decimal' && ( setDecimalOdds(parseFloat(e.target.value) || 1)} className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" min="1" step="0.01" /> )} {oddsFormat === 'american' && ( setAmericanOdds(parseInt(e.target.value) || 0)} className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" /> )}

{/* Places Offered */}

Places Offered

{/* Place Terms */}

Place Terms

handleTooltip('Place terms determine what fraction of the win odds are paid for a place finish. For example, 1/4 odds means you get 1/4 of the win odds if your selection places.', e)} onMouseLeave={hideTooltip} > What are place terms?

{/* Results Section */}

Calculation Results

Total Stake: £{totalStake.toFixed(2)}

(£{stake.toFixed(2)} win + £{stake.toFixed(2)} place)

{/* If Selection Wins */}

If Selection Wins

Win Return: £{winReturn.toFixed(2)}

Place Return: £{placeReturn.toFixed(2)}

Total Return: £{totalWinReturn.toFixed(2)}

Profit: £{winProfit.toFixed(2)}

{/* If Selection Only Places */}

If Selection Only Places

Place Return: £{placeReturn.toFixed(2)}

Total Return: £{totalPlaceReturn.toFixed(2)}

= 0 ? '#1d4ed8' : '#b91c1c' }}> Profit: £{placeProfit.toFixed(2)}

How Each Way Betting Works

An Each Way bet consists of two equal parts: one on your selection to win, and one on it to place.
If your selection wins, you win both parts of the bet.
If your selection only places, you lose the win part but win the place part.
Place terms determine what fraction of the win odds are paid for a place finish.

{/* Tooltip */} {showTooltip && (

{tooltipContent}

)}

); }; export default EachWayCalculator;

Each Way Calculator

what is Each Way Calculator