Суть игры: подбрасывание монетки. Есть некий баланс монет, который уменьшается или увеличивается в случае выигрыша или проигрыша. Проблема такова: почему-то баланс вне зависимости от того, какой исход игры уменьшается на первом ходе. Далее баланс обновляется корректно, но с задержкой в один ход. (то есть если у вас вначале проигрыш, а потом выигрыш, то тогда, когда баланс должен увеличится(выигрыш), он уменьшится. И только на следующем ходу увеличится.
function Game() {
const faces = ["heads", "tails"];
const [selectedFace, setSelectedFace] = useState("");
const [coinFlipResult, setCoinFlipResult] = useState(null);
const [balance, setBalance] = useState(500)
const [bet, setBet] = useState(0)
const flip = () => {
if(!selectedFace) return
let index;
if (Math.random() < 0.5) {
index = 0;
} else {
index = 1;
}
setCoinFlipResult(faces[index]);
};
const zeroingout = () => {
setCoinFlipResult(null)
setSelectedFace(null)
}
const changeBalance = () => {
if(!selectedFace || !coinFlipResult) return
if (coinFlipResult === selectedFace) {
setBalance(+balance + bet)
}
else {
setBalance(+balance - +bet)
}
}
console.log(coinFlipResult === selectedFace)
const showResult = () => {
if(!selectedFace || !coinFlipResult) return
if (coinFlipResult === selectedFace) {
return <p>you win</p>;
}
else {
return <p>you lost</p>;
}
};
return (
<div>
<p style={{left: '100px', position: 'absolute', marginTop: '5px'}}>Your balance: {balance}</p>
<input style={{left: '100px', position: 'absolute', marginTop: '25px'}}
placeholder="Сделайте ставку"
onChange={e => setBet(e.target.value)}/>
<div>
<h1>select a face</h1>
<button onClick={() => { zeroingout()
setSelectedFace("heads")}}>
heads
</button>
<button onClick={() => { zeroingout()
setSelectedFace("tails")}}>
tails
</button>
</div>
<p>you selected: {selectedFace}</p>
<button onClick={() => {
flip();
changeBalance();
}}>flip coin</button>
{showResult()}
</div>
);
}
export default Game```