From cb518a133a94eaea7069dc10a87e4255463eb4b2 Mon Sep 17 00:00:00 2001 From: Allizaveta Date: Tue, 20 Aug 2024 19:55:45 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D1=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.js | 1 + README.md | 6 ++ src/components/Cards/Cards.jsx | 67 ++++++++++++++++--- src/components/Cards/Cards.module.css | 5 +- src/context/easyMode.js | 14 ++++ src/index.js | 5 +- src/pages/SelectLevelPage/SelectLevelPage.jsx | 13 ++++ .../SelectLevelPage.module.css | 42 ++++++++++++ 8 files changed, 140 insertions(+), 13 deletions(-) create mode 100644 src/context/easyMode.js diff --git a/.prettierrc.js b/.prettierrc.js index 65e18f5ff..97139a108 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -7,4 +7,5 @@ module.exports = { bracketSpacing: true, arrowParens: "avoid", htmlWhitespaceSensitivity: "ignore", + endOfLine: 'auto' }; diff --git a/README.md b/README.md index 9b90842c4..476a745ac 100644 --- a/README.md +++ b/README.md @@ -44,3 +44,9 @@ https://skypro-web-developer.github.io/react-memo/ Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом. Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения. + +### Оценочное время выполнения + +20 часов + +### Фактическое время выполнения diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index 7526a56c8..15be8eb2d 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 { LightContext } from "../../context/easyMode"; +// import { useNavigate } from "react-router-dom"; // Игра закончилась const STATUS_LOST = "STATUS_LOST"; @@ -41,8 +43,12 @@ function getTimerValue(startDate, endDate) { * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры */ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { + const { isLight, tries, setTries } = useContext(LightContext); // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта const [cards, setCards] = useState([]); + + const [playerLost, setPlayerLost] = useState(false); + // Текущий статус игры const [status, setStatus] = useState(STATUS_PREVIEW); @@ -68,7 +74,12 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { setTimer(getTimerValue(startDate, null)); setStatus(STATUS_IN_PROGRESS); } + // const navigate = useNavigate(); + function resetGame() { + // navigate("/"); + setTries(isLight ? 3 : 1); + setPlayerLost(false); setGameStartDate(null); setGameEndDate(null); setTimer(getTimerValue(null, null)); @@ -77,16 +88,26 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { /** * Обработка основного действия в игре - открытие карты. - * После открытия карты игра может пепереходит в следующие состояния + * После открытия карты игра может переходить в следующие состояния * - "Игрок выиграл", если на поле открыты все карты * - "Игрок проиграл", если на поле есть две открытые карты без пары * - "Игра продолжается", если не случилось первых двух условий */ + + useEffect(() => { + if (tries === 0) setPlayerLost(true); + }, [tries, playerLost]); + + useEffect(() => { + if (playerLost) finishGame(STATUS_LOST); + }, [playerLost]); + const openCard = clickedCard => { // Если карта уже открыта, то ничего не делаем if (clickedCard.open) { return; } + // Игровое поле после открытия кликнутой карты const nextCards = cards.map(card => { if (card.id !== clickedCard.id) { @@ -123,13 +144,37 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { return false; }); - const playerLost = openCardsWithoutPair.length >= 2; + function tryLost() { + if (openCardsWithoutPair.length === 2) { + setTries(tries - 1); + setTimeout(() => { + setCards( + cards.reduce((acc, card) => { + if (card.id === clickedCard.id) { + return [...acc, { ...card, open: false }]; + } + return [...acc, card]; + }, []), + ); + setCards( + cards.reduce((acc, card) => { + const previousCard = openCardsWithoutPair.find(item => item.id !== clickedCard.id); + if (card.id === previousCard.id) { + return [...acc, { ...card, open: false }]; + } + return [...acc, card]; + }, []), + ); + }, 1000); + } + } + tryLost(); // "Игрок проиграл", т.к на поле есть две открытые карты без пары - if (playerLost) { - finishGame(STATUS_LOST); - return; - } + // if (lost) { + // finishGame(STATUS_LOST); + // return; + // } // ... игра продолжается }; @@ -195,9 +240,13 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { )} - {status === STATUS_IN_PROGRESS ? : null} + {status === STATUS_IN_PROGRESS ? ( +
+ {isLight &&

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

} + +
+ ) : null} -
{cards.map(card => ( { + const [isLight, setIsLight] = useState(true); + const [tries, setTries] = useState(3); + + useEffect(() => { + isLight ? setTries(3) : setTries(1); + }, [isLight]); + + return {children}; +}; diff --git a/src/index.js b/src/index.js index f689c5f0b..ce8753683 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 { LightProvider } from "./context/easyMode"; 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..094aab3d4 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 { LightContext } from "../../context/easyMode"; export function SelectLevelPage() { + const { isLight, setIsLight } = useContext(LightContext); return (
@@ -23,6 +26,16 @@ export function SelectLevelPage() { +
); diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css index 390ac0def..6586529d2 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.module.css +++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css @@ -62,3 +62,45 @@ .levelLink:visited { color: #0080c1; } + +.checkbox { + position: relative; + width: 24px; + height: 13px; + border-radius: 100px; + background: #0080c1; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + &::before { + content: ""; + position: absolute; + top: 1px; + left: 1px; + width: 11px; + height: 11px; + border-radius: 50%; + background-color: #fff; + transition: 0.5s; + } + &:checked::before { + left: 12px; + background: #fff; + } + &:checked { + background-color: #046d2c; + } +} + +.checkboxLabel { + 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: 48px; +} From b07fd9e011cbd27ee9fc4db47bdc47975b7e73ab Mon Sep 17 00:00:00 2001 From: Allizaveta Date: Tue, 20 Aug 2024 19:59:48 +0300 Subject: [PATCH 2/2] s --- src/components/Cards/Cards.jsx | 4 ++-- src/components/Cards/Cards.module.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index 15be8eb2d..464596c40 100644 --- a/src/components/Cards/Cards.jsx +++ b/src/components/Cards/Cards.jsx @@ -241,9 +241,9 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { )}
{status === STATUS_IN_PROGRESS ? ( -
- {isLight &&

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

} +
+ {isLight &&

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

}
) : null}
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css index 3869c924c..e437c169f 100644 --- a/src/components/Cards/Cards.module.css +++ b/src/components/Cards/Cards.module.css @@ -69,3 +69,8 @@ margin-bottom: -12px; } + +.tries { + color: #fff; + margin-left: 50px; +}