refactoring game object for pictogramme after being answered

src/assets/css/pages/Game.scss

@@ -32,16 +32,32 @@
 			@apply w-fit h-full relative;
 
 			.lhoist-blocks-focus-object {
-				// user-drag: none;
-				// cursor: url("../../img/cursors/cursor-hand-pointer.svg"), auto;
 				cursor: url("../../img/cursors/cursor-hand-glass@2x.png"), auto;
 
 				@apply absolute  w-auto block object-contain;
-				// filter: brightness(10%) sepia(100%) saturate(10000%) hue-rotate(10deg);
+				img {
-				&--inactive {
+					@apply h-full;
+				}
+
+				&--inactive img {
 					filter: contrast(50%) saturate(0%) brightness(1.6);
 					pointer-events: none;
 				}
+
+				&--unsafe::after,
+				&--safe::after {
+					@apply block absolute top-1/2 left-1/2 w-16 h-16;
+
+					content: "";
+					z-index: 11;
+					transform: translate(-50%, -50%);
+				}
+				&--unsafe::after {
+					background-image: url("../../img/icons/anwser_icon_unsafe.svg");
+				}
+				&--safe::after {
+					background-image: url("../../img/icons/anwser_icon_safe.svg");
+				}
 			}
 		}
 	}

src/components/game/GameObjects.jsx

@@ -11,39 +11,39 @@ export default function GameObjects({ blocks }) {
 		<>
 			{blocks.map((block, id) => {
 				const hasAnswered = answers && answers[id]?.userAnswer;
+				const correctAnswerType = answers && answers[id]?.correctAnswer;
 
 				return (
-					<img
+					<div
 						className={`lhoist-blocks-focus-object ${
 							hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
 						} ${
-							hasAnswered && answers[id]?.userAnsweredCorrectly === true
+							hasAnswered && correctAnswerType
-								? "lhoist-blocks-focus-object--answered-correctly"
+								? "lhoist-blocks-focus-object--" + correctAnswerType
-								: hasAnswered &&
+								: ""
-								  answers[id]?.userAnsweredCorrectly === false
-								? "lhoist-blocks-focus-object--answered-incorrectly"
-								: "lhoist-blocks-focus-object--unanswered"
 						}  `}
 						style={{
 							height: `${block.attrs.objectScale}%`,
 							top: `${block.attrs.objectPosition?.y * 100}%`,
 							left: `${block.attrs.objectPosition?.x * 100}%`,
 						}}
-						key={id}
+						key={id}>
+						<img
 							src={block.attrs.objectPictureUrl}
 							alt={block.attrs.objectPictureAlt}
 							draggable='false'
-						// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
-						// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
 							onClick={() =>
 								setCurrentGameModal(
 									<GameQuestion
 										questionId={id}
-									correctAnswer={block.attrs.behaviourType}
+										correctAnswer={
+											block.attrs.behaviourType
+										}
 									/>
 								)
 							}
 						/>
+					</div>
 				);
 			})}
 		</>