From 79a5a213d610828fe85836533631e467f86b6db4 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 13 Feb 2024 19:26:25 +0100
Subject: [PATCH] introducing the component

---
 src/components/game/GameObjects.jsx  | 43 +++++++++++++++++++++
 src/components/game/GameQuestion.jsx | 41 ++++++++++++++++++++
 src/components/game/Score.jsx        | 57 ++++++++++++++++++++++++++++
 3 files changed, 141 insertions(+)
 create mode 100644 src/components/game/GameObjects.jsx
 create mode 100644 src/components/game/GameQuestion.jsx
 create mode 100644 src/components/game/Score.jsx

diff --git a/src/components/game/GameObjects.jsx b/src/components/game/GameObjects.jsx
new file mode 100644
index 0000000..98f9ed2
--- /dev/null
+++ b/src/components/game/GameObjects.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import GameQuestion from "./GameQuestion";
+import { useGame } from "../../hooks/useGame";
+
+export default function GameObjects({ blocks }) {
+	const { setCurrentGameModal, answers } = useGame();
+
+	if (!blocks) return null;
+
+	return (
+		<>
+			{blocks.map((block, id) => {
+				const hasAnswered = answers && answers[id]?.userAnswer;
+				return (
+					<img
+						className={`lhoist-blocks-focus-object ${
+							hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
+						}`}
+						style={{
+							height: `${block.attrs.objectScale}%`,
+							top: `${block.attrs.objectPosition?.y * 100}%`,
+							left: `${block.attrs.objectPosition?.x * 100}%`,
+						}}
+						key={id}
+						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}
+								/>
+							)
+						}
+					/>
+				);
+			})}
+		</>
+	);
+}
diff --git a/src/components/game/GameQuestion.jsx b/src/components/game/GameQuestion.jsx
new file mode 100644
index 0000000..a3f5b53
--- /dev/null
+++ b/src/components/game/GameQuestion.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import anwserIconSafe from "../../assets/img/icons/anwser_icon_safe.svg";
+import anwserIconUnsafe from "../../assets/img/icons/anwser_icon_unsafe.svg";
+
+import { useGame } from "../../hooks/useGame";
+export default function GameQuestion({ questionId, correctAnswer }, ...props) {
+	const { answerQuestion, contextGameDatas } = useGame();
+	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
+
+	function handleAnswer(questionId, answer) {
+		answerQuestion(questionId, answer);
+	}
+
+	return (
+		<div className='game-question'>
+			{correctAnswer}
+			<div className='content'>
+				<h3 className='titling-construction '>Trouvé !</h3>
+				<h2>securisé ou risqué ?</h2>
+
+				<p className='question'>
+					Est-ce que la situation comporte un risque majeur ou identifiez vous un bon
+					comportement ?
+				</p>
+				<div className='game-question__answer-buttons-container'>
+					<button
+						className='game-question__answer-button'
+						onClick={() => handleAnswer(questionId, "safe")}>
+						<img src={anwserIconSafe} alt='' />
+					</button>
+					<button
+						className='game-question__answer-button'
+						onClick={() => handleAnswer(questionId, "unsafe")}>
+						<img src={anwserIconUnsafe} alt='' />
+					</button>
+				</div>
+			</div>
+			<img className='game-question__cover' src={objectPictureUrl} alt='' />
+		</div>
+	);
+}
diff --git a/src/components/game/Score.jsx b/src/components/game/Score.jsx
new file mode 100644
index 0000000..bb48bbe
--- /dev/null
+++ b/src/components/game/Score.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { useGame } from "../../hooks/useGame";
+import anwserIconSafe from "../../assets/img/icons/anwser_icon_safe.svg";
+import anwserIconUnsafe from "../../assets/img/icons/anwser_icon_unsafe.svg";
+import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
+import errorIcon from "../../assets/img/icons/behaviour-type-error.svg";
+
+export default function Score() {
+	let { answers } = useGame();
+	if (!answers) return;
+	return (
+		<div className='score'>
+			<ul className='answers-visualiser'>
+				{answers.map((answer, key) => {
+					const answerType = !answer.userAnswer
+						? "unanswered"
+						: answer.correctAnswer === answer.userAnswer
+						? "correct"
+						: "incorrect";
+					return (
+						<li className={`answer answer--${answerType}`} key={key}>
+							{answer.userAnsweredCorrectly === true && (
+								<img
+									className='answer__sucess-indicator answer__sucess-indicator--success'
+									src={sucessIcon}
+									alt=''
+								/>
+							)}
+							{answer.userAnsweredCorrectly === false && (
+								<img
+									className='answer__sucess-indicator answer__sucess-indicator--error'
+									src={errorIcon}
+									alt=''
+								/>
+							)}
+
+							{answer.userAnswer && answer.correctAnswer === "safe" && (
+								<img
+									className='answer__behaviour-type-icon'
+									src={anwserIconSafe}
+									alt=''
+								/>
+							)}
+							{answer.userAnswer && answer.correctAnswer === "unsafe" && (
+								<img
+									className='answer__behaviour-type-icon'
+									src={anwserIconUnsafe}
+									alt=''
+								/>
+							)}
+						</li>
+					);
+				})}
+			</ul>
+		</div>
+	);
+}