increase q/a font size and fix value hiding after question asked

ayan4m1 · Apr 17, 2024 · 6992fe5 · 6992fe5
1 parent 687073e
commit 6992fe5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/trivia/game.js b/src/components/trivia/game.js
@@ -72,7 +72,7 @@ export default function TriviaGame({ data }) {
                   <Fragment>
                     <Row>
                       <Col>
-                        <p>{selectedQuestion.answer}</p>
+                        <p>Answer: {selectedQuestion.answer}</p>
                       </Col>
                     </Row>
                     <Row>
@@ -81,7 +81,7 @@ export default function TriviaGame({ data }) {
                           variant="success"
                           onClick={() => {
                             setSelectedQuestion((prevVal) => {
-                              prevVal.value = '';
+                              prevVal.value = -1;
                               return null;
                             });
                             setRevealed(false);
@@ -120,9 +120,17 @@ export default function TriviaGame({ data }) {
                       xs={12}
                       key={index}
                       className={classNames('trivia-card')}
-                      onClick={() => setSelectedQuestion(question)}
+                      onClick={() =>
+                        setSelectedQuestion((prevVal) => {
+                          if (!prevVal?.value) {
+                            return question;
+                          } else {
+                            return null;
+                          }
+                        })
+                      }
                     >
-                      ${question.value}
+                      {question.value > 0 && `$${question.value}`}
                     </Col>
                   ))}
                 </Row>

diff --git a/src/components/trivia/game.scss b/src/components/trivia/game.scss
@@ -25,6 +25,7 @@
   display: flex;
   align-items: center;
   background-color: #060ce9;
+  font-size: 28px;
 
   > .container-fluid {
     text-align: center;