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();
},