ready to play

2023-06-03 00:22:29 +02:00
parent fa20932e18
commit 4114ccb678
22 changed files with 29784 additions and 1 deletions
@@ -0,0 +1,65 @@
+import React from 'react';
+import { ButtonWrapper } from '../App.style';
+import { AnswerObject } from '../Types';
+import { Capitalize } from '../Utils';
+
+type Props = {
+  answers: string[];
+  callback: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  difficulty: string;
+  question: string;
+  category: string;
+  questionNr: number;
+  score: number;
+  totalQuestions: number;
+  userAnswer: AnswerObject | undefined;
+};
+
+const QuestionCard: React.FC<Props> = ({
+  answers,
+  callback,
+  difficulty,
+  question,
+  category,
+  questionNr,
+  score,
+  totalQuestions,
+  userAnswer
+}) => (
+  <div className="question-card-wrapper">
+    <div className="details">
+      <div>Difficulty: {Capitalize(difficulty)}</div>
+      <div>{category}</div>
+    </div>
+    <div className="details">
+      <div>
+        Question: {questionNr}/{totalQuestions}
+      </div>
+      <div>Score: {score}</div>
+    </div>
+
+    {!(questionNr === totalQuestions) && (
+      <>
+        <p
+          className="question"
+          dangerouslySetInnerHTML={{ __html: question }}
+        />
+        <div>
+          {answers.map((answer) => (
+            <ButtonWrapper
+              correct={userAnswer?.correctAnswer === answer}
+              userClicked={userAnswer?.answer === answer}
+              key={answer}
+            >
+              <button disabled={!!userAnswer} onClick={callback} value={answer}>
+                <span dangerouslySetInnerHTML={{ __html: answer }} />
+              </button>
+            </ButtonWrapper>
+          ))}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export default QuestionCard;