Exercice:Game File ou Face
Exercice:Quizz
import React, { useState, useEffect } from 'react';
import './App.css';
// Composant fonctionnel App
function App() {
// Tableau des chemins d'images
const images = ['images/Rien.png', 'images/Pile.png', 'images/Face.png'];
// État local avec useState
const [points, setPoints] = useState(0);
const [indexRandom, setIndexRandom] = useState(Math.floor(Math.random() * 2) + 1);
const [leChoixDuRandom, setLeChoixDuRandom] = useState(images[0]);
const [disable, setDisable] = useState('');
// Fonction pour initialiser le jeu
const initialiserJeu = () => {
setIndexRandom(Math.floor(Math.random() * 2) + 1);
setLeChoixDuRandom(images[0]);
setDisable('');
};
// Fonction pour gérer le choix de l'utilisateur et vérifier
const choixUtilisateur = (e) => {
setDisable('disabled');
const choixUser = e.target.name;
switch (choixUser) {
// L'utilisateur a choisi Pile
case 'pile':
// Vérifier le choix du Random
if (indexRandom === 1) {
setPoints(points + 1);
setLeChoixDuRandom(images[1]);
} else {
setPoints(points - 1);
}
break;
// L'utilisateur a choisi Face
case 'face':
// Vérifier le choix du Random
if (indexRandom === 2) {
setPoints(points + 1);
setLeChoixDuRandom(images[2]);
} else {
setPoints(points - 1);
}
break;
default:
break;
}
};
// Effet pour réinitialiser le jeu après 3 secondes
useEffect(() => {
const timer = setTimeout(initialiserJeu, 3000);
return () => clearTimeout(timer);
}, [points]);
// Rendu du composant
return (
<div>
<fieldset>
<legend>Pile Face Game: {indexRandom}</legend>
<img src={leChoixDuRandom} className="maxWidth" alt="Random" />
<table>
<tbody>
<tr>
<td><button disabled={disable} name="pile" onClick={choixUtilisateur} className='width100'>Pile</button></td>
<td><button disabled={disable} name="face" onClick={choixUtilisateur} className='width100'>Face</button></td>
</tr>
</tbody>
</table>
<h1><center>Points: {points}</center></h1>
</fieldset>
</div>
);
}
export default App;Avec la Classe:App.js
import React from 'react';
import './App.css';
class App extends React.Component{
constructor(props)
{
super(props);
this.images=['images/Rien.png','images/Pile.png','images/Face.png']
this.state={
points:0,
indexRandom:(Math.floor(Math.random()*2)+1),
lechoixduRandom:this.images[0],
disable:""
}
}
//Initialer le jeux
initialerGame=()=>{
this.setState(
{
indexRandom:(Math.floor(Math.random()*2)+1),
lechoixduRandom:"images/Rien.png",
disable:""
}
)
}
//Récupérer le choix de l'utilisateur et Vérifier
choixUtilisateur=(e)=>
{
this.setState({
disable:"disabled"
})
let choixUser=e.target.name;
switch(choixUser)
{
//Utilisateur a choisé Pile
case 'pile':
//Vérifier le choix de Random
if(this.state.indexRandom==1) //1=>Pile.png selon le tableux image
{
this.setState(
{
points:this.state.points+1,
lechoixduRandom:this.images[1]
}
)
}
//le choix de Random est Face.png
else
{
this.setState(
{
points:this.state.points-1
}
)
}
break;
//Utilisateur a choisé Face
case 'face':
//Vérifier le choix de Random
if(this.state.indexRandom==2) //2=>Face.png selon le tableux image
{
this.setState(
{
points:this.state.points+1,
lechoixduRandom:this.images[2]
}
)
}
//le choix de Random est Face.png
else
{
this.setState(
{
points:this.state.points-1
}
)
}
break;
}
//intialiser le jeux aprés 3seconds
setTimeout(this.initialerGame,3000);
}
render()
{
return (
<div>
<fieldset>
<legend>Pile Face Game:{this.state.indexRandom}</legend>
<img src={this.state.lechoixduRandom}className="maxWidth"/>
<table>
<tr>
<td><button disabled={this.state.disable} name="pile" onClick={this.choixUtilisateur} className='width100'>Pile</button></td>
<td><button disabled={this.state.disable} name="face" onClick={this.choixUtilisateur} className='width100'>Face</button></td>
</tr>
</table>
<h1><center>Points:{this.state.points}</center></h1>
</fieldset>
</div>
);
}
}
export default App;
