generated from lucien/actix-react-template
Compare commits
No commits in common. "1e956a54d26ec9c3ad6685da536e25a51127a327" and "ee692fec27c4d648054a445b249e66c83f525b9a" have entirely different histories.
1e956a54d2
...
ee692fec27
9 changed files with 5 additions and 385 deletions
|
|
@ -10,14 +10,9 @@
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-three/drei": "^9.120.0",
|
|
||||||
"@react-three/fiber": "^8.17.10",
|
|
||||||
"@types/three": "^0.170.0",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router": "^7.0.2",
|
"react-router": "^7.0.2"
|
||||||
"three": "^0.171.0",
|
|
||||||
"three-stdlib": "^2.34.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.15.0",
|
"@eslint/js": "^9.15.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,31 +0,0 @@
|
||||||
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} />
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
|
|
||||||
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} />
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
// 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;
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
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,154 +1,9 @@
|
||||||
import { Canvas } from "@react-three/fiber";
|
|
||||||
import { OrbitControls, PerspectiveCamera, Sky } from "@react-three/drei";
|
|
||||||
import * as THREE from "three";
|
|
||||||
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";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function GamePage() {
|
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 (
|
return (
|
||||||
<div id="canvas-container"
|
<div>
|
||||||
style={{
|
<h1>Game Page</h1>
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
position: "fixed",
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
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 />
|
|
||||||
<Ocean />
|
|
||||||
<Axes />
|
|
||||||
<Character />
|
|
||||||
<Floor />
|
|
||||||
{/* <Marker position={[0, 1, 0]} color="red" /> */}
|
|
||||||
{MakerList.map((marker, index) => (
|
|
||||||
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue