min
-
{timer.minutes.toString().padStart("2", "0")}
+
{timer.minutes.toString().padStart(2, "0")}
.
sec
-
{timer.seconds.toString().padStart("2", "0")}
+
{timer.seconds.toString().padStart(2, "0")}
)}
- {status === STATUS_IN_PROGRESS ?
diff --git a/src/components/Cards/Cards.module.css b/src/components/Cards/Cards.module.css
index 000c5006c..d6d59f50a 100644
--- a/src/components/Cards/Cards.module.css
+++ b/src/components/Cards/Cards.module.css
@@ -1,3 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&display=swap');
+
+.lives {
+ font-size: 32px;
+ margin-left: 20px;
+ display: flex;
+ align-items: center;
+ font-family: "Handjet", sans-serif;
+ color: #fff; /* По умолчанию белый цвет */
+}
+
+.livesCritical {
+ color: rgb(255, 55, 55); /* Красный цвет при 1 жизни */
+}
+
+
+
.container {
width: 672px;
margin: 0 auto;
@@ -69,4 +86,4 @@
line-height: 32px;
margin-bottom: -12px;
-}
+}
\ No newline at end of file
diff --git a/src/context/GameModeContext.js b/src/context/GameModeContext.js
new file mode 100644
index 000000000..d0d6976b4
--- /dev/null
+++ b/src/context/GameModeContext.js
@@ -0,0 +1,19 @@
+import { createContext, useState, useEffect } from "react";
+
+export const GameModeContext = createContext({
+ livesMode: false,
+ setLivesMode: () => {},
+});
+
+export function GameModeProvider({ children }) {
+ const [livesMode, setLivesMode] = useState(() => {
+ const savedMode = localStorage.getItem("livesMode");
+ return savedMode === "true";
+ });
+
+ useEffect(() => {
+ localStorage.setItem("livesMode", livesMode);
+ }, [livesMode]);
+
+ return
{children};
+}
diff --git a/src/index.js b/src/index.js
index f689c5f0b..30c3029f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,20 @@ import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
+import { GameModeProvider } from "./context/GameModeContext"; // Импортируем обновленный провайдер
const root = ReactDOM.createRoot(document.getElementById("root"));
+
+function App() {
+ return (
+
+
+
+ );
+}
+
root.render(
-
+
,
);
diff --git a/src/pages/SelectLevelPage/SelectLevelPage.jsx b/src/pages/SelectLevelPage/SelectLevelPage.jsx
index 758942e51..472b4d618 100644
--- a/src/pages/SelectLevelPage/SelectLevelPage.jsx
+++ b/src/pages/SelectLevelPage/SelectLevelPage.jsx
@@ -1,11 +1,24 @@
+// src/pages/SelectLevelPage/SelectLevelPage.jsx
+
import { Link } from "react-router-dom";
import styles from "./SelectLevelPage.module.css";
+import { useContext } from "react";
+import { GameModeContext } from "../../context/GameModeContext";
export function SelectLevelPage() {
+ const { livesMode, setLivesMode } = useContext(GameModeContext);
+
+ const handleCheckboxChange = event => {
+ setLivesMode(event.target.checked);
+ };
return (