From f9beab0bc6a1bfe830bdfe44b9d66bf066fe85ec Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 27 Jul 2024 23:25:47 +0200
Subject: [PATCH 01/25] =?UTF-8?q?=D0=9A=D0=BE=D0=BB=D0=B8=D1=87=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=B2=D0=BE=20=D0=B6=D0=B8=D0=B7=D0=BD=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc.js                                | 1 +
 src/components/Cards/Cards.jsx                | 6 +++++-
 src/context/context.jsx                       | 9 +++++++++
 src/index.js                                  | 5 ++++-
 src/pages/SelectLevelPage/SelectLevelPage.jsx | 5 +++++
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/context/context.jsx

diff --git a/.prettierrc.js b/.prettierrc.js
index 65e18f5ff..28033a2b6 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -7,4 +7,5 @@ module.exports = {
   bracketSpacing: true,
   arrowParens: "avoid",
   htmlWhitespaceSensitivity: "ignore",
+  endOfLine: "auto",
 };
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 7526a56c8..9f1402bb0 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -1,10 +1,11 @@
 import { shuffle } from "lodash";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { generateDeck } from "../../utils/cards";
 import styles from "./Cards.module.css";
 import { EndGameModal } from "../../components/EndGameModal/EndGameModal";
 import { Button } from "../../components/Button/Button";
 import { Card } from "../../components/Card/Card";
+import { EasyContext } from "../../context/context";
 
 // Игра закончилась
 const STATUS_LOST = "STATUS_LOST";
@@ -41,6 +42,8 @@ function getTimerValue(startDate, endDate) {
  * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры
  */
 export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
+  const { tries, isEasyMode } = useContext(EasyContext);
+  // console.log(isEasyMode);
   // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта
   const [cards, setCards] = useState([]);
   // Текущий статус игры
@@ -196,6 +199,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
           )}
         </div>
         {status === STATUS_IN_PROGRESS ? <Button onClick={resetGame}>Начать заново</Button> : null}
+        {isEasyMode && <span style={{ color: "red" }}>Количество жизней: {tries}</span>}
       </div>
 
       <div className={styles.cards}>
diff --git a/src/context/context.jsx b/src/context/context.jsx
new file mode 100644
index 000000000..ff14509f5
--- /dev/null
+++ b/src/context/context.jsx
@@ -0,0 +1,9 @@
+import { createContext, useState } from "react";
+
+export const EasyContext = createContext(false);
+
+export const EasyProvider = ({ children }) => {
+  const [tries, setTries] = useState(3);
+  const [isEasyMode, setEasyMode] = useState(false);
+  return <EasyContext.Provider value={{ tries, setTries, isEasyMode, setEasyMode }}>{children}</EasyContext.Provider>;
+};
diff --git a/src/index.js b/src/index.js
index f689c5f0b..871d7d979 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,13 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
+import { EasyProvider } from "./context/context";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router}></RouterProvider>
+    <EasyProvider>
+      <RouterProvider router={router}></RouterProvider>
+    </EasyProvider>
   </React.StrictMode>,
 );
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index 758942e51..bc67a8964 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -1,7 +1,10 @@
 import { Link } from "react-router-dom";
 import styles from "./SelectLevelPage.module.css";
