feat(repair): introduce focus bubble shroud for repair mini-game

Adds a dark expanding sphere around the repair model when the player
enters the immersive repair phases (fragmented / scanning / repairing /
reassembling). The bubble grows from 0 to 10m using GSAP expo.out over
2.5s and reverses on focus end, visually isolating the player from the
surrounding map.

- New useRepairFocusStore tracks active state + world center.
- New RepairFocusBubble renders a BackSide sphere shell + a soft cocoon
  decor pass (grid floor + directional light + ambient) inside.
- RepairGame drives setFocus from its lifecycle effect.
- Mounted in both GameStageContent and TestMap so behaviour matches in
  the production scene and the physics test scene.

Also drops the now-unused EBIKE_CONFIG_KEY constant in
GameStageContent.tsx (leftover from a previous remount-key strategy).
This commit is contained in:
Tom Boullay
2026-06-02 22:57:18 +02:00
parent be5d03a30c
commit 220a661d6d
5 changed files with 193 additions and 7 deletions
+3
View File
@@ -5,6 +5,7 @@ import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
import { Line } from "@react-three/drei";
import { Ebike } from "@/components/ebike/Ebike";
import { RepairGame } from "@/components/three/gameplay/RepairGame";
import { RepairFocusBubble } from "@/components/three/gameplay/RepairFocusBubble";
import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
import { AnimatedModel } from "@/components/three/models/AnimatedModel";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
@@ -248,6 +249,8 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
))}
</Physics>
<RepairFocusBubble />
{/* Dynamic Futuristic 3D GPS Dashboard Preview */}
<group
position={TEST_SCENE_GPS_PREVIEW_POSITION}