- Feature Complete -> Gray Boxing a faire.

front/src/components/3d/Marker.tsx

@@ -10,12 +10,12 @@ interface MarkerProps {
 
 export default function Marker({ position, color, onClick }: MarkerProps) {
 
+    const [positionState, setPositionState] = React.useState(position)
     
-
     // Return the marker object
     // return <primitive object={marker}  />
     return (
-        <mesh position={position} rotation={[Math.PI, 0, 0]} onClick={onClick}>
+        <mesh position={positionState} rotation={[Math.PI,0,0]} onClick={onClick} onPointerOver={(e) => setPositionState([positionState[0], positionState[1], positionState[2] + 0.1])} onPointerOut={(e) => setPositionState(position)}>
             <coneGeometry args={[0.15, 0.6, 6]} />
             <meshStandardMaterial color={color} side={THREE.DoubleSide} />
         </mesh>

front/src/components/Modal.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+interface ModalProps {
+    state: "none" | "flex",
+    setState: (state: "none" | "flex") => void
+    question : {
+        question: string,
+        reponse_idx: number,
+        choix: string[]
+    },
+    valides?: [boolean[], React.Dispatch<React.SetStateAction<boolean[]>>],
+    markerIndex?: number
+}
+
+export default function Modal({ state, setState, question, valides, markerIndex }: ModalProps) {
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [isSubmitted, setIsSubmitted] = useState(false);
+    console.log(state, setState, question)
+    return (
+        <div style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            justifyContent: "center",
+            alignItems: "center",
+            display: state
+        }}>
+            <div style={{
+                width: "40%",
+                height: "40%",
+                backgroundColor: "white",
+                borderRadius: 10,
+                padding: 20
+            }}>
+                {
+                    isSuccess ? <p>CONGRATULATIONS</p> : isSubmitted && !isSuccess && <p>WRONG : CORRECT ANSWER IS {question.choix[question.reponse_idx]}</p>
+                }
+                <h2>{question.question}</h2>
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                    {
+                        question.choix.map((choix, index) => (
+                            <button key={index} onClick={() => {
+                                setIsSubmitted(true);
+                                if (index === question.reponse_idx) {
+                                    console.log("Correct")
+                                    setIsSuccess(true);
+                                    const newValides = [...valides![0]];
+                                    newValides[markerIndex!] = true;
+                                    valides![1](newValides);
+
+
+                                } else {
+                                    console.log("Wrong")
+                                    setIsSuccess(false);
+                                }
+                            }}
+                                style={{
+                                    backgroundColor: isSubmitted && index === question.reponse_idx ? "green" : isSubmitted && index !== question.reponse_idx ? "red" : "white",
+                                    color: isSubmitted && index === question.reponse_idx ? "white" : "black"   
+                                }}
+                                disabled={isSubmitted}
+                            >{choix}</button>
+                        ))
+                    }
+                <div/>
+                <button onClick={() => {
+                    setIsSubmitted(false);
+                    setIsSuccess(false);
+                    setState("none");
+                }}>Close</button>
+            </div>
+        </div>
+    </div>
+
+    )}