добавляет выделение выбранной таски и обнуление при закрытии уровня

codEnjoyer · Nov 23, 2023 · c9ff272 · c9ff272
1 parent 4e41856
commit c9ff272
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 27 deletions.
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Level.tsx
@@ -3,6 +3,7 @@ import ModalWindow from "../../../../UIComponents/modalWindow/ModalWindow.tsx";
 import ModalLevelBody from "./ModalLevelBody.tsx";
 import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
 import {ITaskType} from "../../../../types/TaskType.ts";
+import levelStore from "../../../../store/levelStore.ts";
 
 interface IModuleProps {
     id: string,
@@ -20,7 +21,10 @@ const Level: React.FC<IModuleProps> = ({id, title, theoryUnits, taskUnits}) => {
 
             {isOpenModalWindow
                 ? <ModalWindow
-                    onClose={() => setOpenModalWindow(!isOpenModalWindow)}
+                    onClose={() => {
+                        setOpenModalWindow(!isOpenModalWindow)
+                        levelStore.closeLevel()
+                    }}
                     body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits} taskUnits={taskUnits}/>}
                 />
                 : ""}

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/MenuItem.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/MenuItem.tsx
@@ -11,17 +11,15 @@ interface IMenuItemProps {
 }
 
 const MenuItem: React.FC<IMenuItemProps> = observer(({index, indexType}) => {
-    const tasks = ["theory", "test", "video"]
-
-    function renderRequiredElement(taskName: string, index: number) {
-        switch (taskName) {
-            case ("theory"):
+    function renderRequiredElement(indexType: number, index: number) {
+        switch (indexType) {
+            case (0):
                 return <Theory index={index} indexChoosedItem={levelStore.chosenTaskIndex}
                                changeIndexChoosedItem={() => levelStore.setChosenTaskIndex(levelStore.chosenTaskIndex)}/>
-            case ("test"):
+            case (1):
                 return <Test index={index} indexChoosedItem={levelStore.chosenTaskIndex}
                              changeIndexChoosedItem={() => levelStore.setChosenTaskIndex(levelStore.chosenTaskIndex)}/>
-            case ("Video"):
+            case (2):
                 return <Video index={index}/>
         }
     }
@@ -30,7 +28,7 @@ const MenuItem: React.FC<IMenuItemProps> = observer(({index, indexType}) => {
         <div key={index} className="menu-item" onClick={() => {
             levelStore.setChosenTaskIndex(index)
         }}>
-            {renderRequiredElement(tasks[indexType], indexType)}
+            {renderRequiredElement(indexType, index)}
         </div>
     );
 });

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import "./modalLevelBody.scss"
 import ArrowLeft from "../../../../UIComponents/UIChooseModule/ArrowLeft.tsx";
 import ArrowRight from "../../../../UIComponents/UIChooseModule/ArrowRight.tsx";
@@ -8,6 +8,7 @@ import MenuItem from "./MenuItem.tsx";
 import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
 import {ITaskType} from "../../../../types/TaskType.ts";
 import {IMenuItemType} from "../../../../types/MenuItemType.ts";
+import levelStore from "../../../../store/levelStore.ts";
 
 interface IModalLevelProps {
     title: string,
@@ -16,8 +17,6 @@ interface IModalLevelProps {
 }
 
 const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits = [], taskUnits = []}) => {
-    const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
-
     const bodyHeader = renderBodyHeader()
     const menuItems: IMenuItemType[] = [
         {
@@ -52,7 +51,7 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits = [], ta
         for (let i = 0; i < menuItems.length; i++) {
             for (let j = 0; j < menuItems[i].length; j++) {
                 index++
-                taskBlocks.push(<MenuItem indexType={i} index={index} key={index}/>,)
+                taskBlocks.push(<MenuItem indexType={i} index={index} key={index}/>)
             }
         }
         return taskBlocks
@@ -68,20 +67,20 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits = [], ta
                 : ""
             }
 
-            {theoryUnits![currentTaskIndex] !== undefined &&
+            {theoryUnits![levelStore.chosenTaskIndex] !== undefined &&
                 (
                     <div className="task-info">
-                        <div className="level-title">{theoryUnits![currentTaskIndex].title}</div>
-                        <div className="level-body">{theoryUnits![currentTaskIndex].content}</div>
+                        <div className="level-title">{theoryUnits![levelStore.chosenTaskIndex].title}</div>
+                        <div className="level-body">{theoryUnits![levelStore.chosenTaskIndex].content}</div>
                     </div>
                 )
             }
 
 
-            {taskUnits![currentTaskIndex] !== undefined &&
+            {taskUnits![levelStore.chosenTaskIndex] !== undefined &&
                 (<div className="task-info">
                         <form className="level-body">
-                            {taskUnits![currentTaskIndex].questions.map((question) => {
+                            {taskUnits![levelStore.chosenTaskIndex].questions.map((question) => {
                                 return (
                                     <div className="question">
                                         <div className="question-title">{question.question}</div>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/TaskTypes/Test.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/TaskTypes/Test.tsx
@@ -9,7 +9,7 @@ interface ITestProps {
 const Test: React.FC<ITestProps> = ({index, indexChoosedItem, changeIndexChoosedItem}) => {
     return (
         <div className="test" onClick={changeIndexChoosedItem}>
-            {index === indexChoosedItem ? (
+            {!(index === indexChoosedItem) ? (
                     <svg width="60" height="60" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="20" cy="20" r="20" fill="#973FAB"/>
                         <mask id="mask0_108_18405" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="6" y="7"
@@ -27,16 +27,15 @@ const Test: React.FC<ITestProps> = ({index, indexChoosedItem, changeIndexChoosed
                 :
                 (
                     <svg width="60" height="60" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="20" cy="20" r="20" fill="#973FAB"/>
-                        <mask id="mask0_108_18405" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="6" y="7"
-                              width="28"
-                              height="28">
+                        <circle cx="20" cy="20" r="20" fill="white"/>
+                        <mask id="mask0_321_13352" style={{maskType: "alpha"}} maskUnits="userSpaceOnUse" x="6" y="7"
+                              width="28" height="28">
                             <rect x="6" y="7" width="28" height="28" fill="#D9D9D9"/>
                         </mask>
-                        <g mask="url(#mask0_108_18405)">
+                        <g mask="url(#mask0_321_13352)">
                             <path
-                                d="M10.6667 31.5V26.5417L26.0375 11.2C26.2708 10.9667 26.5333 10.7917 26.825 10.675C27.1167 10.5583 27.4083 10.5 27.7 10.5C28.0111 10.5 28.3076 10.5583 28.5896 10.675C28.8715 10.7917 29.1194 10.9667 29.3333 11.2L30.9667 12.8333C31.2 13.0472 31.375 13.2951 31.4917 13.5771C31.6083 13.859 31.6667 14.1556 31.6667 14.4667C31.6667 14.7583 31.6083 15.05 31.4917 15.3417C31.375 15.6333 31.2 15.8958 30.9667 16.1292L15.625 31.5H10.6667ZM13 29.1667H14.6333L26.0958 17.7333L25.2792 16.8875L24.4333 16.0708L13 27.5333V29.1667ZM25.2792 16.8875L24.4333 16.0708L26.0958 17.7333L25.2792 16.8875ZM22.3333 31.5C23.7722 31.5 25.1042 31.1403 26.3292 30.4208C27.5542 29.7014 28.1667 28.7 28.1667 27.4167C28.1667 26.7167 27.9819 26.1139 27.6125 25.6083C27.2431 25.1028 26.7472 24.6653 26.125 24.2958L24.4042 26.0167C24.8514 26.2111 25.2014 26.425 25.4542 26.6583C25.7069 26.8917 25.8333 27.1444 25.8333 27.4167C25.8333 27.8639 25.4785 28.2674 24.7688 28.6271C24.059 28.9868 23.2472 29.1667 22.3333 29.1667C22.0028 29.1667 21.7257 29.2785 21.5021 29.5021C21.2785 29.7257 21.1667 30.0028 21.1667 30.3333C21.1667 30.6639 21.2785 30.941 21.5021 31.1646C21.7257 31.3882 22.0028 31.5 22.3333 31.5ZM11.3375 22.575L13.0875 20.825C12.6986 20.6694 12.3924 20.509 12.1688 20.3438C11.9451 20.1785 11.8333 20.0083 11.8333 19.8333C11.8333 19.6 12.0083 19.3667 12.3583 19.1333C12.7083 18.9 13.4472 18.5403 14.575 18.0542C16.2861 17.3153 17.4236 16.6444 17.9875 16.0417C18.5514 15.4389 18.8333 14.7583 18.8333 14C18.8333 12.9306 18.4056 12.0799 17.55 11.4479C16.6944 10.816 15.5667 10.5 14.1667 10.5C13.2917 10.5 12.509 10.6556 11.8187 10.9667C11.1285 11.2778 10.5986 11.6569 10.2292 12.1042C10.0153 12.3569 9.92778 12.6389 9.96667 12.95C10.0056 13.2611 10.1514 13.5139 10.4042 13.7083C10.6569 13.9222 10.9389 14.0097 11.25 13.9708C11.5611 13.9319 11.8236 13.8056 12.0375 13.5917C12.3097 13.3194 12.6111 13.125 12.9417 13.0083C13.2722 12.8917 13.6806 12.8333 14.1667 12.8333C14.9639 12.8333 15.5521 12.95 15.9313 13.1833C16.3104 13.4167 16.5 13.6889 16.5 14C16.5 14.2722 16.3299 14.5201 15.9896 14.7438C15.6493 14.9674 14.8667 15.3611 13.6417 15.925C12.0861 16.6056 11.0069 17.2229 10.4042 17.7771C9.80139 18.3312 9.5 19.0167 9.5 19.8333C9.5 20.4556 9.66528 20.9854 9.99583 21.4229C10.3264 21.8604 10.7736 22.2444 11.3375 22.575Z"
-                                fill="#2B2A29"/>
+                                d="M10.6667 31.5V26.5417L26.0375 11.2C26.2708 10.9667 26.5333 10.7917 26.825 10.675C27.1167 10.5583 27.4083 10.5 27.7 10.5C28.0111 10.5 28.3076 10.5583 28.5896 10.675C28.8715 10.7917 29.1194 10.9667 29.3333 11.2L30.9667 12.8333C31.2 13.0472 31.375 13.2951 31.4917 13.5771C31.6083 13.859 31.6667 14.1556 31.6667 14.4667C31.6667 14.7583 31.6083 15.05 31.4917 15.3417C31.375 15.6333 31.2 15.8958 30.9667 16.1292L15.625 31.5H10.6667ZM13 29.1667H14.6333L26.0958 17.7333L25.2792 16.8875L24.4333 16.0708L13 27.5333V29.1667ZM25.2792 16.8875L24.4333 16.0708L26.0958 17.7333L25.2792 16.8875ZM22.3333 31.5C23.7722 31.5 25.1042 31.1403 26.3292 30.4208C27.5542 29.7014 28.1667 28.7 28.1667 27.4167C28.1667 26.7167 27.9819 26.1139 27.6125 25.6083C27.2431 25.1028 26.7472 24.6653 26.125 24.2958L24.4042 26.0167C24.8514 26.2111 25.2014 26.425 25.4542 26.6583C25.7069 26.8917 25.8333 27.1444 25.8333 27.4167C25.8333 27.8639 25.4785 28.2674 24.7688 28.6271C24.059 28.9868 23.2472 29.1667 22.3333 29.1667C22.0028 29.1667 21.7257 29.2785 21.5021 29.5021C21.2785 29.7257 21.1667 30.0028 21.1667 30.3333C21.1667 30.6639 21.2785 30.941 21.5021 31.1646C21.7257 31.3882 22.0028 31.5 22.3333 31.5ZM11.3375 22.575L13.0875 20.825C12.6986 20.6694 12.3924 20.509 12.1688 20.3437C11.9451 20.1785 11.8333 20.0083 11.8333 19.8333C11.8333 19.6 12.0083 19.3667 12.3583 19.1333C12.7083 18.9 13.4472 18.5403 14.575 18.0542C16.2861 17.3153 17.4236 16.6444 17.9875 16.0417C18.5514 15.4389 18.8333 14.7583 18.8333 14C18.8333 12.9306 18.4056 12.0799 17.55 11.4479C16.6944 10.816 15.5667 10.5 14.1667 10.5C13.2917 10.5 12.509 10.6556 11.8188 10.9667C11.1285 11.2778 10.5986 11.6569 10.2292 12.1042C10.0153 12.3569 9.92778 12.6389 9.96667 12.95C10.0056 13.2611 10.1514 13.5139 10.4042 13.7083C10.6569 13.9222 10.9389 14.0097 11.25 13.9708C11.5611 13.9319 11.8236 13.8056 12.0375 13.5917C12.3097 13.3194 12.6111 13.125 12.9417 13.0083C13.2722 12.8917 13.6806 12.8333 14.1667 12.8333C14.9639 12.8333 15.5521 12.95 15.9313 13.1833C16.3104 13.4167 16.5 13.6889 16.5 14C16.5 14.2722 16.3299 14.5201 15.9896 14.7437C15.6493 14.9674 14.8667 15.3611 13.6417 15.925C12.0861 16.6056 11.0069 17.2229 10.4042 17.7771C9.80139 18.3312 9.5 19.0167 9.5 19.8333C9.5 20.4556 9.66528 20.9854 9.99583 21.4229C10.3264 21.8604 10.7736 22.2444 11.3375 22.575Z"
+                                fill="black"/>
                         </g>
                     </svg>
                 )}

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/TaskTypes/Theory.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/TaskTypes/Theory.tsx
@@ -10,7 +10,7 @@ const Theory: React.FC<ITheoryProps> = ({index, indexChoosedItem, changeIndexCho
 
     return (
         <div className="theory" onClick={changeIndexChoosedItem}>
-            {index === indexChoosedItem ?
+            {!(index === indexChoosedItem) ?
                 (
                     <svg width="60" height="60" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="20" cy="20" r="20" fill="#973FAB"/>

diff --git a/frontend/src/store/levelStore.ts b/frontend/src/store/levelStore.ts
@@ -10,6 +10,10 @@ class levelStore {
     setChosenTaskIndex(index: number) {
         this.chosenTaskIndex = index
     }
+
+    closeLevel() {
+        this.chosenTaskIndex = 1
+    }
 }
 
 export default new levelStore()