Routing + Backend completet

ShivangNagta · Jul 10, 2024 · 0c7ab28 · 0c7ab28
1 parent 7b3fe39
commit 0c7ab28
Show file tree

Hide file tree

Showing 9 changed files with 291 additions and 389 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -20,7 +20,7 @@
     "react-router-dom": "^6.24.1",
     "react-simple-chatbot": "^0.6.1",
     "react-transition-group": "^4.4.5",
-    "styled-components": "^6.1.11"
+    "styled-components": "^4.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -11,23 +11,19 @@ import Window from './components/Window.jsx';
 import Result from './components/Result.jsx';
 import HelpBot from './components/HelpBot.jsx';
 
-function App(){
+function App() {
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={
-                    <>
-                    <Window />
-                    <HelpBot
-                    level={2}/>
-                    </>} />
-                {/* <Route path="/Level-1(1)" element={<Mandelbrot />} />
+
+                <Route path="/" element={<Login />} />
+                <Route path="/Level-1(1)" element={<Mandelbrot />} />
                 <Route path="/Level-1(2)" element={<MandelbrotFractal />} />
                 <Route path="/intro1" element={<Rain />} /> 
-                <Route path="/Level-2" element={<Window/>} /> */}
-                <Route path="/intro2" element={<Intro2/>} />
-                <Route path="/Level-3" element={<Noncense /> } />
-                <Route path="/resultPage" element={<Result /> } />
+                <Route path="/Level-2" element ={<Window /> } />
+                <Route path="/intro2" element={<Intro2 />} />
+                <Route path="/Level-3" element={<Noncense />} />
+                <Route path="/resultPage" element={<Result />} />
             </Routes>
         </BrowserRouter>
     );

diff --git a/app/src/components/HelpBot.jsx b/app/src/components/HelpBot.jsx
@@ -1,12 +1,74 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import ChatBot from "react-simple-chatbot";
 import alluArjun from "../assets/alluArjun.png";
 import ohMyGoddo from "../assets/ohMyGoddo.png";
 import { useNavigate } from 'react-router-dom';
 
-const HelpBot = ({ level = 1 }) => {
-
+const HelpBot = ({ level = 1, entryNumber, timer, setTimer }) => {
   const navigate = useNavigate();
+  const latestTimerRef = useRef(timer);
+
+  console.log("HelpBot rendered. Current timer value:", timer);
+
+  // Update the ref whenever timer changes
+  useEffect(() => {
+    latestTimerRef.current = timer;
+  }, [timer]);
+
+  const NextLevelComponent = () => {
+    const [localTimeTaken, setLocalTimeTaken] = useState(null);
+
+    useEffect(() => {
+      const capturedTimer = latestTimerRef.current;
+      console.log("NextLevelComponent effect running. Captured Timer value:", capturedTimer);
+
+      const updateData = async () => {
+        const currentTimeTaken = 1200 - capturedTimer;
+        console.log("Calculating time taken. Captured Timer:", capturedTimer, "Time taken:", currentTimeTaken);
+
+        setLocalTimeTaken(currentTimeTaken);
+
+        try {
+          const formData = {
+            entryNumber: entryNumber,
+            timeTaken: currentTimeTaken
+          };
+
+          console.log("Sending data to server:", formData);
+
+          const response = await fetch('http://localhost:3000/updateTime', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData),
+          });
+
+          if (response.ok) {
+            const data = await response.json();
+            console.log('Server response:', data);
+            setTimer(0);  // Reset timer after successful update
+          } else {
+            console.error('Failed to update time. Status:', response.status);
+            const errorText = await response.text();
+            console.error('Error details:', errorText);
+          }
+        } catch (error) {
+          console.error('Error updating time:', error.message);
+        }
+      };
+
+      updateData();
+
+      const timerId = setTimeout(() => {
+        navigate(`/intro2?entryNumber=${entryNumber}`);
+      }, 2000);
+
+      return () => clearTimeout(timerId);
+    }, []);
+
+    return <div>Redirecting to the next level.... Time taken: {localTimeTaken !== null ? localTimeTaken : 'Calculating...'}</div>;
+  };
 
   const getInitialSteps = (level) => {
     if (level === 1) {
@@ -102,27 +164,24 @@ const HelpBot = ({ level = 1 }) => {
         },
         {
           id: "hacker-input",
-        user: true,
-        trigger: (inputValue) => {
-          console.log(inputValue.value);
-          console.log(inputValue.value === 'bad');
-          if (inputValue.value === 'bad') {
-            console.log('correct');
-            return 'congo-msg';
-          } else {
-            return 'wrong-ans';
-          }
+          user: true,
+          trigger: (inputValue) => {
+            if (inputValue.value === 'bad') {
+              return 'congo-msg';
+            } else {
+              return 'wrong-ans';
+            }
+          },
+        },
+        {
+          id: "congo-msg",
+          message: "Correct answer! You found the hacker!",
+          trigger: 'next-level',
         },
-      },
-      {
-        id: "congo-msg",
-        message: "Correct answer! You found the hacker!",
-        trigger: 'next-level',
-      },
         {
           id: "next-level",
           component: (
-            <RedirectComponent navigate={navigate} />
+            <NextLevelComponent />
           ),
           end: true,
         },
@@ -155,53 +214,69 @@ const HelpBot = ({ level = 1 }) => {
     userFontColor: '#fff',
   };
 
-  // const chatbotStyle = {
-  //   borderRadius: "8px",
-  //   boxShadow: "0 3px 8px rgba(0, 0, 0, 0.2)",
-  //   maxWidth: "100%",
-  //   margin: "0 auto",
-  //   display: "flex",
-  //   flexDirection: "column",
-  //   height: "100%",
-  //   overflow: "hidden",
-  //   padding: "0",
-  //   zIndex: "50",
-  // };
-
   return (
     <div>
-      <ChatBot 
-        steps={steps} 
-        floating={true} 
+      {entryNumber}
+      <ChatBot
+        steps={steps}
+        floating={true}
         style={{ background: theme.background }}
         contentStyle={{ background: theme.background }}
         botAvatar={alluArjun}
         userAvatar={ohMyGoddo}
         headerTitle="HelpBot"
         hideUserAvatar={true}
-        // hideBotAvatar={true}
         customStyle={{
           backgroundColor: theme.background,
           color: theme.headerFontColor
         }}
-        // chatbotStyle = {chatbotStyle}
-        // {...theme}
       />
     </div>
   );
 };
 
+// const RedirectComponent = ({ navigate, entryNumber, timer, setTimer }) => {
+//   let timeTaken = 0
+//   useEffect(() => {
+//     const updateData = async () => {
+//       try {
+//         timeTaken = 1200 - timer; // Calculate time taken to complete the level
+//         const formData = {
+//           entryNumber: entryNumber,
+//           timeTaken: timeTaken
+//         };
 
-const RedirectComponent = ({ navigate }) => {
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      navigate('/intro2');
-    }, 2000);
+//         const response = await fetch('http://localhost:3000/updateTime', {
+//           method: 'POST',
+//           headers: {
+//             'Content-Type': 'application/json',
+//           },
+//           body: JSON.stringify(formData),
+//         });
 
-    return () => clearTimeout(timer);
-  }, [navigate]);
+//         if (response.ok) {
+//           console.log('Time updated successfully');
+//           setTimer(0); // Update the timer after the fetch request completes successfully
+//         } else {
+//           console.error('Failed to update time');
+//         }
+//       } catch (error) {
+//         console.error('Error updating time:', error);
+//       }
+//     };
 
