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

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

@ -14,8 +14,8 @@ export default function GameAnwerExplanation({ questionId }) {
const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl; const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
return ( return (
<div className='answer-explanation'> <div className='modal-content-container answer-explanation-container'>
<div className='content'> <div className='modal-content-container__content'>
{answer.userAnsweredCorrectly === true && ( {answer.userAnsweredCorrectly === true && (
<> <>
<div></div> <div></div>
@ -43,11 +43,6 @@ export default function GameAnwerExplanation({ questionId }) {
)} )}
<h2 className='answer-explanation__title'>C'est un risque</h2> <h2 className='answer-explanation__title'>C'est un risque</h2>
<p>{answerExplanation}</p> <p>{answerExplanation}</p>
</div>
<div className='answer-explanation__cover'>
<img src={objectPictureUrl} alt='' />
</div>
<button <button
onClick={() => { onClick={() => {
setCurrentGameModal(null); setCurrentGameModal(null);
@ -56,5 +51,9 @@ export default function GameAnwerExplanation({ questionId }) {
className='continue-game cta cta--construction cta--round cta--button-icon cta--next' className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
/> />
</div> </div>
<div className='modal-content-container__cover'>
<img src={objectPictureUrl} alt='' />
</div>
</div>
); );
} }

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

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