INFILTRATION: Fix React warnings (#1423)

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();
+      onFinish();
-      return;
     }
-    setTimeout(() => setX(x - 1), 300);
+  }, [x, onFinish]);
-  });
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setX((previousValue) => previousValue - 1);
+    }, 300);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
 
   return (
     <Paper sx={{ p: 1, textAlign: "center" }}>

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 ? (
-    <ProgressBar variant="determinate" value={v} color="primary" />
+    <ProgressBar variant="determinate" value={Math.max(v, 0)} color="primary" />
   ) : (
     <Paper sx={{ p: 1, mb: 1 }}>
-      <ProgressBar variant="determinate" value={v} color="primary" />
+      <ProgressBar variant="determinate" value={Math.max(v, 0)} color="primary" />
     </Paper>
   );
 }