From 49c41e40f5c5e51f170dd2ff19077d7e075aa5d2 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Wed, 31 Jul 2024 00:33:01 +0300 Subject: [PATCH 01/10] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B0=D0=BB=20=D0=B2=D1=81=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api.js | 29 +++++ src/components/Cards/Cards.jsx | 81 +++++++++++-- src/components/EndGameModal/EndGameModal.jsx | 86 +++++++++++++- .../EndGameModal/EndGameModal.module.css | 47 +++++++- src/components/Tools/ToolsComponent.jsx | 25 ++++ .../Tools/ToolsComponent.module.css | 23 ++++ src/icon/GetAchiv1.svg | 15 +++ src/icon/GetAchiv2.svg | 14 +++ src/icon/NoAchiv1.svg | 17 +++ src/icon/NoAchiv2.svg | 30 +++++ src/icon/cards.svg | 15 +++ src/pages/GamePage/GamePage.jsx | 4 +- src/pages/LeaderBoardPage/LeaderBoardPage.jsx | 76 +++++++++++++ .../LeaderBoardPage.module.css | 107 ++++++++++++++++++ src/pages/SelectLevelPage/SelectLevelPage.jsx | 25 +++- src/router.js | 8 +- 16 files changed, 579 insertions(+), 23 deletions(-) create mode 100644 src/api.js create mode 100644 src/components/Tools/ToolsComponent.jsx create mode 100644 src/components/Tools/ToolsComponent.module.css create mode 100644 src/icon/GetAchiv1.svg create mode 100644 src/icon/GetAchiv2.svg create mode 100644 src/icon/NoAchiv1.svg create mode 100644 src/icon/NoAchiv2.svg create mode 100644 src/icon/cards.svg 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..8f1a309f5 --- /dev/null +++ b/src/api.js @@ -0,0 +1,29 @@ +const hostUrl = "https://wedev-api.sky.pro/api/v2/leaderboard"; +export async function getLeaders() { + const response = await fetch(hostUrl, { + method: "GET", + }); + if (!response.status === 200) { + throw new Error("Не удалось получить список лидеров"); + } + const data = await response.json(); + return data; +} + +export async function addLeaders({ name, time, achievements }) { + const response = await fetch(hostUrl, { + method: "POST", + body: JSON.stringify({ + name, + time, + achievements, + }), + }); + if (!response.status === 201) { + throw new Error("Не удалось добавить в список лидеров"); + } else if (response.status === 400) { + throw new Error("Введите Ваше имя"); + } + const data = await response.json(); + return data; +} diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index 7526a56c8..3177c7d9d 100644 --- a/src/components/Cards/Cards.jsx +++ b/src/components/Cards/Cards.jsx @@ -5,6 +5,8 @@ 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 CardsIcon from "../../icon/cards.svg"; +import ToolsComponent from "../Tools/ToolsComponent"; // Игра закончилась const STATUS_LOST = "STATUS_LOST"; @@ -40,7 +42,7 @@ function getTimerValue(startDate, endDate) { * pairsCount - сколько пар будет в игре * previewSeconds - сколько секунд пользователь будет видеть все карты открытыми до начала игры */ -export function Cards({ pairsCount = 3, previewSeconds = 5 }) { +export function Cards({ pairsCount = 3, previewSeconds = 5, isGameMode }) { // В cards лежит игровое поле - массив карт и их состояние открыта\закрыта const [cards, setCards] = useState([]); // Текущий статус игры @@ -57,6 +59,15 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { minutes: 0, }); + // Стейт для счетчика попыток + const [numberOfAttempts, setNumberOfAttempts] = useState(2); + + const [achievements, setAchievements] = useState([]); + + const minusOneAttempt = () => { + setNumberOfAttempts(numberOfAttempts - 1); + }; + function finishGame(status = STATUS_LOST) { setGameEndDate(new Date()); setStatus(status); @@ -68,11 +79,14 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { setTimer(getTimerValue(startDate, null)); setStatus(STATUS_IN_PROGRESS); } + //добавлено кол-во попыток setNumberOfAttempts и ачивки setAchievements function resetGame() { setGameStartDate(null); setGameEndDate(null); setTimer(getTimerValue(null, null)); setStatus(STATUS_PREVIEW); + setNumberOfAttempts(2); + setAchievements(prevState => prevState.filter(achieve => achieve !== 2)); } /** @@ -125,17 +139,53 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { const playerLost = openCardsWithoutPair.length >= 2; - // "Игрок проиграл", т.к на поле есть две открытые карты без пары - if (playerLost) { - finishGame(STATUS_LOST); - return; - } + // // "Игрок проиграл", т.к на поле есть две открытые карты без пары + // if (playerLost) { + // finishGame(STATUS_LOST); + // return; + // } // ... игра продолжается + if (isGameMode === "true") { + if (playerLost) { + minusOneAttempt(); + if (numberOfAttempts < 1) { + finishGame(STATUS_LOST); + return; + } else { + setTimeout(() => { + setCards(cards.map(card => (openCardsWithoutPair.includes(card) ? { ...card, open: false } : card))); + }, 1000); + } + } + } else { + if (playerLost) { + finishGame(STATUS_LOST); + return; + } + } }; const isGameEnded = status === STATUS_LOST || status === STATUS_WON; + //Ачивка на открытие пары карт + const alohomora = () => { + if (achievements.includes(2)) { + alert("Подсказкой можно воспользоваться только 1 раз"); + return; + } + + let closedCards = cards.filter(card => !card.open); + closedCards = shuffle(closedCards); + closedCards[0].open = true; + closedCards.forEach(card => { + if (card.suit === closedCards[0].suit && card.rank === closedCards[0].rank) { + card.open = true; + } + }); + setAchievements(prevState => [...prevState, 2]); + }; + // Игровой цикл useEffect(() => { // В статусах кроме превью доп логики не требуется @@ -171,6 +221,12 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { clearInterval(intervalId); }; }, [gameStartDate, gameEndDate]); + //Отслеживание состояния использования ачивки + useEffect(() => { + if (!isGameMode) { + setAchievements(prevState => [...prevState, 1]); + } + }, [isGameMode]); return (
@@ -195,7 +251,17 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { )}
- {status === STATUS_IN_PROGRESS ? : null} + {status === STATUS_IN_PROGRESS ? ( + <> + {isGameMode === "true" ? ( +
осталось попыток: {numberOfAttempts + 1}
+ ) : null} + + Открыть пару карточек + + + + ) : null}
@@ -217,6 +283,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5 }) { gameDurationSeconds={timer.seconds} gameDurationMinutes={timer.minutes} onClick={resetGame} + isGameMode={isGameMode} />
) : null} diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx index 722394833..19a0f73f5 100644 --- a/src/components/EndGameModal/EndGameModal.jsx +++ b/src/components/EndGameModal/EndGameModal.jsx @@ -1,13 +1,66 @@ import styles from "./EndGameModal.module.css"; - import { Button } from "../Button/Button"; - import deadImageUrl from "./images/dead.png"; import celebrationImageUrl from "./images/celebration.png"; +import { useNavigate, useParams } from "react-router-dom"; +import { useState } from "react"; +import { addLeaders } from "../../api"; export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, onClick }) { - const title = isWon ? "Вы победили!" : "Вы проиграли!"; + //const title = isWon ? "Вы победили!" : "Вы проиграли!"; -изменно + const { isGameMode } = useParams(); + const { pairsCount } = useParams(); + + const navigate = useNavigate(); + const gameSeconds = gameDurationMinutes * 60 + gameDurationSeconds; + const [userData, setuserData] = useState({ + name: "", + time: gameSeconds, + achievements: [], + }); + //если isGameMode true то в userData.achievements нужно добавить 1 + + console.log(isGameMode); + const handleInputChange = e => { + const { name, value } = e.target; // Извлекаем имя поля и его значение + setuserData({ + ...userData, // Копируем текущие данные из состояния + [name]: value, // Обновляем нужное поле + }); + }; + + async function handleAddUser(e) { + e.preventDefault(); + try { + await addLeaders(userData).then(data => { + navigate(`/leaderboard`); + }); + } catch (error) { + alert(error.message); + } + } + async function handleAddUserButton(e) { + e.preventDefault(); + try { + await addLeaders(userData).then(data => { + onClick(); + }); + } catch (error) { + alert(error.message); + } + } + + let title = ""; + if (pairsCount === "9") { + title = isWon ? "Вы попали на лидерборд!" : "Вы проиграли!"; + } else { + title = isWon ? "Вы победили!" : "Вы проиграли!"; + } + const startTheGame = e => { + e.preventDefault(); + navigate(`/`); + }; const imgSrc = isWon ? celebrationImageUrl : deadImageUrl; const imgAlt = isWon ? "celebration emodji" : "dead emodji"; @@ -16,12 +69,35 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes,
{imgAlt}

{title}

+ {pairsCount === "9" && isWon ? ( +
+ +
+ ) : null}

Затраченное время:

{gameDurationMinutes.toString().padStart("2", "0")}.{gameDurationSeconds.toString().padStart("2", "0")}
- - + {pairsCount === "9" && isWon ? ( + <> + +
+ Перейти к лидерборду +
+ + ) : ( + <> + + + )}
); } diff --git a/src/components/EndGameModal/EndGameModal.module.css b/src/components/EndGameModal/EndGameModal.module.css index 9368cb8b5..4ef23c0dc 100644 --- a/src/components/EndGameModal/EndGameModal.module.css +++ b/src/components/EndGameModal/EndGameModal.module.css @@ -1,6 +1,7 @@ .modal { width: 480px; - height: 459px; + padding-top: 30px; + padding-bottom: 30px; border-radius: 12px; background: #c2f5ff; display: flex; @@ -18,19 +19,19 @@ .title { color: #004980; font-variant-numeric: lining-nums proportional-nums; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 40px; font-style: normal; font-weight: 400; line-height: 48px; - + text-align: center; margin-bottom: 28px; } .description { color: #000; font-variant-numeric: lining-nums proportional-nums; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 400; @@ -41,7 +42,7 @@ .time { color: #000; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 64px; font-style: normal; font-weight: 400; @@ -49,3 +50,39 @@ margin-bottom: 40px; } +.leaderboardLink { + padding-top: 10px; + padding-bottom: 10px; + color: #004980; + text-align: center; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; + text-decoration:underline +} + +.leaderboardLink:hover { + text-decoration:none +} + +.form{ + padding-top: 10px; + padding-bottom: 20px; +} +.nameInput { + width:276px; + height:45px; + border-radius:10px; + border: none; + color: #999999; + text-align: center; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} \ No newline at end of file diff --git a/src/components/Tools/ToolsComponent.jsx b/src/components/Tools/ToolsComponent.jsx new file mode 100644 index 000000000..422deb640 --- /dev/null +++ b/src/components/Tools/ToolsComponent.jsx @@ -0,0 +1,25 @@ +import React, { useRef, useState } from "react"; +import styles from "./ToolsComponent.module.css"; + +const ToolsComponent = ({ children, text, customClass }) => { + const refSetTimeout = useRef(); + const [showToolTip, setShowToolTip] = useState(false); + const toolTipClasses = customClass ? `${styles.tooltip} ${customClass}` : `${styles.tooltip}`; + const onMouseEnterHandler = () => { + refSetTimeout.current = setTimeout(() => { + setShowToolTip(true); + }, 750); + }; + const onMouseLeaveHandler = () => { + clearTimeout(refSetTimeout.current); + setShowToolTip(false); + }; + return ( +
+ {children} + {showToolTip &&
{text}
} +
+ ); +}; + +export default ToolsComponent; diff --git a/src/components/Tools/ToolsComponent.module.css b/src/components/Tools/ToolsComponent.module.css new file mode 100644 index 000000000..6a5b4ed1a --- /dev/null +++ b/src/components/Tools/ToolsComponent.module.css @@ -0,0 +1,23 @@ +.container { + position: relative; + display: flex; +} + +.tooltip { + position: absolute; + + padding: 20px 20px; + margin-top: 80px; + justify-content: center; + color: #004980; + background-color: #c2f5ff; + font-family: Roboto; + border-radius: 12px; + text-align: center; + white-space: pre-line; + font-size: 18px; + line-height: 25px; + font-weight: 400; + pointer-events: none; + z-index: 99999999; +} diff --git a/src/icon/GetAchiv1.svg b/src/icon/GetAchiv1.svg new file mode 100644 index 000000000..c170d753b --- /dev/null +++ b/src/icon/GetAchiv1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/icon/GetAchiv2.svg b/src/icon/GetAchiv2.svg new file mode 100644 index 000000000..f0976a430 --- /dev/null +++ b/src/icon/GetAchiv2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/icon/NoAchiv1.svg b/src/icon/NoAchiv1.svg new file mode 100644 index 000000000..8b14cfa84 --- /dev/null +++ b/src/icon/NoAchiv1.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/icon/NoAchiv2.svg b/src/icon/NoAchiv2.svg new file mode 100644 index 000000000..25bf675e0 --- /dev/null +++ b/src/icon/NoAchiv2.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icon/cards.svg b/src/icon/cards.svg new file mode 100644 index 000000000..08a4dc8a2 --- /dev/null +++ b/src/icon/cards.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/pages/GamePage/GamePage.jsx b/src/pages/GamePage/GamePage.jsx index a4be871db..84cc083e5 100644 --- a/src/pages/GamePage/GamePage.jsx +++ b/src/pages/GamePage/GamePage.jsx @@ -4,10 +4,10 @@ import { Cards } from "../../components/Cards/Cards"; export function GamePage() { const { pairsCount } = useParams(); - + const { isGameMode } = useParams(); return ( <> - + ); } diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx new file mode 100644 index 000000000..a3015a0c5 --- /dev/null +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx @@ -0,0 +1,76 @@ +import styles from "./LeaderBoardPage.module.css"; +import { useEffect, useState } from "react"; +import { Button } from "../../components/Button/Button"; +import { useNavigate } from "react-router-dom"; +import { getLeaders } from "../../api"; +import NoAchiv1 from "../../icons/NoAchiv1.svg"; +import GetAchiv1 from "../../icons/GetAchiv1.svg"; +import NoAchiv2 from "../../icons/NoAchiv2.svg"; +import GetAchiv2 from "../../icons/GetAchiv2.svg"; +import ToolsComponent from "../../components/Tools/ToolsComponent"; + +export function LeaderBoardPage() { + const [leaders, setLeaders] = useState([]); + useEffect(() => { + getLeaders().then(leadersList => { + setLeaders(leadersList.leaders); + }); + }, []); + const navigate = useNavigate(); + const startTheGame = e => { + e.preventDefault(); + navigate(`/`); + }; + + let i = 1; + + return ( +
+
+

Лидерборд

+ +
+ +
+ ); +} diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css new file mode 100644 index 000000000..8fd4a0ee4 --- /dev/null +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css @@ -0,0 +1,107 @@ +* { + margin: 0; + padding: 0; +} + +.container { + padding: 40px; +} + +.header { + display: flex; + justify-content: space-between; +} + +.leaderBoard { + padding-top: 40px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.headerTitle { + color: #ffffff; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 32px; + text-align: center; +} + +.leadersItemTitle { + color: #999999; + list-style-type: none; + background-color: #ffffff; + padding: 10px 20px; + border-radius: 12px; + display: flex; + justify-content: space-between; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} + +.leadersItem { + list-style-type: none; + background-color: #ffffff; + padding: 10px 20px; + border-radius: 12px; + display: flex; + justify-content: space-between; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} +.iconBtn:hover { + cursor: pointer; +} +.nameBox { + display: block; + min-width: 150px; + max-width: 150px; + overflow-wrap: break-word; + white-space: normal; +} +.numberBox { + display: block; + min-width: 70px; + max-width: 70px; + overflow-wrap: break-word; + white-space: normal; +} +.achivBox { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + min-width: 80px; + max-width: 80px; + overflow-wrap: break-word; + white-space: normal; +} +.toolTipCustom { + position: absolute; + min-width: 180px; + padding: 20px 20px; + margin-top: 80px; + justify-content: center; + color: #004980; + background-color: #c2f5ff; + font-family: Roboto; + border-radius: 12px; + text-align: center; + white-space: pre-line; + font-size: 18px; + line-height: 25px; + font-weight: 400; + pointer-events: none; + z-index: 99999999; +} diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index 758942e51..86fcd46a2 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx @@ -1,28 +1,47 @@ import { Link } from "react-router-dom"; import styles from "./SelectLevelPage.module.css"; +import { useState } from "react"; export function SelectLevelPage() { + //отслеживания режима игры + const [checked, setChecked] = useState(false); return (

Выбери сложность

  • - + 1
  • - + 2
  • - + 3
+
+ setChecked(!checked)} + id="easyMode" + /> + +
+
+ + Перейти к лидерборду + +
); diff --git a/src/router.js b/src/router.js index da6e94b51..c47ce1d71 100644 --- a/src/router.js +++ b/src/router.js @@ -1,6 +1,8 @@ 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( [ @@ -9,9 +11,13 @@ export const router = createBrowserRouter( element: , }, { - path: "/game/:pairsCount", + path: "/game/:pairsCount/:isGameMode", element: , }, + { + path: "/Leaderboard", + element: , + }, ], /** * basename нужен для корректной работы в gh pages From 25988f23762aa452958f5642855949edc6538155 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Wed, 31 Jul 2024 00:46:57 +0300 Subject: [PATCH 02/10] =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=B8=D0=BB=D0=B8?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5?= =?UTF-8?q?=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 9 ++++-- .prettierrc.js | 1 + src/components/Cards/Cards.jsx | 2 +- .../EndGameModal/EndGameModal.module.css | 4 +-- src/icon/GetAchiv1.svg | 15 ---------- src/icon/GetAchiv2.svg | 14 --------- src/icon/NoAchiv1.svg | 17 ----------- src/icon/NoAchiv2.svg | 30 ------------------- src/pages/LeaderBoardPage/LeaderBoardPage.jsx | 18 +++++------ .../LeaderBoardPage.module.css | 2 +- .../imgLeader/iconCardMinus.svg | 4 +++ .../imgLeader/iconCardPlus.svg | 3 ++ .../SelectLevelPage.module.css | 26 ++++++++++++++++ src/router.js | 15 +++++----- 14 files changed, 60 insertions(+), 100 deletions(-) delete mode 100644 src/icon/GetAchiv1.svg delete mode 100644 src/icon/GetAchiv2.svg delete mode 100644 src/icon/NoAchiv1.svg delete mode 100644 src/icon/NoAchiv2.svg create mode 100644 src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg create mode 100644 src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg diff --git a/.eslintrc.json b/.eslintrc.json index e37e1e072..c08a50b84 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,8 +2,13 @@ "extends": ["eslint:recommended", "prettier", "react-app", "react-app/jest"], "plugins": ["prettier"], "rules": { - "camelcase": ["error", { "properties": "never" }], - "prettier/prettier": "error", + "camelcase": ["error"], + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ], "eqeqeq": ["error", "always"], "no-unused-vars": ["error"] } diff --git a/.prettierrc.js b/.prettierrc.js index 65e18f5ff..1cccb3ea5 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,4 +1,5 @@ module.exports = { + endOfLine: "auto", printWidth: 120, tabWidth: 2, useTabs: false, diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index 3177c7d9d..f84886cbb 100644 --- a/src/components/Cards/Cards.jsx +++ b/src/components/Cards/Cards.jsx @@ -256,7 +256,7 @@ export function Cards({ pairsCount = 3, previewSeconds = 5, isGameMode }) { {isGameMode === "true" ? (
осталось попыток: {numberOfAttempts + 1}
) : null} - + Открыть пару карточек diff --git a/src/components/EndGameModal/EndGameModal.module.css b/src/components/EndGameModal/EndGameModal.module.css index 4ef23c0dc..221c11bb5 100644 --- a/src/components/EndGameModal/EndGameModal.module.css +++ b/src/components/EndGameModal/EndGameModal.module.css @@ -50,7 +50,7 @@ margin-bottom: 40px; } -.leaderboardLink { +.leaderBoardLink { padding-top: 10px; padding-bottom: 10px; color: #004980; @@ -64,7 +64,7 @@ text-decoration:underline } -.leaderboardLink:hover { +.leaderBoardLink:hover { text-decoration:none } diff --git a/src/icon/GetAchiv1.svg b/src/icon/GetAchiv1.svg deleted file mode 100644 index c170d753b..000000000 --- a/src/icon/GetAchiv1.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/icon/GetAchiv2.svg b/src/icon/GetAchiv2.svg deleted file mode 100644 index f0976a430..000000000 --- a/src/icon/GetAchiv2.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/icon/NoAchiv1.svg b/src/icon/NoAchiv1.svg deleted file mode 100644 index 8b14cfa84..000000000 --- a/src/icon/NoAchiv1.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/icon/NoAchiv2.svg b/src/icon/NoAchiv2.svg deleted file mode 100644 index 25bf675e0..000000000 --- a/src/icon/NoAchiv2.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx index a3015a0c5..14e3af80f 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx @@ -3,11 +3,9 @@ import { useEffect, useState } from "react"; import { Button } from "../../components/Button/Button"; import { useNavigate } from "react-router-dom"; import { getLeaders } from "../../api"; -import NoAchiv1 from "../../icons/NoAchiv1.svg"; -import GetAchiv1 from "../../icons/GetAchiv1.svg"; -import NoAchiv2 from "../../icons/NoAchiv2.svg"; -import GetAchiv2 from "../../icons/GetAchiv2.svg"; import ToolsComponent from "../../components/Tools/ToolsComponent"; +import iconCardMinus from "./imgLeader/iconCardMinus.svg"; +import iconCardPlus from "./imgLeader/iconCardPlus.svg"; export function LeaderBoardPage() { const [leaders, setLeaders] = useState([]); @@ -47,18 +45,18 @@ export function LeaderBoardPage() {
{leader.name}
{leader.achievements.includes(1) ? ( - - Игра пройдена в сложном режиме + + Игра пройдена в сложном режиме ) : ( - Легкий режим использовался + Легкий режим использовался )} {leader.achievements.includes(2) ? ( - - Игра пройдена без супер-сил + + Игра пройдена без супер-сил ) : ( - Суперсилы использовались + Суперсилы использовались )}
diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css index 8fd4a0ee4..f95d8deb4 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css @@ -87,7 +87,7 @@ overflow-wrap: break-word; white-space: normal; } -.toolTipCustom { +.toolsCustom { position: absolute; min-width: 180px; padding: 20px 20px; diff --git a/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg b/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg new file mode 100644 index 000000000..d8763efee --- /dev/null +++ b/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg b/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg new file mode 100644 index 000000000..5fe266bdd --- /dev/null +++ b/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css index 390ac0def..654bdad21 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.module.css +++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css @@ -62,3 +62,29 @@ .levelLink:visited { color: #0080c1; } +.easyMode { + font-family: "Segoe UI", Tahoma, Verdana, sans-serif; + font-size: 20px; + +} +.easyMode::after { + content: ""; + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + width: 12px; + height: 12px; + background-color: blue; + border-radius: 3px; + transition: 0.3s; +} +.checkbox-input { + display: none; + &:checked + label .checkbox { + &:after { + transform: translate(-50%, -50%) scale(1); + } + } +} diff --git a/src/router.js b/src/router.js index c47ce1d71..7740fee09 100644 --- a/src/router.js +++ b/src/router.js @@ -1,8 +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"; - +import { LeaderBoardPage } from "./pages/LeaderBoardPage/LeaderBoardPage"; export const router = createBrowserRouter( [ @@ -15,13 +14,13 @@ export const router = createBrowserRouter( element: , }, { - path: "/Leaderboard", + path: "/LeaderBoard", element: , }, ], - /** - * basename нужен для корректной работы в gh pages - * он же указан в homepage package.json и в index.html - */ - { basename: "/react-memo" }, + { + // basename нужен для корректной работы в gh pages + // он же указан в homepage package.json и в index.html + basename: "/react-memo", + }, ); From be90a2c920a4d15474a998dce1ace76430e89566 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Thu, 1 Aug 2024 14:20:53 +0300 Subject: [PATCH 03/10] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83.=20=D0=98=D0=B3?= =?UTF-8?q?=D1=80=D0=B0=20=D0=BD=D0=B5=20=D0=BD=D0=B0=D1=87=D0=B8=D0=BD?= =?UTF-8?q?=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=BF=D1=80=D0=B8=20=D0=BD?= =?UTF-8?q?=D0=B0=D0=B6=D0=B0=D1=82=D0=B8=D0=B8=20=D1=83=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=BD=D1=8F.=20=D0=A8=D1=80=D0=B8=D1=84=D1=82=20=D1=83=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=B5=D0=B4?= =?UTF-8?q?=D0=B8=D0=BD=D1=8B=D0=B9=20font-family:=20Roboto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/Button.module.css | 2 +- src/components/Card/Card.module.css | 2 +- src/components/Cards/Cards.module.css | 4 +- src/index.css | 2 +- .../imgLeader/iconCardMinus.svg | 2 +- .../imgLeader/iconCardPlus.svg | 2 +- src/pages/SelectLevelPage/SelectLevelPage.jsx | 44 +++++++++++-- .../SelectLevelPage.module.css | 62 +++++++++++++++++-- 8 files changed, 102 insertions(+), 18 deletions(-) diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 5d3f1f80e..34e78e477 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -10,7 +10,7 @@ font-variant-numeric: lining-nums proportional-nums; /* Pres → Caption S */ - font-family: StratosSkyeng; + font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 400; diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css index 86c3fbb5b..97c538c60 100644 --- a/src/components/Card/Card.module.css +++ b/src/components/Card/Card.module.css @@ -40,7 +40,7 @@ color: #000; font-variant-numeric: lining-nums proportional-nums; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 400; diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css index 000c5006c..97e09f8e7 100644 --- a/src/components/Cards/Cards.module.css +++ b/src/components/Cards/Cards.module.css @@ -37,7 +37,7 @@ align-items: end; color: #fff; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 64px; font-style: normal; font-weight: 400; @@ -62,7 +62,7 @@ .timerDescription { color: #fff; font-variant-numeric: lining-nums proportional-nums; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; diff --git a/src/index.css b/src/index.css index 78f0d3a2b..a0f94c4cf 100644 --- a/src/index.css +++ b/src/index.css @@ -28,7 +28,7 @@ ol { } @font-face { - font-family: "StratosSkyeng"; + font-family: Roboto; src: url("../public/assets/fonts/StratosSkyeng.woff2") format("woff2"), local("Arial"); diff --git a/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg b/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg index d8763efee..1a29eb93c 100644 --- a/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg +++ b/src/pages/LeaderBoardPage/imgLeader/iconCardMinus.svg @@ -1,4 +1,4 @@ - + diff --git a/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg b/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg index 5fe266bdd..5cfaa9bd4 100644 --- a/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg +++ b/src/pages/LeaderBoardPage/imgLeader/iconCardPlus.svg @@ -1,3 +1,3 @@ - + diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index 86fcd46a2..b0bcb1c2f 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx @@ -1,29 +1,58 @@ -import { Link } from "react-router-dom"; -import styles from "./SelectLevelPage.module.css"; +import { Link, useNavigate } from "react-router-dom"; + import { useState } from "react"; +import styles from "../SelectLevelPage/SelectLevelPage.module.css"; export function SelectLevelPage() { //отслеживания режима игры const [checked, setChecked] = useState(false); + const [selectedLevel, setSelectedLevel] = useState(null); // Состояние для хранения выбранного уровня + const navigate = useNavigate(); // Хук для навигации + + const handleStartGame = () => { + if (selectedLevel !== null) { + navigate(`/game/${selectedLevel}/${checked ? true : false}`); // Переход на страницу игры с выбранным уровнем + } else { + alert("Пожалуйста, выберите уровень!"); // Предупреждение, если уровень не выбран + } + }; return (

Выбери сложность

  • - + setSelectedLevel(3)} // Устанавливаем уровень 1 + > 1 + {/* + 1 + */}
  • - + setSelectedLevel(6)} // Устанавливаем уровень 2 + > 2 + {/* + 2 + */}
  • - + setSelectedLevel(9)} // Устанавливаем уровень 3 + > 3 + {/* + 3 + */}
