From ca6c8e00b60bbcadd18fcaeea855e65a6bda51b8 Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Tue, 2 Jun 2026 22:59:04 +0200
Subject: [PATCH] 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).
---
 src/world/Environment.tsx      | 6 +++++-
 src/world/GameStageContent.tsx | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/world/Environment.tsx b/src/world/Environment.tsx
index 430bc66..f2d4a54 100644
--- a/src/world/Environment.tsx
+++ b/src/world/Environment.tsx
@@ -11,6 +11,7 @@ import {
   isMapModelVisible,
   useMapPerformanceStore,
 } from "@/managers/stores/useMapPerformanceStore";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import { SkyModel } from "@/components/three/world/SkyModel";
 import { CloudSystem } from "@/world/clouds/CloudSystem";
 import { FogSystem } from "@/world/fog/FogSystem";
@@ -24,6 +25,9 @@ export function Environment(): React.JSX.Element {
   const groups = useMapPerformanceStore((state) => state.groups);
   const models = useMapPerformanceStore((state) => state.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") {
     return (
@@ -52,7 +56,7 @@ export function Environment(): React.JSX.Element {
       <WaterSystem />
       <CloudSystem />
       <GrassSystem />
-      <VegetationSystem />
+      {repairFocusActive ? null : <VegetationSystem />}
     </>
   );
 }
diff --git a/src/world/GameStageContent.tsx b/src/world/GameStageContent.tsx
index 3b18fee..60c473f 100644
--- a/src/world/GameStageContent.tsx
+++ b/src/world/GameStageContent.tsx
@@ -16,6 +16,7 @@ import {
   OUTRO_STAGE_ANCHOR,
 } from "@/data/gameplay/gameStageAnchors";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
 import { isPylonNarrativeStep } 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 pylonStep = useGameStore((state) => state.pylon.currentStep);
   const anchors = useRepairMissionAnchorStore((state) => state.anchors);
+  const repairFocusActive = useRepairFocusStore((state) => state.active);
 
   const pylonInNarrative =
     mainState === "pylon" && isPylonNarrativeStep(pylonStep);
@@ -95,7 +97,7 @@ export function GameStageContent(): React.JSX.Element {
       {mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null}
       <Ebike position={EBIKE_WORLD_POSITION} />
       <PylonDownedPylon />
-      {isDebugEnabled() ? (
+      {isDebugEnabled() && !repairFocusActive ? (
         <>
           <ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} />
           <ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} />