generated from lucien/actix-react-template
- Feature Complete -> Gray Boxing a faire.
This commit is contained in:
iMax
parent
60a12d9cf9
commit
f8c4481c88
3 changed files with 197 additions and 14 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
} 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>
|
||||
|
||||
)}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue