add mobile styles

.env

@@ -1 +1 @@
-SASS_PATH=./src/styles/
+SASS_PATH=src/styles/

src/components/BurgerMenu/BurgerMenu.module.scss

@@ -2,7 +2,6 @@
   background-color: transparent;
   border: none;
   display: inline-flex;
-  margin-right: 16px;
   padding: 0;
 }
 

src/components/PointMenu/PointMenu.jsx

@@ -1,19 +1,39 @@
+import styles from "./PointMenu.module.scss";
+
 const PointMenu = ({ questions, points, id }) => {
+  const getClassList = (item) => {
+    const classes = [styles.pointListItem];
+
+    if (id === item.id) {
+      classes.push(styles.active);
+    }
+    if (points >= item.amount) {
+      classes.push(styles.earned);
+    }
+
+    return classes.join(" ");
+  };
+
   return (
     <>
-      <ul>
+      <ul className={styles.pointList}>
         {questions.toReversed().map((item) => (
           <li
             key={item.amount}
-            style={
-              id === item.id
-                ? { backgroundColor: "yellow" }
-                : points >= item.amount
-                ? { backgroundColor: "green" }
-                : {}
-            }
+            // style={
+            //   id === item.id
+            //     ? { backgroundColor: "yellow" }
+            //     : points >= item.amount
+            //     ? { backgroundColor: "green" }
+            //     : {}
+            // }
+            className={getClassList(item)}
           >
-            {item.amount}
+            {Number(item.amount).toLocaleString("en", {
+              style: "currency",
+              currency: "USD",
+              maximumFractionDigits: 0,
+            })}
           </li>
         ))}
       </ul>

src/components/PointMenu/PointMenu.module.scss

@@ -0,0 +1,26 @@
+@use "colors" as c;
+
+.pointList {
+  display: grid;
+  grid-template-rows: repeat(12, 1fr);
+  gap: 8px;
+  width: 100%;
+
+  & > .pointListItem {
+    background-image: url("../../img/svg/InactivePoints.svg");
+    padding: 8px 24px;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+
+    &.active {
+      background-image: url("../../img/svg/ActivePoints.svg");
+      color: c.$startButtonColor;
+    }
+
+    &.earned {
+      background-image: url("../../img/svg/Earned.svg");
+      color: c.$earnedPointsColor;
+    }
+  }
+}

src/components/StartGameButton/StartGameButton.module.scss

@@ -2,6 +2,7 @@
 @import "mixins";
 
 .button {
+  @include fontFamily($font-size: 14px);
   display: block;
   height: 48px;
   max-width: 288px;
@@ -11,7 +12,6 @@
   color: c.$whiteColor;
   text-align: center;
   text-decoration: none;
-  @include fontFamily($font-size: 14px);
 
   &:active {
     background-color: c.$pressedStartButtonColor;

src/index.js

@@ -6,7 +6,7 @@ import "./styles/main.scss";
 import reportWebVitals from "./reportWebVitals";
 import { MobileProvider } from "./Context/MobileProvider";
 import Home from "./pages/Home/Home";
-import Game from "./pages/Game";
+import Game from "./pages/Game/Game";
 import End from "./pages/End/End";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

src/pages/End/End.jsx

@@ -14,7 +14,7 @@ const End = () => {
           <div className={styles.textContainer}>
             <p className={styles.title}>Total score</p>
             <p>
-              {Number(location.state.points).toLocaleString("en", {
+              {Number(location.state.amount).toLocaleString("en", {
                 style: "currency",
                 currency: "USD",
                 maximumFractionDigits: 0,

src/pages/Game/Game.jsx

@@ -0,0 +1,105 @@
+import { useState, useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { MobileContext } from "../../Context";
+import styles from "./Game.module.scss";
+import data from "../../questions.json";
+import BurgerMenu from "../../components/BurgerMenu/BurgerMenu";
+import PointMenu from "../../components/PointMenu/PointMenu";
+
+const Game = () => {
+  const isMobile = useContext(MobileContext);
+  const navigate = useNavigate();
+  const [pointsMenu, setPointsMenu] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [disabledOption, setDisabledOption] = useState(false);
+  const [correctOption, setCorrectOption] = useState(null);
+  const [wrongOption, setWrongOption] = useState(null);
+  const [questionId, setQuestionId] = useState(0);
+  const [points, setPoints] = useState(0);
+  const { questions } = data;
+  const { question, options, correct_answer, amount } = questions.find(
+    (item) => questionId === item.id
+  );
+
+  const checkAnswer = (answer, amount) => {
+    if (answer.toLowerCase() === correct_answer.toLowerCase()) {
+      setCorrectOption(answer);
+      setTimeout(() => {
+        if (questionId < questions.length - 1) {
+          setQuestionId((prevId) => (prevId += 1));
+          setPoints(amount);
+          setDisabledOption(false);
+        } else {
+          setPoints(amount);
+          navigate("/end", { state: { amount } });
+        }
+      }, 750);
+    } else {
+      setWrongOption(answer);
+      setTimeout(() => {
+        navigate("/end", { state: { amount: points } });
+      }, 750);
+    }
+  };
+
+  const getClassList = (item) => {
+    const classes = [styles.answerListItem];
+
+    if (selectedOption === item) {
+      classes.push(styles.selected);
+    }
+    if (disabledOption) {
+      classes.push(styles.disabled);
+    }
+    if (correctOption === item) {
+      classes.push(styles.correct);
+    }
+    if (wrongOption === item) {
+      classes.push(styles.wrong);
+    }
+    return classes.join(" ");
+  };
+
+  const toggleMobileMenu = () => {
+    setPointsMenu((prevState) => !prevState);
+  };
+
+  return (
+    <>
+      <div className={styles.container}>
+        {isMobile && (
+          <div className={styles.burgerMenu}>
+            <BurgerMenu isOpen={pointsMenu} onClick={toggleMobileMenu} />
+          </div>
+        )}
+        <div className={styles.wrapper}>
+          <p className={styles.question}>{question}</p>
+          <ol className={styles.answersList}>
+            {options.map((item) => (
+              <li
+                className={getClassList(item)}
+                key={item}
+                onClick={() => {
+                  setSelectedOption(item);
+                  setDisabledOption(true);
+                  setTimeout(() => {
+                    checkAnswer(item, amount);
+                  }, 1000);
+                }}
+              >
+                {item}
+              </li>
+            ))}
+          </ol>
+        </div>
+        {((isMobile && pointsMenu) || !isMobile) && (
+          <div className={styles.sideBar}>
+            <PointMenu questions={questions} points={points} id={questionId} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Game;

src/pages/Game/Game.module.scss

@@ -0,0 +1,76 @@
+@use "colors" as c;
+
+.container {
+  height: 100vh;
+  width: 100vw;
+  background-color: c.$gameBackgroundColor;
+}
+
+.burgerMenu {
+  display: flex;
+  justify-content: end;
+  padding: 16px 16px 16px 0;
+}
+
+.sideBar {
+  position: absolute;
+  top: 56px;
+  height: calc(100vh - 56px);
+  width: 100vw;
+  background-color: inherit;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  height: calc(100vh - 56px);
+  padding-bottom: 24px;
+}
+
+.question {
+  font-size: 18px;
+  text-align: center;
+}
+
+.answersList {
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  row-gap: 8px;
+  text-align: left;
+  width: 100%;
+  font-weight: 400;
+  font-size: 14px;
+  list-style-type: none;
+
+  & > .answerListItem {
+    counter-increment: list-counter;
+    padding: 20px 24px;
+    // background-color: c.$whiteColor;
+    background-image: url("../../img/svg/Inactive.svg");
+
+    &.selected {
+      background-image: url("../../img/svg/Selected.svg");
+    }
+
+    &.correct {
+      background-image: url("../../img/svg/Correct.svg");
+    }
+
+    &.wrong {
+      background-image: url("../../img/svg/Wrong.svg");
+    }
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    &::before {
+      content: counter(list-counter, upper-latin) "";
+      margin-left: 24px;
+      margin-right: 8px;
+      color: c.$hoverStartButtonColor;
+      font-weight: 600;
+    }
+  }
+}

src/styles/_base.scss

@@ -13,5 +13,4 @@ img {
   display: block;
   height: auto;
   width: 100%;
-  // height: calc((367px / 900px) * 100vh);
 }