60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import { useGame } from "../../hooks/useGame";
|
|
|
|
import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
|
|
import errorIcon from "../../assets/img/icons/behaviour-type-error.svg";
|
|
|
|
export default function GameAnwerExplanation({ questionId }) {
|
|
const { answers, contextGameDatas, setCurrentGameModal, checkIfGameIsComplete } = useGame();
|
|
const answer = answers[questionId];
|
|
|
|
const answerExplanation =
|
|
contextGameDatas.gameObjects[questionId].attrs.objectBehaviourDescription ??
|
|
"Pas d'explication pour cette question";
|
|
const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
|
|
|
|
return (
|
|
<div className='modal-content-container answer-explanation-container'>
|
|
<div className='modal-content-container__content'>
|
|
{answer.userAnsweredCorrectly === true && (
|
|
<>
|
|
<div></div>
|
|
<h3 className='answer-explanation__type answer-explanation__type--success '>
|
|
Bonne réponse !
|
|
<img
|
|
className='success-icon success-icon--success'
|
|
src={sucessIcon}
|
|
alt=''
|
|
/>
|
|
</h3>
|
|
</>
|
|
)}
|
|
{answer.userAnsweredCorrectly === false && (
|
|
<>
|
|
<h3 className='answer-explanation__type answer-explanation__type--error'>
|
|
Mauvaise réponse
|
|
<img
|
|
className='success-icon success-icon--error'
|
|
src={errorIcon}
|
|
alt=''
|
|
/>
|
|
</h3>
|
|
</>
|
|
)}
|
|
<h2 className='answer-explanation__title'>C'est un risque</h2>
|
|
<p>{answerExplanation}</p>
|
|
<button
|
|
onClick={() => {
|
|
setCurrentGameModal(null);
|
|
checkIfGameIsComplete();
|
|
}}
|
|
className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
|
|
/>
|
|
</div>
|
|
<div className='modal-content-container__cover'>
|
|
<img src={objectPictureUrl} alt='' />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|