wip mission 2

src/components/ui/DialogMessage.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+interface DialogMessageProps {
+  message: string;
+  duration?: number;
+  onClose?: () => void;
+}
+
+export function DialogMessage({
+  message,
+  duration = 3000,
+  onClose,
+}: DialogMessageProps): React.JSX.Element | null {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onClose?.();
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: "20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        backgroundColor: "rgba(0, 0, 0, 0.9)",
+        padding: "1rem 2rem",
+        borderRadius: "8px",
+        border: "2px solid #fff",
+        zIndex: 200,
+        maxWidth: "80%",
+      }}
+    >
+      <p
+        style={{
+          color: "#fff",
+          margin: 0,
+          fontSize: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {message}
+      </p>
+    </div>
+  );
+}

src/components/ui/IntroUI.tsx

@@ -1,8 +1,10 @@
 import { useState } from "react";
-import { useGameStep } from "@/hooks/useGameStep";
+import { useGameStore } from "@/stores/gameStore";
 
 export function IntroUI(): React.JSX.Element | null {
-  const { step, setPlayerName, transitionTo } = useGameStep();
+  const step = useGameStore((state) => state.step);
+  const setPlayerName = useGameStore((state) => state.setPlayerName);
+  const setStep = useGameStore((state) => state.setStep);
   const [inputValue, setInputValue] = useState("");
 
   if (step !== "naming") return null;
@@ -13,7 +15,7 @@ export function IntroUI(): React.JSX.Element | null {
     console.log("[IntroUI] Submitting, name:", inputValue.trim());
     setPlayerName(inputValue.trim());
     console.log("[IntroUI] Calling transitionTo('bienvenue')");
-    transitionTo("bienvenue");
+    setStep("bienvenue");
     console.log("[IntroUI] After transitionTo, step should be:", step);
   };
 
@@ -98,7 +100,8 @@ export function IntroUI(): React.JSX.Element | null {
 }
 
 export function BienvenueDisplay(): React.JSX.Element | null {
-  const { step, playerName } = useGameStep();
+  const step = useGameStore((state) => state.step);
+  const playerName = useGameStore((state) => state.playerName);
 
   if (step !== "bienvenue") return null;