From c04bc9a36ebfcdf6d8e2db8a6cdeb44062b66bec Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Tue, 19 Aug 2025 13:23:17 +0200
Subject: organised pages, started work on theme

---
 frontend/src/pages/Maps/Maps.tsx | 185 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 frontend/src/pages/Maps/Maps.tsx

(limited to 'frontend/src/pages/Maps/Maps.tsx')

diff --git a/frontend/src/pages/Maps/Maps.tsx b/frontend/src/pages/Maps/Maps.tsx
new file mode 100644
index 0000000..75e3635
--- /dev/null
+++ b/frontend/src/pages/Maps/Maps.tsx
@@ -0,0 +1,185 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Helmet } from "react-helmet";
+
+import { PortalIcon, FlagIcon, ChatIcon } from "../../images/Images.tsx";
+import Summary from "@components/Summary.tsx";
+import Leaderboards from "@components/Leaderboards.tsx";
+import Discussions from "@components/Discussions.tsx";
+import ModMenu from "@components/ModMenu.tsx";
+import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map.ts";
+import { API } from "@api/Api.ts";
+
+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 [navState, setNavState] = React.useState<number>(0);
+
+  const location = useLocation();
+
+  const mapID = location.pathname.split("/")[2];
+
+  const _fetch_map_summary = React.useCallback(async () => {
+    const mapSummary = await API.get_map_summary(mapID);
+    setMapSummaryData(mapSummary);
+  }, [mapID]);
+
+  const _fetch_map_leaderboards = React.useCallback(async () => {
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
+    setMapLeaderboardData(mapLeaderboards);
+  }, [mapID]);
+
+  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,
+    _fetch_map_discussions,
+    _fetch_map_leaderboards,
+    _fetch_map_summary,
+  ]);
+
+  if (!mapSummaryData) {
+    // loading placeholder
+    return (
+      <>
+        <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 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 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 mt-4" />
+        </main>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <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">
+        <img src={mapSummaryData.map.image} alt="" />
+      </div>
+      <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 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 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 === 1 && <Leaderboards mapID={mapID} />}
+        {navState === 2 && (
+          <Discussions
+            data={mapDiscussionsData}
+            token={token}
+            isModerator={isModerator}
+            mapID={mapID}
+            onRefresh={() => _fetch_map_discussions()}
+          />
+        )}
+      </main>
+    </>
+  );
+};
+
+export default Maps;
-- 
cgit v1.2.3