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
@@ -25,6 +25,7 @@ import type {
RepairScannedBrokenPart,
} from "@/types/gameplay/repairMission";
import { useGameStore } from "@/managers/stores/useGameStore";
import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
import { toVector3Scale } from "@/utils/three/scale";
@@ -110,6 +111,25 @@ export function RepairGame({
};
}, [mainState, mission, step]);
// Drive the global focus bubble: active during the immersive repair
// phases so the world dims/hides outside the dark sphere shroud.
const focusCenterX = snappedPosition[0];
const focusCenterY = snappedPosition[1];
const focusCenterZ = snappedPosition[2];
useEffect(() => {
const inFocusPhase =
mainState === mission && shouldFocusBubbleBeActive(step);
if (inFocusPhase) {
useRepairFocusStore
.getState()
.setFocus(true, [focusCenterX, focusCenterY, focusCenterZ]);
return () => {
useRepairFocusStore.getState().setFocus(false);
};
}
return undefined;
}, [mainState, mission, step, focusCenterX, focusCenterY, focusCenterZ]);
useEffect(() => {
if (mainState !== mission) return undefined;
@@ -214,6 +234,15 @@ function shouldKeepRepairRuntimeState(step: MissionStep): boolean {
return step === "repairing" || step === "reassembling" || step === "done";
}
function shouldFocusBubbleBeActive(step: MissionStep): boolean {
return (
step === "fragmented" ||
step === "scanning" ||
step === "repairing" ||
step === "reassembling"
);
}
function getRepairMissionModelPaths(config: RepairMissionConfig): string[] {
return [
...new Set([