Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adapting modal

Browse Source
This commit is contained in:
Antoine M 2024-02-15 18:51:12 +01:00
parent 009178a9cf
commit 31ce2c5e53
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/game/GameAnswerExplanation.jsx
View File

@ -14,8 +14,8 @@ export default function GameAnwerExplanation({ questionId }) {
const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
return (
<div className='answer-explanation'>
<div className='content'>
<div className='modal-content-container answer-explanation-container'>
<div className='modal-content-container__content'>
{answer.userAnsweredCorrectly === true && (
<>
<div></div>
@ -43,18 +43,17 @@ export default function GameAnwerExplanation({ questionId }) {
)}
<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='answer-explanation__cover'>
<div className='modal-content-container__cover'>
<img src={objectPictureUrl} alt='' />
</div>
<button
onClick={() => {
setCurrentGameModal(null);
checkIfGameIsComplete();
}}
className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
/>
</div>
);
}

16
src/components/game/GameQuestion.jsx
View File

@ -12,9 +12,8 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
}
return (
<div className='game-question'>
{correctAnswer}
<div className='content'>
<div className='modal-content-container game-question-container'>
<div className='modal-content-container__content'>
<h3 className='titling-construction '>Trouvé !</h3>
<h2>securisé ou risqué ?</h2>
@ -22,20 +21,23 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
Est-ce que la situation comporte un risque majeur ou identifiez vous un bon
comportement ?
</p>
<div className='game-question__answer-buttons-container'>
<div className='game-question-container__answer-buttons-container'>
<button
className='game-question__answer-button'
className='game-question-container__answer-button'
onClick={() => handleAnswer(questionId, "safe")}>
<img src={anwserIconSafe} alt='' />
</button>
<button
className='game-question__answer-button'
className='game-question-container__answer-button'
onClick={() => handleAnswer(questionId, "unsafe")}>
<img src={anwserIconUnsafe} alt='' />
</button>
</div>
<p className='pt-8'>{correctAnswer}</p>
</div>
<div className='modal-content-container__cover'>
<img src={objectPictureUrl} alt='' />
</div>
<img className='game-question__cover' src={objectPictureUrl} alt='' />
</div>
);
}