feat: update ui and intro sequence

src/components/ebike/Ebike.tsx

@@ -14,6 +14,7 @@ import { PLAYER_EYE_HEIGHT } from "@/data/player/playerConfig";
 import {
   EBIKE_CAMERA_TRANSFORM,
   EBIKE_DROP_PLAYER_TRANSFORM,
+  EBIKE_WORLD_SCALE,
   EBIKE_WORLD_ROTATION_Y,
 } from "@/data/ebike/ebikeConfig";
 import type { Vector3Tuple } from "@/types/three/three";
@@ -283,17 +284,18 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
           ref={groupRef}
           position={position}
           rotation={[0, EBIKE_WORLD_ROTATION_Y, 0]}
+          scale={EBIKE_WORLD_SCALE}
         >
           <primitive object={model} />
           <InteractableObject
             kind="trigger"
             label={interactionLabel}
             position={position}
-            radius={15}
+            radius={5}
             onPress={handleInteract}
           >
             <mesh>
-              <boxGeometry args={[10, 13, 2]} />
+              <boxGeometry args={[8, 9, 2]} />
               <meshBasicMaterial colorWrite={false} depthWrite={false} />
             </mesh>
           </InteractableObject>

src/components/game/EbikeIntroSequence.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
 import { MissionNotification } from "@/components/ui/MissionNotification";
 import {
   EBIKE_BREAKDOWN_DIALOGUE_DELAY_MS,
   EBIKE_BREAKDOWN_DIALOGUE_ID,
-  EBIKE_INTRO_RIDE_DURATION_MS,
+  EBIKE_INTRO_BREAKDOWN_DISTANCE,
   EBIKE_SOUNDS,
 } from "@/data/ebike/ebikeConfig";
+import { INTRO_MISSION_NOTIFICATION_IMAGE_PATH } from "@/data/gameplay/missionNotifications";
 import { AudioManager } from "@/managers/AudioManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
@@ -18,6 +20,9 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
   const completeIntro = useGameStore((state) => state.completeIntro);
   const [breakdownDialogueDone, setBreakdownDialogueDone] = useState(false);
   const hasStartedBreakdown = useRef(false);
+  const rideDistance = useRef(0);
+  const lastRidePosition = useRef<THREE.Vector3 | null>(null);
+  const currentRidePosition = useRef(new THREE.Vector3());
 
   useEffect(() => {
     if (introStep !== "await-ebike-mount" || movementMode !== "ebike") return;
@@ -26,16 +31,45 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
   }, [introStep, movementMode, setIntroStep]);
 
   useEffect(() => {
-    if (introStep !== "ebike-intro-ride") return undefined;
+    if (introStep !== "ebike-intro-ride") return;
 
-    const timeoutId = window.setTimeout(() => {
-      setIntroStep("ebike-breakdown");
-    }, EBIKE_INTRO_RIDE_DURATION_MS);
+    rideDistance.current = 0;
+    lastRidePosition.current = null;
+  }, [introStep]);
 
-    return () => {
-      window.clearTimeout(timeoutId);
+  useEffect(() => {
+    if (introStep !== "ebike-intro-ride" || movementMode !== "ebike") {
+      return undefined;
+    }
+
+    let animationFrameId = 0;
+    const tick = () => {
+      const parkedPosition = window.ebikeParkedPosition;
+      if (parkedPosition) {
+        currentRidePosition.current.set(...parkedPosition);
+        if (!lastRidePosition.current) {
+          lastRidePosition.current = currentRidePosition.current.clone();
+        } else {
+          rideDistance.current += currentRidePosition.current.distanceTo(
+            lastRidePosition.current,
+          );
+          lastRidePosition.current.copy(currentRidePosition.current);
+        }
+
+        if (rideDistance.current >= EBIKE_INTRO_BREAKDOWN_DISTANCE) {
+          setIntroStep("ebike-breakdown");
+          return;
+        }
+      }
+
+      animationFrameId = window.requestAnimationFrame(tick);
     };
-  }, [introStep, setIntroStep]);
+
+    animationFrameId = window.requestAnimationFrame(tick);
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [introStep, movementMode, setIntroStep]);
 
   useEffect(() => {
     if (introStep !== "ebike-breakdown" || hasStartedBreakdown.current) {
@@ -100,14 +134,27 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
     }
   }, [introStep]);
 
-  if (introStep !== "await-ebike-mount" && introStep !== "ebike-intro-ride") {
+  if (
+    introStep !== "reveal" &&
+    introStep !== "await-ebike-mount" &&
+    introStep !== "ebike-intro-ride" &&
+    introStep !== "ebike-breakdown"
+  ) {
     return null;
   }
 
+  if (introStep === "ebike-breakdown") {
+    return <MissionNotification mission="ebike" />;
+  }
+
   return (
     <MissionNotification
-      mission="ebike"
-      visible={introStep === "await-ebike-mount"}
+      imagePath={INTRO_MISSION_NOTIFICATION_IMAGE_PATH}
+      visible={
+        introStep === "reveal" ||
+        introStep === "await-ebike-mount" ||
+        introStep === "ebike-intro-ride"
+      }
     />
   );
 }

src/components/ui/MissionNotification.tsx

@@ -2,14 +2,19 @@ import { MISSION_NOTIFICATION_IMAGE_PATHS } from "@/data/gameplay/missionNotific
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 
 interface MissionNotificationProps {
-  mission: RepairMissionId;
+  mission?: RepairMissionId;
+  imagePath?: string;
   visible?: boolean;
 }
 
 export function MissionNotification({
   mission,
+  imagePath,
   visible = true,
 }: MissionNotificationProps): React.JSX.Element {
+  const src =
+    imagePath ?? (mission ? MISSION_NOTIFICATION_IMAGE_PATHS[mission] : "");
+
   return (
     <div
       className={`mission-notification${visible ? "" : " mission-notification--hidden"}`}
@@ -19,7 +24,7 @@ export function MissionNotification({
       <span className="mission-notification__image-wrap">
         <img
           className="mission-notification__image"
-          src={MISSION_NOTIFICATION_IMAGE_PATHS[mission]}
+          src={src}
           alt="Nouvel objectif de mission"
         />
       </span>