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: 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/Ebike.tsx b/src/components/ebike/Ebike.tsx index a4c6215..e7de0dc 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); @@ -119,12 +129,6 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { // 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. @@ -135,7 +139,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 +198,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 +230,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); @@ -307,9 +315,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { } // 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); @@ -326,24 +332,26 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { } }); - // 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" - ? "Réparer l'e-bike" + ? "Lancer le repair game" : movementMode === "walk" ? "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; @@ -382,9 +390,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { 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) { @@ -410,9 +424,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { 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]); @@ -451,25 +471,36 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element { {/* 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 Speedmeter: upper-half arc overlay, renderOrder 10 001 rotation: Math.PI/2 radians = 90° (NOT the number 90 which = ~116.6°) */} - = ({ // 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 827ebf6..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); @@ -151,7 +153,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 +166,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) @@ -181,6 +183,7 @@ export function EbikeSpeedmeter({ } fillTexture.needsUpdate = true; + /* eslint-enable react-hooks/immutability */ }); return ( @@ -212,11 +215,12 @@ export function EbikeSpeedmeter({ {/* Needle — pivot at bottom-centre of the arc */} - - + + { 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]); @@ -133,7 +136,10 @@ export function PylonDownedPylon(): React.JSX.Element | null { void (async () => { const m = await loadDialogueManifest(); if (!m) return; - await playDialogueById(m, PYLON_NARRATIVE_DIALOGUES.demandeAide); + await playDialogueById( + m, + PYLON_NARRATIVE_DIALOGUES.demandeAide, + ); })(); }, { once: true }, @@ -143,7 +149,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 1ff02c0..c7b8c24 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); @@ -92,6 +95,12 @@ function PylonFarmerNPCContent(): React.JSX.Element { const { actions } = useAnimations(animations, model); // ─── 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; @@ -110,6 +119,7 @@ function PylonFarmerNPCContent(): React.JSX.Element { }, [actions], ); + /* eslint-enable react-hooks/immutability */ // ─── Async audio after pylon is raised ──────────────────────────────────── const playPostRaiseAudioAndAdvance = useCallback(async () => { @@ -131,6 +141,9 @@ function PylonFarmerNPCContent(): React.JSX.Element { }, [setMissionStep]); // ─── 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") { @@ -196,7 +209,10 @@ function PylonFarmerNPCContent(): React.JSX.Element { 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" || step === "done") { @@ -208,8 +224,15 @@ function PylonFarmerNPCContent(): React.JSX.Element { } // ── 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); @@ -217,6 +240,7 @@ function PylonFarmerNPCContent(): React.JSX.Element { group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE); }); + /* eslint-enable react-hooks/immutability */ return ( diff --git a/src/components/gameplay/pylon/PylonLightingEffect.tsx b/src/components/gameplay/pylon/PylonLightingEffect.tsx index 3255eb7..9d2ce05 100644 --- a/src/components/gameplay/pylon/PylonLightingEffect.tsx +++ b/src/components/gameplay/pylon/PylonLightingEffect.tsx @@ -32,7 +32,9 @@ export function PylonLightingEffect(): null { 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/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 6690602..ca5a6bd 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"; @@ -72,8 +73,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]); @@ -98,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; @@ -131,6 +163,7 @@ export function RepairGame({ {step === "fragmented" ? ( @@ -148,6 +181,7 @@ export function RepairGame({ <> - 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/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/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/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/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); } diff --git a/src/data/gameplay/repairMissions.ts b/src/data/gameplay/repairMissions.ts index b5be81d..aa93b50 100644 --- a/src/data/gameplay/repairMissions.ts +++ b/src/data/gameplay/repairMissions.ts @@ -3,6 +3,10 @@ import type { RepairMissionConfig, RepairMissionId, } from "@/types/gameplay/repairMission"; +import { + EBIKE_WORLD_ROTATION_Y, + EBIKE_WORLD_SCALE, +} from "@/data/ebike/ebikeConfig"; const REPAIR_INTERACT_UI_PATH = "/assets/world/UI/interagir.webm"; const REPAIR_BROKEN_UI_PATH = "/assets/world/UI/cassé.webm"; @@ -20,7 +24,8 @@ export const REPAIR_MISSIONS: Record = { 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/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, 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", 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/index.css b/src/index.css index 4e35707..5a347ec 100644 --- a/src/index.css +++ b/src/index.css @@ -809,35 +809,48 @@ canvas { .interact-prompt { position: fixed; - bottom: 30%; + bottom: 12%; left: 50%; transform: translateX(-50%); display: flex; - align-items: center; + align-items: stretch; gap: 8px; pointer-events: none; z-index: 10; } -.interact-prompt__key { +.interact-prompt__key, +.interact-prompt__label { 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; + height: 36px; + background: rgba(10, 12, 20, 0.55); + border: 1px solid rgba(255, 255, 255, 0.7); + font-family: "Inter", sans-serif; + color: #ffffff; +} + +.interact-prompt__key { + width: 36px; + font-size: 15px; + font-weight: 900; 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; - color: rgba(255, 255, 255, 0.85); - letter-spacing: 0.03em; + font-weight: 700; + letter-spacing: 0.02em; + line-height: 1; } .repair-movement-lock-indicator { 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/types/gameplay/repairMission.ts b/src/types/gameplay/repairMission.ts index dda6081..bc330a6 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/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/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 []; 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/GameCinematics.tsx b/src/world/GameCinematics.tsx index 364d297..bba64cd 100644 --- a/src/world/GameCinematics.tsx +++ b/src/world/GameCinematics.tsx @@ -250,7 +250,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?.(); @@ -260,7 +263,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( @@ -282,7 +287,9 @@ export function animateCameraTransformTransition( }, onComplete: () => { cameraTransitionTimeline = null; - useGameStore.getState().setCinematicPlaying(false); + if (lockInput) { + useGameStore.getState().setCinematicPlaying(false); + } onComplete?.(); }, }); diff --git a/src/world/GameStageContent.tsx b/src/world/GameStageContent.tsx index b8e5720..158d4a0 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 { FarmNarrativeFlow } from "@/components/gameplay/farm/FarmNarrativeFlow"; import { PylonDownedPylon } from "@/components/gameplay/pylon/PylonDownedPylon"; @@ -17,6 +18,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 { isFarmNarrativeStep, @@ -25,13 +27,7 @@ import { 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; @@ -96,6 +92,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 farmStep = useGameStore((state) => state.farm.currentStep); @@ -110,7 +107,7 @@ export function GameStageContent(): React.JSX.Element { - {isDebugEnabled() ? ( + {isDebugEnabled() && !repairFocusActive ? ( <> @@ -131,6 +128,7 @@ export function GameStageContent(): React.JSX.Element { ))} {mainState === "outro" ? : null} + ); } 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 = diff --git a/src/world/debug/TestMap.tsx b/src/world/debug/TestMap.tsx index ec7f016..0c37273 100644 --- a/src/world/debug/TestMap.tsx +++ b/src/world/debug/TestMap.tsx @@ -3,7 +3,9 @@ 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 { 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"; @@ -239,11 +241,16 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element { + {zone.mission === "ebike" ? ( + + ) : null}
))} + + {/* Dynamic Futuristic 3D GPS Dashboard Preview */} 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) {