diff --git a/src/assets/css/components/GameAnswerExplanation.scss b/src/assets/css/components/GameAnswerExplanation.scss new file mode 100644 index 0000000..ceba141 --- /dev/null +++ b/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%; + } +} diff --git a/src/components/game/GameAnswerExplanation.jsx b/src/components/game/GameAnswerExplanation.jsx new file mode 100644 index 0000000..c2d7b6b --- /dev/null +++ b/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 ( +
+
+ {answer.userAnsweredCorrectly === true && ( + <> +
+

+ Bonne réponse ! + +

+ + )} + {answer.userAnsweredCorrectly === false && ( + <> +

+ Mauvaise réponse + +

+ + )} +

C'est un risque

+

{answerExplanation}

+
+
+ +
+ +
+ ); +}