feat: make finale text infinite

src/app/fear/scene-components/finale-text.tsx

@@ -1,35 +1,42 @@
 import { JSX, useEffect, useState } from "react"
-import { FEAR_SETTINGS, fearState } from "../state"
+import { fearState } from "../state"
 
 import './finale-text.css';
 
 export default function FinaleText() {
-    const [progression, setProgression] = useState(fearState.finaleProgression);
+    const [wasCaught, setWasCaught] = useState(fearState.wasCaught);
-    const [wasCaught, setWasCaught] = useState(fearState.isRustActive);
+    const [elements, setElements] = useState<JSX.Element[]>([]);
 
     useEffect(() => {
         const unsubscribe = fearState.subscribe(() => {
-            setProgression(fearState.finaleProgression);
             setWasCaught(fearState.wasCaught)
         });
         return () => unsubscribe();
-    });
+    }, []);
-
-    let elementCount = (FEAR_SETTINGS.EVENT_FINALE_TEXT_COUNT / FEAR_SETTINGS.EVENT_FINALE_DURATION) * progression;
-
-    let testElements: Array<JSX.Element> = [];
-
-    for (let x = 0; x < elementCount; x++)
-        testElements.push(<span className="finale-text" key={x}>the deal has been sealed</span>)
 
 
-    if (wasCaught)
+    useEffect(() => {
-        return (<>
+        if (!wasCaught)
-            <div className="finale-container">
+            return;
-                {testElements}
-            </div>
-            <div className="scanlines" />
-        </>)
 
-    return <></>
+        const interval = setInterval(() => {
+            setElements((prev) => [
+                ...prev,
+                <span className="finale-text" key={prev.length}>
+                    the deal has been sealed
+                </span>
+            ]);
+        }, 25);
+
+        return () => clearInterval(interval);
+    }, [wasCaught]);
+
+    if (!wasCaught) return null;
+
+    return (<>
+        <div className="finale-container">
+            {elements}
+        </div>
+        <div className="scanlines" />
+    </>)
 }

src/app/fear/state.ts

@@ -14,8 +14,7 @@ export const FEAR_SETTINGS = {
     EVENT_RUST_LOOP_COUNT: 4,
     EVENT_FINALE_LOOP_COUNT: 5,
 
-    EVENT_FINALE_DURATION: 3,
+    EVENT_FINALE_DURATION: 1,
-    EVENT_FINALE_TEXT_COUNT: 128,
 
     TEST_MODE: false
 };