feat: move state updates to page root

src/app/fear/page.tsx

@@ -2,7 +2,7 @@
 
 import './page.css';
 
-import { Canvas, useThree } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { BrightnessContrast, EffectComposer, HueSaturation, Noise, Pixelation, Vignette } from "@react-three/postprocessing";
 import { Suspense, useEffect, useState } from "react";
 
@@ -53,6 +53,13 @@ function ListenerCreator() {
     return null;
 }
 
+function FearStateUpdater() {
+    useFrame((state, delta) => {
+        fearState.update(delta);
+    });
+    return null;
+}
+
 export default function Fear() {
     const [isRustActive, setIsRustActive] = useState(fearState.isRustActive);
     const [wasCaught, setWasCaught] = useState(fearState.isRustActive);
@@ -72,8 +79,10 @@ export default function Fear() {
             className='canvas'
             camera={{ position: [0, 3, -5], fov: 65, far: 100 }}
         >
-            <ListenerCreator/>
-            
+            <FearStateUpdater />
+
+            <ListenerCreator />
+
             <color attach="background" args={['#050505']} />
 
             <fogExp2 attach='fog' args={[0x050505, 0.035]} />

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

@@ -82,10 +82,6 @@ export default function Hallway() {
     useFrame((state, delta) => {
         const time = state.clock.elapsedTime;
 
-        fearState.update(delta);
-        if (fearState.isRustActive !== isRustActive)
-            setIsRustActive(fearState.isRustActive);
-
         /*
            lights
         */

src/app/fear/state.ts

@@ -8,7 +8,11 @@ export const FEAR_SETTINGS = {
     PLAYER_SPEED: 4,
     FLASHLIGHT_INTENSITY_BASE: 8,
     WALL_BUFFER: 0.6,
-    CREATURE_SPEED: 12,
+    CREATURE_SPEED: 8,
+
+    EVENT_NARROW_LOOP_COUNT: 1,
+    EVENT_RUST_LOOP_COUNT: 2,
+    EVENT_FINALE_LOOP_COUNT: 3
 };
 
 const listeners = new Set<() => void>();
@@ -30,10 +34,7 @@ export const fearState = {
     },
 
     update(delta: number) {
-        this.isRustActive = this.loopCount >= 3;
-        this.finaleTriggered = this.loopCount >= 4;
-
-        const targetWidth = this.loopCount >= 2 ? 2.5 : FEAR_SETTINGS.HALLWAY_WIDTH;
+        const targetWidth = this.loopCount >= FEAR_SETTINGS.EVENT_NARROW_LOOP_COUNT ? 2.5 : FEAR_SETTINGS.HALLWAY_WIDTH;
         const newWidth = THREE.MathUtils.lerp(this.currentWidth, targetWidth, 2 * delta);
 
         if (Math.abs(this.currentWidth - newWidth) > 0.001) {
@@ -44,6 +45,10 @@ export const fearState = {
 
     registerLoop(direction: 'forward' | 'backward') {
         this.loopCount += 1;
+
+        this.isRustActive = this.loopCount >= FEAR_SETTINGS.EVENT_RUST_LOOP_COUNT;
+        this.finaleTriggered = this.loopCount >= FEAR_SETTINGS.EVENT_FINALE_LOOP_COUNT;
+
         this.emit();
     },