Merge branch 'main' of ssh://git.leizour.fr:222/RedCrab/projet-nuitinfo-2024 into main_page

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { LineBasicMaterial, Line, Group } from 'three'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+export default function Axes() {
+    const axes = new Group()
+
+    const x = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
+        new THREE.Vector3(100, 0, 0)]), 
+        new LineBasicMaterial({ color: 0xff0000 }) // red
+    )
+    const y = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
+        new THREE.Vector3(0, 100, 0)]), 
+        new LineBasicMaterial({ color: 0x00ff00 }) // green
+    )
+    const z = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
+        new THREE.Vector3(0, 0, 100)]), 
+        new LineBasicMaterial({ color: 0x0000ff }) // blue
+    )
+
+    axes.add(x)
+    axes.add(y)
+    axes.add(z)
+
+
+    return <primitive object={axes} />
+}

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

@@ -0,0 +1,25 @@
+import { Group, Mesh, MeshStandardMaterial, BufferGeometry } from 'three'
+import { useGLTF } from '@react-three/drei'
+
+export default function Character() {
+    // import glb file
+
+    // load the glb file in "/models/BASEmodel.glb"
+    const { nodes, materials, scene } = useGLTF('/models/man.glb')
+    
+    // rotate the character
+    scene.rotation.x = -Math.PI / 2
+    scene.rotation.y = 0
+
+    // enfoncer le personnage dans le sol
+    scene.position.y = -1
+
+    return (
+        <group>
+            <primitive object={scene} />
+            <directionalLight position={[0, 10, 0]} intensity={5} />
+        </group>
+    )
+
+    
+}

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

@@ -0,0 +1,20 @@
+
+import React from 'react'
+import { Group } from 'three'
+import * as THREE from 'three'
+
+
+export default function Floor() {
+    const floor = new Group()
+
+    const floorGeometry = new THREE.PlaneGeometry(100, 100, 100, 100)
+    const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
+    const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial)
+
+    floorMesh.rotation.x = -Math.PI / 2
+    floorMesh.position.y = -2
+
+    floor.add(floorMesh)
+
+    return <primitive object={floor} />
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Group } from 'three'
+import * as THREE from 'three'
+
+interface MarkerProps {
+    position: [number, number, number],
+    color: string,
+    onClick?: () => void
+}
+
+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={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/3d/Ocean.tsx

@@ -0,0 +1,53 @@
+// src/components/Ocean.tsx
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import { Water, WaterOptions } from 'three/examples/jsm/objects/Water.js';
+import { WaterMesh, WaterMeshOptions } from 'three/examples/jsm/objects/Water2Mesh.js';
+
+const Ocean: React.FC = () => {
+
+    const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
+    const waterOption:WaterOptions = {
+        textureWidth: 512,
+        textureHeight: 512,
+        waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
+            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+        }),
+        alpha: 0.9,
+        sunDirection: new THREE.Vector3(),
+        sunColor: 0xffffff,
+        waterColor: '#001e0f',
+        distortionScale: 3.7,
+        fog: true,
+        
+
+    };
+    const water = new Water(waterGeometry, waterOption);
+    water.rotation.x = -Math.PI / 2;
+    water.position.y = -1;
+
+
+    const waterRef = useRef<THREE.Mesh>(null);
+    useEffect(() => {
+        if (waterRef.current) {
+            waterRef.current.add(water);
+        }
+    }, [waterRef]);
+    
+
+    useEffect(() => {
+        const animate = () => {
+            requestAnimationFrame(animate);
+            water.material.uniforms['time'].value += 0.1 / 60.0;
+        };
+        animate();
+    }, []);
+
+    return (
+        <mesh ref={waterRef}>
+            <meshStandardMaterial />
+        </mesh>
+    );
+};
+
+export default Ocean;

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