From e37cc05335b907b083bb1a36008a36c176fddcce Mon Sep 17 00:00:00 2001
From: mihail323i21 <mihail323i21@gmail.com>
Date: Thu, 16 Nov 2023 13:14:44 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=B5=D0=B6=D0=B4=D1=83=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=BD=D1=82=D0=BE=D0=BC=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=82=D0=B8=D0=BF=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UIComponents/modalWindow/ModalWindow.tsx  |  9 +++---
 frontend/src/components/mapMenu/MapMenu.tsx   | 28 +++++++++++++------
 .../mapMenu/UIMapMenu/Level/Geolocation.tsx   |  5 +---
 .../UIMapMenu/Level/ModalLevelBody.tsx        | 23 +++++++++++----
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/frontend/src/UIComponents/modalWindow/ModalWindow.tsx b/frontend/src/UIComponents/modalWindow/ModalWindow.tsx
index 1db32ea..24e6e89 100644
--- 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
index 33bd948..8df33b8 100644
--- a/frontend/src/components/mapMenu/MapMenu.tsx
+++ b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -22,8 +22,10 @@ const MapMenu: React.FC = () => {
             level: {
                 levelName: "Уровень 1",
                 title: "Собери помидорки",
-                body: "Какая-то информация которая очень хорошо тебе поведает тайну о помидорках и ещё какая-то информация которая очень хорошо тебе поведает тайну о помидорках ",
-                menu: ["theory", "video", "test"]
+                menu: [{
+                    taskName: "test",
+                    body: "Какая-то информация которая очень хорошо тебе поведает тайну о помидорках и ещё какая-то информация которая очень хорошо тебе поведает тайну о помидорках ",
+                }]
             }
         },
         {
@@ -31,8 +33,10 @@ const MapMenu: React.FC = () => {
             level: {
                 levelName: "Уровень 2",
                 title: "Собери не помидорки",
-                body: "Я уже не помидорка",
-                menu: ["theory"]
+                menu: [{
+                    taskName: "theory",
+                    body: "Я уже не помидорка"
+                }]
             }
         },
         {
@@ -40,8 +44,16 @@ const MapMenu: React.FC = () => {
             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
index 37f777e..bf537c8 100644
--- 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
index 97e2e61..a11021a 100644
--- 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>
     );