wip mission 2

src/App.tsx

@@ -1,12 +1,26 @@
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Crosshair } from "@/components/ui/Crosshair";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
 import { IntroUI, BienvenueDisplay } from "@/components/ui/IntroUI";
+import { DialogMessage } from "@/components/ui/DialogMessage";
+import { useGameStore } from "@/stores/gameStore";
 import { DebugPerf } from "@/utils/debug/DebugPerf";
 import { World } from "@/world/World";
 
 function App(): React.JSX.Element {
+  const dialogMessage = useGameStore((state) => state.dialogMessage);
+  const hideDialog = useGameStore((state) => state.hideDialog);
+
+  useEffect(() => {
+    if (dialogMessage) {
+      const timer = setTimeout(() => {
+        hideDialog();
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [dialogMessage, hideDialog]);
+
   return (
     <>
       <Canvas camera={{ position: [85, 60, 85], fov: 42 }} shadows>
@@ -19,6 +33,13 @@ function App(): React.JSX.Element {
       <InteractPrompt />
       <IntroUI />
       <BienvenueDisplay />
+      {dialogMessage && (
+        <DialogMessage
+          message={dialogMessage}
+          duration={3000}
+          onClose={hideDialog}
+        />
+      )}
     </>
   );
 }