diff --git a/src/Infiltration/ui/Countdown.tsx b/src/Infiltration/ui/Countdown.tsx index 00d068ba6..cb344b819 100644 --- a/src/Infiltration/ui/Countdown.tsx +++ b/src/Infiltration/ui/Countdown.tsx @@ -5,15 +5,23 @@ interface IProps { onFinish: () => void; } -export function Countdown(props: IProps): React.ReactElement { +export function Countdown({ onFinish }: IProps): React.ReactElement { const [x, setX] = useState(3); + useEffect(() => { if (x === 0) { - props.onFinish(); - return; + onFinish(); } - setTimeout(() => setX(x - 1), 300); - }); + }, [x, onFinish]); + + useEffect(() => { + const id = setInterval(() => { + setX((previousValue) => previousValue - 1); + }, 300); + return () => { + clearInterval(id); + }; + }, []); return ( diff --git a/src/Infiltration/ui/GameTimer.tsx b/src/Infiltration/ui/GameTimer.tsx index 5821cdddc..98e081894 100644 --- a/src/Infiltration/ui/GameTimer.tsx +++ b/src/Infiltration/ui/GameTimer.tsx @@ -23,10 +23,15 @@ export function GameTimer({ const totalMillis = (!ignoreAugment_WKSharmonizer && Player.hasAugmentation(AugmentationName.WKSharmonizer, true) ? 1.3 : 1) * millis; + useEffect(() => { + if (v <= 0) { + onExpire(); + } + }, [v, onExpire]); + useEffect(() => { const intervalId = setInterval(() => { setV((old) => { - if (old <= 0) onExpire(); return old - (tick / totalMillis) * 100; }); }, tick); @@ -40,10 +45,10 @@ export function GameTimer({ // TODO(hydroflame): there's like a bug where it triggers the end before the // bar physically reaches the end return noPaper ? ( - + ) : ( - + ); }