@@ -37,7 +66,10 @@ export function SelectLevelPage() { />
-
+ +
Перейти к лидерборду diff --git a/src/pages/SelectLevelPage/SelectLevelPage.module.css b/src/pages/SelectLevelPage/SelectLevelPage.module.css index 654bdad21..56664b005 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.module.css +++ b/src/pages/SelectLevelPage/SelectLevelPage.module.css @@ -21,7 +21,7 @@ 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; @@ -35,6 +35,10 @@ margin-top: 48px; margin-bottom: 28px; } +.selected { + background: #56df8f; /* Цвет для выделенной кнопки */ + color: #fff; /* Цвет текста для выделенной кнопки */ +} .level { display: flex; @@ -51,21 +55,21 @@ .levelLink { color: #0080c1; text-align: center; - font-family: StratosSkyeng; + font-family: Roboto; font-size: 64px; font-style: normal; font-weight: 400; - line-height: 72px; + line-height: 97px; text-decoration: none; + border-radius: 12px; } .levelLink:visited { color: #0080c1; } .easyMode { - font-family: "Segoe UI", Tahoma, Verdana, sans-serif; + font-family: Roboto; font-size: 20px; - } .easyMode::after { content: ""; @@ -88,3 +92,51 @@ } } } +.button { + width: 246px; + height: 48px; + margin: 15px; + border-radius: 12px; + background: #56df8f; + + color: #fff; + text-align: center; + font-variant-numeric: lining-nums proportional-nums; + + font-family: Roboto; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 32px; + + border: none; + + cursor: pointer; +} + +.button:hover { + background: #00d41ccc; +} + +.leaderBoardLinkBox { + color: red; + font-family: Roboto; + text-decoration: none; + text-transform: uppercase; + padding: 10px; +} + +.leaderBoardLinkBox:hover { + text-decoration: underline; +} + +.leaderBoardLinkBox:active { + color: black; +} + +.leaderBoardLinkBox:visited { + color: purple; +} +.LeaderBoardGlob { + margin: 15px; +} From b2a64a1cf1b482d66d2b3c1f9776e2571e0ffaf2 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Sat, 3 Aug 2024 13:48:32 +0300 Subject: [PATCH 04/10] =?UTF-8?q?=D0=92=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D1=81=D0=BE=D0=B3=D0=BB=D0=B0=D1=81=D0=BD=D0=BE?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D0=BC.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cards/Cards.jsx | 6 ------ src/components/EndGameModal/EndGameModal.jsx | 7 +++---- src/pages/LeaderBoardPage/LeaderBoardPage.jsx | 20 ------------------- 3 files changed, 3 insertions(+), 30 deletions(-) diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx index f84886cbb..cabe8aa00 100644 --- a/src/components/Cards/Cards.jsx +++ b/src/components/Cards/Cards.jsx @@ -139,12 +139,6 @@ export function Cards({ pairsCount = 3, previewSeconds = 5, isGameMode }) { const playerLost = openCardsWithoutPair.length >= 2; - // // "Игрок проиграл", т.к на поле есть две открытые карты без пары - // if (playerLost) { - // finishGame(STATUS_LOST); - // return; - // } - // ... игра продолжается if (isGameMode === "true") { if (playerLost) { diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx index 19a0f73f5..60236771c 100644 --- a/src/components/EndGameModal/EndGameModal.jsx +++ b/src/components/EndGameModal/EndGameModal.jsx @@ -8,7 +8,7 @@ import { addLeaders } from "../../api"; export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, onClick }) { //const title = isWon ? "Вы победили!" : "Вы проиграли!"; -изменно - const { isGameMode } = useParams(); + const { pairsCount } = useParams(); const navigate = useNavigate(); @@ -20,7 +20,6 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, }); //если isGameMode true то в userData.achievements нужно добавить 1 - console.log(isGameMode); const handleInputChange = e => { const { name, value } = e.target; // Извлекаем имя поля и его значение @@ -89,9 +88,9 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, {pairsCount === "9" && isWon ? ( <> -
+
+ ) : ( <> diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx index 14e3af80f..b67701c1d 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx @@ -3,9 +3,6 @@ import { useEffect, useState } from "react"; import { Button } from "../../components/Button/Button"; import { useNavigate } from "react-router-dom"; import { getLeaders } from "../../api"; -import ToolsComponent from "../../components/Tools/ToolsComponent"; -import iconCardMinus from "./imgLeader/iconCardMinus.svg"; -import iconCardPlus from "./imgLeader/iconCardPlus.svg"; export function LeaderBoardPage() { const [leaders, setLeaders] = useState([]); @@ -32,7 +29,6 @@ export function LeaderBoardPage() {
Позиция
Пользователь
-
Достижения
Время
{leaders @@ -43,22 +39,6 @@ export function LeaderBoardPage() {
  • # {i++}
    {leader.name}
    -
    - {leader.achievements.includes(1) ? ( - - Игра пройдена в сложном режиме - - ) : ( - Легкий режим использовался - )} - {leader.achievements.includes(2) ? ( - - Игра пройдена без супер-сил - - ) : ( - Суперсилы использовались - )} -
    {Math.trunc(leader.time / 60) .toString() From a8ea6963919d93645bb747334ab34a9f38723e40 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Sun, 4 Aug 2024 12:08:50 +0300 Subject: [PATCH 05/10] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA?= =?UTF-8?q?=D0=B0=20=D0=BB=D0=B8=D0=B4=D0=B5=D1=80=D0=B1=D0=BE=D1=80=D0=B4?= =?UTF-8?q?=D0=B0=20=D0=B8=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D0=BB?= =?UTF-8?q?=D0=B8=D0=B4=D0=B5=D1=80=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/EndGameModal/EndGameModal.jsx | 6 +-- .../EndGameModal/EndGameModal.module.css | 37 +++++++++++++++---- .../LeaderBoardPage.module.css | 4 +- 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx index 60236771c..701451d76 100644 --- a/src/components/EndGameModal/EndGameModal.jsx +++ b/src/components/EndGameModal/EndGameModal.jsx @@ -2,7 +2,7 @@ import styles from "./EndGameModal.module.css"; import { Button } from "../Button/Button"; import deadImageUrl from "./images/dead.png"; import celebrationImageUrl from "./images/celebration.png"; -import { useNavigate, useParams } from "react-router-dom"; +import { Link, useNavigate, useParams } from "react-router-dom"; import { useState } from "react"; import { addLeaders } from "../../api"; @@ -88,9 +88,9 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, {pairsCount === "9" && isWon ? ( <> - + ) : ( <> diff --git a/src/components/EndGameModal/EndGameModal.module.css b/src/components/EndGameModal/EndGameModal.module.css index 221c11bb5..ecf8a61a1 100644 --- a/src/components/EndGameModal/EndGameModal.module.css +++ b/src/components/EndGameModal/EndGameModal.module.css @@ -61,21 +61,21 @@ font-style: normal; font-weight: 400; line-height: 32px; - text-decoration:underline + text-decoration: underline; } .leaderBoardLink:hover { - text-decoration:none + text-decoration: none; } -.form{ +.form { padding-top: 10px; padding-bottom: 20px; } .nameInput { - width:276px; - height:45px; - border-radius:10px; + width: 276px; + height: 45px; + border-radius: 10px; border: none; color: #999999; text-align: center; @@ -85,4 +85,27 @@ font-style: normal; font-weight: 400; line-height: 32px; -} \ No newline at end of file +} + +.leaderBoardLinkBox { + color: red; + font-family: Roboto; + text-decoration: none; + text-transform: uppercase; + padding: 10px; +} + +.leaderBoardLinkBox:hover { + text-decoration: underline; +} + +.leaderBoardLinkBox:active { + color: black; +} + +.leaderBoardLinkBox:visited { + color: purple; +} +.LeaderBoardGlob { + margin: 15px; +} diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css index f95d8deb4..959469c04 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css @@ -65,8 +65,8 @@ } .nameBox { display: block; - min-width: 150px; - max-width: 150px; + /* min-width: 150px; */ + /* max-width: 150px; */ overflow-wrap: break-word; white-space: normal; } From e200dde93c9e6e0e484343b2ca86db5a22ed6a2c Mon Sep 17 00:00:00 2001 From: DKTNS Date: Sun, 4 Aug 2024 14:01:08 +0300 Subject: [PATCH 06/10] =?UTF-8?q?=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=20=D1=80?= =?UTF-8?q?=D0=B5=D0=B6=D0=B8=D0=BC=D0=B0=20hard-easy=20=D1=80=D0=B0=D0=B1?= =?UTF-8?q?=D0=BE=D1=82=D0=B0=D0=B5=D1=82=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7?= =?UTF-8?q?=20context?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Context/Context.js | 14 ++++++++++++++ src/index.js | 5 ++++- src/pages/SelectLevelPage/SelectLevelPage.jsx | 19 ++++++++++--------- 3 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 src/components/Context/Context.js diff --git a/src/components/Context/Context.js b/src/components/Context/Context.js new file mode 100644 index 000000000..47d65c843 --- /dev/null +++ b/src/components/Context/Context.js @@ -0,0 +1,14 @@ +import { createContext, useState } from "react"; + +export const GameContext = createContext(); + +export const GameProvider = ({ children }) => { + const [selectedLevel, setSelectedLevel] = useState(null); + const [isEasyMode, setIsEasyMode] = useState(false); + + return ( + + {children} + + ); +}; diff --git a/src/index.js b/src/index.js index f689c5f0b..741064575 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 { GameProvider } from "./components/Context/Context"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + , ); diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index b0bcb1c2f..988f357c2 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx @@ -1,21 +1,22 @@ import { Link, useNavigate } from "react-router-dom"; - -import { useState } from "react"; +import { useContext } from "react"; import styles from "../SelectLevelPage/SelectLevelPage.module.css"; +import { GameContext } from "../../components/Context/Context"; export function SelectLevelPage() { - //отслеживания режима игры - const [checked, setChecked] = useState(false); - const [selectedLevel, setSelectedLevel] = useState(null); // Состояние для хранения выбранного уровня + //Выбор легкого-сложного режима через контекст + const { selectedLevel, setSelectedLevel, isEasyMode, setIsEasyMode } = useContext(GameContext); // Состояние для хранения выбранного уровня + //const [checked, setChecked] = useState(false); //отслеживания режима игры const navigate = useNavigate(); // Хук для навигации - const handleStartGame = () => { if (selectedLevel !== null) { - navigate(`/game/${selectedLevel}/${checked ? true : false}`); // Переход на страницу игры с выбранным уровнем + navigate(`/game/${selectedLevel}/${isEasyMode ? true : false}`); + //navigate(`/game/${selectedLevel}/${checked ? true : false}`); // Переход на страницу игры с выбранным уровнем } else { alert("Пожалуйста, выберите уровень!"); // Предупреждение, если уровень не выбран } }; + return (
    @@ -59,9 +60,9 @@ export function SelectLevelPage() { setChecked(!checked)} + onChange={() => setIsEasyMode(!isEasyMode)} // переключалка режима игры при каждом изменении id="easyMode" /> From 409132bb68f24e4a11183907c20498d88796a540 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Sun, 4 Aug 2024 14:10:46 +0300 Subject: [PATCH 07/10] =?UTF-8?q?pairsCount=20=3D=3D=3D=20"9"=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B7=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=D0=B0=20=D0=BD=D0=B0?= =?UTF-8?q?=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=83=D1=8E?= =?UTF-8?q?=20=D0=B8=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/EndGameModal/EndGameModal.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx index 701451d76..2f7852685 100644 --- a/src/components/EndGameModal/EndGameModal.jsx +++ b/src/components/EndGameModal/EndGameModal.jsx @@ -8,8 +8,9 @@ import { addLeaders } from "../../api"; export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, onClick }) { //const title = isWon ? "Вы победили!" : "Вы проиграли!"; -изменно - + const maxLevel = 9; // Переменная для числа const { pairsCount } = useParams(); + const isMaxLevel = pairsCount === maxLevel; // Переменная для условия const navigate = useNavigate(); const gameSeconds = gameDurationMinutes * 60 + gameDurationSeconds; @@ -51,11 +52,13 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes, } let title = ""; - if (pairsCount === "9") { + if (isMaxLevel) { + // Используем переменную вместо условия title = isWon ? "Вы попали на лидерборд!" : "Вы проиграли!"; } else { title = isWon ? "Вы победили!" : "Вы проиграли!"; } + const startTheGame = e => { e.preventDefault(); navigate(`/`); @@ -68,7 +71,7 @@ export function EndGameModal({ isWon, gameDurationSeconds, gameDurationMinutes,
    {imgAlt}

    {title}

    - {pairsCount === "9" && isWon ? ( + {isMaxLevel && isWon ? (
    {gameDurationMinutes.toString().padStart("2", "0")}.{gameDurationSeconds.toString().padStart("2", "0")}
    - {pairsCount === "9" && isWon ? ( + {isMaxLevel && isWon ? ( <> From ff7443c02a2d4c495786848bbafd099680e536a5 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Mon, 5 Aug 2024 00:28:21 +0300 Subject: [PATCH 08/10] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=BE=20=D0=B2=D1=8B=D1=80=D0=B0=D0=B2=D0=BD?= =?UTF-8?q?=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BB=D0=B8=D0=B4=D0=B5?= =?UTF-8?q?=D1=80=D0=B1=D0=BE=D1=80=D0=B4=D0=B0=20=D0=BF=D0=BE=20=D0=BC?= =?UTF-8?q?=D0=B0=D0=BA=D0=B5=D1=82=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LeaderBoardPage/LeaderBoardPage.jsx | 2 +- .../LeaderBoardPage.module.css | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx index b67701c1d..62d34e132 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.jsx +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.jsx @@ -39,7 +39,7 @@ export function LeaderBoardPage() {
  • # {i++}
    {leader.name}
    -
    +
    {Math.trunc(leader.time / 60) .toString() .padStart("2", "0")} diff --git a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css index 959469c04..e236f2505 100644 --- a/src/pages/LeaderBoardPage/LeaderBoardPage.module.css +++ b/src/pages/LeaderBoardPage/LeaderBoardPage.module.css @@ -5,6 +5,9 @@ .container { padding: 40px; + padding-left: 25%; + padding-right: 25%; + padding-top: 15%; } .header { @@ -64,11 +67,14 @@ cursor: pointer; } .nameBox { - display: block; /* min-width: 150px; */ /* max-width: 150px; */ overflow-wrap: break-word; white-space: normal; + min-width: 300px; + display: flex; + align-items:start; + } .numberBox { display: block; @@ -76,7 +82,18 @@ max-width: 70px; overflow-wrap: break-word; white-space: normal; + margin-right: 25%; + } + +.timeBox{ + min-width: 100px; + display: flex; + justify-content: flex-end; + padding-right: 2%; + +} + .achivBox { display: flex; flex-direction: row; From c1dfaa02d316d08fd6ceb4bed09877e88d69676f Mon Sep 17 00:00:00 2001 From: DKTNS Date: Mon, 5 Aug 2024 20:43:31 +0300 Subject: [PATCH 09/10] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=20isEasyMo?= =?UTF-8?q?de=20=D0=B8=D0=B7=20context.=20=D0=B2=D1=81=D0=B5=20=D1=80?= =?UTF-8?q?=D0=B0=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/Context/Context.js | 7 +------ src/pages/SelectLevelPage/SelectLevelPage.jsx | 5 +++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Context/Context.js b/src/components/Context/Context.js index 47d65c843..627b4565c 100644 --- a/src/components/Context/Context.js +++ b/src/components/Context/Context.js @@ -4,11 +4,6 @@ export const GameContext = createContext(); export const GameProvider = ({ children }) => { const [selectedLevel, setSelectedLevel] = useState(null); - const [isEasyMode, setIsEasyMode] = useState(false); - return ( - - {children} - - ); + return {children}; }; diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index 988f357c2..30789b4a2 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx @@ -1,11 +1,12 @@ import { Link, useNavigate } from "react-router-dom"; -import { useContext } from "react"; +import { useContext, useState } from "react"; import styles from "../SelectLevelPage/SelectLevelPage.module.css"; import { GameContext } from "../../components/Context/Context"; export function SelectLevelPage() { //Выбор легкого-сложного режима через контекст - const { selectedLevel, setSelectedLevel, isEasyMode, setIsEasyMode } = useContext(GameContext); // Состояние для хранения выбранного уровня + const { selectedLevel, setSelectedLevel } = useContext(GameContext); // Состояние для хранения выбранного уровня + const [isEasyMode, setIsEasyMode] = useState(false); // Локальное состояние для отслеживания режима игры //const [checked, setChecked] = useState(false); //отслеживания режима игры const navigate = useNavigate(); // Хук для навигации const handleStartGame = () => { From ce59a0a45151ef83004549066e53e9fa4f782c15 Mon Sep 17 00:00:00 2001 From: DKTNS Date: Mon, 5 Aug 2024 20:51:38 +0300 Subject: [PATCH 10/10] =?UTF-8?q?Context=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B8?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=B2=20EasyModeC?= =?UTF-8?q?ontext.=20=D0=B2=D1=81=D0=B5=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=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.module.css | 11 +++++++++++ src/components/Context/Context.js | 4 ++-- src/pages/SelectLevelPage/SelectLevelPage.jsx | 4 ++-- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css index 97e09f8e7..851d70320 100644 --- a/src/components/Cards/Cards.module.css +++ b/src/components/Cards/Cards.module.css @@ -70,3 +70,14 @@ margin-bottom: -12px; } + +.attemptСounter { + text-align: center; + color: #fff; + font-variant-numeric: lining-nums proportional-nums; + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} diff --git a/src/components/Context/Context.js b/src/components/Context/Context.js index 627b4565c..9c093b0dd 100644 --- a/src/components/Context/Context.js +++ b/src/components/Context/Context.js @@ -1,9 +1,9 @@ import { createContext, useState } from "react"; -export const GameContext = createContext(); +export const EasyModeContext = createContext(); export const GameProvider = ({ children }) => { const [selectedLevel, setSelectedLevel] = useState(null); - return {children}; + return {children}; }; diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx index 30789b4a2..2c3ac5b94 100644 --- a/src/pages/SelectLevelPage/SelectLevelPage.jsx +++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx @@ -1,11 +1,11 @@ import { Link, useNavigate } from "react-router-dom"; import { useContext, useState } from "react"; import styles from "../SelectLevelPage/SelectLevelPage.module.css"; -import { GameContext } from "../../components/Context/Context"; +import { EasyModeContext } from "../../components/Context/Context"; export function SelectLevelPage() { //Выбор легкого-сложного режима через контекст - const { selectedLevel, setSelectedLevel } = useContext(GameContext); // Состояние для хранения выбранного уровня + const { selectedLevel, setSelectedLevel } = useContext(EasyModeContext); // Состояние для хранения выбранного уровня const [isEasyMode, setIsEasyMode] = useState(false); // Локальное состояние для отслеживания режима игры //const [checked, setChecked] = useState(false); //отслеживания режима игры const navigate = useNavigate(); // Хук для навигации