58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
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>
|
|
);
|
|
}
|