добавляет переключение между контентом разного типа

codEnjoyer · Nov 16, 2023 · e37cc05 · e37cc05
1 parent 4913cd2
commit e37cc05
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 22 deletions.
diff --git a/frontend/src/UIComponents/modalWindow/ModalWindow.tsx b/frontend/src/UIComponents/modalWindow/ModalWindow.tsx
@@ -1,6 +1,6 @@
 import React, {PropsWithChildren, useEffect, useRef} from 'react';
-import gsap from 'gsap';
 import "./modalWindow.scss"
+import gsap from 'gsap';
 
 interface ModalWindowProps {
     body: React.ReactNode,
@@ -13,16 +13,17 @@ const ModalWindow: React.FC<ModalWindowProps> =
     ({body, onClose, windowContentStyles}: PropsWithChildren<ModalWindowProps>) => {
         const element = useRef(null);
 
+
         useEffect(() => {
             const onKeypress = (e: KeyboardEvent) => e?.key === "Esc" || e.key === "Escape" ? onClose() : null;
-
+            gsap.fromTo(element.current, {opacity: 0}, {opacity: 1, duration: 0.2})
+            gsap.to(element.current, {duration: 0.5, scale: 1.1, ease: "expoScale(i, 2)"});
             document.addEventListener('keyup', onKeypress);
-            gsap.fromTo(element, {opacity: 0}, {opacity: 1, duration: 0.2})
 
             return () => {
                 document.removeEventListener('keyup', onKeypress);
             };
-        }, [onClose]);
+        },);
 
         return (
             <div className="modal-window" onClick={onClose} ref={element}>

diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -22,26 +22,38 @@ const MapMenu: React.FC = () => {
             level: {
                 levelName: "Уровень 1",
                 title: "Собери помидорки",
-                body: "Какая-то информация которая очень хорошо тебе поведает тайну о помидорках и ещё какая-то информация которая очень хорошо тебе поведает тайну о помидорках ",
-                menu: ["theory", "video", "test"]
+                menu: [{
+                    taskName: "test",
+                    body: "Какая-то информация которая очень хорошо тебе поведает тайну о помидорках и ещё какая-то информация которая очень хорошо тебе поведает тайну о помидорках ",
+                }]
             }
         },
         {
             id: 2,
             level: {
                 levelName: "Уровень 2",
                 title: "Собери не помидорки",
-                body: "Я уже не помидорка",
-                menu: ["theory"]
+                menu: [{
+                    taskName: "theory",
+                    body: "Я уже не помидорка"
+                }]
             }
         },
         {
             id: 3,
             level: {
                 levelName: "Уровень 3",
                 title: "Начни бить Никиту",
-                body: "Я помидорка",
-                menu: ["video", "test"]
+                menu: [
+                    {
+                        taskName: "video",
+                        body: "Я помидорка"
+                    },
+                    {
+                        taskName: "test",
+                        body: "БУБУБУБУ"
+                    }
+                ]
             }
         },
 
@@ -55,8 +67,8 @@ const MapMenu: React.FC = () => {
             <br/>
             <div className="geolocations">
                 <div className="geolocations__wrapper">
-                    {geolocations.map((geolocation) => <Geolocation id={geolocation.id} level={geolocation.level}
-                                                                    key={geolocation.id}/>)}
+                    {geolocations.map((geolocation) =>
+                        <Geolocation id={geolocation.id} level={geolocation.level} key={geolocation.id}/>)}
                 </div>
             </div>
             <CustomButton text="Выйти" handleOnClick={onHandleSignOut}/>

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Geolocation.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Geolocation.tsx
@@ -16,7 +16,7 @@ const Geolocation: React.FC<IGeolocationProps> = ({id, level}) => {
             {isOpenModalWindow
                 ? <ModalWindow
                     onClose={() => setOpenModalWindow(!isOpenModalWindow)}
-                    body={<ModalLevelBody body={level.body} levelName={level.levelName} title={level.title}
+                    body={<ModalLevelBody levelName={level.levelName} title={level.title}
                                           menu={level.menu}/>}
                 />
                 : ""}
@@ -33,7 +33,4 @@ const Geolocation: React.FC<IGeolocationProps> = ({id, level}) => {
 };
 
 
-
-
-
 export default Geolocation;
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -6,8 +6,12 @@ import ArrowRight from "../UIChooseModule/ArrowRight.tsx";
 export interface IModalLevelProps {
     levelName: string,
     title: string,
-    body: string,
-    menu: string[]
+    menu: MenuType[]
+}
+
+type MenuType = {
+    taskName: string,
+    body: string
 }
 
 interface taskType {
@@ -16,7 +20,7 @@ interface taskType {
 }
 
 
-const ModalLevelBody: React.FC<IModalLevelProps> = ({levelName, title, body, menu}) => {
+const ModalLevelBody: React.FC<IModalLevelProps> = ({levelName, title, menu}) => {
     const tasks: taskType[] = [
         {name: "theory", element: <Theory/>},
         {name: "video", element: <Video/>},
@@ -39,13 +43,20 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({levelName, title, body, men
 
             <div className="menu">
                 {menu.map((item) =>
-                    tasks.map((task) => {
-                        return task.name === item ? <div className="menu-item">{task.element}</div> : ""
+                    tasks.map((task, index) => {
+                        return task.name === item.taskName
+                            ? <div key={index} className="menu-item">{task.element}</div>
+                            : ""
                     }))}
+
             </div>
             <div className="text-info">
                 <div className="level-title">{title.toUpperCase()}</div>
-                <div className="level-body">{body}</div>
+                {menu.map((item, index) => <div key={index} className="level-body">{item.body}</div>)}
+                <video style={{width: 400}} controls={true}>
+                    <source
+                        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></source>
+                </video>
             </div>
         </div>
     );