Fixed some inconsistant styles and fixed category queryparam in maplist pagecss

8 files changed, 64 insertions, 24 deletions

diff --git a/frontend/src/pages/About/About.tsx b/frontend/src/pages/About/About.tsx
index 0db4bf2..0db6c8a 100644
--- a/frontend/src/pages/About/About.tsx
+++ b/frontend/src/pages/About/About.tsx
@@ -24,7 +24,7 @@ const About: React.FC = () => {
   }, []);
 
   return (
-    <div>
+    <div className="px-12 pt-6">
       <Helmet>
         <title>LPHUB | About</title>
       </Helmet>
diff --git a/frontend/src/pages/Games/Games.tsx b/frontend/src/pages/Games/Games.tsx
index ea46733..2f084f3 100644
--- a/frontend/src/pages/Games/Games.tsx
+++ b/frontend/src/pages/Games/Games.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet";
 
 import GameEntry from "@components/GameEntry.tsx";
 import { Game } from "@customTypes/Game.ts";
+import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav";
 
 interface GamesProps {
   games: Game[];
@@ -10,11 +11,12 @@ interface GamesProps {
 
 const Games: React.FC<GamesProps> = ({ games }) => {
   return (
-    <div className="py-12 px-12 w-full">
+    <div>
       <Helmet>
         <title>LPHUB | Games</title>
       </Helmet>
-      <section>
+
+      <section className="px-12 pt-8 w-full">
         <h1 className="text-3xl mb-8">Games</h1>
         <div className="flex flex-col w-full">
           {games.map((game, index) => (
diff --git a/frontend/src/pages/Home/Homepage.tsx b/frontend/src/pages/Home/Homepage.tsx
index e4c2261..9bbf768 100644
--- a/frontend/src/pages/Home/Homepage.tsx
+++ b/frontend/src/pages/Home/Homepage.tsx
@@ -3,11 +3,11 @@ import { Helmet } from "react-helmet";
 
 const Homepage: React.FC = () => {
   return (
-    <div>
+    <div className="px-12 pt-8">
       <Helmet>
         <title>LPHUB | Homepage</title>
       </Helmet>
-      <section className="p-8">
+      <section>
         <p />
         <h1 className="text-5xl font-barlow-condensed-bold mb-6 text-primary">Welcome to Least Portals Hub!</h1>
         <p className="text-lg mb-4 leading-relaxed">
diff --git a/frontend/src/pages/Maplist/Components/Map.tsx b/frontend/src/pages/Maplist/Components/Map.tsx
index 5451830..503c143 100644
--- a/frontend/src/pages/Maplist/Components/Map.tsx
+++ b/frontend/src/pages/Maplist/Components/Map.tsx
@@ -19,7 +19,7 @@ const Map: React.FC<MapProps> = ({ map, catNum }) => {
                     className="flex h-40 sm:h-48 bg-cover relative"
                     style={{ backgroundImage: `url(${map.image})` }}
                 >
-                    <div className="backdrop-blur-sm w-full flex items-center justify-center">
+                    <div className="backdrop-blur-[4px] w-full flex items-center justify-center">
                         <span className="text-3xl sm:text-5xl font-barlow-semicondensed-semibold text-white mr-1.5">
                             {map.is_disabled
                                 ? map.category_portals[0].portal_count
@@ -28,7 +28,11 @@ const Map: React.FC<MapProps> = ({ map, catNum }) => {
                                 )?.portal_count}
                         </span>
                         <span className="text-2xl sm:text-4xl font-barlow-semicondensed-regular text-white">
-                            portals
+                            {map.is_disabled
+                                ? map.category_portals[0].portal_count == 1 ? "portal" : "portals"
+                                : map.category_portals.find(
+                                    obj => obj.category.id === catNum + 1
+                                )?.portal_count == 1 ? "portal" : "portals"}
                         </span>
                     </div>
                 </div>
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index d8acdf0..0b64619 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -28,7 +28,7 @@ const Maplist: React.FC = () => {
 
   function _update_currently_selected(catNum2: number) {
     setCurrentlySelected(catNum2);
-    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    // navigate("/games/" + game?.id + "?cat=" + catNum2);
     setHasClicked(true);
   }
 
@@ -54,11 +54,16 @@ const Maplist: React.FC = () => {
     // location query params
     const queryParams = new URLSearchParams(location.search);
     if (queryParams.get("chapter")) {
-      let cat = parseFloat(queryParams.get("chapter") || "");
+      let chapter = parseFloat(queryParams.get("chapter") || "");
       if (gameId === 2) {
-        cat += 10;
+        chapter += 10;
       }
-      _fetch_chapters(cat.toString());
+      _fetch_chapters(chapter.toString());
+    }
+
+    if (queryParams.get("cat")) {
+      let cat = parseFloat(queryParams.get("cat") || "");
+      setCatNum(cat - 1);
     }
 
     const _fetch_game = async () => {
@@ -80,7 +85,7 @@ const Maplist: React.FC = () => {
     setLoad(true);
     _fetch_game();
     _fetch_game_chapters();
-  }, [location.search]);
+  }, [location]);
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
@@ -145,7 +150,7 @@ const Maplist: React.FC = () => {
           </div>
 
           <div>
-            <section>
+            <section className="relative">
               <div>
                 <span className="text-lg sm:text-lg translate-y-1.5 block mt-2.5 text-foreground">
                   {curChapter?.chapter.name.split(" - ")[0]}
@@ -155,14 +160,14 @@ const Maplist: React.FC = () => {
                 onClick={_handle_dropdown_click}
                 className="cursor-pointer select-none flex w-fit items-center"
               >
-                <span className="text-foreground text-base sm:text-2xl">
+                <span className="sm:text-4xl font-barlow-semicondensed-semibold">
                   {curChapter?.chapter.name.split(" - ")[1]}
                 </span>
                 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
               </div>
 
               <div
-                className={`absolute z-[1000] bg-panel rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
+                className={`absolute z-10 bg-panel rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
                   }`}
               >
                 {gameChapters?.chapters.map((chapter, i) => {
diff --git a/frontend/src/pages/Maps/Maps.module.css b/frontend/src/pages/Maps/Maps.module.css
new file mode 100644
index 0000000..5c2b414
--- /dev/null
+++ b/frontend/src/pages/Maps/Maps.module.css
@@ -0,0 +1,22 @@
+.button-nav {
+    display: flex;
+    flex: 1;
+    gap: 12px;
+
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    background-color: var(--color-block);
+    transition: all 0.1s ease;
+    padding: 8px 0px;
+    font-size: 28px;
+}
+
+.button-nav:hover {
+    background-color: var(--color-panel);
+}
+
+.button-nav>span {
+    transform: translateY(-2px);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Maps/Maps.tsx b/frontend/src/pages/Maps/Maps.tsx
index 03de289..3989b56 100644
--- a/frontend/src/pages/Maps/Maps.tsx
+++ b/frontend/src/pages/Maps/Maps.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
+import styles from "./Maps.module.css";
+
 import { PortalIcon, FlagIcon, ChatIcon } from "../../images/Images.tsx";
 import Summary from "@components/Summary.tsx";
 import Leaderboards from "@components/Leaderboards.tsx";
@@ -63,22 +65,25 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
   if (!mapSummaryData) {
     // loading placeholder
+    // TODO: Don't do this
     return (
       <>
         <div className="">
           <BreadcrumbNav />
 
           <div className="px-12">
+            <h1>Loading...</h1>
+
             <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Summary</span>
               </button>
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Leaderboards</span>
               </button>
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Discussions</span>
               </button>
@@ -109,19 +114,21 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
       <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
-      <div className="">
+      <div>
         <BreadcrumbNav chapter={{ label: mapSummaryData.map.chapter_name, to: `/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}` }} />
         <div className="px-12">
-          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-            <button className="nav-button" onClick={() => setNavState(0)}>
+          <h1>{mapSummaryData.map.map_name}</h1>
+
+          <section className="mt-2 flex w-full gap-[2px] rounded-[2000px] overflow-clip">
+            <button className={styles["button-nav"]} 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)}>
+            <button className={styles["button-nav"]} 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)}>
+            <button className={styles["button-nav"]} onClick={() => setNavState(2)}>
               <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
               <span>Discussions</span>
             </button>
diff --git a/frontend/src/pages/Rules/Rules.tsx b/frontend/src/pages/Rules/Rules.tsx
index 20d301c..a94118a 100644
--- a/frontend/src/pages/Rules/Rules.tsx
+++ b/frontend/src/pages/Rules/Rules.tsx
@@ -25,7 +25,7 @@ const Rules: React.FC = () => {
   }, []);
 
   return (
-    <div className="pl-8 pt-2">
+    <div className="px-12 pt-6">
       <Helmet>
         <title>LPHUB | Rules</title>
       </Helmet>