diff --git a/src/app/fear/page.tsx b/src/app/fear/page.tsx index ca670a3..675a45d 100644 --- a/src/app/fear/page.tsx +++ b/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 }} > - - + + + + diff --git a/src/app/fear/scene-components/hallway.tsx b/src/app/fear/scene-components/hallway.tsx index d52b226..f8d3609 100644 --- a/src/app/fear/scene-components/hallway.tsx +++ b/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 */ diff --git a/src/app/fear/state.ts b/src/app/fear/state.ts index d6daddf..e01994b 100644 --- a/src/app/fear/state.ts +++ b/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(); },