From d1665891f44f6069fe0eb3cd90b810a226cd2411 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 21:59:54 +0200 Subject: [PATCH 01/18] feat(repair): filter debug sub-state options by current mission Pylon-only mission steps (approaching/arrived/npc-return/narrator-outro) no longer appear in the GameStateDebugPanel sub-state dropdown for the ebike or farm missions, which use the shorter locked/waiting/inspected/fragmented/scanning/repairing/reassembling/done flow. --- src/components/ui/debug/GameStateDebugPanel.tsx | 6 ++++-- src/data/gameplay/repairMissionState.ts | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/ui/debug/GameStateDebugPanel.tsx b/src/components/ui/debug/GameStateDebugPanel.tsx index 153b2fc..30bd530 100644 --- a/src/components/ui/debug/GameStateDebugPanel.tsx +++ b/src/components/ui/debug/GameStateDebugPanel.tsx @@ -5,8 +5,8 @@ import { MAIN_GAME_STATES, } from "@/data/game/gameStateConfig"; import { + getMissionStepsFor, isMissionStep, - MISSION_STEPS, } from "@/data/gameplay/repairMissionState"; import { useGameStore } from "@/managers/stores/useGameStore"; import type { MainGameState } from "@/types/game"; @@ -53,7 +53,9 @@ export function GameStateDebugPanel(): React.JSX.Element { ? GAME_STEPS : mainState === "outro" ? ["waiting", "started"] - : MISSION_STEPS; + : mainState === "ebike" || mainState === "pylon" || mainState === "farm" + ? getMissionStepsFor(mainState) + : []; function setSubState(nextSubState: string): void { if (mainState === "intro") { diff --git a/src/data/gameplay/repairMissionState.ts b/src/data/gameplay/repairMissionState.ts index fc13c60..71a93de 100644 --- a/src/data/gameplay/repairMissionState.ts +++ b/src/data/gameplay/repairMissionState.ts @@ -24,6 +24,20 @@ export const MISSION_STEPS = [ ] as const satisfies readonly MissionStep[]; const MISSION_STEP_VALUES: ReadonlySet = new Set(MISSION_STEPS); +const PYLON_ONLY_MISSION_STEPS = new Set([ + "approaching", + "arrived", + "npc-return", + "narrator-outro", +]); + +export function getMissionStepsFor( + mission: RepairMissionId, +): readonly MissionStep[] { + if (mission === "pylon") return MISSION_STEPS; + return MISSION_STEPS.filter((step) => !PYLON_ONLY_MISSION_STEPS.has(step)); +} + export function isRepairMissionId(value: string): value is RepairMissionId { return REPAIR_MISSION_ID_VALUES.has(value); } From a6093144110c780b53171ec0d8993f8784f418ee Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:00:01 +0200 Subject: [PATCH 02/18] feat(repair): mount Ebike on TestMap and snap repair to parked position The Physique test scene now mounts the real Ebike component for the ebike repair zone, mirroring GameStageContent so the bike model and its interactions (mount/dismount, parked position tracking) are available when testing the repair flow. RepairGame derives its live world position from window.ebikeParkedPosition once the ebike mission leaves the locked/waiting phase, so the repair sequence happens wherever the player parked the bike rather than at the static zone anchor. --- src/components/three/gameplay/RepairGame.tsx | 14 +++++++++++++- src/world/debug/TestMap.tsx | 4 ++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/three/gameplay/RepairGame.tsx b/src/components/three/gameplay/RepairGame.tsx index c6bc9df..c8a990f 100644 --- a/src/components/three/gameplay/RepairGame.tsx +++ b/src/components/three/gameplay/RepairGame.tsx @@ -72,8 +72,20 @@ export function RepairGame({ const [scannedBrokenParts, setScannedBrokenParts] = useState< readonly RepairScannedBrokenPart[] >([]); + // For the ebike mission, use the bike's live parked world position once + // the repair flow leaves the waiting/locked phase so the repair happens + // wherever the player parked the bike, not at the static zone anchor. + // window.ebikeParkedPosition is set by Ebike when the player drops the + // bike and stays stable through the rest of the repair flow. + const livePosition = useMemo(() => { + if (mission !== "ebike" || mainState !== mission) return position; + if (step === "locked" || step === "waiting") return position; + const parked = window.ebikeParkedPosition; + if (!parked) return position; + return [parked[0], parked[1], parked[2]]; + }, [mainState, mission, position, step]); const parsedScale = toVector3Scale(scale); - const snappedPosition = useTerrainSnappedPosition(position); + const snappedPosition = useTerrainSnappedPosition(livePosition); const readyForFragmentation = step === "inspected"; const brokenNodeNames = useMemo(() => getBrokenNodeNames(config), [config]); diff --git a/src/world/debug/TestMap.tsx b/src/world/debug/TestMap.tsx index e1d74b9..e60e8c7 100644 --- a/src/world/debug/TestMap.tsx +++ b/src/world/debug/TestMap.tsx @@ -3,6 +3,7 @@ import { Component, useRef, useState, useEffect } from "react"; import * as THREE from "three"; 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 { GrabbableObject } from "@/components/three/interaction/GrabbableObject"; import { AnimatedModel } from "@/components/three/models/AnimatedModel"; @@ -239,6 +240,9 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element { + {zone.mission === "ebike" ? ( + + ) : null} ))} From 2a6a028e1dc5ef478bcae28a356b6555a4850e18 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:04:05 +0200 Subject: [PATCH 03/18] revert(repair): remove player movement lock during repair Drops the useRepairMovementLocked hook, the RepairMovementLockIndicator overlay, and all PlayerController gating tied to repair sub-states. The repair flow no longer freezes player movement or shows a lock banner; the player keeps full control while interacting with the case. --- src/components/ui/GameUI.tsx | 2 -- .../ui/RepairMovementLockIndicator.tsx | 20 ------------- src/hooks/gameplay/useRepairMovementLocked.ts | 29 ------------------- src/world/player/PlayerController.tsx | 25 +--------------- 4 files changed, 1 insertion(+), 75 deletions(-) delete mode 100644 src/components/ui/RepairMovementLockIndicator.tsx delete mode 100644 src/hooks/gameplay/useRepairMovementLocked.ts diff --git a/src/components/ui/GameUI.tsx b/src/components/ui/GameUI.tsx index c7a1b49..158a9dc 100644 --- a/src/components/ui/GameUI.tsx +++ b/src/components/ui/GameUI.tsx @@ -4,7 +4,6 @@ import { GameSettingsMenu } from "@/components/ui/GameSettingsMenu"; import { HandTrackingFallback } from "@/components/ui/HandTrackingFallback"; import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer"; import { InteractPrompt } from "@/components/ui/InteractPrompt"; -import { RepairMovementLockIndicator } from "@/components/ui/RepairMovementLockIndicator"; import { Subtitles } from "@/components/ui/Subtitles"; import { TalkieDialogueOverlay } from "@/components/ui/TalkieDialogueOverlay"; @@ -13,7 +12,6 @@ export function GameUI(): React.JSX.Element { <> - diff --git a/src/components/ui/RepairMovementLockIndicator.tsx b/src/components/ui/RepairMovementLockIndicator.tsx deleted file mode 100644 index 4f8d825..0000000 --- a/src/components/ui/RepairMovementLockIndicator.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useCameraMode } from "@/hooks/debug/useCameraMode"; -import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked"; - -export function RepairMovementLockIndicator(): React.JSX.Element | null { - const cameraMode = useCameraMode(); - const movementLocked = useRepairMovementLocked(); - - if (cameraMode !== "player") return null; - if (!movementLocked) return null; - - return ( -
-
- ); -} diff --git a/src/hooks/gameplay/useRepairMovementLocked.ts b/src/hooks/gameplay/useRepairMovementLocked.ts deleted file mode 100644 index 36b951a..0000000 --- a/src/hooks/gameplay/useRepairMovementLocked.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useGameStore } from "@/managers/stores/useGameStore"; -import type { MissionStep } from "@/types/gameplay/repairMission"; - -export function useRepairMovementLocked(): boolean { - return useGameStore((state) => { - switch (state.mainState) { - case "ebike": - return isRepairMovementLocked(state.ebike.currentStep); - case "pylon": - return isRepairMovementLocked(state.pylon.currentStep); - case "farm": - return isRepairMovementLocked(state.farm.currentStep); - case "intro": - case "outro": - return false; - } - }); -} - -function isRepairMovementLocked(step: MissionStep): boolean { - return ( - step === "inspected" || - step === "fragmented" || - step === "scanning" || - step === "repairing" || - step === "reassembling" || - step === "done" - ); -} diff --git a/src/world/player/PlayerController.tsx b/src/world/player/PlayerController.tsx index cfe3dd9..72cd0f2 100644 --- a/src/world/player/PlayerController.tsx +++ b/src/world/player/PlayerController.tsx @@ -23,7 +23,6 @@ import { PLAYER_MAX_DELTA, PLAYER_XZ_DAMPING_FACTOR, } from "@/data/player/playerConfig"; -import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked"; import { useTerrainHeightSampler } from "@/hooks/three/useTerrainHeight"; import { InteractionManager } from "@/managers/InteractionManager"; import { useGameStore } from "@/managers/stores/useGameStore"; @@ -154,9 +153,7 @@ export function PlayerController({ }: PlayerControllerProps): null { const camera = useThree((state) => state.camera); const sceneMode = useSceneMode(); - const movementLocked = useRepairMovementLocked(); const terrainHeight = useTerrainHeightSampler(); - const movementLockedRef = useRef(movementLocked); const keys = useRef({ ...DEFAULT_KEYS }); const velocity = useRef(new THREE.Vector3()); const fallDuration = useRef(0); @@ -249,17 +246,6 @@ export function PlayerController({ initializedRef.current = true; }, [camera, initialLookAt, spawnPosition]); - useEffect(() => { - movementLockedRef.current = movementLocked; - - if (!movementLocked) return; - - keys.current = { ...DEFAULT_KEYS }; - wantsJump.current = false; - velocity.current.setX(0); - velocity.current.setZ(0); - }, [movementLocked]); - useEffect(() => { const interaction = InteractionManager.getInstance(); @@ -267,20 +253,11 @@ export function PlayerController({ if (isPlayerInputLocked()) return; if (setMovementKey(keys.current, event.key, true)) { - if (movementLockedRef.current) { - keys.current = { ...DEFAULT_KEYS }; - } event.preventDefault(); return; } if (event.key === JUMP_KEY) { - if (movementLockedRef.current) { - wantsJump.current = false; - event.preventDefault(); - return; - } - wantsJump.current = true; event.preventDefault(); return; @@ -386,7 +363,7 @@ export function PlayerController({ } _wishDir.set(0, 0, 0); - if (!movementLocked && !isEbikeBreakdown) { + if (!isEbikeBreakdown) { if (keys.current.forward) _wishDir.add(_forward); if (keys.current.backward) _wishDir.sub(_forward); if (!isEbikeMounted) { From 6a0215d1a6158727e1c94de294793a830fcc14c7 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:10:31 +0200 Subject: [PATCH 04/18] fix(repair): keep ebike at zone Y in test scene MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds an opt-out 'snapToTerrain' prop on Ebike so the parked position keeps the explicit Y supplied by callers instead of resolving against the world terrain GLTF. TestMap passes snapToTerrain={false} since it does not render the world terrain — without this the bike was being positioned at the invisible terrain height, far above the test floor, and looked missing. --- src/components/ebike/Ebike.tsx | 51 ++++++++++++++++++++++++---------- src/world/debug/TestMap.tsx | 2 +- 2 files changed, 38 insertions(+), 15 deletions(-) diff --git a/src/components/ebike/Ebike.tsx b/src/components/ebike/Ebike.tsx index a4c6215..dfa8c50 100644 --- a/src/components/ebike/Ebike.tsx +++ b/src/components/ebike/Ebike.tsx @@ -33,9 +33,19 @@ const _up = new THREE.Vector3(0, 1, 0); interface EbikeProps { position: Vector3Tuple; + /** + * When true (default), the parked position is snapped to the world terrain + * height. Pass false in test scenes that don't render the world terrain so + * the bike stays at the explicit Y of {@link position} instead of floating + * at the (invisible) terrain height. + */ + snapToTerrain?: boolean; } -export function Ebike({ position }: EbikeProps): React.JSX.Element { +export function Ebike({ + position, + snapToTerrain = true, +}: EbikeProps): React.JSX.Element { const groupRef = useRef(null); const { scene } = useLoggedGLTF(EBIKE_MODEL_PATH, { scope: "Ebike", @@ -45,7 +55,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { const terrainHeight = useTerrainHeightSampler(); const parkedPosition = useMemo(() => { const [x, y, z] = position; - const height = terrainHeight.getHeight(x, z) ?? y; + const height = snapToTerrain ? (terrainHeight.getHeight(x, z) ?? y) : y; const bottomOffset = getObjectBottomOffset(model, [ EBIKE_WORLD_SCALE, EBIKE_WORLD_SCALE, @@ -53,7 +63,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { ]); return [x, height + bottomOffset, z]; - }, [model, position, terrainHeight]); + }, [model, position, snapToTerrain, terrainHeight]); const movementMode = useGameStore((state) => state.player.movementMode); const mainState = useGameStore((state) => state.mainState); const ebikeStep = useGameStore((state) => state.ebike.currentStep); @@ -135,7 +145,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { // SpotLight target must be in the scene to define the cone direction. useEffect(() => { threeScene.add(headlightTarget); - return () => { threeScene.remove(headlightTarget); }; + return () => { + threeScene.remove(headlightTarget); + }; }, [threeScene, headlightTarget]); // Link the target to the SpotLight once it mounts. @@ -192,7 +204,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { console.log("[Ebike] Fork found:", (forkNode as THREE.Object3D).name); } else { const names: string[] = []; - model.traverse((c) => { if (c.name) names.push(c.name); }); + model.traverse((c) => { + if (c.name) names.push(c.name); + }); console.warn("[Ebike] Fork not found. All nodes:", names); } }, [model]); @@ -222,11 +236,11 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { useFrame((_, delta) => { // ── SpotLight headlight — tune the constants below ──────────────────────── // ── SpotLight headlight — tune these four constants ─────────────────────── - const LIGHT_OFFSET_X = -0.7; // position : left(-) / right(+) - const LIGHT_OFFSET_Y = 1.5; // position : down(-) / up(+) - const LIGHT_OFFSET_Z = 0; // position : backward(-) / forward(+) - const LIGHT_AIM_DEG = 90; // aim rotation around Y : 0=forward, -90=left, +90=right - const LIGHT_TARGET_DIST = 20; // metres devant la position de la lumière + const LIGHT_OFFSET_X = -0.7; // position : left(-) / right(+) + const LIGHT_OFFSET_Y = 1.5; // position : down(-) / up(+) + const LIGHT_OFFSET_Z = 0; // position : backward(-) / forward(+) + const LIGHT_AIM_DEG = 90; // aim rotation around Y : 0=forward, -90=left, +90=right + const LIGHT_TARGET_DIST = 20; // metres devant la position de la lumière // ───────────────────────────────────────────────────────────────────────── if (headlightRef.current && phareRef.current && groupRef.current) { phareRef.current.getWorldPosition(_phareWorldPos); @@ -460,7 +474,11 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { > - + @@ -469,7 +487,12 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { Speedmeter: upper-half arc overlay, renderOrder 10 001 rotation: Math.PI/2 radians = 90° (NOT the number 90 which = ~116.6°) */} - {zone.mission === "ebike" ? ( - + ) : null} From 0f211cc169be428e6299c404f2b4463d61614b43 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:15:25 +0200 Subject: [PATCH 05/18] chore(format): apply prettier formatting --- public/roadNetwork.json | 809 ++++-------------- src/components/ebike/EbikeSpeedmeter.tsx | 15 +- .../gameplay/pylon/PylonDownedPylon.tsx | 14 +- .../gameplay/pylon/PylonFarmerNPC.tsx | 12 +- src/data/gameplay/zones.ts | 2 +- 5 files changed, 189 insertions(+), 663 deletions(-) diff --git a/public/roadNetwork.json b/public/roadNetwork.json index 30a4c96..deb38fd 100644 --- a/public/roadNetwork.json +++ b/public/roadNetwork.json @@ -4,454 +4,315 @@ "x": -4.61, "y": 7.13, "z": -2.77, - "connections": [ - 2, - 7 - ] + "connections": [2, 7] }, { "id": 2, "x": -5.61, "y": 7.08, "z": -7.84, - "connections": [ - 1, - 3 - ] + "connections": [1, 3] }, { "id": 3, "x": -2.36, "y": 6.96, "z": -13.75, - "connections": [ - 2, - 4 - ] + "connections": [2, 4] }, { "id": 4, "x": -3.35, "y": 6.48, "z": -22.71, - "connections": [ - 3, - 5, - 69, - 157 - ] + "connections": [3, 5, 69, 157] }, { "id": 5, "x": -11.24, "y": 6.45, "z": -20.45, - "connections": [ - 4, - 6 - ] + "connections": [4, 6] }, { "id": 6, "x": -19.8, "y": 6.46, "z": -12.16, - "connections": [ - 5, - 7, - 8, - 53 - ] + "connections": [5, 7, 8, 53] }, { "id": 7, "x": -10.38, "y": 6.99, "z": -7.51, - "connections": [ - 6, - 1 - ] + "connections": [6, 1] }, { "id": 8, "x": -29.38, "y": 5.69, "z": -14.1, - "connections": [ - 6, - 9, - 15 - ] + "connections": [6, 9, 15] }, { "id": 9, "x": -34.88, "y": 5.18, "z": -14.73, - "connections": [ - 8, - 10, - 11 - ] + "connections": [8, 10, 11] }, { "id": 10, "x": -43.64, "y": 4.25, "z": -16.72, - "connections": [ - 9 - ] + "connections": [9] }, { "id": 11, "x": -34.62, "y": 4.86, "z": -21.94, - "connections": [ - 9, - 12 - ] + "connections": [9, 12] }, { "id": 12, "x": -39.38, "y": 3.98, "z": -29.69, - "connections": [ - 11, - 13 - ] + "connections": [11, 13] }, { "id": 13, "x": -46.05, "y": 3.15, "z": -34.04, - "connections": [ - 12, - 14 - ] + "connections": [12, 14] }, { "id": 14, "x": -55.16, "y": 2.32, "z": -36.22, - "connections": [ - 13 - ] + "connections": [13] }, { "id": 15, "x": -35.85, "y": 5.37, "z": -3.43, - "connections": [ - 8, - 16, - 18 - ] + "connections": [8, 16, 18] }, { "id": 16, "x": -37.61, "y": 5.17, "z": 5.14, - "connections": [ - 15, - 17 - ] + "connections": [15, 17] }, { "id": 17, "x": -44.96, "y": 4.35, "z": 8.67, - "connections": [ - 16 - ] + "connections": [16] }, { "id": 18, "x": -43.46, "y": 4.57, "z": -4.93, - "connections": [ - 15, - 19 - ] + "connections": [15, 19] }, { "id": 19, "x": -52.58, "y": 3.6, "z": -5.75, - "connections": [ - 18, - 20, - 23 - ] + "connections": [18, 20, 23] }, { "id": 20, "x": -58.7, "y": 3.01, "z": -0.58, - "connections": [ - 19, - 21 - ] + "connections": [19, 21] }, { "id": 21, "x": -64.82, "y": 2.4, "z": 5, - "connections": [ - 20, - 22 - ] + "connections": [20, 22] }, { "id": 22, "x": -70.26, "y": 1.95, "z": 4.73, - "connections": [ - 21 - ] + "connections": [21] }, { "id": 23, "x": -60.47, "y": 2.73, "z": -11.6, - "connections": [ - 19, - 24, - 25 - ] + "connections": [19, 24, 25] }, { "id": 24, "x": -64.69, "y": 2.24, "z": -16.49, - "connections": [ - 23 - ] + "connections": [23] }, { "id": 25, "x": -66.78, "y": 2.17, "z": -10.64, - "connections": [ - 23, - 26 - ] + "connections": [23, 26] }, { "id": 26, "x": -76.23, "y": 1.39, "z": -15.3, - "connections": [ - 25, - 27, - 29, - 40 - ] + "connections": [25, 27, 29, 40] }, { "id": 27, "x": -82.06, "y": 0.97, "z": -20.09, - "connections": [ - 26, - 28 - ] + "connections": [26, 28] }, { "id": 28, "x": -89.41, "y": 0.54, "z": -26.27, - "connections": [ - 27 - ] + "connections": [27] }, { "id": 29, "x": -82.06, "y": 1.08, "z": -11.22, - "connections": [ - 26, - 30, - 32 - ] + "connections": [26, 30, 32] }, { "id": 30, "x": -88.59, "y": 0.74, "z": -2.59, - "connections": [ - 29, - 31 - ] + "connections": [29, 31] }, { "id": 31, "x": -95.82, "y": 0.45, "z": 1.02, - "connections": [ - 30 - ] + "connections": [30] }, { "id": 32, "x": -90.92, "y": 0.58, "z": -14.14, - "connections": [ - 29, - 33 - ] + "connections": [29, 33] }, { "id": 33, "x": -97.45, "y": 0.31, "z": -17.87, - "connections": [ - 32, - 34, - 36 - ] + "connections": [32, 34, 36] }, { "id": 34, "x": -102.82, "y": 0.14, "z": -24.4, - "connections": [ - 33, - 35 - ] + "connections": [33, 35] }, { "id": 35, "x": -108.07, "y": 0, "z": -31.52, - "connections": [ - 34 - ] + "connections": [34] }, { "id": 36, "x": -102.94, "y": 0.15, "z": -14.96, - "connections": [ - 33, - 37 - ] + "connections": [33, 37] }, { "id": 37, "x": -107.37, "y": 0.11, "z": -9.01, - "connections": [ - 36, - 38 - ] + "connections": [36, 38] }, { "id": 38, "x": -110.75, "y": 0.08, "z": -2.59, - "connections": [ - 37, - 39 - ] + "connections": [37, 39] }, { "id": 39, "x": -116.58, "y": 0, "z": -0.38, - "connections": [ - 38 - ] + "connections": [38] }, { "id": 40, "x": -76.23, "y": 1.27, "z": -22.89, - "connections": [ - 26, - 41 - ] + "connections": [26, 41] }, { "id": 41, "x": -76.81, "y": 1.09, "z": -29.53, - "connections": [ - 40, - 42, - 47 - ] + "connections": [40, 42, 47] }, { "id": 42, "x": -73.43, "y": 1.08, "z": -37.23, - "connections": [ - 41, - 43 - ] + "connections": [41, 43] }, { "id": 43, "x": -71.91, "y": 1.02, "z": -42.83, - "connections": [ - 42, - 44 - ] + "connections": [42, 44] }, { "id": 44, "x": -72.61, "y": 0.77, "z": -49.48, - "connections": [ - 43, - 45 - ] + "connections": [43, 45] }, { "id": 45, "x": -77.51, "y": 0.43, "z": -56.36, - "connections": [ - 44 - ] + "connections": [44] }, { "id": 46, @@ -465,49 +326,35 @@ "x": -82.6, "y": 0.64, "z": -38.22, - "connections": [ - 41, - 48 - ] + "connections": [41, 48] }, { "id": 48, "x": -87.73, "y": 0.32, "z": -45.38, - "connections": [ - 47, - 49 - ] + "connections": [47, 49] }, { "id": 49, "x": -88.14, "y": 0.17, "z": -54.34, - "connections": [ - 48, - 50 - ] + "connections": [48, 50] }, { "id": 50, "x": -89.12, "y": 0.09, "z": -59.31, - "connections": [ - 49, - 51 - ] + "connections": [49, 51] }, { "id": 51, "x": -92.7, "y": 0.01, "z": -63.96, - "connections": [ - 50 - ] + "connections": [50] }, { "id": 52, @@ -521,274 +368,189 @@ "x": -23.13, "y": 6.44, "z": -4.02, - "connections": [ - 6, - 54 - ] + "connections": [6, 54] }, { "id": 54, "x": -23.62, "y": 6.39, "z": 5.67, - "connections": [ - 53, - 55 - ] + "connections": [53, 55] }, { "id": 55, "x": -18.16, "y": 6.37, "z": 16.59, - "connections": [ - 54, - 56, - 59, - 174 - ] + "connections": [54, 56, 59, 174] }, { "id": 56, "x": -14.25, "y": 6.77, "z": 11.21, - "connections": [ - 55, - 57 - ] + "connections": [55, 57] }, { "id": 57, "x": -13.93, "y": 6.9, "z": 6.81, - "connections": [ - 56, - 58 - ] + "connections": [56, 58] }, { "id": 58, "x": -11, "y": 7.03, "z": 3.23, - "connections": [ - 57 - ] + "connections": [57] }, { "id": 59, "x": -10.67, "y": 6.41, "z": 21.39, - "connections": [ - 55, - 60 - ] + "connections": [55, 60] }, { "id": 60, "x": -1.71, "y": 6.38, "z": 24.33, - "connections": [ - 59, - 61 - ] + "connections": [59, 61] }, { "id": 61, "x": 8.8, "y": 6.36, "z": 23.1, - "connections": [ - 60, - 62 - ] + "connections": [60, 62] }, { "id": 62, "x": 14.42, "y": 6.42, "z": 18.95, - "connections": [ - 61, - 64, - 108, - 173 - ] + "connections": [61, 64, 108, 173] }, { "id": 63, "x": 2.44, "y": 7.13, "z": 3.31, - "connections": [ - 172 - ] + "connections": [172] }, { "id": 64, "x": 20.12, "y": 6.43, "z": 12.52, - "connections": [ - 62, - 65 - ] + "connections": [62, 65] }, { "id": 65, "x": 22.48, "y": 6.49, "z": 3.88, - "connections": [ - 64, - 66 - ] + "connections": [64, 66] }, { "id": 66, "x": 21.34, "y": 6.52, "z": -6.79, - "connections": [ - 65, - 67 - ] + "connections": [65, 67] }, { "id": 67, "x": 18.25, "y": 6.5, "z": -13.47, - "connections": [ - 66, - 68 - ] + "connections": [66, 68] }, { "id": 68, "x": 15.23, "y": 6.54, "z": -15.99, - "connections": [ - 67, - 69, - 70, - 71 - ] + "connections": [67, 69, 70, 71] }, { "id": 69, "x": 5.78, "y": 6.52, "z": -21.53, - "connections": [ - 68, - 4 - ] + "connections": [68, 4] }, { "id": 70, "x": 11.08, "y": 6.96, "z": -8.17, - "connections": [ - 68 - ] + "connections": [68] }, { "id": 71, "x": 19.39, "y": 6.07, "z": -20.63, - "connections": [ - 68, - 72, - 91 - ] + "connections": [68, 72, 91] }, { "id": 72, "x": 21.18, "y": 5.69, "z": -24.87, - "connections": [ - 71, - 73, - 74 - ] + "connections": [71, 73, 74] }, { "id": 73, "x": 22.57, "y": 4.58, "z": -37.32, - "connections": [ - 72 - ] + "connections": [72] }, { "id": 74, "x": 28.76, "y": 4.96, "z": -27.8, - "connections": [ - 72, - 75, - 76 - ] + "connections": [72, 75, 76] }, { "id": 75, "x": 36.01, "y": 4.45, "z": -26.82, - "connections": [ - 74 - ] + "connections": [74] }, { "id": 76, "x": 39.1, "y": 3.59, "z": -35.78, - "connections": [ - 74, - 77, - 78 - ] + "connections": [74, 77, 78] }, { "id": 77, "x": 51.07, "y": 2.37, "z": -40.58, - "connections": [ - 76 - ] + "connections": [76] }, { "id": 78, "x": 39.26, "y": 2.89, "z": -45.14, - "connections": [ - 76, - 79, - 81 - ] + "connections": [76, 79, 81] }, { "id": 79, "x": 37.55, "y": 2.11, "z": -57.04, - "connections": [ - 78 - ] + "connections": [78] }, { "id": 80, @@ -802,89 +564,63 @@ "x": 47.25, "y": 1.81, "z": -54.26, - "connections": [ - 78, - 82 - ] + "connections": [78, 82] }, { "id": 82, "x": 60.2, "y": 0.9, "z": -60.53, - "connections": [ - 81, - 83, - 84 - ] + "connections": [81, 83, 84] }, { "id": 83, "x": 75.6, "y": 0.3, "z": -63.79, - "connections": [ - 82 - ] + "connections": [82] }, { "id": 84, "x": 71.69, "y": 0.73, "z": -52.06, - "connections": [ - 82, - 85, - 86 - ] + "connections": [82, 85, 86] }, { "id": 85, "x": 84.72, "y": 0.41, "z": -45.14, - "connections": [ - 84 - ] + "connections": [84] }, { "id": 86, "x": 72.83, "y": 0.94, "z": -43.18, - "connections": [ - 84, - 87 - ] + "connections": [84, 87] }, { "id": 87, "x": 82.52, "y": 0.79, "z": -29.01, - "connections": [ - 86, - 88 - ] + "connections": [86, 88] }, { "id": 88, "x": 92.95, "y": 0.47, "z": -18.1, - "connections": [ - 87, - 89 - ] + "connections": [87, 89] }, { "id": 89, "x": 100.77, "y": 0.21, "z": -16.55, - "connections": [ - 88 - ] + "connections": [88] }, { "id": 90, @@ -898,32 +634,21 @@ "x": 31.21, "y": 5.49, "z": -15.42, - "connections": [ - 71, - 92, - 103, - 166 - ] + "connections": [71, 92, 103, 166] }, { "id": 92, "x": 48.06, "y": 3.69, "z": -19.81, - "connections": [ - 91, - 93, - 95 - ] + "connections": [91, 93, 95] }, { "id": 93, "x": 59.71, "y": 2.45, "z": -24.13, - "connections": [ - 92 - ] + "connections": [92] }, { "id": 94, @@ -937,59 +662,42 @@ "x": 60.85, "y": 2.78, "z": -3.28, - "connections": [ - 92, - 96, - 97 - ] + "connections": [92, 96, 97] }, { "id": 96, "x": 68.43, "y": 2.1, "z": -2.47, - "connections": [ - 95 - ] + "connections": [95] }, { "id": 97, "x": 68.51, "y": 2.04, "z": 9.18, - "connections": [ - 95, - 98, - 99 - ] + "connections": [95, 98, 99] }, { "id": 98, "x": 67.86, "y": 1.98, "z": 16.59, - "connections": [ - 97 - ] + "connections": [97] }, { "id": 99, "x": 91.56, "y": 0.56, "z": 13.82, - "connections": [ - 97, - 100 - ] + "connections": [97, 100] }, { "id": 100, "x": 97.1, "y": 0.31, "z": 18.46, - "connections": [ - 99 - ] + "connections": [99] }, { "id": 101, @@ -1003,132 +711,91 @@ "x": 32.83, "y": 5.63, "z": -5.24, - "connections": [ - 91, - 104 - ] + "connections": [91, 104] }, { "id": 104, "x": 32.75, "y": 5.62, "z": 6.74, - "connections": [ - 103, - 105 - ] + "connections": [103, 105] }, { "id": 105, "x": 32.51, "y": 5.42, "z": 14.31, - "connections": [ - 104, - 106 - ] + "connections": [104, 106] }, { "id": 106, "x": 39.02, "y": 4.65, "z": 17.98, - "connections": [ - 105, - 107 - ] + "connections": [105, 107] }, { "id": 107, "x": 44.48, "y": 4.26, "z": 14.31, - "connections": [ - 106 - ] + "connections": [106] }, { "id": 108, "x": 19.31, "y": 5.65, "z": 26.84, - "connections": [ - 62, - 109, - 131, - 167 - ] + "connections": [62, 109, 131, 167] }, { "id": 109, "x": 22.49, "y": 5.23, "z": 29.86, - "connections": [ - 108, - 110 - ] + "connections": [108, 110] }, { "id": 110, "x": 32.91, "y": 3.51, "z": 42.4, - "connections": [ - 109, - 111, - 122 - ] + "connections": [109, 111, 122] }, { "id": 111, "x": 39.1, "y": 2.75, "z": 47.21, - "connections": [ - 110, - 112 - ] + "connections": [110, 112] }, { "id": 112, "x": 55.64, "y": 1.54, "z": 51.12, - "connections": [ - 111, - 113, - 115, - 117 - ] + "connections": [111, 113, 115, 117] }, { "id": 113, "x": 61.66, "y": 1.26, "z": 49.98, - "connections": [ - 112, - 114 - ] + "connections": [112, 114] }, { "id": 114, "x": 70.14, "y": 0.98, "z": 46.23, - "connections": [ - 113 - ] + "connections": [113] }, { "id": 115, "x": 56.45, "y": 1.31, "z": 54.86, - "connections": [ - 112 - ] + "connections": [112] }, { "id": 116, @@ -1142,39 +809,28 @@ "x": 61.42, "y": 0.86, "z": 60.39, - "connections": [ - 112, - 118 - ] + "connections": [112, 118] }, { "id": 118, "x": 60.85, "y": 0.54, "z": 70.01, - "connections": [ - 117, - 119 - ] + "connections": [117, 119] }, { "id": 119, "x": 56.7, "y": 0.37, "z": 78.56, - "connections": [ - 118, - 120 - ] + "connections": [118, 120] }, { "id": 120, "x": 57.11, "y": 0.24, "z": 83.2, - "connections": [ - 119 - ] + "connections": [119] }, { "id": 121, @@ -1188,170 +844,119 @@ "x": 31.12, "y": 2.64, "z": 54.13, - "connections": [ - 110, - 123, - 124 - ] + "connections": [110, 123, 124] }, { "id": 123, "x": 25.5, "y": 2.37, "z": 60.15, - "connections": [ - 122 - ] + "connections": [122] }, { "id": 124, "x": 32.1, "y": 1.84, "z": 64.06, - "connections": [ - 122, - 125 - ] + "connections": [122, 125] }, { "id": 125, "x": 26.07, "y": 1.22, "z": 75.79, - "connections": [ - 124, - 126 - ] + "connections": [124, 126] }, { "id": 126, "x": 26.07, "y": 1, "z": 79.54, - "connections": [ - 125 - ] + "connections": [125] }, { "id": 131, "x": 19.13, "y": 4.92, "z": 35.57, - "connections": [ - 108, - 132 - ] + "connections": [108, 132] }, { "id": 132, "x": 16.75, "y": 4.05, "z": 45.62, - "connections": [ - 131, - 133 - ] + "connections": [131, 133] }, { "id": 133, "x": 11.18, "y": 3.33, "z": 54.32, - "connections": [ - 132, - 134, - 143 - ] + "connections": [132, 134, 143] }, { "id": 134, "x": 7.83, "y": 2.97, "z": 58.54, - "connections": [ - 133, - 135, - 139 - ] + "connections": [133, 135, 139] }, { "id": 135, "x": 2.7, "y": 2.73, "z": 61.4, - "connections": [ - 134, - 136 - ] + "connections": [134, 136] }, { "id": 136, "x": -2.22, "y": 2.81, "z": 60.59, - "connections": [ - 135, - 137 - ] + "connections": [135, 137] }, { "id": 137, "x": -2.98, "y": 3.58, "z": 52.97, - "connections": [ - 136 - ] + "connections": [136] }, { "id": 139, "x": 4.05, "y": 1.58, "z": 74.79, - "connections": [ - 134, - 140 - ] + "connections": [134, 140] }, { "id": 140, "x": -0.33, "y": 1.21, "z": 80.47, - "connections": [ - 139, - 141 - ] + "connections": [139, 141] }, { "id": 141, "x": -3.24, "y": 1.24, "z": 79.76, - "connections": [ - 140, - 142 - ] + "connections": [140, 142] }, { "id": 142, "x": -3.41, "y": 1.73, "z": 73.01, - "connections": [ - 141 - ] + "connections": [141] }, { "id": 143, "x": 11.78, "y": 0.74, "z": 87.87, - "connections": [ - 133, - 145, - 149 - ] + "connections": [133, 145, 149] }, { "id": 144, @@ -1365,88 +970,63 @@ "x": 7.89, "y": 0.44, "z": 94.98, - "connections": [ - 143, - 146 - ] + "connections": [143, 146] }, { "id": 146, "x": 4.48, "y": 0.31, "z": 98.94, - "connections": [ - 145, - 147 - ] + "connections": [145, 147] }, { "id": 147, "x": -2.22, "y": 0.27, "z": 100.07, - "connections": [ - 146, - 148 - ] + "connections": [146, 148] }, { "id": 148, "x": -3.03, "y": 0.47, "z": 94.56, - "connections": [ - 147 - ] + "connections": [147] }, { "id": 149, "x": 11.78, "y": 0.29, "z": 98.56, - "connections": [ - 143, - 150 - ] + "connections": [143, 150] }, { "id": 150, "x": 9.61, "y": 0.05, "z": 108.88, - "connections": [ - 149, - 151 - ] + "connections": [149, 151] }, { "id": 151, "x": 5.08, "y": 0, "z": 117.04, - "connections": [ - 150, - 152 - ] + "connections": [150, 152] }, { "id": 152, "x": -0.49, "y": 0, "z": 119.26, - "connections": [ - 151, - 153 - ] + "connections": [151, 153] }, { "id": 153, "x": -5.3, "y": 0, "z": 116.93, - "connections": [ - 152 - ] + "connections": [152] }, { "id": 154, @@ -1460,79 +1040,56 @@ "x": -7.58, "y": 5.97, "z": -28.56, - "connections": [ - 4, - 179 - ] + "connections": [4, 179] }, { "id": 158, "x": -17.19, "y": 2.57, "z": -60.82, - "connections": [ - 159, - 162, - 180 - ] + "connections": [159, 162, 180] }, { "id": 159, "x": -2.45, "y": 2.37, "z": -65.38, - "connections": [ - 158, - 160 - ] + "connections": [158, 160] }, { "id": 160, "x": 7.4, "y": 2.46, "z": -63.99, - "connections": [ - 159, - 161 - ] + "connections": [159, 161] }, { "id": 161, "x": 24.59, "y": 2.71, "z": -56.66, - "connections": [ - 160 - ] + "connections": [160] }, { "id": 162, "x": -31.53, "y": 2.44, "z": -56.42, - "connections": [ - 158, - 163 - ] + "connections": [158, 163] }, { "id": 163, "x": -39.67, "y": 2.4, "z": -51.61, - "connections": [ - 162, - 164 - ] + "connections": [162, 164] }, { "id": 164, "x": -49.61, "y": 2.28, "z": -44.28, - "connections": [ - 163 - ] + "connections": [163] }, { "id": 165, @@ -1546,146 +1103,104 @@ "x": 43.06, "y": 4.57, "z": -7.87, - "connections": [ - 91 - ] + "connections": [91] }, { "id": 167, "x": 25.12, "y": 5.18, "z": 28.43, - "connections": [ - 108, - 168 - ] + "connections": [108, 168] }, { "id": 168, "x": 33.68, "y": 4.56, "z": 28.11, - "connections": [ - 167, - 169 - ] + "connections": [167, 169] }, { "id": 169, "x": 40.79, "y": 4.09, "z": 25.69, - "connections": [ - 168, - 170 - ] + "connections": [168, 170] }, { "id": 170, "x": 47.9, "y": 3.41, "z": 26.49, - "connections": [ - 169, - 171 - ] + "connections": [169, 171] }, { "id": 171, "x": 52.58, "y": 2.73, "z": 31.99, - "connections": [ - 170 - ] + "connections": [170] }, { "id": 172, "x": 7.42, "y": 7.03, "z": 8.82, - "connections": [ - 63, - 173 - ] + "connections": [63, 173] }, { "id": 173, "x": 11, "y": 6.74, "z": 15.13, - "connections": [ - 172, - 62 - ] + "connections": [172, 62] }, { "id": 174, "x": -24.16, "y": 5.72, "z": 21.45, - "connections": [ - 55, - 175 - ] + "connections": [55, 175] }, { "id": 175, "x": -31.1, "y": 4.88, "z": 26.48, - "connections": [ - 174, - 176 - ] + "connections": [174, 176] }, { "id": 176, "x": -35.84, "y": 4.17, "z": 31.18, - "connections": [ - 175, - 177 - ] + "connections": [175, 177] }, { "id": 177, "x": -41.34, "y": 3.37, "z": 36.51, - "connections": [ - 176, - 178 - ] + "connections": [176, 178] }, { "id": 178, "x": -47.11, "y": 2.66, "z": 40.6, - "connections": [ - 177 - ] + "connections": [177] }, { "id": 179, "x": -9.75, "y": 5.03, "z": -38.14, - "connections": [ - 157, - 180 - ] + "connections": [157, 180] }, { "id": 180, "x": -14.38, "y": 3.62, "z": -50.73, - "connections": [ - 179, - 158 - ] + "connections": [179, 158] } -] \ No newline at end of file +] diff --git a/src/components/ebike/EbikeSpeedmeter.tsx b/src/components/ebike/EbikeSpeedmeter.tsx index 827ebf6..917f301 100644 --- a/src/components/ebike/EbikeSpeedmeter.tsx +++ b/src/components/ebike/EbikeSpeedmeter.tsx @@ -151,7 +151,7 @@ export function EbikeSpeedmeter({ // Default centre: horizontal middle + needle-pivot height. // gaugeOffsetX/Y shift the pivot so the arc aligns with cadran.png. const cx = size * (0.5 + gaugeOffsetX); - const cy = size * ((1 - NEEDLE_PIVOT_UV_Y) + gaugeOffsetY); // default ≈ 0.88 × size + const cy = size * (1 - NEEDLE_PIVOT_UV_Y + gaugeOffsetY); // default ≈ 0.88 × size const outerR = size * gaugeOuterR; const innerR = size * gaugeInnerR; @@ -164,7 +164,7 @@ export function EbikeSpeedmeter({ // Radial gradient using #3F67DD — slightly transparent at inner edge, // fully solid at outer edge for a depth effect. const radial = ctx.createRadialGradient(cx, cy, innerR, cx, cy, outerR); - radial.addColorStop(0, "rgba(191, 234, 255, 0)"); // inner edge + radial.addColorStop(0, "rgba(191, 234, 255, 0)"); // inner edge radial.addColorStop(0.7, "rgba(118, 152, 255, 0.95)"); // outer edge // Annular sector shape (outer arc + inner arc reversed) @@ -212,11 +212,12 @@ export function EbikeSpeedmeter({ {/* Needle — pivot at bottom-centre of the arc */} - - + + { const m = await loadDialogueManifest(); if (!m) return; - await playDialogueById(m, PYLON_NARRATIVE_DIALOGUES.demandeAide); + await playDialogueById( + m, + PYLON_NARRATIVE_DIALOGUES.demandeAide, + ); })(); }, { once: true }, @@ -127,7 +132,10 @@ export function PylonDownedPylon(): React.JSX.Element | null { void (async () => { const manifest = await loadDialogueManifest(); if (!manifest) return; - await playDialogueById(manifest, PYLON_NARRATIVE_DIALOGUES.demandeAide); + await playDialogueById( + manifest, + PYLON_NARRATIVE_DIALOGUES.demandeAide, + ); })(); } } else if (step === "npc-return" && !isStraightening) { diff --git a/src/components/gameplay/pylon/PylonFarmerNPC.tsx b/src/components/gameplay/pylon/PylonFarmerNPC.tsx index 5811469..4707d12 100644 --- a/src/components/gameplay/pylon/PylonFarmerNPC.tsx +++ b/src/components/gameplay/pylon/PylonFarmerNPC.tsx @@ -24,9 +24,7 @@ export function PylonFarmerNPC(): React.JSX.Element | null { const step = useGameStore((state) => state.pylon.currentStep); const setMissionStep = useGameStore((state) => state.setMissionStep); const groupRef = useRef(null); - const currentPosRef = useRef( - new THREE.Vector3(...PYLON_FARMER_NPC_POSITION), - ); + const currentPosRef = useRef(new THREE.Vector3(...PYLON_FARMER_NPC_POSITION)); // Reset position when entering arrived, set target when entering npc-return useEffect(() => { @@ -44,7 +42,10 @@ export function PylonFarmerNPC(): React.JSX.Element | null { ? PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight : PYLON_FARMER_NPC_AFTER_POSITION; _target.set(...targetPos); - currentPosRef.current.lerp(_target, Math.min(PYLON_FARMER_NPC_WALK_SPEED * delta, 1)); + currentPosRef.current.lerp( + _target, + Math.min(PYLON_FARMER_NPC_WALK_SPEED * delta, 1), + ); group.position.copy(currentPosRef.current); group.rotation.set(...PYLON_FARMER_NPC_AFTER_ROTATION); group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE); @@ -58,7 +59,8 @@ export function PylonFarmerNPC(): React.JSX.Element | null { }); if (mainState !== "pylon") return null; - if (step !== "arrived" && step !== "npc-return" && step !== "inspected") return null; + if (step !== "arrived" && step !== "npc-return" && step !== "inspected") + return null; return ( diff --git a/src/data/gameplay/zones.ts b/src/data/gameplay/zones.ts index 14675b5..9595baf 100644 --- a/src/data/gameplay/zones.ts +++ b/src/data/gameplay/zones.ts @@ -5,7 +5,7 @@ export const PYLON_APPROACH_ZONE: ZoneConfig = { id: "pylon-approach", position: [ PYLON_WORLD_POSITION[0], - PYLON_WORLD_POSITION[1]- 5, + PYLON_WORLD_POSITION[1] - 5, PYLON_WORLD_POSITION[2], ], radius: 5, From 89050331df4cad9fc8606c76beaf2f5910ecca12 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:15:36 +0200 Subject: [PATCH 06/18] chore(electricienne): switch to idle/walk animations Replaces the placeholder Dance animation set on the electricienne character with the standard idle/walk loop used by the other animated NPCs. --- src/data/world/characters/characterConfig.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/world/characters/characterConfig.ts b/src/data/world/characters/characterConfig.ts index 579cb55..1cae831 100644 --- a/src/data/world/characters/characterConfig.ts +++ b/src/data/world/characters/characterConfig.ts @@ -30,8 +30,8 @@ export const CHARACTER_CONFIGS = { position: [-40.5, 0, 45.5], rotation: [0, -0.35, 0], scale: [1.55, 1.55, 1.55], - animations: ["Dance"], - defaultAnimation: "Dance", + animations: ["idle", "walk"], + defaultAnimation: "idle", }, gerant: { id: "gerant", From d9a92e336c43145374dfe880225f6918e5c8264c Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:51:35 +0200 Subject: [PATCH 07/18] fix(repair): drill explosion to natural group + apply mission rotation - ExplodedModel.createParts now descends recursively through single mesh-bearing wrapper nodes (e.g. Scene > Moto > Eclatement) until reaching a node with multiple mesh-bearing children. Previously the first wrapper was used as root, so models with extra Empty/group parents fell back to flat leaf meshes lerping in local space. - Add optional modelRotation field on RepairMissionConfig so fragmented + repairing models can match the world-space rotation of the source inspection model (parked Ebike). - Ebike mission now uses EBIKE_WORLD_ROTATION_Y/EBIKE_WORLD_SCALE directly so the fragmented bike lines up with the parked bike. --- src/components/three/gameplay/RepairGame.tsx | 2 ++ src/data/gameplay/repairMissions.ts | 7 ++++++- src/types/gameplay/repairMission.ts | 7 +++++++ src/utils/three/ExplodedModel.ts | 22 ++++++++++++++------ 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/three/gameplay/RepairGame.tsx b/src/components/three/gameplay/RepairGame.tsx index c8a990f..615d1de 100644 --- a/src/components/three/gameplay/RepairGame.tsx +++ b/src/components/three/gameplay/RepairGame.tsx @@ -143,6 +143,7 @@ export function RepairGame({ {step === "fragmented" ? ( @@ -160,6 +161,7 @@ export function RepairGame({ <> = { description: "Repair the damaged cooling module before relaunching the bike", modelPath: "/models/ebike/model.gltf", - modelScale: 0.3, + modelScale: EBIKE_WORLD_SCALE, + modelRotation: [0, EBIKE_WORLD_ROTATION_Y, 0], stageUiPath: "/assets/world/UI/ebike-mission-notification.webm", interactUiPath: REPAIR_INTERACT_UI_PATH, brokenUiPath: REPAIR_BROKEN_UI_PATH, diff --git a/src/types/gameplay/repairMission.ts b/src/types/gameplay/repairMission.ts index 6a5e6d7..ef228a3 100644 --- a/src/types/gameplay/repairMission.ts +++ b/src/types/gameplay/repairMission.ts @@ -64,6 +64,13 @@ export interface RepairMissionConfig { description: string; modelPath: string; modelScale?: ModelTransformProps["scale"]; + /** + * World-space rotation applied to the model when mounted by RepairGame + * (fragmented + repairing steps). Should match the rotation used by the + * source object in the world (e.g. parked Ebike) so the fragmented model + * lines up visually with the inspection model. + */ + modelRotation?: Vector3Tuple; stageUiPath: string; interactUiPath: string; brokenUiPath: string; diff --git a/src/utils/three/ExplodedModel.ts b/src/utils/three/ExplodedModel.ts index e646ebd..d381a78 100644 --- a/src/utils/three/ExplodedModel.ts +++ b/src/utils/three/ExplodedModel.ts @@ -53,13 +53,23 @@ export class ExplodedModel { } private createParts(model: THREE.Object3D): ExplodedPart[] { - const root = - model.children.length === 1 && model.children[0] - ? model.children[0] - : model; - const directChildren = root.children.filter((child) => hasMesh(child)); + // Drill down through single-mesh-bearing branches until we find a node + // with multiple mesh-bearing children (the natural "explosion group" the + // modeler authored). Falls back to flat mesh list only if no such group + // exists. This avoids exploding leaves in local space when wrapper nodes + // (e.g. "Empty" + "Moto" > "Eclatement") sit above the actual group. + let current = model; + while (true) { + const meshChildren = current.children.filter((child) => hasMesh(child)); + if (meshChildren.length === 1 && meshChildren[0]) { + current = meshChildren[0]; + continue; + } + break; + } + const directChildren = current.children.filter((child) => hasMesh(child)); const sourceObjects = - directChildren.length > 1 ? directChildren : getMeshes(root); + directChildren.length > 1 ? directChildren : getMeshes(current); if (sourceObjects.length === 0) return []; From ed0683d814854bfbfdd611c06158106a159be488 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:52:00 +0200 Subject: [PATCH 08/18] feat(ebike): rename interact label to 'Lancer le repair game' Clarifies that interacting with the parked Ebike during the ebike mission opens the repair mini-game rather than directly performing a repair action. --- src/components/ebike/Ebike.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ebike/Ebike.tsx b/src/components/ebike/Ebike.tsx index dfa8c50..a0fdf03 100644 --- a/src/components/ebike/Ebike.tsx +++ b/src/components/ebike/Ebike.tsx @@ -353,7 +353,7 @@ export function Ebike({ ]; const interactionLabel = mainState === "ebike" - ? "Réparer l'e-bike" + ? "Lancer le repair game" : movementMode === "walk" ? "Monter sur le bike" : "Descendre du bike"; From be5d03a30c5c23e44900e1c12fd7e6c8d5b0b7f8 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:53:06 +0200 Subject: [PATCH 09/18] feat(ui): redesign InteractPrompt per Figma DA - Larger label box and key cube on white-translucent backgrounds (rgba(255, 255, 255, 0.92)) with black Inter 900 text and rounded 12px corners + soft drop shadow. - Move from bottom: 30% to bottom: 12% so the prompt sits closer to the visual center of attention near focused world objects. - Key cube grown 24x24 -> 64x64 / font 13 -> 32, label padding 0 -> 16x24 / font 13 -> 22, both bold instead of regular. --- src/index.css | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/index.css b/src/index.css index 4e35707..2f25d5c 100644 --- a/src/index.css +++ b/src/index.css @@ -809,12 +809,12 @@ canvas { .interact-prompt { position: fixed; - bottom: 30%; + bottom: 12%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; - gap: 8px; + gap: 12px; pointer-events: none; z-index: 10; } @@ -823,21 +823,32 @@ canvas { display: inline-flex; align-items: center; justify-content: center; - width: 24px; - height: 24px; - background: rgba(255, 255, 255, 0.15); - border: 1px solid rgba(255, 255, 255, 0.5); - border-radius: 4px; - font-size: 13px; - font-weight: 600; - color: white; + width: 64px; + height: 64px; + background: rgba(255, 255, 255, 0.92); + border-radius: 12px; + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); + font-family: "Inter", sans-serif; + font-size: 32px; + font-weight: 900; font-style: normal; + color: #0a0a0a; + letter-spacing: 0; } .interact-prompt__label { - font-size: 13px; - color: rgba(255, 255, 255, 0.85); - letter-spacing: 0.03em; + display: inline-flex; + align-items: center; + padding: 16px 24px; + background: rgba(255, 255, 255, 0.92); + border-radius: 12px; + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); + font-family: "Inter", sans-serif; + font-size: 22px; + font-weight: 900; + color: #0a0a0a; + letter-spacing: 0; + line-height: 1; } .repair-movement-lock-indicator { From 220a661d6d18db49b0b1f77bff6661efa06823a1 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 22:57:18 +0200 Subject: [PATCH 10/18] 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). --- .../three/gameplay/RepairFocusBubble.tsx | 133 ++++++++++++++++++ src/components/three/gameplay/RepairGame.tsx | 29 ++++ src/managers/stores/useRepairFocusStore.ts | 25 ++++ src/world/GameStageContent.tsx | 10 +- src/world/debug/TestMap.tsx | 3 + 5 files changed, 193 insertions(+), 7 deletions(-) create mode 100644 src/components/three/gameplay/RepairFocusBubble.tsx create mode 100644 src/managers/stores/useRepairFocusStore.ts diff --git a/src/components/three/gameplay/RepairFocusBubble.tsx b/src/components/three/gameplay/RepairFocusBubble.tsx new file mode 100644 index 0000000..b98872d --- /dev/null +++ b/src/components/three/gameplay/RepairFocusBubble.tsx @@ -0,0 +1,133 @@ +import { useEffect, useMemo, useRef } from "react"; +import gsap from "gsap"; +import * as THREE from "three"; +import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore"; + +const BUBBLE_RADIUS_METERS = 10; +const BUBBLE_GROW_DURATION_SECONDS = 2.5; +const BUBBLE_SHRINK_DURATION_SECONDS = 1.2; +const BUBBLE_COLOR = "#060814"; +const BUBBLE_OPACITY = 0.92; +const BUBBLE_SHELL_RADIUS = 1; // sphere geometry baked at radius=1, scale = radius + +/** + * Dark sphere shroud rendered around the active repair model when the + * focus state is active. Grows from 0 -> BUBBLE_RADIUS_METERS using a + * GSAP `expo.out` ease so the player visually transitions from the open + * map to an isolated repair "cocoon". Reverses on focus end. + * + * The sphere uses BackSide rendering so the player remains inside the + * shroud when they stand near the repair model. A subtle decor pass + * (grid floor + soft directional light + light fog) is rendered as a + * sibling group so it appears once the bubble has expanded. + */ +export function RepairFocusBubble(): React.JSX.Element | null { + const active = useRepairFocusStore((state) => state.active); + const center = useRepairFocusStore((state) => state.center); + const groupRef = useRef(null); + const meshRef = useRef(null); + const decorRef = useRef(null); + const scaleRef = useRef({ value: 0.0001 }); + const decorOpacityRef = useRef({ value: 0 }); + + const sphereGeometry = useMemo( + () => new THREE.SphereGeometry(BUBBLE_SHELL_RADIUS, 48, 32), + [], + ); + const sphereMaterial = useMemo( + () => + new THREE.MeshBasicMaterial({ + color: BUBBLE_COLOR, + side: THREE.BackSide, + transparent: true, + opacity: BUBBLE_OPACITY, + depthWrite: false, + fog: false, + }), + [], + ); + + useEffect(() => { + return () => { + sphereGeometry.dispose(); + sphereMaterial.dispose(); + }; + }, [sphereGeometry, sphereMaterial]); + + useEffect(() => { + const targetScale = active ? BUBBLE_RADIUS_METERS : 0.0001; + const targetDecor = active ? 1 : 0; + const duration = active + ? BUBBLE_GROW_DURATION_SECONDS + : BUBBLE_SHRINK_DURATION_SECONDS; + + const scaleTween = gsap.to(scaleRef.current, { + value: targetScale, + duration, + ease: active ? "expo.out" : "expo.in", + onUpdate: () => { + const mesh = meshRef.current; + if (mesh) mesh.scale.setScalar(scaleRef.current.value); + }, + }); + + const decorTween = gsap.to(decorOpacityRef.current, { + value: targetDecor, + duration: duration * 0.8, + delay: active ? duration * 0.4 : 0, + ease: "power2.inOut", + onUpdate: () => { + const decor = decorRef.current; + if (!decor) return; + decor.traverse((child) => { + if ( + child instanceof THREE.Mesh && + child.material instanceof THREE.Material + ) { + const material = child.material as THREE.Material & { + opacity?: number; + transparent?: boolean; + }; + if (typeof material.opacity === "number") { + material.opacity = decorOpacityRef.current.value; + material.transparent = true; + } + } + }); + }, + }); + + return () => { + scaleTween.kill(); + decorTween.kill(); + }; + }, [active]); + + // Render even when inactive so the shrink tween can play out; visibility + // is implicit via near-zero scale. + return ( + + + + {/* Subtle grid floor visible only inside the bubble */} + + {/* Soft directional light for the repair model */} + + + + + ); +} diff --git a/src/components/three/gameplay/RepairGame.tsx b/src/components/three/gameplay/RepairGame.tsx index 615d1de..4516e87 100644 --- a/src/components/three/gameplay/RepairGame.tsx +++ b/src/components/three/gameplay/RepairGame.tsx @@ -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([ diff --git a/src/managers/stores/useRepairFocusStore.ts b/src/managers/stores/useRepairFocusStore.ts new file mode 100644 index 0000000..a9c11a2 --- /dev/null +++ b/src/managers/stores/useRepairFocusStore.ts @@ -0,0 +1,25 @@ +import { create } from "zustand"; +import type { Vector3Tuple } from "@/types/three/three"; + +/** + * Tracks whether a repair mini-game is currently in its "focused" phase + * (fragmented / scanning / repairing / reassembling). When active, a dark + * sphere expands around the repair model to visually isolate the player + * from the rest of the map. The store also exposes the world-space center + * of the bubble so map content can dim/hide content outside it if needed. + */ +interface RepairFocusStore { + active: boolean; + center: Vector3Tuple; + setFocus: (active: boolean, center?: Vector3Tuple) => void; +} + +export const useRepairFocusStore = create((set) => ({ + active: false, + center: [0, 0, 0], + setFocus: (active, center) => + set((state) => ({ + active, + center: center ?? state.center, + })), +})); diff --git a/src/world/GameStageContent.tsx b/src/world/GameStageContent.tsx index 830575d..3b18fee 100644 --- a/src/world/GameStageContent.tsx +++ b/src/world/GameStageContent.tsx @@ -1,5 +1,6 @@ import { Ebike } from "@/components/ebike/Ebike"; import { InteractableObject } from "@/components/three/interaction/InteractableObject"; +import { RepairFocusBubble } from "@/components/three/gameplay/RepairFocusBubble"; import { RepairGame } from "@/components/three/gameplay/RepairGame"; import { PylonDownedPylon } from "@/components/gameplay/pylon/PylonDownedPylon"; import { PylonNarrativeFlow } from "@/components/gameplay/pylon/PylonNarrativeFlow"; @@ -20,13 +21,7 @@ import { isPylonNarrativeStep } from "@/types/gameplay/repairMission"; import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission"; import type { Vector3Tuple } from "@/types/three/three"; import { getRepairMissionPosition } from "@/utils/gameplay/repairMissionPosition"; -import { - EBIKE_WORLD_POSITION, - EBIKE_WORLD_ROTATION_Y, - EBIKE_WORLD_SCALE, -} from "@/data/ebike/ebikeConfig"; - -const EBIKE_CONFIG_KEY = `${EBIKE_WORLD_POSITION.join(",")}:${EBIKE_WORLD_ROTATION_Y}:${EBIKE_WORLD_SCALE}`; +import { EBIKE_WORLD_POSITION } from "@/data/ebike/ebikeConfig"; interface StageAnchorProps { color: string; @@ -119,6 +114,7 @@ export function GameStageContent(): React.JSX.Element { ))} {mainState === "outro" ? : null} + ); } diff --git a/src/world/debug/TestMap.tsx b/src/world/debug/TestMap.tsx index 7a124f6..7eba1c7 100644 --- a/src/world/debug/TestMap.tsx +++ b/src/world/debug/TestMap.tsx @@ -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 { ))} + + {/* Dynamic Futuristic 3D GPS Dashboard Preview */} Date: Tue, 2 Jun 2026 22:59:04 +0200 Subject: [PATCH 11/18] 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 { - + {repairFocusActive ? null : } ); } 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" ? : null} - {isDebugEnabled() ? ( + {isDebugEnabled() && !repairFocusActive ? ( <> From 4e1ca708b2056820d3a26bec75eafd5949aa435d Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 23:00:30 +0200 Subject: [PATCH 12/18] docs(repair-game): document focus bubble + recursive explosion drill - Add RepairFocusBubble + useRepairFocusStore to the main files table. - New 'Focus Bubble' section documenting the shroud lifecycle, the cocoon decor pass and the vegetation/zone-overlay hide hook. - Update the 'Fragmented' section to describe the recursive descent in ExplodedModel.createParts and the new modelRotation field used to align the fragmented model with the world-space source. - Drop the stale reference to useRepairMovementLocked (removed in a prior commit). --- docs/technical/repair-game.md | 39 ++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/docs/technical/repair-game.md b/docs/technical/repair-game.md index 04afb88..dd31996 100644 --- a/docs/technical/repair-game.md +++ b/docs/technical/repair-game.md @@ -16,14 +16,16 @@ Implemented missions: ## Main Files -| File | Responsibility | -| ---------------------------------------------- | ------------------------------------------------- | -| `src/components/three/gameplay/RepairGame.tsx` | Orchestrates the repair step machine | -| `src/data/gameplay/repairMissions.ts` | Mission-specific data | -| `src/types/gameplay/repairMission.ts` | Mission ids, step ids, guards | -| `src/managers/stores/useGameStore.ts` | Global progression and mission transitions | -| `src/world/GameStageContent.tsx` | Production placement of the three repair missions | -| `src/world/debug/TestMap.tsx` | Debug repair playground placement | +| File | Responsibility | +| ----------------------------------------------------- | ------------------------------------------------- | +| `src/components/three/gameplay/RepairGame.tsx` | Orchestrates the repair step machine | +| `src/components/three/gameplay/RepairFocusBubble.tsx` | Dark sphere shroud + cocoon decor during focus | +| `src/managers/stores/useRepairFocusStore.ts` | Global flag + center for the repair focus bubble | +| `src/data/gameplay/repairMissions.ts` | Mission-specific data | +| `src/types/gameplay/repairMission.ts` | Mission ids, step ids, guards | +| `src/managers/stores/useGameStore.ts` | Global progression and mission transitions | +| `src/world/GameStageContent.tsx` | Production placement of the three repair missions | +| `src/world/debug/TestMap.tsx` | Debug repair playground placement | ## State Machine @@ -159,8 +161,6 @@ The repair case appears near the mission object. The player can: Both paths move to `fragmented`. -`useRepairMovementLocked()` locks player movement during focused repair steps and drives the repair movement indicator. - ### Fragmented File: @@ -171,6 +171,10 @@ src/components/three/models/ExplodableModel.tsx The mission object is shown split apart. A timer then moves the mission to `scanning`. +`ExplodedModel.createParts` walks the GLTF tree recursively, descending through any single mesh-bearing wrapper node (e.g. `Scene > Moto > Eclatement` for the Ebike) until it reaches a node with multiple mesh-bearing children. Those children are the natural "explosion groups" authored by the modeler. This avoids exploding raw leaf meshes in local space when the model has extra empty wrapper nodes above the intended group. + +When mounted, `RepairGame` applies `RepairMissionConfig.modelRotation` and `modelScale` to the fragmented model so it lines up with the source inspection model in world space (e.g. the parked Ebike using `EBIKE_WORLD_ROTATION_Y` / `EBIKE_WORLD_SCALE`). + The default delay comes from: ```txt @@ -256,6 +260,21 @@ The repaired object remains visible. The player validates the completion target, 2. the case plays its exit animation 3. `completeMission(mission)` advances the global game progression +## Focus Bubble + +While the player is in `fragmented`, `scanning`, `repairing` or `reassembling`, `RepairGame` flips `useRepairFocusStore.active = true` and publishes the snapped world center of the repair model. + +`RepairFocusBubble` reads the store and: + +- renders a `BackSide` sphere (radius 1, scaled 0 → 10m) tinted `#060814` at opacity 0.92 +- grows the sphere with GSAP `expo.out` over 2.5 s when focus turns on +- shrinks back with `expo.in` over 1.2 s when focus turns off +- mounts a small "cocoon" decor pass inside (subtle grid floor + soft directional light + ambient) that fades in once the bubble is mostly grown + +`Environment.tsx` and `GameStageContent.tsx` consume the same store flag to unmount the vegetation system and the zone debug visuals while the bubble is up, so trees and gizmos do not pierce the shroud. Terrain, water, sky, clouds and grass remain visible behind the bubble. + +The bubble is mounted both in `GameStageContent` (production scene) and `TestMap` (physics test scene) so the behaviour matches in both contexts. + ## Repair Case Details The case model implementation lives in: From 931308c92ca390e4fdb6caf4bf5c5769c0f5891b Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 23:27:07 +0200 Subject: [PATCH 13/18] fix(ui): tone down InteractPrompt and support empty label - Smaller boxes (36x36 key + 36px-tall label) instead of the previous oversized white pills. - Dark translucent background (rgba(10, 12, 20, 0.55)) with a 1px white outline (rgba(255, 255, 255, 0.7)), no border-radius and white text so the prompt blends with the dark UI instead of being a bright blob over the 3D scene. - Key cube now has a 3D keyboard-key effect (inset top highlight + inset bottom darkening + small bottom drop) so it reads as a physical key. - Key and label are visually separated (gap: 8px) but share the same height for alignment. - InteractPrompt no longer renders the label box when focused.label is empty/whitespace, so callers can show the key prompt alone. --- src/components/ui/InteractPrompt.tsx | 6 +++- src/index.css | 52 +++++++++++++++------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/components/ui/InteractPrompt.tsx b/src/components/ui/InteractPrompt.tsx index 56d21db..dcc634f 100644 --- a/src/components/ui/InteractPrompt.tsx +++ b/src/components/ui/InteractPrompt.tsx @@ -9,10 +9,14 @@ export function InteractPrompt(): React.JSX.Element | null { if (cameraMode !== "player") return null; if (!focused || holding || focused.kind !== "trigger") return null; + const label = focused.label?.trim() ?? ""; + return (
{INTERACT_KEY.toUpperCase()} - {focused.label} + {label.length > 0 ? ( + {label} + ) : null}
); } diff --git a/src/index.css b/src/index.css index 2f25d5c..5a347ec 100644 --- a/src/index.css +++ b/src/index.css @@ -813,41 +813,43 @@ canvas { left: 50%; transform: translateX(-50%); display: flex; - align-items: center; - gap: 12px; + align-items: stretch; + gap: 8px; pointer-events: none; z-index: 10; } -.interact-prompt__key { - display: inline-flex; - align-items: center; - justify-content: center; - width: 64px; - height: 64px; - background: rgba(255, 255, 255, 0.92); - border-radius: 12px; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); - font-family: "Inter", sans-serif; - font-size: 32px; - font-weight: 900; - font-style: normal; - color: #0a0a0a; - letter-spacing: 0; -} - +.interact-prompt__key, .interact-prompt__label { display: inline-flex; align-items: center; - padding: 16px 24px; - background: rgba(255, 255, 255, 0.92); - border-radius: 12px; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); + justify-content: center; + height: 36px; + background: rgba(10, 12, 20, 0.55); + border: 1px solid rgba(255, 255, 255, 0.7); font-family: "Inter", sans-serif; - font-size: 22px; + color: #ffffff; +} + +.interact-prompt__key { + width: 36px; + font-size: 15px; font-weight: 900; - color: #0a0a0a; + font-style: normal; letter-spacing: 0; + /* 3D keyboard key effect: top highlight, bottom inner darkening, + and a thin bottom drop so the key reads as physically pressed-up. */ + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.25), + inset 0 -3px 0 rgba(0, 0, 0, 0.45), + 0 2px 0 rgba(0, 0, 0, 0.55); +} + +.interact-prompt__label { + padding: 0 12px; + font-size: 13px; + font-weight: 700; + letter-spacing: 0.02em; line-height: 1; } From c0e7567849b08d51a9d8a3311fba2b7cb3238aea Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Tue, 2 Jun 2026 23:36:13 +0200 Subject: [PATCH 14/18] fix(ebike): hide interact prompt while actively riding the bike While the player is mounted on the e-bike and pressing a movement key, the persistent 'Descendre du bike' prompt was visible on screen and polluted the view during gameplay. The InteractableObject is now unmounted as soon as window.ebikeDriveInputActive flips to true and remounted the moment the bike comes to a stop. The driving signal is read in a useFrame and only flips React state on transitions, so this adds zero per-frame re-renders. --- src/components/ebike/Ebike.tsx | 47 ++++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/src/components/ebike/Ebike.tsx b/src/components/ebike/Ebike.tsx index a0fdf03..7a86bdf 100644 --- a/src/components/ebike/Ebike.tsx +++ b/src/components/ebike/Ebike.tsx @@ -358,6 +358,19 @@ export function Ebike({ ? "Monter sur le bike" : "Descendre du bike"; + // Hide the interact prompt while the player is actively riding the bike + // (driving input pressed) so the "Descendre du bike" label doesn't + // pollute the view. The prompt comes back the moment the bike comes to + // a stop. window.ebikeDriveInputActive is published every frame by + // PlayerController based on whether a movement key is currently held. + const [isEbikeDriving, setIsEbikeDriving] = useState(false); + useFrame(() => { + const driving = + movementMode === "ebike" && window.ebikeDriveInputActive === true; + if (driving !== isEbikeDriving) setIsEbikeDriving(driving); + }); + const showInteractPrompt = !isEbikeDriving; + const handleInteract = useCallback((): void => { if (window.ebikeBreakdownActive === true) return; @@ -465,22 +478,24 @@ export function Ebike({ {/* radius 20 → ~7 unités monde (scale 0.35). Sphère omnidirectionnelle pour que le raycast fonctionne quelle que soit l'orientation de la caméra (montée ou à pied). */} - - - - - - + {showInteractPrompt ? ( + + + + + + + ) : null} {/* GPS + Speedmeter – same group so they are perfectly co-localised. GPS: full circle (Fresnel mask), renderOrder 10 000 From 83194df14f76ffa5a1069972027a1534032b14fd Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Wed, 3 Jun 2026 00:03:29 +0200 Subject: [PATCH 15/18] fix(ebike): allow player input during mount/dismount camera transition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add lockInput option (default true) to animateCameraTransformTransition so ebike mount/dismount can keep player input active during the 1s camera tween instead of locking via setCinematicPlaying. Also drop the unused camPointPos/dropPointPos debug vars and the matching debugRestingPosition state — the consuming JSX has been commented out for a while. --- src/components/ebike/Ebike.tsx | 45 ++++++++++++++-------------------- src/world/GameCinematics.tsx | 11 +++++++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/ebike/Ebike.tsx b/src/components/ebike/Ebike.tsx index 7a86bdf..e7de0dc 100644 --- a/src/components/ebike/Ebike.tsx +++ b/src/components/ebike/Ebike.tsx @@ -129,12 +129,6 @@ export function Ebike({ // State for debug visualization (synced from refs during useFrame) const [showCameraPoints, setShowCameraPoints] = useState(true); - const [debugRestingPosition, setDebugRestingPosition] = - useState([ - parkedPosition[0], - parkedPosition[1], - parkedPosition[2], - ]); // Keep movementModeRef in sync — useFrame closures capture React state at // render time and can become stale between renders. @@ -321,9 +315,7 @@ export function Ebike({ } // Sync debug visualization state (throttled to avoid excessive re-renders) - if (showCameraPoints) { - setDebugRestingPosition([...restingPositionRef.current]); - } + // Debug visualization positions are derived elsewhere when needed. } else { updateEbikeSounds({ mounted: false, driving: false, breakdown: false }); groupRef.current.position.set(...restingPositionRef.current); @@ -340,17 +332,6 @@ export function Ebike({ } }); - // Debug visualization positions computed from state (not refs) - const camPointPos: Vector3Tuple = [ - debugRestingPosition[0] + EBIKE_CAMERA_TRANSFORM.position[0], - debugRestingPosition[1] + EBIKE_CAMERA_TRANSFORM.position[1], - debugRestingPosition[2] + EBIKE_CAMERA_TRANSFORM.position[2], - ]; - const dropPointPos: Vector3Tuple = [ - debugRestingPosition[0] + EBIKE_DROP_PLAYER_TRANSFORM.position[0], - debugRestingPosition[1] + EBIKE_DROP_PLAYER_TRANSFORM.position[1], - debugRestingPosition[2] + EBIKE_DROP_PLAYER_TRANSFORM.position[2], - ]; const interactionLabel = mainState === "ebike" ? "Lancer le repair game" @@ -409,9 +390,15 @@ export function Ebike({ EBIKE_CAMERA_TRANSFORM.rotation[2], ]; - animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => { - useGameStore.getState().setPlayerMovementMode("ebike"); - }); + animateCameraTransformTransition( + targetCamPos, + targetRotation, + 1, + () => { + useGameStore.getState().setPlayerMovementMode("ebike"); + }, + { lockInput: false }, + ); } else { const currentPos = new THREE.Vector3(); if (groupRef.current) { @@ -437,9 +424,15 @@ export function Ebike({ THREE.MathUtils.radToDeg(currentEuler.z), ]; - animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => { - useGameStore.getState().setPlayerMovementMode("walk"); - }); + animateCameraTransformTransition( + targetCamPos, + targetRotation, + 1, + () => { + useGameStore.getState().setPlayerMovementMode("walk"); + }, + { lockInput: false }, + ); } }, [movementMode, mainState, ebikeStep, setMissionStep, camera, position]); diff --git a/src/world/GameCinematics.tsx b/src/world/GameCinematics.tsx index 8470a35..6a73c3d 100644 --- a/src/world/GameCinematics.tsx +++ b/src/world/GameCinematics.tsx @@ -242,7 +242,10 @@ export function animateCameraTransformTransition( targetRotation: Vector3Tuple, duration: number = 1, onComplete?: () => void, + options: { lockInput?: boolean } = {}, ): void { + const { lockInput = true } = options; + if (!globalCamera) { logger.warn("GameCinematics", "Camera not found for transition"); onComplete?.(); @@ -252,7 +255,9 @@ export function animateCameraTransformTransition( const camera = globalCamera; cameraTransitionTimeline?.kill(); - useGameStore.getState().setCinematicPlaying(true); + if (lockInput) { + useGameStore.getState().setCinematicPlaying(true); + } // Convert target rotation in degrees to quaternion const targetEuler = new THREE.Euler( @@ -274,7 +279,9 @@ export function animateCameraTransformTransition( }, onComplete: () => { cameraTransitionTimeline = null; - useGameStore.getState().setCinematicPlaying(false); + if (lockInput) { + useGameStore.getState().setCinematicPlaying(false); + } onComplete?.(); }, }); From c6283d492cec8d9f8305cf37857ceda266c46523 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Wed, 3 Jun 2026 00:03:44 +0200 Subject: [PATCH 16/18] refactor(debug): rename hand-tracking SVG toggle to Model MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The debug control now reflects what it actually gates: the 3D hand model rendering (used by World.tsx to decide whether to show the hand-tracking gloves), not the legacy SVG visualizer. - Debug.ts: rename showHandTrackingSvg → showHandTrackingModel (state, GUI label "Show Model", getter/setter) - World.tsx: gate showHandTrackingGloves on the new toggle and drop the unused HandTrackingGloveHandedness import --- src/utils/debug/Debug.ts | 18 +++++++++--------- src/world/World.tsx | 12 +++++++++--- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/utils/debug/Debug.ts b/src/utils/debug/Debug.ts index 24df6fe..4ee45d7 100644 --- a/src/utils/debug/Debug.ts +++ b/src/utils/debug/Debug.ts @@ -85,7 +85,7 @@ export class Debug { fogEnabled: boolean; handTrackingSource: HandTrackingSource; showDebugOverlay: boolean; - showHandTrackingSvg: boolean; + showHandTrackingModel: boolean; showInteractionSpheres: boolean; showPerf: boolean; sceneMode: SceneMode; @@ -108,7 +108,7 @@ export class Debug { fogEnabled: FOG_CONFIG.enabled, handTrackingSource: storedControls.handTrackingSource ?? "browser", showDebugOverlay: true, - showHandTrackingSvg: false, + showHandTrackingModel: false, showInteractionSpheres: false, showPerf: true, sceneMode: storedControls.sceneMode ?? "game", @@ -156,10 +156,10 @@ export class Debug { const handTrackingFolder = this.createFolder("Hand Tracking"); handTrackingFolder - ?.add(this.controls, "showHandTrackingSvg") - .name("Show SVG") + ?.add(this.controls, "showHandTrackingModel") + .name("Show Model") .onChange((value: boolean) => { - this.controls.showHandTrackingSvg = value; + this.controls.showHandTrackingModel = value; this.emit(); }); @@ -281,12 +281,12 @@ export class Debug { return this.controls.showInteractionSpheres; } - getShowHandTrackingSvg(): boolean { - return this.controls.showHandTrackingSvg; + getShowHandTrackingModel(): boolean { + return this.controls.showHandTrackingModel; } - setShowHandTrackingSvg(value: boolean): void { - this.controls.showHandTrackingSvg = value; + setShowHandTrackingModel(value: boolean): void { + this.controls.showHandTrackingModel = value; this.emit(); } diff --git a/src/world/World.tsx b/src/world/World.tsx index 09af42f..911c734 100644 --- a/src/world/World.tsx +++ b/src/world/World.tsx @@ -6,6 +6,7 @@ import { } from "@/data/player/playerConfig"; import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig"; import { useCameraMode } from "@/hooks/debug/useCameraMode"; +import { useDebugStore } from "@/hooks/debug/useDebugStore"; import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug"; import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug"; import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug"; @@ -32,7 +33,6 @@ import { CharacterSystem } from "@/world/characters/CharacterSystem"; import { Player } from "@/world/player/Player"; import { TestMap } from "@/world/debug/TestMap"; import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading"; -import type { HandTrackingGloveHandedness } from "@/hooks/handTracking/useHandTrackingGloveStatus"; import type { HandTrackingHand } from "@/types/handTracking/handTracking"; interface WorldProps { @@ -41,7 +41,7 @@ interface WorldProps { function hasTrackedHand( hands: HandTrackingHand[], - handedness: HandTrackingGloveHandedness, + handedness: "left" | "right", ): boolean { return hands.some((hand) => hand.handedness.toLowerCase() === handedness); } @@ -60,6 +60,9 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element { (state) => state.showPlayerModel, ); const showDebugOctree = useDebugVisualsStore((state) => state.showOctree); + const showHandTrackingModel = useDebugStore((debug) => + debug.getShowHandTrackingModel(), + ); const { hands, status, usageStatus } = useHandTrackingSnapshot(); const { octree, @@ -74,7 +77,10 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element { ? PLAYER_SPAWN_POSITION_GAME : PLAYER_SPAWN_POSITION_PHYSICS; const showHandTrackingGloves = - status === "connected" && usageStatus !== "inactive" && hands.length > 0; + showHandTrackingModel && + status === "connected" && + usageStatus !== "inactive" && + hands.length > 0; const showLeftHandTrackingGlove = showHandTrackingGloves && hasTrackedHand(hands, "left"); const showRightHandTrackingGlove = From 974f340d3361fbca31de0b9200650cbf87f54918 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Wed, 3 Jun 2026 00:03:59 +0200 Subject: [PATCH 17/18] style: prettier reflow pylon config and lighting effect Mechanical formatting cleanup carried over from the develop merge: inline single-line tuples and break long lines per project prettier config. No behavior change. --- src/components/gameplay/pylon/PylonLightingEffect.tsx | 7 +++++-- src/data/gameplay/pylonConfig.ts | 6 +----- src/data/gameplay/zones.ts | 6 +----- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/gameplay/pylon/PylonLightingEffect.tsx b/src/components/gameplay/pylon/PylonLightingEffect.tsx index c71648f..fb6c680 100644 --- a/src/components/gameplay/pylon/PylonLightingEffect.tsx +++ b/src/components/gameplay/pylon/PylonLightingEffect.tsx @@ -20,14 +20,17 @@ export function PylonLightingEffect(): null { const step = useGameStore((state) => state.pylon.currentStep); // True from "approaching" until narrator-outro (lighting resets before the outro audio) - const isActive = mainState === "pylon" && step !== "locked" && step !== "narrator-outro"; + const isActive = + mainState === "pylon" && step !== "locked" && step !== "narrator-outro"; // Working THREE.Color instances — lerped every frame const ambientRef = useRef(new THREE.Color(LIGHTING_STATE.ambientColor)); const sunRef = useRef(new THREE.Color(LIGHTING_STATE.sunColor)); // Target colours — updated reactively when isActive changes - const targetAmbientRef = useRef(new THREE.Color(LIGHTING_DEFAULTS.ambientColor)); + const targetAmbientRef = useRef( + new THREE.Color(LIGHTING_DEFAULTS.ambientColor), + ); const targetSunRef = useRef(new THREE.Color(LIGHTING_DEFAULTS.sunColor)); useEffect(() => { diff --git a/src/data/gameplay/pylonConfig.ts b/src/data/gameplay/pylonConfig.ts index acc7edc..6efafc1 100644 --- a/src/data/gameplay/pylonConfig.ts +++ b/src/data/gameplay/pylonConfig.ts @@ -6,11 +6,7 @@ export const PYLON_DOWNED_ROTATION: Vector3Tuple = [0, 0, -0.9]; export const PYLON_UPRIGHT_ROTATION: Vector3Tuple = [0, 0, 0]; -export const PYLON_FARMER_NPC_POSITION: Vector3Tuple = [ - -16.13, - 3.2, - 52.46 -]; +export const PYLON_FARMER_NPC_POSITION: Vector3Tuple = [-16.13, 3.2, 52.46]; export const PYLON_FARMER_NPC_AFTER_POSITION: Vector3Tuple = [ PYLON_WORLD_POSITION[0] + 3, diff --git a/src/data/gameplay/zones.ts b/src/data/gameplay/zones.ts index f8362bf..492ef59 100644 --- a/src/data/gameplay/zones.ts +++ b/src/data/gameplay/zones.ts @@ -4,11 +4,7 @@ import { PYLON_WORLD_POSITION } from "@/data/gameplay/pylonConfig"; // Zones qui active la coupure de courant export const PYLON_APPROACH_ZONE: ZoneConfig = { id: "pylon-approach", - position: [ - 5, - 4, - -21.5 - ], + position: [5, 4, -21.5], radius: 10, height: 18, oneShot: true, From ff4ead1d24f1bcf2c9c163f1aeae50f643869d31 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Wed, 3 Jun 2026 00:04:14 +0200 Subject: [PATCH 18/18] fix(lint): satisfy react-hooks immutability + set-state-in-effect rules MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new react-compiler-aware lint rules flag legitimate Three.js external-system synchronizations (texture/uniform/AnimationAction mutations) and a derived-state reset in PylonDownedPylon. None of these are bugs — they're the canonical way to bridge React state with imperative graphics objects — so they're annotated with targeted eslint-disable comments and a small reorder. - EbikeGPSMap: disable on uniform/texture sync effects - EbikeSpeedmeter: disable around the canvas+texture useFrame sync - PylonFarmerNPC: disable around playAnim (drei AnimationAction fadeIn/fadeOut/setLoop/clampWhenFinished) and the effects/frame callbacks that invoke it - PylonDownedPylon: move showUpright/isPylonInteractive declarations above the useFrame that reads them (fixes access-before-declared) and disable set-state-in-effect on the per-step isRaised reset --- src/components/ebike/EbikeGPSMap.tsx | 4 +++ src/components/ebike/EbikeSpeedmeter.tsx | 3 ++ .../gameplay/pylon/PylonDownedPylon.tsx | 31 ++++++++++--------- .../gameplay/pylon/PylonFarmerNPC.tsx | 29 ++++++++++++++--- 4 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/components/ebike/EbikeGPSMap.tsx b/src/components/ebike/EbikeGPSMap.tsx index 064bcc6..6909930 100644 --- a/src/components/ebike/EbikeGPSMap.tsx +++ b/src/components/ebike/EbikeGPSMap.tsx @@ -181,6 +181,8 @@ export const EbikeGPSMap: React.FC = ({ // Sync texture into uniform when it changes (canvas resize) useEffect(() => { + // External Three.js material uniform sync — intentional side effect. + // eslint-disable-next-line react-hooks/immutability shaderMat.uniforms.map.value = texture; }, [shaderMat, texture]); @@ -196,6 +198,8 @@ export const EbikeGPSMap: React.FC = ({ // Resize the canvas whenever canvasSize changes (texture declared above) useEffect(() => { Object.assign(offscreenCanvas, { width: canvasSize, height: canvasSize }); + // External Three.js texture invalidation — intentional side effect. + // eslint-disable-next-line react-hooks/immutability texture.needsUpdate = true; }, [canvasSize, offscreenCanvas, texture]); diff --git a/src/components/ebike/EbikeSpeedmeter.tsx b/src/components/ebike/EbikeSpeedmeter.tsx index 917f301..1d70f1f 100644 --- a/src/components/ebike/EbikeSpeedmeter.tsx +++ b/src/components/ebike/EbikeSpeedmeter.tsx @@ -123,6 +123,8 @@ export function EbikeSpeedmeter({ ); // ── Frame loop ────────────────────────────────────────────────────────────── + /* External Three.js canvas+texture sync — intentional side effects in useFrame. */ + /* eslint-disable react-hooks/immutability */ useFrame((_, delta) => { // 1. Smooth speed factor const target = THREE.MathUtils.clamp(window.ebikeSpeedFactor ?? 0, 0, 1); @@ -181,6 +183,7 @@ export function EbikeSpeedmeter({ } fillTexture.needsUpdate = true; + /* eslint-enable react-hooks/immutability */ }); return ( diff --git a/src/components/gameplay/pylon/PylonDownedPylon.tsx b/src/components/gameplay/pylon/PylonDownedPylon.tsx index 71923e2..c77c6e3 100644 --- a/src/components/gameplay/pylon/PylonDownedPylon.tsx +++ b/src/components/gameplay/pylon/PylonDownedPylon.tsx @@ -30,9 +30,26 @@ export function PylonDownedPylon(): React.JSX.Element | null { const straightenStartRef = useRef(null); const hasPlayedFirstAudioRef = useRef(false); + const showUpright = + isRaised || + mainState !== "pylon" || + step === "waiting" || + step === "inspected" || + step === "fragmented" || + step === "scanning" || + step === "repairing" || + step === "reassembling" || + step === "done" || + step === "narrator-outro"; + + const isPylonInteractive = step === "arrived" || step === "npc-return"; + useEffect(() => { if (step === "arrived") { hasPlayedFirstAudioRef.current = false; + // Reset the "raised" latch when a new run begins. This is derived + // resync from the step prop and runs once per step transition. + // eslint-disable-next-line react-hooks/set-state-in-effect setIsRaised(false); } }, [step]); @@ -62,20 +79,6 @@ export function PylonDownedPylon(): React.JSX.Element | null { ); }); - const showUpright = - isRaised || - mainState !== "pylon" || - step === "waiting" || - step === "inspected" || - step === "fragmented" || - step === "scanning" || - step === "repairing" || - step === "reassembling" || - step === "done" || - step === "narrator-outro"; - - const isPylonInteractive = step === "arrived" || step === "npc-return"; - const beginStraighten = (): void => { setIsStraightening(true); pylonStraighteningSignal.started = true; diff --git a/src/components/gameplay/pylon/PylonFarmerNPC.tsx b/src/components/gameplay/pylon/PylonFarmerNPC.tsx index 638248b..323dd60 100644 --- a/src/components/gameplay/pylon/PylonFarmerNPC.tsx +++ b/src/components/gameplay/pylon/PylonFarmerNPC.tsx @@ -34,7 +34,10 @@ const _target = new THREE.Vector3(); * Compute the Y rotation (radians) for a model whose default forward * direction is +Z, so that it faces from `from` toward `to`. */ -function faceToward(from: THREE.Vector3, to: readonly [number, number, number]): number { +function faceToward( + from: THREE.Vector3, + to: readonly [number, number, number], +): number { const dx = to[0] - from.x; const dz = to[2] - from.z; return Math.atan2(dx, dz); @@ -71,6 +74,10 @@ export function PylonFarmerNPC(): React.JSX.Element | null { // ─── playAnim ───────────────────────────────────────────────────────────── // NOTE: actions is intentionally in the dep array so this callback is // recreated when drei's internal state populates the actions map. + // External THREE.AnimationAction lifecycle methods (fadeOut/fadeIn/play + + // setLoop/clampWhenFinished mutations) are intentional side effects on + // drei-managed objects. + /* eslint-disable react-hooks/immutability */ const playAnim = useCallback( (name: NPCAnimation, fade = ANIM_FADE): void => { if (currentAnimRef.current === name) return; @@ -89,6 +96,7 @@ export function PylonFarmerNPC(): React.JSX.Element | null { }, [actions], ); + /* eslint-enable react-hooks/immutability */ // ─── Async audio after pylon is raised ──────────────────────────────────── const playPostRaiseAudioAndAdvance = useCallback(async () => { @@ -112,6 +120,8 @@ export function PylonFarmerNPC(): React.JSX.Element | null { // ─── Step-driven animation ──────────────────────────────────────────────── // Fires when step changes OR when playAnim changes (i.e. when actions load). + // playAnim mutates drei-managed AnimationAction internals (intentional). + /* eslint-disable react-hooks/immutability */ useEffect(() => { currentAnimRef.current = null; if (step === "arrived") { @@ -168,7 +178,10 @@ export function PylonFarmerNPC(): React.JSX.Element | null { currentPosRef.current.lerp(_target, t); } else if (!isStraightening && currentAnimRef.current === "walk") { playAnim("idle"); - savedRotationYRef.current = faceToward(currentPosRef.current, PYLON_WORLD_POSITION); + savedRotationYRef.current = faceToward( + currentPosRef.current, + PYLON_WORLD_POSITION, + ); } group.position.copy(currentPosRef.current); } else if (step === "inspected") { @@ -180,8 +193,15 @@ export function PylonFarmerNPC(): React.JSX.Element | null { } // ── Rotation ────────────────────────────────────────────────────────── - if (step === "npc-return" && !isCompleted && currentAnimRef.current === "walk") { - const walkRotY = faceToward(currentPosRef.current, PYLON_FARMER_NPC_WALK_LOOK_AT); + if ( + step === "npc-return" && + !isCompleted && + currentAnimRef.current === "walk" + ) { + const walkRotY = faceToward( + currentPosRef.current, + PYLON_FARMER_NPC_WALK_LOOK_AT, + ); group.rotation.set(0, walkRotY, 0); } else { group.rotation.set(0, savedRotationYRef.current, 0); @@ -189,6 +209,7 @@ export function PylonFarmerNPC(): React.JSX.Element | null { group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE); }); + /* eslint-enable react-hooks/immutability */ if (mainState !== "pylon") return null; if (step !== "arrived" && step !== "npc-return" && step !== "inspected")