-  return <div>Redirecting to the next level...</div>;
-};
+//     updateData();
+//   }, [entryNumber, setTimer, timer]);
+
+//   useEffect(() => {
+//     const timerId = setTimeout(() => {
+//       navigate(`/intro2?entryNumber=${entryNumber}`);
+//     }, 2000);
+
+//     return () => clearTimeout(timerId);
+//   }, [navigate, entryNumber]);
+
+//   return <div>Redirecting to the next level....{timeTaken}</div>;
+// };
 
 export default HelpBot;
diff --git a/app/src/components/Window.jsx b/app/src/components/Window.jsx
@@ -1,29 +1,36 @@
-import React, { useState } from "react";
-// import "./Window.css"; // Import the CSS file for the Browser component
+import React, { useState, useEffect } from "react";
 import Terminal from "./Terminal";
 import Browser from "./Browser";
 import MySQLTerminal from "./DataExplorer";
 import HelpBot from "./HelpBot";
+import { useLocation } from "react-router-dom";
 
 const Window = () => {
   const components = [
     { name: "Browser", component: <Browser /> },
     { name: "Terminal", component: <Terminal /> },
-    {name: "Azure", component: <MySQLTerminal />}
+    { name: "Azure", component: <MySQLTerminal /> }
     // Add more components as needed
   ];
 
-  const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
-  // const [startTime, setStartTime] = useState(null);
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const entryNumber = searchParams.get('entryNumber');
+
+  const [timer, setTimer] = useState(1200);
+
+  useEffect(() => {
+    if (timer > 0) {
+      const timerInterval = setInterval(() => {
+        setTimer(prevTimer => prevTimer - 1);
+      }, 1000);
 
-  // useEffect(() => {
-  //   setStartTime(Date.now());
-  //   return () => {
-  //     const endTime = Date.now();
-  //     const timeSpent = endTime - startTime;
-  //     console.log(`Time spent on Window.jsx: ${timeSpent} milliseconds`);
-  //   }
-  // });
+      // Cleanup function to clear the interval when the component unmounts or when `timer` changes
+      return () => clearInterval(timerInterval);
+    }
+  }, [timer]);
+
+  const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
 
   const toggleComponent = () => {
     setCurrentComponentIndex((prevIndex) => (prevIndex + 1) % components.length);
@@ -42,7 +49,9 @@ const Window = () => {
       </div>
       <div className=" bg-gray-900 h-full">
         {components[currentComponentIndex].component}
+
       </div>
+      <HelpBot level={2} entryNumber={entryNumber} timer={timer} setTimer={setTimer} />
     </div>
   );
 };

diff --git a/app/src/components/blockchain/blockMine.jsx b/app/src/components/blockchain/blockMine.jsx
@@ -424,7 +424,7 @@ const BlockMine = ({ timer, setTimer, entryNumber }) => {
                         <div className='flex flex-col place-items-center'>
                             <p className='text-white italic text-3xl'>Details Correct...</p>
                             <p className='text-white italic text-sm'>Waiting for confirmation</p>
-                            <p className='text-white italic text-sm'>{percentage}</p>
+                            <p className='text-white italic text-lm'>{percentage} %</p>
                         </div>
                     </div>
 

diff --git a/app/src/components/login/Login.jsx b/app/src/components/login/Login.jsx
@@ -75,7 +75,7 @@ function Login() {
         console.log("Name:", name);
         console.log("Entry Number:", entryNumber);
 
-        window.location.href = `/intro2?entryNumber=${entryNumber}`
+        window.location.href = `/Level-1(1)?entryNumber=${entryNumber}`
 
     };
 

diff --git a/app/src/components/web/MandelbrotExplorer.jsx b/app/src/components/web/MandelbrotExplorer.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import AnimatedPage from '../AnimatedPage';
-import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const MandelbrotFractal = () => {
 
@@ -14,6 +14,8 @@ const MandelbrotFractal = () => {
   const [showMandelbrot, setShowMandelbrot] = useState(true); // Toggle for showing Mandelbrot fractal
   const [canvasSize, setCanvasSize] = useState({ width: window.innerWidth, height: window.innerHeight / 2 });
 
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
   const entryNumber = searchParams.get('entryNumber');
 
   useEffect(() => {

diff --git a/app/src/components/web/Rain.jsx b/app/src/components/web/Rain.jsx
@@ -1,9 +1,12 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { motion } from "framer-motion";
 
 const Rain = () => {
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
   const entryNumber = searchParams.get('entryNumber');
 
   const animations = {