refactor: upload run form, lots of random shit

5 files changed, 72 insertions, 24 deletions

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
new file mode 100644
index 0000000..886808b
--- /dev/null
+++ b/frontend/src/pages/About.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import '../css/About.css';
+
+const About: React.FC = () => {
+
+    const [aboutText, setAboutText] = React.useState<string>("");
+
+    React.useEffect(() => {
+        const fetchReadme = async () => {
+            try {
+                const response = await fetch(
+                    'https://raw.githubusercontent.com/pektezol/leastportalshub/main/README.md'
+                );
+                if (!response.ok) {
+                    throw new Error('Failed to fetch README');
+                }
+                const readmeText = await response.text();
+                setAboutText(readmeText);
+            } catch (error) {
+                console.error('Error fetching README:', error);
+            }
+        };
+        fetchReadme();
+    }, []);
+
+
+    return (
+        <div id="about">
+            <ReactMarkdown>{aboutText}</ReactMarkdown>
+        </div>
+    );
+};
+
+export default About;
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index eb7177f..ea136c2 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -2,16 +2,13 @@ import React from 'react';
 
 import GameEntry from '../components/GameEntry';
 import { Game } from '../types/Game';
-import { API } from '../api/Api';
 import "../css/Maps.css"
 
-const Games: React.FC = () => {
-    const [games, setGames] = React.useState<Game[]>([]);
+interface GamesProps {
+    games: Game[];
+}
 
-    const _fetch_games = async () => {
-      const games = await API.get_games();
-      setGames(games);
-    };
+const Games: React.FC<GamesProps> = ({ games }) => {
 
     const _page_load = () => {
       const loaders = document.querySelectorAll(".loader");
@@ -21,7 +18,9 @@ const Games: React.FC = () => {
     }
 
     React.useEffect(() => {
-        _fetch_games();
+        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
+            game.innerHTML = "";
+        });
         _page_load();
     }, []);
 
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 62a8f1c..d4f3095 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -6,6 +6,7 @@ const Homepage: React.FC = () => {
     return (
         <main>
             <section>
+                <p/>
                 <h1><img src={PortalIcon} alt="lphub"/>Welcome to Least Portals Hub!</h1>
                 <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
                 <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 3bc5f74..5d0c852 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -73,14 +73,9 @@ const Maplist: React.FC = () => {
       setNumChapters(games_chapters.chapters.length);
     }
 
-    const _fetch_maps = async () => {
-      const maps = await API.get_games_maps(gameId.toString());
-      setLoad(true);
-    }
-
     _fetch_game();
     _fetch_game_chapters();
-    _fetch_maps();
+    setLoad(true);
   }, []);
 
   useEffect(() => {
@@ -97,7 +92,7 @@ const Maplist: React.FC = () => {
         <Link to="/games">
           <button className="nav-button" style={{ borderRadius: "20px" }}>
             <i className="triangle"></i>
-            <span>Games list</span>
+            <span>Games List</span>
           </button>
         </Link>
       </section>
@@ -162,7 +157,7 @@ const Maplist: React.FC = () => {
                       </div>
                     </div>
                     <div className="difficulty-bar">
-                      <span>Difficulty:</span>
+                      {/* <span>Difficulty:</span> */}
                       <div className={map.difficulty == 0 ? "one" : map.difficulty == 1 ? "two" : map.difficulty == 2 ? "three" : map.difficulty == 3 ? "four" : map.difficulty == 4 ? "five" : "one"}>
                         <div className="difficulty-point"></div>
                         <div className="difficulty-point"></div>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index 707d865..5548650 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -7,21 +7,24 @@ import Leaderboards from '../components/Leaderboards';
 import Discussions from '../components/Discussions';
 import ModMenu from '../components/ModMenu';
 import { MapDiscussions, MapLeaderboard, MapSummary } from '../types/Map';
+import { UserProfile } from '../types/Profile';
 import { API } from '../api/Api';
 import "../css/Maps.css";
+import Loading from '../components/Loading';
 
 interface MapProps {
+  profile?: UserProfile;
   isModerator: boolean;
+  onUploadRun: (mapID: number) => void;
 };
 
-const Maps: React.FC<MapProps> = ({ isModerator }) => {
+const Maps: React.FC<MapProps> = ({ profile, isModerator, onUploadRun }) => {
 
   const [selectedRun, setSelectedRun] = React.useState<number>(0);
 
   const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
   const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
-  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined)
-
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined);
 
   const [navState, setNavState] = React.useState<number>(0);
 
@@ -51,8 +54,23 @@ const Maps: React.FC<MapProps> = ({ isModerator }) => {
   }, []);
 
   if (!mapSummaryData) {
+    // loading placeholder
     return (
-      <></>
+      <main>
+        <section id='section1' className='summary1'>
+          <div>
+            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+          </div>
+        </section>
+
+        <section id='section2' className='summary1'>
+          <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
+          <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+          <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+        </section>
+
+        <Loading />
+      </main>
     );
   }
 
@@ -66,12 +84,11 @@ const Maps: React.FC<MapProps> = ({ isModerator }) => {
       <main>
         <section id='section1' className='summary1'>
           <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games list</span></button></Link>
-            <Link to={`/games/${!mapSummaryData.map.is_coop ? "1" : "2"}?chapter=${mapSummaryData.map.chapter_name}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
+            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+            <Link to={`/games/${!mapSummaryData.map.is_coop ? "1" : "2"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
             <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+            {profile && <button onClick={() => onUploadRun(mapSummaryData.map.id)}>Submit a Run</button>}
           </div>
-
-
         </section>
 
         <section id='section2' className='summary1'>