1 files changed, 120 insertions, 46 deletions

diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..50fe03b 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,28 +1,32 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
-
-import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
-import Summary from '@components/Summary';
-import Leaderboards from '@components/Leaderboards';
-import Discussions from '@components/Discussions';
-import ModMenu from '@components/ModMenu';
-import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
-import { API } from '@api/Api';
-import "@css/Maps.css";
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+import { PortalIcon, FlagIcon, ChatIcon } from "../images/Images";
+import Summary from "@components/Summary";
+import Leaderboards from "@components/Leaderboards";
+import Discussions from "@components/Discussions";
+import ModMenu from "@components/ModMenu";
+import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
+import { API } from "@api/Api";
 
 interface MapProps {
   token?: string;
   isModerator: boolean;
-};
+}
 
 const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
-
   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 [mapSummaryData, setMapSummaryData] = React.useState<
+    MapSummary | undefined
+  >(undefined);
+  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<
+    MapLeaderboard | undefined
+  >(undefined);
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<
+    MapDiscussions | undefined
+  >(undefined);
 
   const [navState, setNavState] = React.useState<number>(0);
 
@@ -30,45 +34,66 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
   const mapID = location.pathname.split("/")[2];
 
-  const _fetch_map_summary = async () => {
+  const _fetch_map_summary = React.useCallback(async () => {
     const mapSummary = await API.get_map_summary(mapID);
     setMapSummaryData(mapSummary);
-  };
+  }, [mapID]);
 
-  const _fetch_map_leaderboards = async () => {
+  const _fetch_map_leaderboards = React.useCallback(async () => {
     const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
     setMapLeaderboardData(mapLeaderboards);
-  };
+  }, [mapID]);
 
-  const _fetch_map_discussions = async () => {
+  const _fetch_map_discussions = React.useCallback(async () => {
     const mapDiscussions = await API.get_map_discussions(mapID);
     setMapDiscussionsData(mapDiscussions);
-  };
+  }, [mapID]);
 
   React.useEffect(() => {
     _fetch_map_summary();
     _fetch_map_leaderboards();
     _fetch_map_discussions();
-  }, [mapID]);
+  }, [
+    mapID,
+    _fetch_map_discussions,
+    _fetch_map_leaderboards,
+    _fetch_map_summary,
+  ]);
 
   if (!mapSummaryData) {
     // loading placeholder
     return (
       <>
-        <main>
-          <section id='section1' className='summary1'>
+        <main className="*:text-foreground relative left-0 w-[calc(100%-20rem)] min-h-screen p-4 sm:p-8">
+          <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>
+              <Link to="/games">
+                <button
+                  className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
+                >
+                  <i className="triangle"></i>
+                  <span className="px-2">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 id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
+            <button className="nav-button">
+              <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Summary</span>
+            </button>
+            <button className="nav-button">
+              <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button">
+              <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Discussions</span>
+            </button>
           </section>
 
-          <section id='section6' className='summary2' />
+          <section id="section6" className="summary2 mt-4" />
         </main>
       </>
     );
@@ -80,29 +105,78 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
         <title>LPHUB | {mapSummaryData.map.map_name}</title>
         <meta name="description" content={mapSummaryData.map.map_name} />
       </Helmet>
-      {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
-
-      <div id='background-image'>
+      {isModerator && (
+        <ModMenu
+          token={token}
+          data={mapSummaryData}
+          selectedRun={selectedRun}
+          mapID={mapID}
+        />
+      )}
+
+      <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
-      <main>
-        <section id='section1' className='summary1'>
+      <main className="relative left-0 w-full sm:ml-80 sm:w-[calc(100%-20rem)] min-h-screen max-h-screen overflow-y-auto p-4 sm:p-8 scrollbar-thin scrollbar-track-surface scrollbar-thumb-muted hover:scrollbar-thumb-surface1">
+        <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 ? "2" : "1"}?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>
+            <Link to="/games">
+              <button
+                className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
+              >
+                <i className="triangle"></i>
+                <span className="px-2">Games List</span>
+              </button>
+            </Link>
+            <Link
+              to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}
+            >
+              <button
+                className="nav-button ml-2"
+              >
+                <i className="triangle"></i>
+                <span className="px-2">{mapSummaryData.map.chapter_name}</span>
+              </button>
+            </Link>
+            <br />
+            <span className="block mt-2 text-lg sm:text-xl text-foreground">
+              <b>{mapSummaryData.map.map_name}</b>
+            </span>
           </div>
         </section>
 
-        <section id='section2' className='summary1'>
-          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
-          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+        <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
+          <button className="nav-button" onClick={() => setNavState(0)}>
+            <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+            <span>Summary</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(1)}>
+            <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+            <span>Leaderboards</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(2)}>
+            <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+            <span>Discussions</span>
+          </button>
         </section>
 
-        {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
+        {navState === 0 && (
+          <Summary
+            selectedRun={selectedRun}
+            setSelectedRun={setSelectedRun}
+            data={mapSummaryData}
+          />
+        )}
         {navState === 1 && <Leaderboards mapID={mapID} />}
-        {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
+        {navState === 2 && (
+          <Discussions
+            data={mapDiscussionsData}
+            token={token}
+            isModerator={isModerator}
+            mapID={mapID}
+            onRefresh={() => _fetch_map_discussions()}
+          />
+        )}
       </main>
     </>
   );