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:
@@ -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([
|
||||
|
||||
Reference in New Issue
Block a user