commit

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/.idea
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -44,3 +44,10 @@ https://skypro-web-developer.github.io/react-memo/
 
 Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом.
 Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения.
+
+### Доработка
+
+- Планируемое время: 10 часов
+- Фактическое время: 20 часов
+- Цель: Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом.
+Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения.

src/components/Cards/Cards.jsx

@@ -1,10 +1,12 @@
 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 { LivesContext } from "../context/livesContext";
+import { EasyModeContext } from "../context/easymodeContext";
 
 // Игра закончилась
 const STATUS_LOST = "STATUS_LOST";
@@ -50,6 +52,11 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
   const [gameStartDate, setGameStartDate] = useState(null);
   // Дата конца игры
   const [gameEndDate, setGameEndDate] = useState(null);
+  //Режим трех попыток
+  const { easyMode } = useContext(EasyModeContext);
+  console.log(easyMode);
+  //Счетчик жизней
+  const { lives, setLives } = useContext(LivesContext);
 
   // Стейт для таймера, высчитывается в setInteval на основе gameStartDate и gameEndDate
   const [timer, setTimer] = useState({
@@ -73,6 +80,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     setGameEndDate(null);
     setTimer(getTimerValue(null, null));
     setStatus(STATUS_PREVIEW);
+    setLives(3);
   }
 
   /**
@@ -126,12 +134,30 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
     const playerLost = openCardsWithoutPair.length >= 2;
 
     // "Игрок проиграл", т.к на поле есть две открытые карты без пары
-    if (playerLost) {
+    if (playerLost && !easyMode) {
       finishGame(STATUS_LOST);
       return;
     }
 
     // ... игра продолжается
+    if (playerLost && easyMode) {
+      setLives(lives - 1);
+      nextCards.map(card => {
+        if (openCardsWithoutPair.some(opencard => opencard.id === card.id)) {
+          if (card.open) {
+            setTimeout(() => {
+              setCards(prev => {
+                return prev.map(el => (el.id === card.id ? { ...el, open: false } : el));
+              });
+            }, 1000);
+          }
+        }
+      });
+      if (lives === 1) {
+        finishGame(STATUS_LOST);
+        return;
+      }
+    }
   };
 
   const isGameEnded = status === STATUS_LOST || status === STATUS_WON;
@@ -164,6 +190,8 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
 
   // Обновляем значение таймера в интервале
   useEffect(() => {
+    if (status === STATUS_LOST || status === STATUS_WON) return;
+
     const intervalId = setInterval(() => {
       setTimer(getTimerValue(gameStartDate, gameEndDate));
     }, 300);
@@ -209,6 +237,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) {
           />
         ))}
       </div>
+      {easyMode ? <p className={styles.subtitle}>Осталось попыток: {lives}</p> : ""}
 
       {isGameEnded ? (
         <div className={styles.modalContainer}>

src/components/Cards/Cards.module.css

@@ -70,3 +70,10 @@
 
   margin-bottom: -12px;
 }
+
+.subtitle {
+  color: #fff;
+  font-size: 18px;
+  line-height: 18px;
+  margin-top: 20px;
+}

src/components/context/easymodeContext.jsx

@@ -0,0 +1,7 @@
+import { createContext, useState } from "react";
+
+export const EasyModeContext = createContext(null);
+export const EasyModeProvider = ({ children }) => {
+  const [easyMode, setEasyMode] = useState(false);
+  return <EasyModeContext.Provider value={{ easyMode, setEasyMode }}>{children}</EasyModeContext.Provider>;
+};

src/components/context/livesContext.jsx

@@ -0,0 +1,8 @@
+import { createContext, useState } from "react";
+
+export const LivesContext = createContext(null);
+
+export const LivesProvider = ({ children }) => {
+  const [lives, setLives] = useState(3);
+  return <LivesContext.Provider value={{ lives, setLives }}>{children}</LivesContext.Provider>;
+};

src/index.js

@@ -3,10 +3,16 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
+import { LivesProvider } from "./components/context/livesContext";
+import { EasyModeProvider } from "./components/context/easymodeContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router}></RouterProvider>
+    <EasyModeProvider>
+      <LivesProvider>
+        <RouterProvider router={router}></RouterProvider>
+      </LivesProvider>
+    </EasyModeProvider>
   </React.StrictMode>,
 );

src/pages/SelectLevelPage/SelectLevelPage.jsx

@@ -1,7 +1,18 @@
 import { Link } from "react-router-dom";
 import styles from "./SelectLevelPage.module.css";
+import { useContext, useEffect } from "react";
+import { EasyModeContext } from "../../components/context/easymodeContext";
 
 export function SelectLevelPage() {
+  const { setEasyMode } = useContext(EasyModeContext);
+  const checkBox = () => {
+    setEasyMode(true);
+  };
+
+  useEffect(() => {
+    setEasyMode(false);
+  }, []);
+
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -23,6 +34,10 @@ export function SelectLevelPage() {
             </Link>
           </li>
         </ul>
+        <div className={styles.wrap}>
+          <h3 className={styles.subtitle}>Дополнительные попытки</h3>
+          <input onClick={checkBox} type="checkbox" />
+        </div>
       </div>
     </div>
   );

src/pages/SelectLevelPage/SelectLevelPage.module.css

@@ -62,3 +62,19 @@
 .levelLink:visited {
   color: #0080c1;
 }
+
+.subtitle {
+  color: #004980;
+  text-align: center;
+  font-variant-numeric: lining-nums proportional-nums;
+  font-family: StratosSkyeng;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.wrap {
+  display: flex;
+  align-items: flex-end;
+}