RedCrab/projet-nuitinfo-2024
8
0
Fork 0
generated from lucien/actix-react-template
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

- Feature Complete -> Gray Boxing a faire.

Browse source
This commit is contained in:
iMax 2024-12-06 03:37:26 +01:00
parent 60a12d9cf9
commit f8c4481c88
3 changed files with 197 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

129
front/src/pages/GamePage.tsx
View file

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