+import { useContext } from "react";
+import { EasyContext } from "../../context/context";
 
 export function SelectLevelPage() {
+  const { isEasyMode, setEasyMode } = useContext(EasyContext);
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -23,6 +26,8 @@ export function SelectLevelPage() {
             </Link>
           </li>
         </ul>
+        <label>Легкий режим</label>
+        <input type="checkbox" checked={isEasyMode} onChange={e => setEasyMode(e.target.checked)} />
       </div>
     </div>
   );

From d520b6a9ba98f9a374c1eabe6b05579a70383b3a Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 27 Jul 2024 23:42:52 +0200
Subject: [PATCH 02/25] =?UTF-8?q?=D1=81=D1=87=D0=B5=D1=82=D1=87=D0=B8?=
 =?UTF-8?q?=D0=BA=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B1=D0=BE=D1=82=D0=B0=D0=B5=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cards/Cards.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 9f1402bb0..638f2081b 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -42,7 +42,7 @@ function getTimerValue(startDate, endDate) {
  * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры
  */
 export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
-  const { tries, isEasyMode } = useContext(EasyContext);
+  const { tries, setTries, isEasyMode } = useContext(EasyContext);
   // console.log(isEasyMode);
   // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта
   const [cards, setCards] = useState([]);
@@ -76,6 +76,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setGameEndDate(null);
     setTimer(getTimerValue(null, null));
     setStatus(STATUS_PREVIEW);
+    setTries(3); // Сброс количества попыток при перезапуске игры
   }
 
   /**
@@ -130,7 +131,12 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
     // "Игрок проиграл", т.к на поле есть две открытые карты без пары
     if (playerLost) {
-      finishGame(STATUS_LOST);
+      setTries(prevTries => prevTries - 1);
+      if (tries - 1 <= 0) {
+        finishGame(STATUS_LOST);
+      } else {
+        setCards(cards.map(card => ({ ...card, open: false }))); // Закрываем карты без пары
+      }
       return;
     }
 

From eb2074e0c4d6c4a4ce60a3cbefe29fdefe35317a Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 28 Jul 2024 00:08:03 +0200
Subject: [PATCH 03/25] =?UTF-8?q?=D0=A1=D1=87=D0=B5=D1=82=D1=87=D0=B8?=
 =?UTF-8?q?=D0=BA=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D0=B2=20Readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/README.md b/README.md
index 9b90842c4..6c9382a59 100644
--- a/README.md
+++ b/README.md
@@ -44,3 +44,15 @@ https://skypro-web-developer.github.io/react-memo/
 
 Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом.
 Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения.
+
+## Счётчик ошибок
+
+В игре реализован счётчик ошибок, который показывает количество оставшихся попыток.
+
+### Формат отображения
+
+- "Осталось попыток: X"
+
+### Обоснование выбора
+
+Этот формат позволяет игрокам легко понять, сколько попыток у них осталось, без отвлечения от игры. Использование красного цвета привлекает внимание к этой важной информации.

From 6aafae893bd237626b7102390cde9da7a456b52f Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 28 Jul 2024 00:14:47 +0200
Subject: [PATCH 04/25] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=86=D0=B5=D0=BD=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=B2=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 6c9382a59..0eaa6b95a 100644
--- a/README.md
+++ b/README.md
@@ -56,3 +56,10 @@ https://skypro-web-developer.github.io/react-memo/
 ### Обоснование выбора
 
 Этот формат позволяет игрокам легко понять, сколько попыток у них осталось, без отвлечения от игры. Использование красного цвета привлекает внимание к этой важной информации.
+
+## Оценка времени работы
+
+- **Инициализация игры**: O(n)
+- **Обработка клика по карте**: O(1)
+- **Проверка выигрыша**: O(n)
+- **Перемешивание карт**: O(n log n)

From 588034058d562f842e46c41dafe2e12003ba2b38 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 28 Jul 2024 22:46:35 +0200
Subject: [PATCH 05/25] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=B8=D0=B3=D1=80=D0=B0=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SelectLevelPage/SelectLevelPage.jsx | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index bc67a8964..32cd46ed1 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -1,33 +1,41 @@
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import styles from "./SelectLevelPage.module.css";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { EasyContext } from "../../context/context";
 
 export function SelectLevelPage() {
   const { isEasyMode, setEasyMode } = useContext(EasyContext);
+  const navigate = useNavigate();
+  const [selectedLevel, setSelectedLevel] = useState(null);
+
+  const startGame = () => {
+    if (selectedLevel !== null) {
+      navigate(`/game/${selectedLevel}`);
+    } else {
+      alert("Пожалуйста, выберите уровень сложности");
+    }
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
         <h1 className={styles.title}>Выбери сложность</h1>
         <ul className={styles.levels}>
-          <li className={styles.level}>
-            <Link className={styles.levelLink} to="/game/3">
-              1
-            </Link>
-          </li>
-          <li className={styles.level}>
-            <Link className={styles.levelLink} to="/game/6">
-              2
-            </Link>
-          </li>
-          <li className={styles.level}>
-            <Link className={styles.levelLink} to="/game/9">
-              3
-            </Link>
-          </li>
+          {[3, 6, 9].map(level => (
+            <li
+              key={level}
+              className={`${styles.level} ${selectedLevel === level ? styles.selected : ""}`}
+              onClick={() => setSelectedLevel(level)}
+            >
+              {level / 3}
+            </li>
+          ))}
         </ul>
-        <label>Легкий режим</label>
+        <label className={styles.easyModeLabel}>Легкий режим</label>
         <input type="checkbox" checked={isEasyMode} onChange={e => setEasyMode(e.target.checked)} />
+        <button className={styles.startButton} onClick={startGame}>
+          Играть
+        </button>
       </div>
     </div>
   );

From 625062a520e93116888922bbed310b59428c8670 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Mon, 29 Jul 2024 00:28:57 +0200
Subject: [PATCH 06/25] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=20?=
 =?UTF-8?q?=D1=81=D0=BB=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82=D0=B8=20=D0=B8?=
 =?UTF-8?q?=20=D1=80=D0=B5=D0=B6=D0=B8=D0=BC=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |  3 +
 src/pages/SelectLevelPage/SelectLevelPage.jsx | 11 ++-
 .../SelectLevelPage.module.css                | 89 +++++++++++++++++--
 3 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index c0103cf10..f8f3a611a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index 32cd46ed1..7857a929a 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -31,8 +31,15 @@ export function SelectLevelPage() {
             </li>
           ))}
         </ul>
-        <label className={styles.easyModeLabel}>Легкий режим</label>
-        <input type="checkbox" checked={isEasyMode} onChange={e => setEasyMode(e.target.checked)} />
+        <div className={styles.labelName}>
+          <label className={styles.easyModeLabel}>Легкий режим (3 жизни)</label>
+          <input
+            type="checkbox"
+            checked={isEasyMode}
+            onChange={e => setEasyMode(e.target.checked)}
+            className={styles.easyModeCheckbox}
+          />
+        </div>
         <button className={styles.startButton} onClick={startGame}>
           Играть
         </button>
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css
index 390ac0def..e4f9b7594 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.module.css
+++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css
@@ -1,27 +1,34 @@
 .container {
+  font-family: 'Roboto', sans-serif;
+
   width: 100%;
   min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
+  }
 
 .modal {
-  width: 480px;
-  height: 459px;
-  border-radius: 12px;
   background: #c2f5ff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  width: 480px;
+  height: 529px;
+  top: 122px;
+  left: 272px;
+  gap: 0px;
+  border-radius: 12px;
+  opacity: 0px;
 }
 
 .title {
   color: #004980;
   text-align: center;
   font-variant-numeric: lining-nums proportional-nums;
-  font-family: StratosSkyeng;
+  font-family: Roboto;
   font-size: 40px;
   font-style: normal;
   font-weight: 400;
@@ -33,7 +40,16 @@
   flex-direction: row;
   gap: 26px;
   margin-top: 48px;
-  margin-bottom: 28px;
+  margin-bottom: 28px;  
+
+  color: #0080C1;
+  text-align: center;
+  font-variant-numeric: lining-nums proportional-nums;
+  font-family: Roboto;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 48px;
 }
 
 .level {
@@ -46,12 +62,28 @@
 
   border-radius: 12px;
   background: #fff;
+
+  cursor: pointer;
+  padding: 10px;
+  margin: 5px;
+  border: 2px solid transparent;  
+  transition: border-color 0.1s, background-color 0.1s;
+}
+
+.level:hover {
+  border-color: #aaa;
+}
+
+.selected {
+  text-color: #004980;
+  border-color: #B1B1B1;
+  background-color: #ddd;
 }
 
 .levelLink {
   color: #0080c1;
   text-align: center;
-  font-family: StratosSkyeng;
+  font-family: Roboto;
   font-size: 64px;
   font-style: normal;
   font-weight: 400;
@@ -62,3 +94,46 @@
 .levelLink:visited {
   color: #0080c1;
 }
+
+.labelName {
+  display: flex;
+  flex-direction: row-reverse;
+
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: center; 
+  gap: 10px; 
+}
+
+.easyModeCheckbox {
+  width: 30px;
+  height: 29px;
+  top: 439px;
+  left: 353px;
+  gap: 0px;
+  border-radius: 4px;
+  border: none;
+  opacity: 0px;
+}
+
+.startButton {
+  margin-top: 28px;
+  margin-bottom: 28px;
+  width: 276px;
+  height: 45px;
+  top: 508px;
+  left: 375px;
+  border-radius: 12px;
+  border: none;
+  opacity: 0px;
+  background-color: #7AC100;
+
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: center;
+  color: #FFFFFF;
+}
\ No newline at end of file

From 51353728084e90d8adb3ea1cd3885855a5847968 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Mon, 29 Jul 2024 20:47:01 +0200
Subject: [PATCH 07/25] =?UTF-8?q?=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=B4=D0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cards/Cards.jsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 638f2081b..19345a27b 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -131,11 +131,29 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
     // "Игрок проиграл", т.к на поле есть две открытые карты без пары
     if (playerLost) {
-      setTries(prevTries => prevTries - 1);
-      if (tries - 1 <= 0) {
-        finishGame(STATUS_LOST);
+      if (isEasyMode) {
+        setTries(prevTries => prevTries - 1);
+        if (tries - 1 <= 0) {
+          finishGame(STATUS_LOST);
+        } else {
+          // Закрываем только карты без пары
+          setTimeout(() => {
+            setCards(
+              nextCards.map(card =>
+                openCardsWithoutPair.some(openCard => openCard.id === card.id) ? { ...card, open: false } : card,
+              ),
+            );
+          }, 1000); // Задержка в 1 секунду, чтобы игрок успел увидеть вторую карту
+        }
       } else {
-        setCards(cards.map(card => ({ ...card, open: false }))); // Закрываем карты без пары
+        // Сложный режим: закрываем только карты без пары, не уменьшаем количество попыток
+        setTimeout(() => {
+          setCards(
+            nextCards.map(card =>
+              openCardsWithoutPair.some(openCard => openCard.id === card.id) ? { ...card, open: false } : card,
+            ),
+          );
+        }, 1000); // Задержка в 1 секунду, чтобы игрок успел увидеть вторую карту
       }
       return;
     }

From 09db74485215a4312d44d4dcc2726086f63b168d Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Fri, 2 Aug 2024 09:12:44 +0200
Subject: [PATCH 08/25] =?UTF-8?q?=D0=A1=D0=BB=D0=BE=D0=B6=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B9=20=D1=80=D0=B5=D0=B6=D0=B8=D0=BC=20=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=82=D0=B0=D0=B5=D1=82=3F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cards/Cards.jsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 19345a27b..cf07f677a 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -147,17 +147,10 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
         }
       } else {
         // Сложный режим: закрываем только карты без пары, не уменьшаем количество попыток
-        setTimeout(() => {
-          setCards(
-            nextCards.map(card =>
-              openCardsWithoutPair.some(openCard => openCard.id === card.id) ? { ...card, open: false } : card,
-            ),
-          );
-        }, 1000); // Задержка в 1 секунду, чтобы игрок успел увидеть вторую карту
+        finishGame(STATUS_LOST); // Завершаем игру при одной ошибке в сложном режиме
       }
       return;
     }
-
     // ... игра продолжается
   };
 

From 1215258215264e1cde9c40b182e514fad3f54530 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Fri, 2 Aug 2024 09:51:28 +0200
Subject: [PATCH 09/25] =?UTF-8?q?=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D1=87=D0=B5=D0=BA=D0=B1=D0=BE=D0=BA=D1=81?=
 =?UTF-8?q?=20=D0=BD=D0=B5=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SelectLevelPage/SelectLevelPage.jsx |  4 +-
 .../SelectLevelPage.module.css                | 60 ++++++++++++-------
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index 7857a929a..b72d43332 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -32,13 +32,15 @@ export function SelectLevelPage() {
           ))}
         </ul>
         <div className={styles.labelName}>
-          <label className={styles.easyModeLabel}>Легкий режим (3 жизни)</label>
           <input
             type="checkbox"
+            id="easyModeCheckbox"
             checked={isEasyMode}
             onChange={e => setEasyMode(e.target.checked)}
             className={styles.easyModeCheckbox}
           />
+          <label className={styles.easyModeLabel}></label>
+          <span>Легкий режим (3 жизни)</span>
         </div>
         <button className={styles.startButton} onClick={startGame}>
           Играть
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css
index e4f9b7594..b862b6a53 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.module.css
+++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css
@@ -1,12 +1,12 @@
 .container {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 
   width: 100%;
   min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  }
+}
 
 .modal {
   background: #c2f5ff;
@@ -40,9 +40,9 @@
   flex-direction: row;
   gap: 26px;
   margin-top: 48px;
-  margin-bottom: 28px;  
+  margin-bottom: 28px;
 
-  color: #0080C1;
+  color: #0080c1;
   text-align: center;
   font-variant-numeric: lining-nums proportional-nums;
   font-family: Roboto;
@@ -66,8 +66,10 @@
   cursor: pointer;
   padding: 10px;
   margin: 5px;
-  border: 2px solid transparent;  
-  transition: border-color 0.1s, background-color 0.1s;
+  border: 2px solid transparent;
+  transition:
+    border-color 0.1s,
+    background-color 0.1s;
 }
 
 .level:hover {
@@ -76,7 +78,7 @@
 
 .selected {
   text-color: #004980;
-  border-color: #B1B1B1;
+  border-color: #b1b1b1;
   background-color: #ddd;
 }
 
@@ -97,25 +99,43 @@
 
 .labelName {
   display: flex;
-  flex-direction: row-reverse;
-
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
-  text-align: center; 
-  gap: 10px; 
+  text-align: center;
+  gap: 10px;
 }
 
 .easyModeCheckbox {
+  display: none;
+}
+
+.easyModeLabel {
+  display: inline-block;
   width: 30px;
-  height: 29px;
-  top: 439px;
-  left: 353px;
-  gap: 0px;
-  border-radius: 4px;
+  height: 30px;
   border: none;
-  opacity: 0px;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  background-color: white; 
+}
+.easyModeLabel::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  color: #7ac100; 
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.1s ease-in-out;
+  border-radius: 2px;
+}
+
+.easyModeCheckbox:checked + .easyModeLabel::after {
+  transform: translate(-50%, -50%) scale(1);
 }
 
 .startButton {
@@ -128,12 +148,12 @@
   border-radius: 12px;
   border: none;
   opacity: 0px;
-  background-color: #7AC100;
+  background-color: #7ac100;
 
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
   text-align: center;
-  color: #FFFFFF;
-}
\ No newline at end of file
+  color: #ffffff;
+}

From eda923cdf45187c46f7e31123bf6009dfcefd285 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Fri, 2 Aug 2024 15:41:36 +0200
Subject: [PATCH 10/25] =?UTF-8?q?=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SelectLevelPage/SelectLevelPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index b72d43332..b3081ebb8 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -39,7 +39,7 @@ export function SelectLevelPage() {
             onChange={e => setEasyMode(e.target.checked)}
             className={styles.easyModeCheckbox}
           />
-          <label className={styles.easyModeLabel}></label>
+          <label htmlFor="easyModeCheckbox" className={styles.easyModeLabel}></label>
           <span>Легкий режим (3 жизни)</span>
         </div>
         <button className={styles.startButton} onClick={startGame}>

From cc0096ffe885972d956aedda9bed9242ed62e34b Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 3 Aug 2024 16:39:00 +0200
Subject: [PATCH 11/25] =?UTF-8?q?=D1=87=D0=B5=D0=BA=D0=B1=D0=BE=D0=BA?=
 =?UTF-8?q?=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...4403_papik-pro-p-smail-chekboks-png-32.png | Bin 0 -> 5322 bytes
 src/components/Cards/Cards.jsx                |   5 +++-
 src/components/Cards/Cards.module.css         |  23 ++++++++++++++++++
 .../SelectLevelPage.module.css                |  12 ++++-----
 4 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 public/1682744403_papik-pro-p-smail-chekboks-png-32.png

diff --git a/public/1682744403_papik-pro-p-smail-chekboks-png-32.png b/public/1682744403_papik-pro-p-smail-chekboks-png-32.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f9e0f56169a7352d819332d93a74d9306a66785
GIT binary patch
literal 5322
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
ODh!_h?;3j4-v0qjJ@OU+

literal 0
HcmV?d00001

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index cf07f677a..d19041f94 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -230,7 +230,10 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
           />
         ))}
       </div>
-
+      {/* <div className={styles.superBlock}>
+        <div className={styles.superPower}></div>
+        <div className={styles.superModal}>SuperHeroes</div>
+      </div> */}
       {isGameEnded ? (
         <div className={styles.modalContainer}>
           <EndGameModal
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css
index 000c5006c..769643308 100644
--- a/src/components/Cards/Cards.module.css
+++ b/src/components/Cards/Cards.module.css
@@ -70,3 +70,26 @@
 
   margin-bottom: -12px;
 }
+
+/* .superBlock {
+  position: relative;
+}
+
+.superPower {
+  height: 40px;
+  width: 40px;
+  background-color: #B1B1B1;
+  border-radius: 50%; 
+  position: relative; 
+}
+
+.superPower:hover + .superModal {
+  display: block;
+} */
+
+.superModal {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
\ No newline at end of file
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css
index b862b6a53..ca833d4d4 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.module.css
+++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css
@@ -114,24 +114,24 @@
 .easyModeLabel {
   display: inline-block;
   width: 30px;
-  height: 30px;
+  height: 29px;
   border: none;
   border-radius: 4px;
   position: relative;
   cursor: pointer;
-  background-color: white; 
+  background-color: white;   
 }
 .easyModeLabel::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 20px;
-  height: 20px;
-  color: #7ac100; 
+  width: 30px;
+  height: 29px;
+  background: url('/public/1682744403_papik-pro-p-smail-chekboks-png-32.png') no-repeat center center;
+  background-size: contain;
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0.1s ease-in-out;
-  border-radius: 2px;
 }
 
 .easyModeCheckbox:checked + .easyModeLabel::after {

From 5b64dd7b1d38987e34d0e2137c669221e2b8babd Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 3 Aug 2024 17:07:52 +0200
Subject: [PATCH 12/25] =?UTF-8?q?=D0=A7=D0=B5=D0=BA=D0=B1=D0=BE=D0=BA?=
 =?UTF-8?q?=D1=81=20=D0=BF=D0=BE=D1=85=D0=BE=D0=B6=20=D0=BD=D0=B0=20=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=B3=D0=B8=D0=BD=D0=B0=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SelectLevelPage/SelectLevelPage.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index b3081ebb8..ada5661e3 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -7,6 +7,8 @@ export function SelectLevelPage() {
   const { isEasyMode, setEasyMode } = useContext(EasyContext);
   const navigate = useNavigate();
   const [selectedLevel, setSelectedLevel] = useState(null);
+  const [checked, setChecked] = useState(isEasyMode);
+  const [level, setLevel] = useState({});
 
   const startGame = () => {
     if (selectedLevel !== null) {
@@ -16,6 +18,16 @@ export function SelectLevelPage() {
     }
   };
 
+  const handleInputChangeCheckbox = e => {
+    const { name } = e.target;
+    setChecked(!checked);
+    setLevel({
+      ...level,
+      [name]: !checked,
+    });
+    setEasyMode(!checked);
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -35,8 +47,9 @@ export function SelectLevelPage() {
           <input
             type="checkbox"
             id="easyModeCheckbox"
-            checked={isEasyMode}
-            onChange={e => setEasyMode(e.target.checked)}
+            name="easyMode"
+            checked={checked}
+            onChange={handleInputChangeCheckbox}
             className={styles.easyModeCheckbox}
           />
           <label htmlFor="easyModeCheckbox" className={styles.easyModeLabel}></label>

From 5c322b2979edceae6ddc26fcbac62c8ab21ef016 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 4 Aug 2024 22:00:07 +0200
Subject: [PATCH 13/25] Create Leaderboard

---
 src/api.js                                    |  10 ++
 .../LeaderBoardPlayer/LeaderBoardPlayer.jsx   |  11 ++
 .../LeaderBoardPlayer.module.css              |  39 ++++++
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx |  56 +++++++++
 .../LeaderBoardPage.module.css                | 116 ++++++++++++++++++
 src/pages/SelectLevelPage/SelectLevelPage.jsx |   4 +
 src/router.js                                 |   7 +-
 7 files changed, 242 insertions(+), 1 deletion(-)
 create mode 100644 src/api.js
 create mode 100644 src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
 create mode 100644 src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
 create mode 100644 src/pages/LeaderBoardPage/LeaderBoardPage.jsx
 create mode 100644 src/pages/LeaderBoardPage/LeaderBoardPage.module.css

diff --git a/src/api.js b/src/api.js
new file mode 100644
index 000000000..70db9cce3
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,10 @@
+const API_URL = "https://wedev-api.sky.pro/api/leaderboard";
+
+export async function getPlayersList() {
+  const response = await fetch(API_URL, {
+    method: "GET",
+  });
+
+  const data = await response.json();
+  return data;
+}
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
new file mode 100644
index 000000000..d1e3f24eb
--- /dev/null
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
@@ -0,0 +1,11 @@
+import styles from "./LeaderBoardPlayer.module.css";
+
+export function LeaderBoardPlayer({ name, time, position }) {
+  return (
+    <div className={styles.leader_board_container_middle}>
+      <div className={styles.leader_board_container_middle_div1_b}>{position}</div>
+      <div className={styles.leader_board_container_middle_div2_b}>{name}</div>
+      <div className={styles.leader_board_container_middle_div3_b}>{time}</div>
+    </div>
+  );
+}
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
new file mode 100644
index 000000000..27c6f8b19
--- /dev/null
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
@@ -0,0 +1,39 @@
+.leader_board_container_middle {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    align-items: center;
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 12px 40px 12px 20px;
+    margin-bottom: 15px;
+  }
+  
+  
+  .leader_board_container_middle_div1_b {
+      font-family: Roboto;
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 32px;
+      text-align: left;
+      color: #000000;
+      grid-column: span 2;
+    }
+    .leader_board_container_middle_div2_b {
+      font-family: Roboto;
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 32px;
+      text-align: left;
+      color: #000000;
+      grid-column: span 5;
+    }
+    .leader_board_container_middle_div3_b {
+      font-family: Roboto;
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 32px;
+      text-align: left;
+      color: #000000;
+      grid-column: span 1;
+    }
+    
\ No newline at end of file
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
new file mode 100644
index 000000000..b87d4bdeb
--- /dev/null
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { getPlayersList } from "../../api";
+import { LeaderBoardPlayer } from "../../components/LeaderBoardPlayer/LeaderBoardPlayer";
+import styles from "./LeaderBoardPage.module.css";
+
+export function LeaderBoardPage() {
+  const [leaderArray, setLeaderArray] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getPlayersList();
+        const filteredData = data.leaders
+          .filter(player => player.difficulty === 3) // Учитываем только 3-й уровень сложности
+          .sort((a, b) => a.time - b.time); // Сортируем по возрастанию времени
+        setLeaderArray(filteredData);
+      } catch (err) {
+        setError("Не удалось загрузить данные");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) return <div>Загрузка...</div>;
+  if (error) return <div>{error}</div>;
+
+  return (
+    <>
+      <div className={styles.leader_board_container}>
+        <div className={styles.leader_board_container_top}>
+          <h1 className={styles.leader_board_container_h1}>Лидерборд</h1>
+          <button className={styles.leader_board_container_button}>Начать игру</button>
+        </div>
+        <div className={styles.leader_board_container_middle}>
+          <div className={styles.leader_board_container_middle_div1}>Позиция</div>
+          <div className={styles.leader_board_container_middle_div2}>Пользователь</div>
+          <div className={styles.leader_board_container_middle_div3}>Время</div>
+        </div>
+        {leaderArray.map((player, index) => (
+          <LeaderBoardPlayer
+            key={player.id}
+            id={"#" + player.id}
+            name={player.name}
+            time={player.time}
+            position={index + 1}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
new file mode 100644
index 000000000..10caa7776
--- /dev/null
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
@@ -0,0 +1,116 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+.leader_board_container {
+  width: 944px;
+  margin: 0 auto;
+  padding: 26px;
+  padding-top: 22px;
+  box-sizing: border-box;
+}
+
+.leader_board_container_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.leader_board_container_middle {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 12px 40px 12px 20px;
+  margin-bottom: 15px;
+}
+
+.leader_board_container_middle_left {
+  display: flex;
+  justify-content: space-between;
+  width: 400px;
+}
+.leader_board_container_middle_div1 {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #999999;
+  grid-column: span 2;
+}
+.leader_board_container_middle_div2 {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #999999;
+  grid-column: span 5;
+}
+.leader_board_container_middle_div3 {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #999999;
+  grid-column: span 1;
+}
+
+.leader_board_container_middle_div1_b {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #000000;
+  grid-column: span 2;
+}
+.leader_board_container_middle_div2_b {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #000000;
+  grid-column: span 5;
+}
+.leader_board_container_middle_div3_b {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: #000000;
+  grid-column: span 1;
+}
+
+.leader_board_container_h1 {
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  color: #ffffff;
+}
+
+.leader_board_container_button {
+  background-color: #7ac100;
+  width: 246px;
+  height: 50px;
+  border-radius: 12px;
+  border-width: 0px;
+  opacity: 0px;
+  color: #ffffff;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: center;
+}
+
+.leader_board_container_button:hover {
+  cursor: pointer;
+  background-color: #97de1e;
+}
\ No newline at end of file
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index ada5661e3..f3aca9169 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import styles from "./SelectLevelPage.module.css";
 import { useContext, useState } from "react";
 import { EasyContext } from "../../context/context";
+import { Link } from "react-router-dom";
 
 export function SelectLevelPage() {
   const { isEasyMode, setEasyMode } = useContext(EasyContext);
@@ -58,6 +59,9 @@ export function SelectLevelPage() {
         <button className={styles.startButton} onClick={startGame}>
           Играть
         </button>
+        <Link className={styles.LeaderBoardLink} to="/game/leaderboard">
+          Перейти к лидерборду
+        </Link>
       </div>
     </div>
   );
diff --git a/src/router.js b/src/router.js
index da6e94b51..80f1488f9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import { GamePage } from "./pages/GamePage/GamePage";
 import { SelectLevelPage } from "./pages/SelectLevelPage/SelectLevelPage";
+import { LeaderBoardPage } from "./pages/LeaderBoardPage/LeaderBoardPage";
 
 export const router = createBrowserRouter(
   [
@@ -12,10 +13,14 @@ export const router = createBrowserRouter(
       path: "/game/:pairsCount",
       element: <GamePage />,
     },
+    {
+      path: "/game/:leaderboard",
+      element: <LeaderBoardPage />,
+    },
   ],
   /**
    * basename нужен для корректной работы в gh pages
    * он же указан в homepage package.json и в index.html
    */
-  { basename: "/react-memo" },
+  { basename: "/react-memo" }
 );

From f7f532dce94d27a17e7e8665a5bc7cdb899aed1c Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 4 Aug 2024 22:00:55 +0200
Subject: [PATCH 14/25] =?UTF-8?q?=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cards/Cards.jsx                   |  4 ----
 src/components/Cards/Cards.module.css            | 16 ----------------
 .../SelectLevelPage/SelectLevelPage.module.css   | 10 ++++++++++
 src/router.js                                    |  2 +-
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index d19041f94..8b4b23ae3 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -230,10 +230,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
           />
         ))}
       </div>
-      {/* <div className={styles.superBlock}>
-        <div className={styles.superPower}></div>
-        <div className={styles.superModal}>SuperHeroes</div>
-      </div> */}
       {isGameEnded ? (
         <div className={styles.modalContainer}>
           <EndGameModal
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css
index 769643308..00a758ff7 100644
--- a/src/components/Cards/Cards.module.css
+++ b/src/components/Cards/Cards.module.css
@@ -71,22 +71,6 @@
   margin-bottom: -12px;
 }
 
-/* .superBlock {
-  position: relative;
-}
-
-.superPower {
-  height: 40px;
-  width: 40px;
-  background-color: #B1B1B1;
-  border-radius: 50%; 
-  position: relative; 
-}
-
-.superPower:hover + .superModal {
-  display: block;
-} */
-
 .superModal {
   display: none;
   position: absolute;
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css
index ca833d4d4..fcba45ce7 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.module.css
+++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css
@@ -157,3 +157,13 @@
   text-align: center;
   color: #ffffff;
 }
+
+.LeaderBoardLink {
+  margin-top: 20px;
+  color: #004980;
+  font-family: Roboto;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 80f1488f9..8b1f416a2 100644
--- a/src/router.js
+++ b/src/router.js
@@ -22,5 +22,5 @@ export const router = createBrowserRouter(
    * basename нужен для корректной работы в gh pages
    * он же указан в homepage package.json и в index.html
    */
-  { basename: "/react-memo" }
+  { basename: "/react-memo" },
 );

From 3a6f29bcf11529dbba0784743d06630494c32b2e Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Mon, 26 Aug 2024 23:22:47 +0200
Subject: [PATCH 15/25] =?UTF-8?q?=D0=B4=D0=B7-=20=D0=BF=D0=BE=20=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B4=D0=B5=D1=80=D0=B1=D0=BE=D1=80=D0=B4=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                                    |  2 +-
 src/components/Cards/Cards.jsx                |  3 +
 src/components/EndGameModal/EndGameModal.jsx  | 29 +++++--
 .../EndGameModal/EndGameModal.module.css      | 83 ++++++++++++++++++-
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx | 19 +++--
 src/pages/SelectLevelPage/SelectLevelPage.jsx |  2 +-
 src/router.js                                 |  2 +-
 7 files changed, 120 insertions(+), 20 deletions(-)

diff --git a/src/api.js b/src/api.js
index 70db9cce3..e38bd3c95 100644
--- a/src/api.js
+++ b/src/api.js
@@ -6,5 +6,5 @@ export async function getPlayersList() {
   });
 
   const data = await response.json();
-  return data;
+  return data.leaders;
 }
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 8b4b23ae3..adfef6dfe 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -42,6 +42,7 @@ function getTimerValue(startDate, endDate) {
  * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры
  */
 export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
+  const isHardMode = pairsCount === 9;
   const { tries, setTries, isEasyMode } = useContext(EasyContext);
   // console.log(isEasyMode);
   // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта
@@ -234,6 +235,8 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
         <div className={styles.modalContainer}>
           <EndGameModal
             isWon={status === STATUS_WON}
+            level={3}
+            isHardMode={isHardMode}
             gameDurationSeconds={timer.seconds}
             gameDurationMinutes={timer.minutes}
             onClick={resetGame}
diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx
index 722394833..788145f15 100644
--- a/src/components/EndGameModal/EndGameModal.jsx
+++ b/src/components/EndGameModal/EndGameModal.jsx
@@ -1,27 +1,40 @@
 import styles from "./EndGameModal.module.css";
-
 import { Button } from "../Button/Button";
-
 import deadImageUrl from "./images/dead.png";
 import celebrationImageUrl from "./images/celebration.png";
+import { Link } from "react-router-dom";
 
-export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, onClick }) {
-  const title = isWon ? "Вы победили!" : "Вы проиграли!";
-
+export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, gameDurationMinutes, onClick }) {
+  const title = isWon && level <= 2 ? "Вы победили!" : "";
+  const isLeader = isWon && isHardMode && level === 3;
+  const lossTitle = !isWon ? "Вы проиграли!" : "";
   const imgSrc = isWon ? celebrationImageUrl : deadImageUrl;
-
   const imgAlt = isWon ? "celebration emodji" : "dead emodji";
 
   return (
     <div className={styles.modal}>
       <img className={styles.image} src={imgSrc} alt={imgAlt} />
-      <h2 className={styles.title}>{title}</h2>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {lossTitle && <h2 className={styles.title}>{lossTitle}</h2>}
+      {isLeader && (
+        <div className={styles.modalContainer}>
+          <h3 className={styles.leaderboardModal}>Вы попали на Лидерборд!</h3>
+          <input className={styles.input} type="text" placeholder="Пользователь" />
+          {/* <button className={styles.submitButton} type="button">
+            Отправить
+          </button> */}
+        </div>
+      )}
       <p className={styles.description}>Затраченное время:</p>
       <div className={styles.time}>
-        {gameDurationMinutes.toString().padStart("2", "0")}.{gameDurationSeconds.toString().padStart("2", "0")}
+        {gameDurationMinutes.toString().padStart("2", "0")}:{gameDurationSeconds.toString().padStart("2", "0")}
       </div>
 
       <Button onClick={onClick}>Начать сначала</Button>
+
+      <Link className={styles.LeaderBoardLink} to="/leaderboard">
+        Перейти к лидерборду
+      </Link>
     </div>
   );
 }
diff --git a/src/components/EndGameModal/EndGameModal.module.css b/src/components/EndGameModal/EndGameModal.module.css
index 9368cb8b5..83b29a296 100644
--- a/src/components/EndGameModal/EndGameModal.module.css
+++ b/src/components/EndGameModal/EndGameModal.module.css
@@ -1,6 +1,6 @@
 .modal {
   width: 480px;
-  height: 459px;
+  height: 643px;
   border-radius: 12px;
   background: #c2f5ff;
   display: flex;
@@ -46,6 +46,85 @@
   font-style: normal;
   font-weight: 400;
   line-height: 72px;
-
   margin-bottom: 40px;
 }
+
+.input {
+  height: 45px;
+  width: 276px;
+  border-radius: 8px;
+  background-color: #ffffff;
+  color: #999999;
+  padding: 0 16px;
+  border: none;
+  margin-bottom: 10px;
+  margin-top: 20px;
+
+  &::placeholder {
+    line-height: 32px;
+    font-size: 24px;
+    font-weight: 400;
+    text-align: center;
+    color: #999999;
+  }
+
+  &:invalid {
+    border: 2px solid red;
+  }
+}
+
+.modalContainer {
+  position: relative;
+  width: 250px;
+  margin: 0 auto; 
+}
+
+.leaderboardModal {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 40px;
+  line-height: 48px;
+  color: #004980;
+  width: 276px;
+  height: 96px; 
+  top: 210px;
+  left: 0; 
+  text-align: center;
+  margin: 20;
+}
+
+.LeaderBoardLink {
+  margin-top: 20px;
+  color: #004980;
+  font-family: Roboto;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+}
+
+/* .submitButton {
+  height: 45px;
+  width: 276px;
+  background-color: #004980;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+
+  &:hover {
+    background-color: #003366;
+  }
+
+  &:active {
+    background-color: #002244;
+  }
+
+  &:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+} */
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
index b87d4bdeb..0e0734cf0 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -2,19 +2,19 @@ import { useState, useEffect } from "react";
 import { getPlayersList } from "../../api";
 import { LeaderBoardPlayer } from "../../components/LeaderBoardPlayer/LeaderBoardPlayer";
 import styles from "./LeaderBoardPage.module.css";
+import { useNavigate } from "react-router-dom";
 
 export function LeaderBoardPage() {
   const [leaderArray, setLeaderArray] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const data = await getPlayersList();
-        const filteredData = data.leaders
-          .filter(player => player.difficulty === 3) // Учитываем только 3-й уровень сложности
-          .sort((a, b) => a.time - b.time); // Сортируем по возрастанию времени
+        const filteredData = data.sort((a, b) => a.time - b.time).slice(0, 10);
         setLeaderArray(filteredData);
       } catch (err) {
         setError("Не удалось загрузить данные");
@@ -26,6 +26,10 @@ export function LeaderBoardPage() {
     fetchData();
   }, []);
 
+  const startGame = () => {
+    navigate(`/game/9`);
+  };
+
   if (loading) return <div>Загрузка...</div>;
   if (error) return <div>{error}</div>;
 
@@ -34,19 +38,20 @@ export function LeaderBoardPage() {
       <div className={styles.leader_board_container}>
         <div className={styles.leader_board_container_top}>
           <h1 className={styles.leader_board_container_h1}>Лидерборд</h1>
-          <button className={styles.leader_board_container_button}>Начать игру</button>
+          <button className={styles.leader_board_container_button} onClick={startGame}>
+            Начать игру
+          </button>
         </div>
         <div className={styles.leader_board_container_middle}>
           <div className={styles.leader_board_container_middle_div1}>Позиция</div>
           <div className={styles.leader_board_container_middle_div2}>Пользователь</div>
-          <div className={styles.leader_board_container_middle_div3}>Время</div>
+          <div className={styles.leader_board_container_middle_div3}>Время </div>
         </div>
         {leaderArray.map((player, index) => (
           <LeaderBoardPlayer
             key={player.id}
-            id={"#" + player.id}
             name={player.name}
-            time={player.time}
+            time={`${Math.floor(player.time / 60)}:${(player.time % 60).toString().padStart(2, "0")}`} // Форматируем время
             position={index + 1}
           />
         ))}
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index f3aca9169..a7e0d3df6 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -59,7 +59,7 @@ export function SelectLevelPage() {
         <button className={styles.startButton} onClick={startGame}>
           Играть
         </button>
-        <Link className={styles.LeaderBoardLink} to="/game/leaderboard">
+        <Link className={styles.LeaderBoardLink} to="/leaderboard">
           Перейти к лидерборду
         </Link>
       </div>
diff --git a/src/router.js b/src/router.js
index 8b1f416a2..c80542c76 100644
--- a/src/router.js
+++ b/src/router.js
@@ -14,7 +14,7 @@ export const router = createBrowserRouter(
       element: <GamePage />,
     },
     {
-      path: "/game/:leaderboard",
+      path: "/leaderboard",
       element: <LeaderBoardPage />,
     },
   ],

From eecd65acc3fc671139cbc333bad3b77b56e38574 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Mon, 26 Aug 2024 23:35:02 +0200
Subject: [PATCH 16/25] =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 0eaa6b95a..b635bdcf0 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,12 @@ https://skypro-web-developer.github.io/react-memo/
 ## Оценка времени работы
 
 - **Инициализация игры**: O(n)
+  - Игра инициализируется на основе количества карт. Чем больше карт, тем больше времени потребуется для их инициализации.
 - **Обработка клика по карте**: O(1)
+  - Время на обработку клика по карте фиксированное, так как это простое действие — переворот карты.
+- **Проверка совпадений**: O(1)
+  - Проверка совпадения двух карт осуществляется мгновенно, так как это сравнение двух значений.
 - **Проверка выигрыша**: O(n)
+  - Для проверки выигрыша необходимо пройти по всем картам, чтобы убедиться, что все пары найдены.
 - **Перемешивание карт**: O(n log n)
+  - Перемешивание карт реализовано с использованием алгоритма, временная сложность которого составляет O(n log n), что характерно для эффективных алгоритмов сортировки.
\ No newline at end of file

From aac17871ba7e52620036f58dacbd54244bf26bb3 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Thu, 29 Aug 2024 22:17:33 +0200
Subject: [PATCH 17/25] =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=D1=81=D1=8F=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=B1=D0=B5=D1=80=D0=B1=D0=BE=D1=80=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                                    | 20 ++++++
 src/components/EndGameModal/EndGameModal.jsx  | 45 ++++++++++--
 .../EndGameModal/EndGameModal.module.css      | 69 ++++++++++---------
 .../SelectLevelPage.module.css                |  4 +-
 4 files changed, 100 insertions(+), 38 deletions(-)

diff --git a/src/api.js b/src/api.js
index e38bd3c95..d2229b95d 100644
--- a/src/api.js
+++ b/src/api.js
@@ -8,3 +8,23 @@ export async function getPlayersList() {
   const data = await response.json();
   return data.leaders;
 }
+
+export async function updateLeaderboard(name, score, time) {
+  try {
+    const response = await fetch(API_URL, {
+      method: "POST",
+      body: JSON.stringify({ name, score, time }), // Добавляем поле time в запрос
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("Ошибка при обновлении лидерборда:", response.status, errorText);
+      throw new Error(`Не удалось обновить лидерборд: ${response.status} ${errorText}`);
+    }
+
+    console.log("Лидерборд успешно обновлён");
+  } catch (error) {
+    console.error("Ошибка сети или другая ошибка:", error);
+    throw new Error("Не удалось обновить лидерборд");
+  }
+}
diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx
index 788145f15..8bcd8c299 100644
--- a/src/components/EndGameModal/EndGameModal.jsx
+++ b/src/components/EndGameModal/EndGameModal.jsx
@@ -2,7 +2,9 @@ import styles from "./EndGameModal.module.css";
 import { Button } from "../Button/Button";
 import deadImageUrl from "./images/dead.png";
 import celebrationImageUrl from "./images/celebration.png";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { updateLeaderboard } from "../../api";
 
 export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, gameDurationMinutes, onClick }) {
   const title = isWon && level <= 2 ? "Вы победили!" : "";
@@ -10,6 +12,35 @@ export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, ga
   const lossTitle = !isWon ? "Вы проиграли!" : "";
   const imgSrc = isWon ? celebrationImageUrl : deadImageUrl;
   const imgAlt = isWon ? "celebration emodji" : "dead emodji";
+  const navigate = useNavigate();
+  const [username, setUsername] = useState("");
+
+  const handleSubmit = async () => {
+    console.log("HandleSubmit вызван");
+
+    if (username.trim()) {
+      const score = 100;
+      const timeInSeconds = gameDurationMinutes * 60 + gameDurationSeconds;
+
+      console.log("Имя пользователя перед отправкой:", username);
+      console.log("Тело запроса:", JSON.stringify({ name: username, score, time: timeInSeconds }));
+
+      try {
+        await updateLeaderboard(username, score, timeInSeconds); // Ждём завершения обновления лидерборда
+        navigate("/leaderboard"); // Переход после успешного обновления
+      } catch (error) {
+        console.error("Ошибка при обновлении лидерборда:", error);
+        alert("Не удалось обновить лидерборд, попробуйте снова.");
+      }
+    } else {
+      alert("Введите имя пользователя перед отправкой!");
+    }
+  };
+
+  const handleInputChange = event => {
+    setUsername(event.target.value);
+    console.log("Текущий username:", event.target.value);
+  };
 
   return (
     <div className={styles.modal}>
@@ -19,10 +50,16 @@ export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, ga
       {isLeader && (
         <div className={styles.modalContainer}>
           <h3 className={styles.leaderboardModal}>Вы попали на Лидерборд!</h3>
-          <input className={styles.input} type="text" placeholder="Пользователь" />
-          {/* <button className={styles.submitButton} type="button">
+          <input
+            className={styles.input}
+            type="text"
+            placeholder="Пользователь"
+            value={username}
+            onChange={handleInputChange}
+          />
+          <button className={styles.submitButton} type="button" onClick={handleSubmit}>
             Отправить
-          </button> */}
+          </button>
         </div>
       )}
       <p className={styles.description}>Затраченное время:</p>
diff --git a/src/components/EndGameModal/EndGameModal.module.css b/src/components/EndGameModal/EndGameModal.module.css
index 83b29a296..d6cc4c100 100644
--- a/src/components/EndGameModal/EndGameModal.module.css
+++ b/src/components/EndGameModal/EndGameModal.module.css
@@ -35,7 +35,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: 32px;
-
+  margin-top: 20px;
   margin-bottom: 10px;
 }
 
@@ -49,16 +49,23 @@
   margin-bottom: 40px;
 }
 
-.input {
+.input, .submitButton {
+  box-sizing: border-box;
   height: 45px;
   width: 276px;
   border-radius: 8px;
+  border: none;
+}
+
+.input {  
   background-color: #ffffff;
   color: #999999;
   padding: 0 16px;
-  border: none;
   margin-bottom: 10px;
   margin-top: 20px;
+  font-size: 18px;
+  line-height: 45px;
+  text-align: center;
 
   &::placeholder {
     line-height: 32px;
@@ -69,7 +76,31 @@
   }
 
   &:invalid {
-    border: 2px solid red;
+    border: 1px solid red;
+  }
+}
+
+.submitButton {  
+  background-color: #004980;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+
+  &:hover {
+    background-color: #003366;
+  }
+
+  &:active {
+    background-color: #002244;
+  }
+
+  &:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
   }
 }
 
@@ -95,36 +126,10 @@
 
 .LeaderBoardLink {
   margin-top: 20px;
-  color: #004980;
+  color: #565EEF;
   font-family: Roboto;
   font-size: 18px;
   font-weight: 400;
   line-height: 32px;
   text-align: left;
-}
-
-/* .submitButton {
-  height: 45px;
-  width: 276px;
-  background-color: #004980;
-  color: #ffffff;
-  border: none;
-  border-radius: 8px;
-  font-size: 18px;
-  font-weight: 600;
-  cursor: pointer;
-  text-align: center;
-
-  &:hover {
-    background-color: #003366;
-  }
-
-  &:active {
-    background-color: #002244;
-  }
-
-  &:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-} */
+}
\ No newline at end of file
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css
index fcba45ce7..76e121b9e 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.module.css
+++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css
@@ -46,10 +46,10 @@
   text-align: center;
   font-variant-numeric: lining-nums proportional-nums;
   font-family: Roboto;
-  font-size: 40px;
+  font-size: 64px;
   font-style: normal;
   font-weight: 400;
-  line-height: 48px;
+  line-height: 72px;
 }
 
 .level {

From 3707581ed424ac76268849e6e097e6181d6aa295 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 7 Sep 2024 17:54:38 +0200
Subject: [PATCH 18/25] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D1=81=D1=83=D0=BF=D0=B5=D1=80=D1=81=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  17 ++-
 src/api.js                                    |   4 +-
 src/components/Cards/Cards.jsx                |  63 +++++------
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx |  22 ++--
 .../LeaderBoardPage.module.css                | 101 +++++++++++-------
 5 files changed, 127 insertions(+), 80 deletions(-)

diff --git a/README.md b/README.md
index b635bdcf0..d3d6259a8 100644
--- a/README.md
+++ b/README.md
@@ -68,4 +68,19 @@ https://skypro-web-developer.github.io/react-memo/
 - **Проверка выигрыша**: O(n)
   - Для проверки выигрыша необходимо пройти по всем картам, чтобы убедиться, что все пары найдены.
 - **Перемешивание карт**: O(n log n)
-  - Перемешивание карт реализовано с использованием алгоритма, временная сложность которого составляет O(n log n), что характерно для эффективных алгоритмов сортировки.
\ No newline at end of file
+  - Перемешивание карт реализовано с использованием алгоритма, временная сложность которого составляет O(n log n), что характерно для эффективных алгоритмов сортировки.
+
+  Время на выполнение ДЗ №1:
+
+   - пларируемое - 12 часов
+   - фактическое - 15 часов
+
+Время на выполнение ДЗ №2:
+
+   - пларируемое - 12 часов
+   - фактическое - 14 часов
+
+Время на выполнение ДЗ №3:
+
+   - пларируемое - 12 часов
+   - фактическое - 
\ No newline at end of file
diff --git a/src/api.js b/src/api.js
index d2229b95d..3db768936 100644
--- a/src/api.js
+++ b/src/api.js
@@ -9,11 +9,11 @@ export async function getPlayersList() {
   return data.leaders;
 }
 
-export async function updateLeaderboard(name, score, time) {
+export async function updateLeaderboard(name, score, time, achievements) {
   try {
     const response = await fetch(API_URL, {
       method: "POST",
-      body: JSON.stringify({ name, score, time }), // Добавляем поле time в запрос
+      body: JSON.stringify({ name, score, time, achievements }), // Добавляем поле time в запрос
     });
 
     if (!response.ok) {
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index adfef6dfe..efd85b646 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -1,11 +1,12 @@
 import { shuffle } from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { generateDeck } from "../../utils/cards";
 import styles from "./Cards.module.css";
 import { EndGameModal } from "../../components/EndGameModal/EndGameModal";
 import { Button } from "../../components/Button/Button";
 import { Card } from "../../components/Card/Card";
-import { EasyContext } from "../../context/context";
+import { useEasyContext } from "../../hook/useEasyContext"; // Импортируем хук
+import { updateLeaderboard } from "../../api";
 
 // Игра закончилась
 const STATUS_LOST = "STATUS_LOST";
@@ -22,11 +23,9 @@ function getTimerValue(startDate, endDate) {
       seconds: 0,
     };
   }
-
   if (endDate === null) {
     endDate = new Date();
   }
-
   const diffInSecconds = Math.floor((endDate.getTime() - startDate.getTime()) / 1000);
   const minutes = Math.floor(diffInSecconds / 60);
   const seconds = diffInSecconds % 60;
@@ -36,35 +35,45 @@ function getTimerValue(startDate, endDate) {
   };
 }
 
-/**
- * Основной компонент игры, внутри него находится вся игровая механика и логика.
- * pairsCount - сколько пар будет в игре
- * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры
- */
 export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
   const isHardMode = pairsCount === 9;
-  const { tries, setTries, isEasyMode } = useContext(EasyContext);
-  // console.log(isEasyMode);
-  // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта
+  const { tries, setTries, isEasyMode } = useEasyContext(); // Используем наш хук
   const [cards, setCards] = useState([]);
-  // Текущий статус игры
   const [status, setStatus] = useState(STATUS_PREVIEW);
-
-  // Дата начала игры
   const [gameStartDate, setGameStartDate] = useState(null);
-  // Дата конца игры
   const [gameEndDate, setGameEndDate] = useState(null);
-
-  // Стейт для таймера, высчитывается в setInteval на основе gameStartDate и gameEndDate
   const [timer, setTimer] = useState({
     seconds: 0,
     minutes: 0,
   });
 
+  const [achievements, setAchievements] = useState([]);
+
+  const handleGameEnd = isWon => {
+    const playerName = "Player"; // Получаем имя игрока (в будущем можно получить из контекста или пропсов)
+    const totalTime = timer.minutes * 60 + timer.seconds; // Подсчет времени
+
+    // Добавляем ачивку за выигрыш
+    if (isWon) {
+      setAchievements(prev => [...prev, "win"]);
+    }
+
+    // Обновляем лидерборд
+    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, achievements)
+      .then(() => {
+        console.log("Результаты игры успешно отправлены");
+      })
+      .catch(error => {
+        console.error("Ошибка при отправке результатов игры:", error);
+      });
+  };
+
   function finishGame(status = STATUS_LOST) {
     setGameEndDate(new Date());
     setStatus(status);
+    handleGameEnd(status === STATUS_WON);
   }
+
   function startGame() {
     const startDate = new Date();
     setGameEndDate(null);
@@ -72,21 +81,16 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setTimer(getTimerValue(startDate, null));
     setStatus(STATUS_IN_PROGRESS);
   }
+
   function resetGame() {
     setGameStartDate(null);
     setGameEndDate(null);
     setTimer(getTimerValue(null, null));
     setStatus(STATUS_PREVIEW);
-    setTries(3); // Сброс количества попыток при перезапуске игры
+    setTries(3);
+    setAchievements([]);
   }
 
-  /**
-   * Обработка основного действия в игре - открытие карты.
-   * После открытия карты игра может пепереходит в следующие состояния
-   * - "Игрок выиграл", если на поле открыты все карты
-   * - "Игрок проиграл", если на поле есть две открытые карты без пары
-   * - "Игра продолжается", если не случилось первых двух условий
-   */
   const openCard = clickedCard => {
     // Если карта уже открыта, то ничего не делаем
     if (clickedCard.open) {
@@ -137,22 +141,19 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
         if (tries - 1 <= 0) {
           finishGame(STATUS_LOST);
         } else {
-          // Закрываем только карты без пары
           setTimeout(() => {
             setCards(
               nextCards.map(card =>
                 openCardsWithoutPair.some(openCard => openCard.id === card.id) ? { ...card, open: false } : card,
               ),
             );
-          }, 1000); // Задержка в 1 секунду, чтобы игрок успел увидеть вторую карту
+          }, 1000);
         }
       } else {
-        // Сложный режим: закрываем только карты без пары, не уменьшаем количество попыток
-        finishGame(STATUS_LOST); // Завершаем игру при одной ошибке в сложном режиме
+        finishGame(STATUS_LOST);
       }
       return;
     }
-    // ... игра продолжается
   };
 
   const isGameEnded = status === STATUS_LOST || status === STATUS_WON;
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
index 0e0734cf0..bc0396bc7 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -3,6 +3,7 @@ import { getPlayersList } from "../../api";
 import { LeaderBoardPlayer } from "../../components/LeaderBoardPlayer/LeaderBoardPlayer";
 import styles from "./LeaderBoardPage.module.css";
 import { useNavigate } from "react-router-dom";
+import cn from "classnames";
 
 export function LeaderBoardPage() {
   const [leaderArray, setLeaderArray] = useState([]);
@@ -11,6 +12,7 @@ export function LeaderBoardPage() {
   const navigate = useNavigate();
 
   useEffect(() => {
+    setLoading(true);
     const fetchData = async () => {
       try {
         const data = await getPlayersList();
@@ -35,24 +37,26 @@ export function LeaderBoardPage() {
 
   return (
     <>
-      <div className={styles.leader_board_container}>
-        <div className={styles.leader_board_container_top}>
-          <h1 className={styles.leader_board_container_h1}>Лидерборд</h1>
-          <button className={styles.leader_board_container_button} onClick={startGame}>
+      <div className={styles.leaderboardContainer}>
+        <div className={styles.leaderboardHeader}>
+          <h1 className={styles.leaderboardTitle}>Лидерборд</h1>
+          <button className={styles.leaderboardButton} onClick={startGame}>
             Начать игру
           </button>
         </div>
-        <div className={styles.leader_board_container_middle}>
-          <div className={styles.leader_board_container_middle_div1}>Позиция</div>
-          <div className={styles.leader_board_container_middle_div2}>Пользователь</div>
-          <div className={styles.leader_board_container_middle_div3}>Время </div>
+        <div className={styles.leaderboardSection}>
+          <div className={cn(styles.leaderboardText, styles.leaderboardPosition)}>Позиция</div>
+          <div className={cn(styles.leaderboardText, styles.leaderboardUser)}>Пользователь</div>
+          <div className={cn(styles.leaderboardText, styles.leaderboardAchievement)}>Достижения</div>
+          <div className={cn(styles.leaderboardText, styles.leaderboardTime)}>Время </div>
         </div>
         {leaderArray.map((player, index) => (
           <LeaderBoardPlayer
             key={player.id}
             name={player.name}
-            time={`${Math.floor(player.time / 60)}:${(player.time % 60).toString().padStart(2, "0")}`} // Форматируем время
+            time={`${Math.floor(player.time / 60)}:${(player.time % 60).toString().padStart(2, "0")}`}
             position={index + 1}
+            achievements={player.achievements}
           />
         ))}
       </div>
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
index 10caa7776..f3fece55a 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-.leader_board_container {
+.leaderboardContainer {
   width: 944px;
   margin: 0 auto;
   padding: 26px;
@@ -9,64 +9,95 @@
   box-sizing: border-box;
 }
 
-.leader_board_container_top {
+.leaderboardHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
   margin-bottom: 40px;
 }
 
-.leader_board_container_middle {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  align-items: center;
-  background-color: #ffffff;
+.leaderboardTitle{
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  color: #ffffff;
+}
+
+.leaderboardButton {
+  background-color: #7ac100;
+  width: 246px;
+  height: 50px;
   border-radius: 12px;
-  padding: 12px 40px 12px 20px;
-  margin-bottom: 15px;
+  border-width: 0px;
+  opacity: 0px;
+  color: #ffffff;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: center;
 }
 
-.leader_board_container_middle_left {
+.leadrboardButton:hover {
+  cursor: pointer;
+  background-color: #97de1e;
+}
+
+.leaderboardSection {
   display: flex;
-  justify-content: space-between;
-  width: 400px;
+  gap: 15px;
+  background-color: #FFFFFF;
+  border-radius: 12px;
+  display: flex;
+  padding: 16px 20px;
+  justify-content: space-between;  
 }
-.leader_board_container_middle_div1 {
+
+.leaderbordText {
+    color: rgb(153, 153, 153);
+    font-family: Roboto;
+    font-size: 24px;
+    font-weight: 400;
+   
+}
+.leaderboardPosition {
+  width: 178px;
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
   text-align: left;
   color: #999999;
-  grid-column: span 2;
 }
-.leader_board_container_middle_div2 {
+.leaderboardUser {
+  width: 227px;
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
   text-align: left;
   color: #999999;
-  grid-column: span 5;
 }
-.leader_board_container_middle_div3 {
+.leaderboardAchievement {
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
   text-align: left;
   color: #999999;
-  grid-column: span 1;
 }
 
-.leader_board_container_middle_div1_b {
+.leaderboardTime {
+  width: 194px;
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
   text-align: left;
-  color: #000000;
-  grid-column: span 2;
+  color: #999999;
 }
 .leader_board_container_middle_div2_b {
   font-family: Roboto;
@@ -86,31 +117,27 @@
   color: #000000;
   grid-column: span 1;
 }
-
-.leader_board_container_h1 {
+.leader_board_container_middle_div4 {
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
-  color: #ffffff;
+  text-align: left;
+  color: #999999;
+  grid-column: span 4; /* Можно изменить в зависимости от ширины нужной колонки */
 }
 
-.leader_board_container_button {
-  background-color: #7ac100;
-  width: 246px;
-  height: 50px;
-  border-radius: 12px;
-  border-width: 0px;
-  opacity: 0px;
-  color: #ffffff;
+.leader_board_container_middle_div4_b {
   font-family: Roboto;
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
-  text-align: center;
+  text-align: left;
+  color: #000000;
+  grid-column: span 4; /* Можно изменить в зависимости от ширины нужной колонки */
 }
 
-.leader_board_container_button:hover {
-  cursor: pointer;
-  background-color: #97de1e;
-}
\ No newline at end of file
+
+
+
+

From d0cf4a7216a3916da3efb597029e77839920d878 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 8 Sep 2024 13:37:32 +0200
Subject: [PATCH 19/25] =?UTF-8?q?=D0=90=D1=87=D0=B8=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  15 +++
 package.json                                  |   1 +
 public/card_insight.png                       | Bin 0 -> 5803 bytes
 public/magic_ball.svg                         |  17 ++++
 public/magic_ball_empty.svg                   |  33 +++++++
 public/puzzle.svg                             |  18 ++++
 public/puzzle_empty.svg                       |  20 ++++
 src/components/Ball/Ball.jsx                  |  11 +++
 src/components/Ball/Ball.module.css           |  34 +++++++
 src/components/Cards/Cards.jsx                |  67 ++++++++++---
 src/components/Cards/Cards.module.css         |  44 ++++++++-
 .../LeaderBoardPlayer/LeaderBoardPlayer.jsx   |  45 ++++++++-
 .../LeaderBoardPlayer.module.css              |  93 ++++++++++--------
 src/components/Puzzle/Puzzle.jsx              |  11 +++
 src/components/Puzzle/Puzzle.module.css       |  34 +++++++
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx |   2 +-
 .../LeaderBoardPage.module.css                |  54 +++-------
 17 files changed, 393 insertions(+), 106 deletions(-)
 create mode 100644 public/card_insight.png
 create mode 100644 public/magic_ball.svg
 create mode 100644 public/magic_ball_empty.svg
 create mode 100644 public/puzzle.svg
 create mode 100644 public/puzzle_empty.svg
 create mode 100644 src/components/Ball/Ball.jsx
 create mode 100644 src/components/Ball/Ball.module.css
 create mode 100644 src/components/Puzzle/Puzzle.jsx
 create mode 100644 src/components/Puzzle/Puzzle.module.css

diff --git a/package-lock.json b/package-lock.json
index edaf5083f..662339d85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "classnames": "^2.3.2",
+        "date-fns": "^3.6.0",
         "gh-pages": "^6.0.0",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
@@ -6785,6 +6786,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -23136,6 +23146,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index e9b7a089e..061aa6e4b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "classnames": "^2.3.2",
+    "date-fns": "^3.6.0",
     "gh-pages": "^6.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
diff --git a/public/card_insight.png b/public/card_insight.png
new file mode 100644
index 0000000000000000000000000000000000000000..aeddd26071add9d8b4c7033fa7d768770653cfb3
GIT binary patch
literal 5803
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

literal 0
HcmV?d00001

diff --git a/public/magic_ball.svg b/public/magic_ball.svg
new file mode 100644
index 000000000..78d4894ef
--- /dev/null
+++ b/public/magic_ball.svg
@@ -0,0 +1,17 @@
+<svg width="32.000000" height="32.000000" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<linearGradient x1="15.831961" y1="21.403564" x2="15.831961" y2="30.061028" id="paint_linear_201_76_0" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#FFB500"/>
+			<stop offset="1.000000" stop-color="#FFE052"/>
+		</linearGradient>
+		<radialGradient gradientTransform="translate(15.8532 24.6406) rotate(90) scale(16.0758 16.1156)" cx="0.000000" cy="0.000000" r="1.000000" id="paint_radial_201_77_0" gradientUnits="userSpaceOnUse">
+			<stop offset="0.015625" stop-color="#7F12F4"/>
+			<stop offset="1.000000" stop-color="#E0C5FF"/>
+		</radialGradient>
+	</defs>
+	<path id="Vector" d="M26.03 21.48C25.83 21.4 25.62 21.38 25.41 21.42C25.2 21.46 25.01 21.56 24.85 21.71L24.72 21.84C23.55 23.03 22.16 23.97 20.62 24.62C19.08 25.26 17.43 25.59 15.77 25.59C14.1 25.57 12.45 25.21 10.92 24.55C9.39 23.89 8.01 22.93 6.85 21.73C6.71 21.57 6.51 21.46 6.3 21.42C6.08 21.38 5.86 21.4 5.66 21.49C5.46 21.57 5.28 21.71 5.16 21.9C5.04 22.09 4.98 22.31 5 22.53L5 27.95C5 28.23 5.11 28.5 5.3 28.69C5.5 28.89 5.76 29 6.04 29L25.61 29C25.89 29 26.16 28.89 26.35 28.69C26.55 28.5 26.66 28.23 26.66 27.95L26.66 22.48C26.67 22.27 26.61 22.06 26.5 21.88C26.39 21.7 26.23 21.56 26.03 21.48Z" fill="url(#paint_linear_201_76_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+	<path id="Vector" d="M15.85 3C13.7 3 11.6 3.63 9.82 4.82C8.04 6.01 6.64 7.7 5.82 9.68C5 11.66 4.79 13.83 5.21 15.93C5.62 18.03 6.66 19.96 8.18 21.47C9.69 22.99 11.63 24.02 13.73 24.44C15.84 24.85 18.02 24.64 20 23.82C21.98 23 23.68 21.61 24.87 19.83C26.06 18.05 26.7 15.96 26.7 13.82C26.69 10.95 25.55 8.2 23.52 6.17C21.48 4.14 18.72 3 15.85 3Z" fill="url(#paint_radial_201_77_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+</svg>
diff --git a/public/magic_ball_empty.svg b/public/magic_ball_empty.svg
new file mode 100644
index 000000000..8de6a592f
--- /dev/null
+++ b/public/magic_ball_empty.svg
@@ -0,0 +1,33 @@
+<svg width="32.000000" height="32.000000" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<filter id="filter_201_113_dd" x="5.000000" y="21.403564" width="21.664062" height="7.596466" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dx="0" dy="1"/>
+			<feGaussianBlur stdDeviation="0.333333"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+			<feBlend mode="normal" in2="shape" result="effect_innerShadow_1"/>
+		</filter>
+		<filter id="filter_201_114_dd" x="5.001953" y="3.000000" width="21.702637" height="21.648804" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dx="0" dy="1"/>
+			<feGaussianBlur stdDeviation="0.333333"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+			<feBlend mode="normal" in2="shape" result="effect_innerShadow_1"/>
+		</filter>
+	</defs>
+	<g filter="url(#filter_201_113_dd)">
+		<path id="Vector" d="M26.03 21.48C25.83 21.4 25.62 21.38 25.41 21.42C25.2 21.46 25.01 21.56 24.85 21.71L24.72 21.84C23.55 23.03 22.16 23.97 20.62 24.62C19.08 25.26 17.43 25.59 15.77 25.59C14.1 25.57 12.45 25.21 10.92 24.55C9.39 23.89 8.01 22.93 6.85 21.73C6.71 21.57 6.51 21.46 6.3 21.42C6.08 21.38 5.86 21.4 5.66 21.49C5.46 21.57 5.28 21.71 5.16 21.9C5.04 22.09 4.98 22.31 5 22.53L5 27.95C5 28.23 5.11 28.5 5.3 28.69C5.5 28.89 5.76 29 6.04 29L25.61 29C25.89 29 26.16 28.89 26.35 28.69C26.55 28.5 26.66 28.23 26.66 27.95L26.66 22.48C26.67 22.27 26.61 22.06 26.5 21.88C26.39 21.7 26.23 21.56 26.03 21.48Z" fill="#E9ECED" fill-opacity="1.000000" fill-rule="nonzero"/>
+	</g>
+	<g filter="url(#filter_201_114_dd)">
+		<path id="Vector" d="M15.85 3C13.7 3 11.6 3.63 9.82 4.82C8.04 6.01 6.64 7.7 5.82 9.68C5 11.66 4.79 13.83 5.21 15.93C5.62 18.03 6.66 19.96 8.18 21.47C9.69 22.99 11.63 24.02 13.73 24.44C15.84 24.85 18.02 24.64 20 23.82C21.98 23 23.68 21.61 24.87 19.83C26.06 18.05 26.7 15.96 26.7 13.82C26.69 10.95 25.55 8.2 23.52 6.17C21.48 4.14 18.72 3 15.85 3Z" fill="#E9ECED" fill-opacity="1.000000" fill-rule="nonzero"/>
+	</g>
+</svg>
diff --git a/public/puzzle.svg b/public/puzzle.svg
new file mode 100644
index 000000000..0b1729123
--- /dev/null
+++ b/public/puzzle.svg
@@ -0,0 +1,18 @@
+<svg width="32.000000" height="32.000000" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<radialGradient gradientTransform="translate(15.654 -4.18504) rotate(0) scale(27.084 26.5541)" cx="0.000000" cy="0.000000" r="1.000000" id="paint_radial_201_73_0" gradientUnits="userSpaceOnUse">
+			<stop offset="0.508000" stop-color="#B7D118"/>
+			<stop offset="0.572000" stop-color="#B2D019"/>
+			<stop offset="0.643000" stop-color="#A5CD1D"/>
+			<stop offset="0.717000" stop-color="#8FC922"/>
+			<stop offset="0.793000" stop-color="#70C22A"/>
+			<stop offset="0.871000" stop-color="#48BA34"/>
+			<stop offset="0.949000" stop-color="#18B040"/>
+			<stop offset="0.981000" stop-color="#02AB46"/>
+		</radialGradient>
+	</defs>
+	<path id="Vector" d="M21.54 7.68C21.72 7.06 21.52 5.54 22.73 4.53C23.93 3.53 25.81 3.65 26.94 4.71C28.07 5.77 28.25 7.75 26.91 9.06C25.58 10.37 24.96 9.64 24.22 10.35C23.47 11.06 23.6 11.63 24.06 12.06C24.52 12.49 29.12 17.2 28.99 17.5C28.86 17.8 25.73 21.28 25.22 21.53C24.7 21.78 23.8 21.76 23.62 20.93C23.44 20.1 23.75 18.43 22.47 18C21.18 17.58 20.62 17.93 19.36 19.24C18.1 20.55 17.54 21.98 18.56 22.71C19.59 23.44 20.88 23.14 21.39 24C21.9 24.86 21.13 25.63 19.77 26.87C18.41 28.1 17.36 29.11 17.18 28.98C17 28.86 13.09 24.8 12.71 24.38C12.32 23.95 11.58 23.57 10.86 24.22C10.14 24.88 10.01 27.02 6.98 27.02C3.95 27.02 3.59 23.8 4.67 22.46C5.75 21.13 8.13 21 8.19 20.1C8.21 19.68 6.9 18.56 5.72 17.35C4.34 15.93 3.05 14.43 3 14.25C2.9 13.93 5.87 11.06 6.44 10.65C7 10.25 7.65 10.5 7.95 10.83C8.26 11.16 8.34 12.16 8.6 12.74C8.85 13.32 10.06 15.84 12.96 12.97C15.84 10.12 13.12 8.89 12.19 8.64C11.27 8.38 10.6 8.3 10.34 7.38C10.14 6.65 11.27 5.79 12.45 4.68C13.63 3.57 14.32 3 14.63 3C14.94 3 19.08 7.35 19.62 7.85C20.16 8.36 20.49 8.49 20.88 8.38C21.26 8.28 21.47 7.96 21.54 7.68Z" fill="url(#paint_radial_201_73_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+</svg>
diff --git a/public/puzzle_empty.svg b/public/puzzle_empty.svg
new file mode 100644
index 000000000..b49cb5c68
--- /dev/null
+++ b/public/puzzle_empty.svg
@@ -0,0 +1,20 @@
+<svg width="32.000000" height="32.000000" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<filter id="filter_201_110_dd" x="3.000000" y="3.000000" width="26.000000" height="26.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dx="0" dy="1"/>
+			<feGaussianBlur stdDeviation="0.333333"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+			<feBlend mode="normal" in2="shape" result="effect_innerShadow_1"/>
+		</filter>
+	</defs>
+	<g filter="url(#filter_201_110_dd)">
+		<path id="Vector" d="M21.54 7.68C21.72 7.06 21.52 5.54 22.73 4.53C23.93 3.53 25.81 3.65 26.94 4.71C28.07 5.77 28.25 7.75 26.91 9.06C25.58 10.37 24.96 9.64 24.22 10.35C23.47 11.06 23.6 11.63 24.06 12.06C24.52 12.49 29.12 17.2 28.99 17.5C28.86 17.8 25.73 21.28 25.22 21.53C24.7 21.78 23.8 21.76 23.62 20.93C23.44 20.1 23.75 18.43 22.47 18C21.18 17.58 20.62 17.93 19.36 19.24C18.1 20.55 17.54 21.98 18.56 22.71C19.59 23.44 20.88 23.14 21.39 24C21.9 24.86 21.13 25.63 19.77 26.87C18.41 28.1 17.36 29.11 17.18 28.98C17 28.86 13.09 24.8 12.71 24.38C12.32 23.95 11.58 23.57 10.86 24.22C10.14 24.88 10.01 27.02 6.98 27.02C3.95 27.02 3.59 23.8 4.67 22.46C5.75 21.13 8.13 21 8.19 20.1C8.21 19.68 6.9 18.56 5.72 17.35C4.34 15.93 3.05 14.43 3 14.25C2.9 13.93 5.87 11.06 6.44 10.65C7 10.25 7.65 10.5 7.95 10.83C8.26 11.16 8.34 12.16 8.6 12.74C8.85 13.32 10.06 15.84 12.96 12.97C15.84 10.12 13.12 8.89 12.19 8.64C11.27 8.38 10.6 8.3 10.34 7.38C10.14 6.65 11.27 5.79 12.45 4.68C13.63 3.57 14.32 3 14.63 3C14.94 3 19.08 7.35 19.62 7.85C20.16 8.36 20.49 8.49 20.88 8.38C21.26 8.28 21.47 7.96 21.54 7.68Z" fill="#E9ECED" fill-opacity="1.000000" fill-rule="nonzero"/>
+	</g>
+</svg>
diff --git a/src/components/Ball/Ball.jsx b/src/components/Ball/Ball.jsx
new file mode 100644
index 000000000..c67978f70
--- /dev/null
+++ b/src/components/Ball/Ball.jsx
@@ -0,0 +1,11 @@
+import styles from "./Ball.module.css";
+
+export function Ball() {
+  return (
+    <div className={styles.popup}>
+      <div className={styles.popupContent}>
+        <p className={styles.popupText}>Игра пройдена в сложном режиме</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Ball/Ball.module.css b/src/components/Ball/Ball.module.css
new file mode 100644
index 000000000..93850aee7
--- /dev/null
+++ b/src/components/Ball/Ball.module.css
@@ -0,0 +1,34 @@
+.popup {
+    position: absolute;
+    top: -100px;
+}
+
+.popupContent {
+    position: relative;
+    background-color: #C2F5FF;
+    border-radius: 8px;
+    padding: 15px 20px;
+    width: 212px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.popupContent::after {
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-right: 25px solid transparent;
+    border-top: 20px solid #C2F5FF;
+    border-bottom: 5px solid transparent;
+}
+
+.popupText {
+    color: rgb(0, 73, 128);
+    font-family: StratosSkyeng;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index efd85b646..1693a3325 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -1,11 +1,11 @@
 import { shuffle } from "lodash";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { generateDeck } from "../../utils/cards";
 import styles from "./Cards.module.css";
 import { EndGameModal } from "../../components/EndGameModal/EndGameModal";
 import { Button } from "../../components/Button/Button";
 import { Card } from "../../components/Card/Card";
-import { useEasyContext } from "../../hook/useEasyContext"; // Импортируем хук
+import { EasyContext } from "../../context/context";
 import { updateLeaderboard } from "../../api";
 
 // Игра закончилась
@@ -37,7 +37,7 @@ function getTimerValue(startDate, endDate) {
 
 export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
   const isHardMode = pairsCount === 9;
-  const { tries, setTries, isEasyMode } = useEasyContext(); // Используем наш хук
+  const { tries, setTries, isEasyMode } = useContext(EasyContext);
   const [cards, setCards] = useState([]);
   const [status, setStatus] = useState(STATUS_PREVIEW);
   const [gameStartDate, setGameStartDate] = useState(null);
@@ -49,17 +49,22 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
   const [achievements, setAchievements] = useState([]);
 
+  const [isRevealed, setIsRevealed] = useState(false); // Состояние для отображения всех карт
+  const [canUsePower, setCanUsePower] = useState(true); // Состояние для использования суперсилы
+  const [isPaused, setIsPaused] = useState(false); // Состояние паузы таймера
+  const [usedSuperpower, setUsedSuperpower] = useState(false);
+
   const handleGameEnd = isWon => {
-    const playerName = "Player"; // Получаем имя игрока (в будущем можно получить из контекста или пропсов)
+    const playerName = "Player";
     const totalTime = timer.minutes * 60 + timer.seconds; // Подсчет времени
 
     // Добавляем ачивку за выигрыш
-    if (isWon) {
+    if (isWon && !usedSuperpower) {
       setAchievements(prev => [...prev, "win"]);
     }
 
     // Обновляем лидерборд
-    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, achievements)
+    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, achievements, usedSuperpower)
       .then(() => {
         console.log("Результаты игры успешно отправлены");
       })
@@ -73,7 +78,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setStatus(status);
     handleGameEnd(status === STATUS_WON);
   }
-
   function startGame() {
     const startDate = new Date();
     setGameEndDate(null);
@@ -81,7 +85,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setTimer(getTimerValue(startDate, null));
     setStatus(STATUS_IN_PROGRESS);
   }
-
   function resetGame() {
     setGameStartDate(null);
     setGameEndDate(null);
@@ -89,6 +92,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setStatus(STATUS_PREVIEW);
     setTries(3);
     setAchievements([]);
+    setCanUsePower(true); // Сброс возможности использования суперсилы
   }
 
   const openCard = clickedCard => {
@@ -158,6 +162,21 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
   const isGameEnded = status === STATUS_LOST || status === STATUS_WON;
 
+  // Логика для активации суперсилы "Прозрение"
+  const handleReveal = () => {
+    if (canUsePower) {
+      setIsRevealed(true);
+      setIsPaused(true); // Останавливаем таймер
+      setCanUsePower(false); // Суперсила используется только один раз
+      setUsedSuperpower(true);
+
+      setTimeout(() => {
+        setIsRevealed(false);
+        setIsPaused(false); // Возобновляем таймер через 5 секунд
+      }, 5000); // 5 секундное действие
+    }
+  };
+
   // Игровой цикл
   useEffect(() => {
     // В статусах кроме превью доп логики не требуется
@@ -186,13 +205,15 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
   // Обновляем значение таймера в интервале
   useEffect(() => {
+    if (isPaused) return;
+
     const intervalId = setInterval(() => {
       setTimer(getTimerValue(gameStartDate, gameEndDate));
     }, 300);
     return () => {
       clearInterval(intervalId);
     };
-  }, [gameStartDate, gameEndDate]);
+  }, [gameStartDate, gameEndDate, isPaused]);
 
   return (
     <div className={styles.container}>
@@ -217,16 +238,36 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
             </>
           )}
         </div>
-        {status === STATUS_IN_PROGRESS ? <Button onClick={resetGame}>Начать заново</Button> : null}
-        {isEasyMode && <span style={{ color: "red" }}>Количество жизней: {tries}</span>}
-      </div>
 
+        {isEasyMode && (
+          <span className={styles.attemptСounter}>
+            <svg width="30" height="26" viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.53 3.27849C12.6964 1.22519 10.2335 0.000124665 8.08277 0.000124664C4.40879 0.000124663 0.183699 2.06893 -8.96305e-08 8.27535C0.170897 14.3992 6.86026 19.5464 13.2644 24.474C13.7441 24.8432 14.2223 25.2111 14.696 25.5781C14.696 25.5781 14.696 25.5781 14.696 25.578C14.6961 25.5781 14.6961 25.5781 14.6961 25.5781C14.9305 25.3965 15.1655 25.2147 15.4009 25.0326C21.9912 19.9345 28.8473 14.6309 29.0247 8.27535C28.841 2.06893 24.2485 0.00012207 20.5745 0.00012207C18.4238 0.00012207 16.169 1.22519 14.53 3.27849Z"
+                fill="#FF4545"
+              />
+            </svg>
+            {tries}
+          </span>
+        )}
+        {status === STATUS_IN_PROGRESS ? (
+          <>
+            <div className={styles.insight}>
+              <img className={styles.cardInsight} src="../card_insight.png" alt="eye_perk" onClick={handleReveal} />
+              <div className={styles.counterInsight}>{isRevealed}</div>
+            </div>
+            <Button onClick={resetGame}>Начать заново</Button>
+          </>
+        ) : null}
+      </div>
       <div className={styles.cards}>
         {cards.map(card => (
           <Card
             key={card.id}
             onClick={() => openCard(card)}
-            open={status !== STATUS_IN_PROGRESS ? true : card.open}
+            open={isRevealed || status !== STATUS_IN_PROGRESS ? true : card.open}
             suit={card.suit}
             rank={card.rank}
           />
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css
index 00a758ff7..972e996a2 100644
--- a/src/components/Cards/Cards.module.css
+++ b/src/components/Cards/Cards.module.css
@@ -67,13 +67,47 @@
   font-style: normal;
   font-weight: 400;
   line-height: 32px;
-
   margin-bottom: -12px;
 }
 
-.superModal {
-  display: none;
+.insight {
+  display: flex;
+  gap: 15px;
+  position: relative;
+  border: none;
+}
+
+.cardInsight {
+  background-color: #C2F5FF;
+  border: none;
+  cursor: pointer;
+  width: 68px;
+  height: 68px;
+  radius: 50px;
+  opacity: 40;
+}
+
+.counterInsight {
   position: absolute;
-  left: 0;
-  top: 0;
+  background-color: #C2F5FF; 
+  border-radius: 100px;
+  
+  padding: 5px 10px;
+  font-family: Roboto;
+  top: 45px;
+  left: 45px;
+}
+
+
+.attemptСounter {
+  display: flex;
+  gap: 10px;
+  color: red;
+  font-variant-numeric: lining-nums proportional-nums;
+  font-family: Roboto;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px;
+  padding-bottom: 10px;
 }
\ No newline at end of file
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
index d1e3f24eb..12aeb07ad 100644
--- a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
@@ -1,11 +1,46 @@
+import { useState } from "react";
 import styles from "./LeaderBoardPlayer.module.css";
+import { Puzzle } from "../Puzzle/Puzzle";
+import { Ball } from "../Ball/Ball";
+
+export function LeaderBoardPlayer({ position, name, achievements = [], time }) {
+  const [isBallVisible, setIsBallVisible] = useState(false);
+  const [isPuzzleVisible, setIsPuzzleVisible] = useState(false);
+
+  const handlePuzzleMouseEnter = () => {
+    setIsPuzzleVisible(true);
+  };
+  const handlePuzzleMouseLeave = () => {
+    setIsPuzzleVisible(false);
+  };
+  const handleBallMouseEnter = () => {
+    setIsBallVisible(true);
+  };
+  const handleBallMouseLeave = () => {
+    setIsBallVisible(false);
+  };
 
-export function LeaderBoardPlayer({ name, time, position }) {
   return (
-    <div className={styles.leader_board_container_middle}>
-      <div className={styles.leader_board_container_middle_div1_b}>{position}</div>
-      <div className={styles.leader_board_container_middle_div2_b}>{name}</div>
-      <div className={styles.leader_board_container_middle_div3_b}>{time}</div>
+    <div className={styles.leaderboardPlayerSection}>
+      <div className={styles.leaderboardPlayerPosition}>{position}</div>
+      <div className={styles.leaderboardPlayerUser}>{name}</div>
+      <div className={styles.leaderboardPlayerIcons}>
+        <img
+          src={`${achievements.includes(1) ? "./puzzle_empty.svg" : "./puzzle.svg"}`}
+          alt="puzzle"
+          onMouseEnter={handleBallMouseEnter}
+          onMouseLeave={handleBallMouseLeave}
+        />
+        <img
+          src={`${achievements.includes(2) ? "./magic_ball_empty.svg" : "./magic_ball.svg"}`}
+          alt="ball"
+          onMouseEnter={handlePuzzleMouseEnter}
+          onMouseLeave={handlePuzzleMouseLeave}
+        />
+        {isPuzzleVisible && <Puzzle />}
+        {isBallVisible && <Ball />}
+      </div>
+      <div className={styles.leaderboardPlayerTime}>{time}</div>
     </div>
   );
 }
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
index 27c6f8b19..55698575c 100644
--- a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.module.css
@@ -1,39 +1,54 @@
-.leader_board_container_middle {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    align-items: center;
-    background-color: #ffffff;
-    border-radius: 12px;
-    padding: 12px 40px 12px 20px;
-    margin-bottom: 15px;
-  }
-  
-  
-  .leader_board_container_middle_div1_b {
-      font-family: Roboto;
-      font-size: 24px;
-      font-weight: 400;
-      line-height: 32px;
-      text-align: left;
-      color: #000000;
-      grid-column: span 2;
-    }
-    .leader_board_container_middle_div2_b {
-      font-family: Roboto;
-      font-size: 24px;
-      font-weight: 400;
-      line-height: 32px;
-      text-align: left;
-      color: #000000;
-      grid-column: span 5;
-    }
-    .leader_board_container_middle_div3_b {
-      font-family: Roboto;
-      font-size: 24px;
-      font-weight: 400;
-      line-height: 32px;
-      text-align: left;
-      color: #000000;
-      grid-column: span 1;
-    }
-    
\ No newline at end of file
+.leaderboardPlayerSection {
+  display: flex;
+  gap: 15px;
+  background-color: #FFFFFF;
+  border-radius: 12px;
+  padding: 16px 20px;
+  justify-content: space-between; 
+  gap: 66px;
+  position: relative; 
+}
+
+.leaderboardPlayerText {
+  color: #000000;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.leaderboardPlayerIcons {
+  display: flex;
+  width: 194px;
+  gap: 6px;
+  position: relative;
+}
+
+.leaderboardPlayerPosition {
+  width: 178px;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: ##000000;
+}
+
+.leaderboardPlayerUser {
+  width: 227px;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: ##000000;
+}
+
+.leaderboardPlayerTime {
+  width: 102px;
+  font-family: Roboto;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  text-align: left;
+  color: ##000000;
+}
diff --git a/src/components/Puzzle/Puzzle.jsx b/src/components/Puzzle/Puzzle.jsx
new file mode 100644
index 000000000..2f0196956
--- /dev/null
+++ b/src/components/Puzzle/Puzzle.jsx
@@ -0,0 +1,11 @@
+import styles from "./Puzzle.module.css";
+
+export function Puzzle() {
+  return (
+    <div className={styles.popup}>
+      <div className={styles.popupContent}>
+        <p className={styles.popupText}>Игра пройдена без супер-сил</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Puzzle/Puzzle.module.css b/src/components/Puzzle/Puzzle.module.css
new file mode 100644
index 000000000..9e167ed8c
--- /dev/null
+++ b/src/components/Puzzle/Puzzle.module.css
@@ -0,0 +1,34 @@
+.popup {
+    position: absolute;
+    top: -100px;
+    left: 35px;
+}
+
+.popupContent {
+    text-align: center;
+    background-color: #C2F5FF;
+    border-radius: 8px;
+    padding: 15px 20px;
+    position: relative;
+    width: 174px;
+}
+
+.popupText {
+    color: rgb(0, 73, 128);
+    font-family: StratosSkyeng;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+}
+
+.popupContent::after {
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-right: 25px solid transparent;
+    border-top: 20px solid #C2F5FF;
+    border-bottom: 5px solid transparent;
+}
\ No newline at end of file
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
index bc0396bc7..dd7f5d77f 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -55,7 +55,7 @@ export function LeaderBoardPage() {
             key={player.id}
             name={player.name}
             time={`${Math.floor(player.time / 60)}:${(player.time % 60).toString().padStart(2, "0")}`}
-            position={index + 1}
+            position={`# ${index + 1}`}
             achievements={player.achievements}
           />
         ))}
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
index f3fece55a..be8782fbc 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css
@@ -2,6 +2,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
 .leaderboardContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
   width: 944px;
   margin: 0 auto;
   padding: 26px;
@@ -15,7 +18,7 @@
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
 .leaderboardTitle{
@@ -32,7 +35,7 @@
   height: 50px;
   border-radius: 12px;
   border-width: 0px;
-  opacity: 0px;
+  opacity: 1px;
   color: #ffffff;
   font-family: Roboto;
   font-size: 24px;
@@ -41,19 +44,19 @@
   text-align: center;
 }
 
-.leadrboardButton:hover {
+.leaderboardButton:hover {
   cursor: pointer;
   background-color: #97de1e;
 }
 
 .leaderboardSection {
-  display: flex;
-  gap: 15px;
   background-color: #FFFFFF;
   border-radius: 12px;
   display: flex;
   padding: 16px 20px;
-  justify-content: space-between;  
+  justify-content: space-between; 
+  gap: 66px;
+  position: relative; 
 }
 
 .leaderbordText {
@@ -96,46 +99,11 @@
   font-size: 24px;
   font-weight: 400;
   line-height: 32px;
-  text-align: left;
-  color: #999999;
-}
-.leader_board_container_middle_div2_b {
-  font-family: Roboto;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  text-align: left;
-  color: #000000;
-  grid-column: span 5;
-}
-.leader_board_container_middle_div3_b {
-  font-family: Roboto;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  text-align: left;
-  color: #000000;
-  grid-column: span 1;
-}
-.leader_board_container_middle_div4 {
-  font-family: Roboto;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  text-align: left;
+  text-align: center;
   color: #999999;
-  grid-column: span 4; /* Можно изменить в зависимости от ширины нужной колонки */
 }
 
-.leader_board_container_middle_div4_b {
-  font-family: Roboto;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  text-align: left;
-  color: #000000;
-  grid-column: span 4; /* Можно изменить в зависимости от ширины нужной колонки */
-}
+
 
 
 

From 8f49272f1b898c02ec640a12537e3271b5d90deb Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 8 Sep 2024 14:10:31 +0200
Subject: [PATCH 20/25] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8F=20=D1=81=20=D0=B0=D1=87?=
 =?UTF-8?q?=D0=B8=D0=B2=D0=BA=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/api.js b/src/api.js
index 3db768936..21e6cd4db 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,4 +1,4 @@
-const API_URL = "https://wedev-api.sky.pro/api/leaderboard";
+const API_URL = "https://wedev-api.sky.pro/api/v2/leaderboard";
 
 export async function getPlayersList() {
   const response = await fetch(API_URL, {
@@ -9,20 +9,40 @@ export async function getPlayersList() {
   return data.leaders;
 }
 
-export async function updateLeaderboard(name, score, time, achievements) {
+// Получить ID достижений
+function getAchievementIds(achievements) {
+  if (!Array.isArray(achievements)) {
+    return [];
+  }
+  return achievements;
+}
+
+export async function updateLeaderboard(name, time, achievements) {
+  const achievementIds = getAchievementIds(achievements);
+
+  const requestBody = JSON.stringify({
+    name: name || "Пользователь",
+    time,
+    achievements: achievementIds,
+  });
+
+  console.log("Отправляем запрос на обновление лидерборда:");
+  console.log("Тело запроса:", requestBody);
+
   try {
     const response = await fetch(API_URL, {
       method: "POST",
-      body: JSON.stringify({ name, score, time, achievements }), // Добавляем поле time в запрос
+      body: requestBody,
     });
 
+    const responseBody = await response.text();
+    console.log("Ответ от сервера:", responseBody);
+
     if (!response.ok) {
       const errorText = await response.text();
       console.error("Ошибка при обновлении лидерборда:", response.status, errorText);
       throw new Error(`Не удалось обновить лидерборд: ${response.status} ${errorText}`);
     }
-
-    console.log("Лидерборд успешно обновлён");
   } catch (error) {
     console.error("Ошибка сети или другая ошибка:", error);
     throw new Error("Не удалось обновить лидерборд");

From 78aca3aecf191c9d5bc5f93a7ffc8c19497c30ad Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 8 Sep 2024 19:20:24 +0200
Subject: [PATCH 21/25] Kursovaya

---
 src/components/Cards/Cards.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 1693a3325..6d8b834bd 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -63,8 +63,16 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
       setAchievements(prev => [...prev, "win"]);
     }
 
+    // Логируем достижения перед отправкой
+    console.log("Текущие достижения перед отправкой:", achievements);
+
+    const updatedAchievements = achievements.filter(a => {
+      // Логика для фильтрации достижений
+      return true; // Пример, оставляем все достижения
+    });
+
     // Обновляем лидерборд
-    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, achievements, usedSuperpower)
+    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, updatedAchievements)
       .then(() => {
         console.log("Результаты игры успешно отправлены");
       })
@@ -170,6 +178,15 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
       setCanUsePower(false); // Суперсила используется только один раз
       setUsedSuperpower(true);
 
+      // Обновляем достижения, если суперсила использована
+      setAchievements(prevAchievements => {
+        return prevAchievements.filter(achievement => {
+          // Логика для фильтрации достижений, если суперсила использована
+          // Например, очищаем достижения, если нужно
+          return false; // Пример, убираем все достижения
+        });
+      });
+
       setTimeout(() => {
         setIsRevealed(false);
         setIsPaused(false); // Возобновляем таймер через 5 секунд

From b622c54ec8db012a746a002fa3037d620d9b446b Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sun, 8 Sep 2024 19:23:19 +0200
Subject: [PATCH 22/25] =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d3d6259a8..f9812dd99 100644
--- a/README.md
+++ b/README.md
@@ -83,4 +83,4 @@ https://skypro-web-developer.github.io/react-memo/
 Время на выполнение ДЗ №3:
 
    - пларируемое - 12 часов
-   - фактическое - 
\ No newline at end of file
+   - фактическое - 13 часов
\ No newline at end of file

From bf428614b9f8893fd9ee3709caabe935a79a53aa Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Tue, 10 Sep 2024 21:39:32 +0200
Subject: [PATCH 23/25] =?UTF-8?q?=D0=90=D1=87=D0=B8=D0=B2=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B2=20=D0=B4=D0=BE=D1=81=D1=82=D0=B8=D0=B6=D0=B5=D0=BD=D1=8F?=
 =?UTF-8?q?=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F=D1=8E=D1=82=D1=81?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D1=81=D0=B5=D0=B3=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                                    |  4 ----
 src/components/Cards/Cards.jsx                |  8 ++-----
 src/components/EndGameModal/EndGameModal.jsx  | 24 ++++++++++---------
 .../LeaderBoardPlayer/LeaderBoardPlayer.jsx   |  7 ++++--
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/api.js b/src/api.js
index 21e6cd4db..28588bfe0 100644
--- a/src/api.js
+++ b/src/api.js
@@ -26,9 +26,6 @@ export async function updateLeaderboard(name, time, achievements) {
     achievements: achievementIds,
   });
 
-  console.log("Отправляем запрос на обновление лидерборда:");
-  console.log("Тело запроса:", requestBody);
-
   try {
     const response = await fetch(API_URL, {
       method: "POST",
@@ -40,7 +37,6 @@ export async function updateLeaderboard(name, time, achievements) {
 
     if (!response.ok) {
       const errorText = await response.text();
-      console.error("Ошибка при обновлении лидерборда:", response.status, errorText);
       throw new Error(`Не удалось обновить лидерборд: ${response.status} ${errorText}`);
     }
   } catch (error) {
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index 6d8b834bd..f38756724 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -63,9 +63,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
       setAchievements(prev => [...prev, "win"]);
     }
 
-    // Логируем достижения перед отправкой
-    console.log("Текущие достижения перед отправкой:", achievements);
-
     const updatedAchievements = achievements.filter(a => {
       // Логика для фильтрации достижений
       return true; // Пример, оставляем все достижения
@@ -181,9 +178,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
       // Обновляем достижения, если суперсила использована
       setAchievements(prevAchievements => {
         return prevAchievements.filter(achievement => {
-          // Логика для фильтрации достижений, если суперсила использована
-          // Например, очищаем достижения, если нужно
-          return false; // Пример, убираем все достижения
+          return false;
         });
       });
 
@@ -299,6 +294,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
             gameDurationSeconds={timer.seconds}
             gameDurationMinutes={timer.minutes}
             onClick={resetGame}
+            achievements={achievements}
           />
         </div>
       ) : null}
diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx
index 8bcd8c299..62354fc08 100644
--- a/src/components/EndGameModal/EndGameModal.jsx
+++ b/src/components/EndGameModal/EndGameModal.jsx
@@ -6,28 +6,31 @@ import { Link, useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { updateLeaderboard } from "../../api";
 
-export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, gameDurationMinutes, onClick }) {
+export function EndGameModal({
+  isWon,
+  level,
+  isHardMode,
+  gameDurationSeconds,
+  gameDurationMinutes,
+  onClick,
+  achievements,
+}) {
   const title = isWon && level <= 2 ? "Вы победили!" : "";
   const isLeader = isWon && isHardMode && level === 3;
   const lossTitle = !isWon ? "Вы проиграли!" : "";
   const imgSrc = isWon ? celebrationImageUrl : deadImageUrl;
   const imgAlt = isWon ? "celebration emodji" : "dead emodji";
   const navigate = useNavigate();
+
   const [username, setUsername] = useState("");
 
   const handleSubmit = async () => {
-    console.log("HandleSubmit вызван");
-
     if (username.trim()) {
-      const score = 100;
-      const timeInSeconds = gameDurationMinutes * 60 + gameDurationSeconds;
-
-      console.log("Имя пользователя перед отправкой:", username);
-      console.log("Тело запроса:", JSON.stringify({ name: username, score, time: timeInSeconds }));
+      const time = gameDurationMinutes * 60 + gameDurationSeconds;
 
       try {
-        await updateLeaderboard(username, score, timeInSeconds); // Ждём завершения обновления лидерборда
-        navigate("/leaderboard"); // Переход после успешного обновления
+        await updateLeaderboard(username, time, achievements);
+        navigate("/leaderboard");
       } catch (error) {
         console.error("Ошибка при обновлении лидерборда:", error);
         alert("Не удалось обновить лидерборд, попробуйте снова.");
@@ -39,7 +42,6 @@ export function EndGameModal({ isWon, level, isHardMode, gameDurationSeconds, ga
 
   const handleInputChange = event => {
     setUsername(event.target.value);
-    console.log("Текущий username:", event.target.value);
   };
 
   return (
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
index 12aeb07ad..aeb1bfd25 100644
--- a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
@@ -20,19 +20,22 @@ export function LeaderBoardPlayer({ position, name, achievements = [], time }) {
     setIsBallVisible(false);
   };
 
+  const hasPuzzle = achievements.includes(1);
+  const hasBall = achievements.includes(2);
+
   return (
     <div className={styles.leaderboardPlayerSection}>
       <div className={styles.leaderboardPlayerPosition}>{position}</div>
       <div className={styles.leaderboardPlayerUser}>{name}</div>
       <div className={styles.leaderboardPlayerIcons}>
         <img
-          src={`${achievements.includes(1) ? "./puzzle_empty.svg" : "./puzzle.svg"}`}
+          src={hasPuzzle ? "./puzzle_empty.svg" : "./puzzle.svg"}
           alt="puzzle"
           onMouseEnter={handleBallMouseEnter}
           onMouseLeave={handleBallMouseLeave}
         />
         <img
-          src={`${achievements.includes(2) ? "./magic_ball_empty.svg" : "./magic_ball.svg"}`}
+          src={hasBall ? "./magic_ball_empty.svg" : "./magic_ball.svg"}
           alt="ball"
           onMouseEnter={handlePuzzleMouseEnter}
           onMouseLeave={handlePuzzleMouseLeave}

From 82c52163fb9106f3560ce33dd6112551f144d32a Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Thu, 12 Sep 2024 00:38:38 +0200
Subject: [PATCH 24/25] =?UTF-8?q?=D0=A2=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20?=
 =?UTF-8?q?=D0=B0=D1=87=D0=B8=D0=B2=D0=BA=D0=B8=20=D0=B2=D0=BE=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=89=D0=B5=20=D0=BD=D0=B5=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D1=8F=D1=8E=D1=82=D1=81=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                                    | 17 +++++++------
 src/components/Cards/Cards.jsx                | 25 ++++++++-----------
 src/components/EndGameModal/EndGameModal.jsx  | 17 +++++++++++--
 src/context/LeadersContext.jsx                | 12 +++++++++
 src/hooks/useLeaders.jsx                      |  6 +++++
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx |  2 +-
 6 files changed, 53 insertions(+), 26 deletions(-)
 create mode 100644 src/context/LeadersContext.jsx
 create mode 100644 src/hooks/useLeaders.jsx

diff --git a/src/api.js b/src/api.js
index 28588bfe0..d26ba048a 100644
--- a/src/api.js
+++ b/src/api.js
@@ -10,20 +10,21 @@ export async function getPlayersList() {
 }
 
 // Получить ID достижений
-function getAchievementIds(achievements) {
-  if (!Array.isArray(achievements)) {
-    return [];
-  }
-  return achievements;
-}
+// function getAchievementIds(achievements) {
+//   if (!Array.isArray(achievements)) {
+//     return [];
+//   }
+//   return achievements;
+// }
 
 export async function updateLeaderboard(name, time, achievements) {
-  const achievementIds = getAchievementIds(achievements);
+  // const achievementIds = getAchievementIds(achievements);
+  // console.log("Achievements IDs in updateLeaderboard:", achievementIds);
 
   const requestBody = JSON.stringify({
     name: name || "Пользователь",
     time,
-    achievements: achievementIds,
+    achievements,
   });
 
   try {
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index f38756724..e59c394b0 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -57,25 +57,26 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
   const handleGameEnd = isWon => {
     const playerName = "Player";
     const totalTime = timer.minutes * 60 + timer.seconds; // Подсчет времени
+    const cardAchievements = [...achievements];
 
-    // Добавляем ачивку за выигрыш
+    if (isWon && isHardMode) {
+      cardAchievements.push(1); // Ачивка за сложный уровень
+    }
+    // Победа без использования суперсил
     if (isWon && !usedSuperpower) {
-      setAchievements(prev => [...prev, "win"]);
+      cardAchievements.push(2); // Ачивка за победу без суперсил
     }
 
-    const updatedAchievements = achievements.filter(a => {
-      // Логика для фильтрации достижений
-      return true; // Пример, оставляем все достижения
-    });
-
     // Обновляем лидерборд
-    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, updatedAchievements)
+    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, cardAchievements)
       .then(() => {
         console.log("Результаты игры успешно отправлены");
       })
       .catch(error => {
         console.error("Ошибка при отправке результатов игры:", error);
       });
+
+    console.log("Achievements IDs:", cardAchievements);
   };
 
   function finishGame(status = STATUS_LOST) {
@@ -98,6 +99,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setTries(3);
     setAchievements([]);
     setCanUsePower(true); // Сброс возможности использования суперсилы
+    setUsedSuperpower(false);
   }
 
   const openCard = clickedCard => {
@@ -175,13 +177,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
       setCanUsePower(false); // Суперсила используется только один раз
       setUsedSuperpower(true);
 
-      // Обновляем достижения, если суперсила использована
-      setAchievements(prevAchievements => {
-        return prevAchievements.filter(achievement => {
-          return false;
-        });
-      });
-
       setTimeout(() => {
         setIsRevealed(false);
         setIsPaused(false); // Возобновляем таймер через 5 секунд
diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx
index 62354fc08..6855786e1 100644
--- a/src/components/EndGameModal/EndGameModal.jsx
+++ b/src/components/EndGameModal/EndGameModal.jsx
@@ -14,6 +14,7 @@ export function EndGameModal({
   gameDurationMinutes,
   onClick,
   achievements,
+  hasUsedSuperPower,
 }) {
   const title = isWon && level <= 2 ? "Вы победили!" : "";
   const isLeader = isWon && isHardMode && level === 3;
@@ -21,13 +22,25 @@ export function EndGameModal({
   const imgSrc = isWon ? celebrationImageUrl : deadImageUrl;
   const imgAlt = isWon ? "celebration emodji" : "dead emodji";
   const navigate = useNavigate();
-
-  const [username, setUsername] = useState("");
+  const [username, setUsername] = useState({
+    name: "",
+    time: gameDurationSeconds,
+    achievements: achievements,
+  });
 
   const handleSubmit = async () => {
     if (username.trim()) {
       const time = gameDurationMinutes * 60 + gameDurationSeconds;
 
+      if (isHardMode && !achievements.includes(1)) {
+        achievements.push(1);
+      }
+
+      if (!hasUsedSuperPower && !achievements.includes(2)) {
+        achievements.push(2);
+      }
+      console.log("Achievements IDs before sending:", achievements);
+
       try {
         await updateLeaderboard(username, time, achievements);
         navigate("/leaderboard");
diff --git a/src/context/LeadersContext.jsx b/src/context/LeadersContext.jsx
new file mode 100644
index 000000000..128d1bd38
--- /dev/null
+++ b/src/context/LeadersContext.jsx
@@ -0,0 +1,12 @@
+import { createContext, useState } from "react";
+
+export const LeadersContext = createContext();
+
+export function LeadersProvider({ children }) {
+  const [leaders, setLeaders] = useState([]);
+  const [isLeader, setIsLeader] = useState(false);
+
+  return (
+    <LeadersContext.Provider value={{ leaders, setLeaders, isLeader, setIsLeader }}>{children}</LeadersContext.Provider>
+  );
+}
diff --git a/src/hooks/useLeaders.jsx b/src/hooks/useLeaders.jsx
new file mode 100644
index 000000000..3ea44c599
--- /dev/null
+++ b/src/hooks/useLeaders.jsx
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { LeadersContext } from "../context/LeadersContext";
+
+export function useLeaders() {
+  return useContext(LeadersContext);
+}
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
index dd7f5d77f..204bbd768 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -16,7 +16,7 @@ export function LeaderBoardPage() {
     const fetchData = async () => {
       try {
         const data = await getPlayersList();
-        const filteredData = data.sort((a, b) => a.time - b.time).slice(0, 10);
+        const filteredData = data.sort((a, b) => a.time - b.time);
         setLeaderArray(filteredData);
       } catch (err) {
         setError("Не удалось загрузить данные");

From 635d2cea79cf7f41cfe1cac81283bc5e4eadc5c0 Mon Sep 17 00:00:00 2001
From: Karina Rozenberga Korneva <karinilya@mail.ru>
Date: Sat, 14 Sep 2024 19:25:34 +0200
Subject: [PATCH 25/25] =?UTF-8?q?=D0=90=D1=87=D0=B8=D0=B2=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F=D1=8E=D1=82=D1=81?=
 =?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Cards/Cards.jsx                | 28 +--------------
 src/components/Cards/Cards.module.css         |  3 --
 src/components/EndGameModal/EndGameModal.jsx  | 34 +++++++++----------
 .../LeaderBoardPlayer/LeaderBoardPlayer.jsx   | 14 ++++----
 src/pages/LeaderBoardPage/LeaderBoardPage.jsx |  2 +-
 5 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index e59c394b0..a89697f56 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -6,7 +6,6 @@ import { EndGameModal } from "../../components/EndGameModal/EndGameModal";
 import { Button } from "../../components/Button/Button";
 import { Card } from "../../components/Card/Card";
 import { EasyContext } from "../../context/context";
-import { updateLeaderboard } from "../../api";
 
 // Игра закончилась
 const STATUS_LOST = "STATUS_LOST";
@@ -54,35 +53,9 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
   const [isPaused, setIsPaused] = useState(false); // Состояние паузы таймера
   const [usedSuperpower, setUsedSuperpower] = useState(false);
 
-  const handleGameEnd = isWon => {
-    const playerName = "Player";
-    const totalTime = timer.minutes * 60 + timer.seconds; // Подсчет времени
-    const cardAchievements = [...achievements];
-
-    if (isWon && isHardMode) {
-      cardAchievements.push(1); // Ачивка за сложный уровень
-    }
-    // Победа без использования суперсил
-    if (isWon && !usedSuperpower) {
-      cardAchievements.push(2); // Ачивка за победу без суперсил
-    }
-
-    // Обновляем лидерборд
-    updateLeaderboard(playerName, isWon ? 1 : 0, totalTime, cardAchievements)
-      .then(() => {
-        console.log("Результаты игры успешно отправлены");
-      })
-      .catch(error => {
-        console.error("Ошибка при отправке результатов игры:", error);
-      });
-
-    console.log("Achievements IDs:", cardAchievements);
-  };
-
   function finishGame(status = STATUS_LOST) {
     setGameEndDate(new Date());
     setStatus(status);
-    handleGameEnd(status === STATUS_WON);
   }
   function startGame() {
     const startDate = new Date();
@@ -290,6 +263,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
             gameDurationMinutes={timer.minutes}
             onClick={resetGame}
             achievements={achievements}
+            hasUsedSuperPower={usedSuperpower}
           />
         </div>
       ) : null}
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css
index 972e996a2..72e51a7b1 100644
--- a/src/components/Cards/Cards.module.css
+++ b/src/components/Cards/Cards.module.css
@@ -28,14 +28,11 @@
 .header {
   display: flex;
   justify-content: space-between;
-  align-items: end;
   margin-bottom: 35px;
 }
 
 .timer {
   display: flex;
-  align-items: end;
-
   color: #fff;
   font-family: StratosSkyeng;
   font-size: 64px;
diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx
index 6855786e1..88bd89b9b 100644
--- a/src/components/EndGameModal/EndGameModal.jsx
+++ b/src/components/EndGameModal/EndGameModal.jsx
@@ -22,30 +22,28 @@ export function EndGameModal({
   const imgSrc = isWon ? celebrationImageUrl : deadImageUrl;
   const imgAlt = isWon ? "celebration emodji" : "dead emodji";
   const navigate = useNavigate();
-  const [username, setUsername] = useState({
-    name: "",
-    time: gameDurationSeconds,
-    achievements: achievements,
-  });
+  const [username, setUsername] = useState("");
 
-  const handleSubmit = async () => {
-    if (username.trim()) {
-      const time = gameDurationMinutes * 60 + gameDurationSeconds;
+  const handleGameEnd = async () => {
+    const totalTime = gameDurationMinutes * 60 + gameDurationSeconds;
+    const cardAchievements = [...achievements];
 
-      if (isHardMode && !achievements.includes(1)) {
-        achievements.push(1);
-      }
+    if (isWon && isHardMode && !cardAchievements.includes(1)) {
+      console.log(achievements);
+      cardAchievements.push(1); // Ачивка за сложный уровень
+    }
 
-      if (!hasUsedSuperPower && !achievements.includes(2)) {
-        achievements.push(2);
-      }
-      console.log("Achievements IDs before sending:", achievements);
+    if (isWon && !hasUsedSuperPower && !cardAchievements.includes(2)) {
+      cardAchievements.push(2); // Ачивка за победу без суперсил
+    }
 
+    if (username.trim()) {
       try {
-        await updateLeaderboard(username, time, achievements);
+        await updateLeaderboard(username, totalTime, cardAchievements);
+        console.log("Результаты игры успешно отправлены");
         navigate("/leaderboard");
       } catch (error) {
-        console.error("Ошибка при обновлении лидерборда:", error);
+        console.error("Ошибка при отправке результатов игры:", error);
         alert("Не удалось обновить лидерборд, попробуйте снова.");
       }
     } else {
@@ -72,7 +70,7 @@ export function EndGameModal({
             value={username}
             onChange={handleInputChange}
           />
-          <button className={styles.submitButton} type="button" onClick={handleSubmit}>
+          <button className={styles.submitButton} type="button" onClick={handleGameEnd}>
             Отправить
           </button>
         </div>
diff --git a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
index aeb1bfd25..6a251f87e 100644
--- a/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
+++ b/src/components/LeaderBoardPlayer/LeaderBoardPlayer.jsx
@@ -23,22 +23,24 @@ export function LeaderBoardPlayer({ position, name, achievements = [], time }) {
   const hasPuzzle = achievements.includes(1);
   const hasBall = achievements.includes(2);
 
+  console.log("Achievements for player", name, achievements);
+
   return (
     <div className={styles.leaderboardPlayerSection}>
       <div className={styles.leaderboardPlayerPosition}>{position}</div>
       <div className={styles.leaderboardPlayerUser}>{name}</div>
       <div className={styles.leaderboardPlayerIcons}>
         <img
-          src={hasPuzzle ? "./puzzle_empty.svg" : "./puzzle.svg"}
+          src={hasPuzzle ? "./puzzle.svg" : "./puzzle_empty.svg"}
           alt="puzzle"
-          onMouseEnter={handleBallMouseEnter}
-          onMouseLeave={handleBallMouseLeave}
+          onMouseEnter={handlePuzzleMouseEnter}
+          onMouseLeave={handlePuzzleMouseLeave}
         />
         <img
-          src={hasBall ? "./magic_ball_empty.svg" : "./magic_ball.svg"}
+          src={hasBall ? "./magic_ball.svg" : "./magic_ball_empty.svg"}
           alt="ball"
-          onMouseEnter={handlePuzzleMouseEnter}
-          onMouseLeave={handlePuzzleMouseLeave}
+          onMouseEnter={handleBallMouseEnter}
+          onMouseLeave={handleBallMouseLeave}
         />
         {isPuzzleVisible && <Puzzle />}
         {isBallVisible && <Ball />}
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
index 204bbd768..dd7f5d77f 100644
--- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
+++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx
@@ -16,7 +16,7 @@ export function LeaderBoardPage() {
     const fetchData = async () => {
       try {
         const data = await getPlayersList();
-        const filteredData = data.sort((a, b) => a.time - b.time);
+        const filteredData = data.sort((a, b) => a.time - b.time).slice(0, 10);
         setLeaderArray(filteredData);
       } catch (err) {
         setError("Не удалось загрузить данные");