From 08149006ed1b82791748aca09bf61a9cab39d784 Mon Sep 17 00:00:00 2001 From: Yulenka5 Date: Wed, 28 Aug 2024 22:55:58 +0500 Subject: [PATCH] commit --- .gitignore | 2 ++ README.md | 7 ++++ src/components/Cards/Cards.jsx | 33 +++++++++++++++++-- src/components/Cards/Cards.module.css | 7 ++++ src/components/context/easymodeContext.jsx | 7 ++++ src/components/context/livesContext.jsx | 8 +++++ src/index.js | 8 ++++- src/pages/SelectLevelPage/SelectLevelPage.jsx | 15 +++++++++ .../SelectLevelPage.module.css | 16 +++++++++ 9 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 src/components/context/easymodeContext.jsx create mode 100644 src/components/context/livesContext.jsx diff --git a/.gitignore b/.gitignore index 4d29575de..e5bd9abd7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +/.idea + # dependencies /node_modules /.pnp diff --git a/README.md b/README.md index 9b90842c4..169d95ae7 100644 --- a/README.md +++ b/README.md @@ -44,3 +44,10 @@ https://skypro-web-developer.github.io/react-memo/ Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом. Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения. + +### Доработка + +- Планируемое время: 10 часов +- Фактическое время: 20 часов +- Цель: Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом. +Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения. diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index 7526a56c8..89ad2906e 100644 --- a/src/components/Cards/Cards.jsx +++ b/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 }) { /> ))} + {easyMode ?

Осталось попыток: {lives}

: ""} {isGameEnded ? (
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css index 000c5006c..f6b55c95d 100644 --- a/src/components/Cards/Cards.module.css +++ b/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; +} diff --git a/src/components/context/easymodeContext.jsx b/src/components/context/easymodeContext.jsx new file mode 100644 index 000000000..710847f71 --- /dev/null +++ b/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 {children}; +}; diff --git a/src/components/context/livesContext.jsx b/src/components/context/livesContext.jsx new file mode 100644 index 000000000..f5ce08251 --- /dev/null +++ b/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 {children}; +}; diff --git a/src/index.js b/src/index.js index f689c5f0b..46c5d580e 100644 --- a/src/index.js +++ b/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( - + + + + + , ); diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index 758942e51..546ddca4f 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/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 (
@@ -23,6 +34,10 @@ export function SelectLevelPage() { +
+

Дополнительные попытки

+ +
); diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css index 390ac0def..c559a3f23 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.module.css +++ b/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; +}