- 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>
+
+    )}

front/src/pages/GamePage.tsx

@@ -1,25 +1,97 @@
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, Sky } from "@react-three/drei";
+import { OrbitControls, PerspectiveCamera, Sky } from "@react-three/drei";
 import * as THREE from "three";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Ocean from "../components/3d/Ocean";
 import Axes from "../components/3d/Axes";
 import Character from "../components/3d/Character";
 import Floor from "../components/3d/Floor";
 import Marker from "../components/3d/Marker";
+import Modal from "../components/Modal";
+import { randInt } from "three/src/math/MathUtils.js";
+
+
+
+
+
+
+
 
 
-const MakerList = [
-    { position: [0, 0.1, 0], color: "red", onClick: () => console.log("red") }, // body
-    { position: [-0.5, 0.1, 2.5], color: "green", onClick: () => console.log("green") }, // left foot
-    { position: [0.5, 0.1, 2.5], color: "blue", onClick: () => console.log("blue") }, // right foot
-    { position: [-1, 0.1, 1], color: "yellow", onClick: () => console.log("yellow") }, // left hand
-    { position: [1, 0.1, 1], color: "purple", onClick: () => console.log("purple") }, // right hand
-    { position: [0, 0.1, -1], color: "orange", onClick: () => console.log("orange") }, // head
-]
 
 
 export default function GamePage() {
+    const [stateModal, setStateModal] = useState("none" as "none" | "flex");
+    const [questionIndex, setQuestionIndex] = useState(0);
+
+    const QuestionList = [
+        // Ensemble de questions sur la polution des océans
+        // {question:string, reponse_idx:int, choix:[string, string, string, string]}
+        {
+            question: "Quel est le plus grand océan du monde ?",
+            reponse_idx: 1,
+            choix: ["Océan Atlantique", "Océan Pacifique", "Océan Indien", "Océan Arctique"]
+        },
+        {
+            question: "Comment s'appelle les continents de plastique dans les océans ?",
+            reponse_idx: 2,
+            choix: ["Plastico", "Plastiland", "Plastiques", "Plastiques"]
+        },
+        {
+            question: "Quel est le nom de la grande masse d'eau salée qui recouvre la majorité de la surface de la Terre ?",
+            reponse_idx: 3,
+            choix: ["Mer", "Lac", "Océan", "Rivière"]
+        },
+        {
+            question: "Quel est l'océan le plus froid ?",
+            reponse_idx: 0,
+            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
+        },
+        {
+            question: "Quel est l'océan le plus chaud ?",
+            reponse_idx: 1,
+            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
+        },
+        {
+            question: "Quel est l'océan le plus profond ?",
+            reponse_idx: 1,
+            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
+        },
+        {
+            question: "Quel est l'océan le plus grand ?",
+            reponse_idx: 2,
+            choix: ["Océan Arctique", "Océan Antarctique", "Océan Pacifique", "Océan Atlantique"]
+        }
+    ]
+
+    
+    const [valides, setValides] = useState([false, false, false, false, false, false]);
+    const [markerIndex, setMarkerIndex] = useState(0);
+    
+    const askQuestion = (markerIndex: number) => {
+        setQuestionIndex(randInt(0, QuestionList.length - 1));
+        setStateModal("flex");
+        setMarkerIndex(markerIndex);
+    }
+
+    const MakerList = [
+        { position: [0, -0.1, 0],         onClick: () => askQuestion(0) }, // body
+        { position: [-0.5, -0.1, 2.5],         onClick: () => askQuestion(1) }, // left foot
+        { position: [0.5, -0.1, 2.5],         onClick: () => askQuestion(2) }, // right foot
+        { position: [-1, -0.1, 1],         onClick: () => askQuestion(3) }, // left hand
+        { position: [1, -0.1, 1],         onClick: () => askQuestion(4) }, // right hand
+        { position: [0, -0.1, -1],         onClick: () => askQuestion(5) }, // head
+    ]
+
+    // Win condition
+    useEffect(() => {
+        if (valides.every(valide => valide)) {
+            
+        }
+    }, [valides])
+
+
+    console.log(stateModal, setStateModal);
     return (
         <div id="canvas-container"
             style={{
@@ -31,6 +103,38 @@ export default function GamePage() {
                 zIndex: -1
             }}
             >
+                { !valides.every(valide => valide) === true ?
+            <p 
+                style={{
+                    position: "relative",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "5%",
+                    backgroundColor: "rgba(0, 0, 0, 1)",
+                    color: "white",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    margin: 0
+                }}
+            > <strong>Hint : </strong> Répondez correctement aux questions pour sauver le personnage</p>
+            : <p 
+                style={{
+                    position: "relative",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "5%",
+                    backgroundColor: "rgba(0, 0, 0, 1)",
+                    color: "white",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    margin: 0
+                }}
+            > <strong>Good Game : </strong> Bravo, vous avez sauvé le personnage</p>
+            }
             <Canvas>
                 <Sky sunPosition={[100, 10, 100]} />
                 <OrbitControls />
@@ -40,10 +144,11 @@ export default function GamePage() {
                 <Floor />
                 {/* <Marker position={[0, 1, 0]} color="red" /> */}
                 {MakerList.map((marker, index) => (
-                    <Marker key={index} position={marker.position} color={marker.color} onClick={marker.onClick} />
+                    <Marker key={index} position={marker.position} color={valides[index] ? "green" : "red"} onClick={marker.onClick} />
                 ))}
-                
+                <PerspectiveCamera makeDefault position={[0, 10, 3]}  />
             </Canvas>
+            <Modal state={stateModal} setState={setStateModal} question={QuestionList[questionIndex]} valides={[valides, setValides]} markerIndex={markerIndex} />
         </div>
     )
 }