introducing answer explanation step modal component

src/assets/css/components/GameAnswerExplanation.scss

@@ -0,0 +1,35 @@
+.answer-explanation {
+	@apply p-8 flex gap-x-8;
+	&__type {
+		@apply text-white text-4xl w-fit px-6 py-1;
+		transform: skew(-2deg) rotate(-2deg);
+		&--success,
+		&--success .success-icon {
+			@apply bg-green-600;
+		}
+		&--error,
+		&--error .success-icon {
+			@apply bg-red-400;
+		}
+
+		.success-icon {
+			@apply w-6 h-6 object-contain object-center absolute top-0 right-0  rounded-full p-2 border-solid border-white border-4;
+			transform: translate(50%, -50%);
+		}
+	}
+
+	&__title {
+		@apply text-5xl py-8;
+	}
+
+	&__cover {
+		@apply w-1/2;
+		img {
+			@apply h-auto object-contain object-center;
+		}
+	}
+	.continue-game {
+		@apply absolute bottom-0 left-1/2;
+		translate: -50% 50%;
+	}
+}

src/components/game/GameAnswerExplanation.jsx

@@ -0,0 +1,60 @@
+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='answer-explanation'>
+			<div className='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>
+			</div>
+			<div className='answer-explanation__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>
+	);
+}