feat: rely on state mgr instead of hardcoded loop count

src/app/fear/scene-components/creature.tsx

@@ -15,30 +15,29 @@ export default function TheCreature() {
     const [isSpawned, setIsSpawned] = useState(false);
 
     const globalDistance = useRef<number>(32);
-    const [currentLoop, setCurrentLoop] = useState(fearState.loopCount);
+    const [finaleTriggered, setFinaleTriggered] = useState(fearState.finaleTriggered);
 
     const audioPlaying = useRef<boolean>(false);
 
     useEffect(() => {
         const unsubscribe = fearState.subscribe(() => {
-            setCurrentLoop(fearState.loopCount);
+            setFinaleTriggered(fearState.finaleTriggered);
 
-            if (fearState.loopCount < 4) {
+            if (!fearState.finaleTriggered) {
                 setIsSpawned(false);
                 setHasTriggered(false);
                 globalDistance.current = 32;
                 audioPlaying.current = false;
 
-                if (audioRef.current && audioRef.current.isPlaying) {
+                if (audioRef.current && audioRef.current.isPlaying)
                     audioRef.current.stop();
             }
-            }
         });
         return () => unsubscribe();
     }, []);
 
     useFrame((state, delta) => {
-        if (fearState.loopCount < 4) return;
+        if (!fearState.finaleTriggered) return;
 
         const creature = meshRef.current;
         if (!creature) return;
@@ -88,7 +87,7 @@ export default function TheCreature() {
     return (
         <mesh
             ref={meshRef}
-            visible={currentLoop >= 4}
+            visible={finaleTriggered}
         >
             <planeGeometry args={[3.0, 4.8]} />
             <meshBasicMaterial
@@ -98,7 +97,7 @@ export default function TheCreature() {
                 side={THREE.DoubleSide}
             />
 
-            {currentLoop >= 4 && (
+            {finaleTriggered && (
                 <PositionalAudio
                     url="fear/snd/riser.mp3"
                     ref={audioRef}