feat(repair): hide vegetation and zone overlays during repair focus

When the repair focus bubble is active the vegetation system and zone
debug visuals are unmounted so trees and gizmos don't clip through the
dark sphere shroud. Terrain, water, sky, clouds and grass remain
visible behind the bubble per Option (a).
This commit is contained in:
Tom Boullay
2026-06-02 22:59:04 +02:00
parent 220a661d6d
commit ca6c8e00b6
2 changed files with 8 additions and 2 deletions
+5 -1
View File
@@ -11,6 +11,7 @@ import {
isMapModelVisible, isMapModelVisible,
useMapPerformanceStore, useMapPerformanceStore,
} from "@/managers/stores/useMapPerformanceStore"; } from "@/managers/stores/useMapPerformanceStore";
import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
import { SkyModel } from "@/components/three/world/SkyModel"; import { SkyModel } from "@/components/three/world/SkyModel";
import { CloudSystem } from "@/world/clouds/CloudSystem"; import { CloudSystem } from "@/world/clouds/CloudSystem";
import { FogSystem } from "@/world/fog/FogSystem"; import { FogSystem } from "@/world/fog/FogSystem";
@@ -24,6 +25,9 @@ export function Environment(): React.JSX.Element {
const groups = useMapPerformanceStore((state) => state.groups); const groups = useMapPerformanceStore((state) => state.groups);
const models = useMapPerformanceStore((state) => state.models); const models = useMapPerformanceStore((state) => state.models);
const showSky = isMapModelVisible("sky", { groups, models }); const showSky = isMapModelVisible("sky", { groups, models });
// Hide vegetation while the repair focus bubble is active so the cocoon
// shroud is not pierced by tall trees / bushes around the repair model.
const repairFocusActive = useRepairFocusStore((state) => state.active);
if (sceneMode === "physics") { if (sceneMode === "physics") {
return ( return (
@@ -52,7 +56,7 @@ export function Environment(): React.JSX.Element {
<WaterSystem /> <WaterSystem />
<CloudSystem /> <CloudSystem />
<GrassSystem /> <GrassSystem />
<VegetationSystem /> {repairFocusActive ? null : <VegetationSystem />}
</> </>
); );
} }
+3 -1
View File
@@ -16,6 +16,7 @@ import {
OUTRO_STAGE_ANCHOR, OUTRO_STAGE_ANCHOR,
} from "@/data/gameplay/gameStageAnchors"; } from "@/data/gameplay/gameStageAnchors";
import { useGameStore } from "@/managers/stores/useGameStore"; import { useGameStore } from "@/managers/stores/useGameStore";
import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore"; import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
import { isPylonNarrativeStep } from "@/types/gameplay/repairMission"; import { isPylonNarrativeStep } from "@/types/gameplay/repairMission";
import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission"; import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission";
@@ -86,6 +87,7 @@ export function GameStageContent(): React.JSX.Element {
const mainState = useGameStore((state) => state.mainState); const mainState = useGameStore((state) => state.mainState);
const pylonStep = useGameStore((state) => state.pylon.currentStep); const pylonStep = useGameStore((state) => state.pylon.currentStep);
const anchors = useRepairMissionAnchorStore((state) => state.anchors); const anchors = useRepairMissionAnchorStore((state) => state.anchors);
const repairFocusActive = useRepairFocusStore((state) => state.active);
const pylonInNarrative = const pylonInNarrative =
mainState === "pylon" && isPylonNarrativeStep(pylonStep); mainState === "pylon" && isPylonNarrativeStep(pylonStep);
@@ -95,7 +97,7 @@ export function GameStageContent(): React.JSX.Element {
{mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null} {mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null}
<Ebike position={EBIKE_WORLD_POSITION} /> <Ebike position={EBIKE_WORLD_POSITION} />
<PylonDownedPylon /> <PylonDownedPylon />
{isDebugEnabled() ? ( {isDebugEnabled() && !repairFocusActive ? (
<> <>
<ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} /> <ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} />
<ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} /> <ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} />