aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css36
-rw-r--r--frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx72
-rw-r--r--frontend/src/pages/Maplist/Maplist.tsx14
-rw-r--r--frontend/src/pages/Maps/Maps.tsx150
-rw-r--r--frontend/src/pages/Rules/Rules.tsx4
5 files changed, 173 insertions, 103 deletions
diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
new file mode 100644
index 0000000..9821972
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
@@ -0,0 +1,36 @@
1.container {
2 display: flex;
3 margin-top: 42px;
4 margin-bottom: 16px;
5 margin-left: 48px;
6 gap: 2px;
7}
8
9.crumb {
10 display: flex;
11 align-items: center;
12 gap: 12px;
13 background-color: var(--color-block);
14 padding: 6px 16px;
15 transition: all 0.1s ease;
16 font-size: 22px;
17}
18
19.crumb:hover {
20 background-color: var(--color-panel);
21}
22
23.crumb.first {
24 border-top-left-radius: 1000px;
25 border-bottom-left-radius: 1000px;
26}
27
28.crumb.middle {
29 border-radius: 0px;
30}
31
32.crumb.last,
33.crumb.first.last {
34 border-top-right-radius: 1000px;
35 border-bottom-right-radius: 1000px;
36} \ No newline at end of file
diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
new file mode 100644
index 0000000..7c4af15
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
@@ -0,0 +1,72 @@
1import React from "react";
2import { Link, useLocation } from "react-router-dom";
3
4import styles from "./BreadcrumbNav.module.css";
5
6export interface Breadcrumb {
7 to: string;
8 label: string;
9};
10
11interface BreadcrumbNavProps {
12 chapter?: Breadcrumb;
13};
14
15const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({ chapter }) => {
16 const [breadcrumbs, setBreadcrumbs] = React.useState<Breadcrumb[]>([]);
17
18 const path = useLocation();
19
20 React.useEffect(() => {
21 let _paths = path.pathname.split("/").filter(Boolean);
22 console.log(_paths);
23 let _breadcrumbs: Breadcrumb[] = [];
24
25 if (_paths.length >= 2) {
26 _breadcrumbs.push({
27 to: "/games",
28 label: "Games List"
29 })
30
31 // To test 3 crumbs
32 // _breadcrumbs.push({
33 // to: "/games",
34 // label: "Test"
35 // })
36
37 if (_paths[0] == "maps") {
38 if (chapter) {
39 _breadcrumbs.push({
40 to: chapter.to,
41 label: chapter.label
42 });
43 }
44 }
45 }
46
47 setBreadcrumbs(_breadcrumbs);
48 }, [path])
49
50 return (
51 <nav className={styles.container}>
52 {breadcrumbs.map((crumb, i) => {
53 let _styles = ``;
54
55 if (i == 0) {
56 _styles += `${styles.first} `;
57 }
58
59 if (i + 1 == breadcrumbs.length) {
60 _styles += `${styles.last}`;
61 }
62
63 return <Link className={`${styles.crumb} ${_styles}`} key={i} to={crumb.to}>
64 <i className="triangle"></i>
65 <span className="translate-y-[-2px]">{crumb.label}</span>
66 </Link>
67 })}
68 </nav>
69 )
70}
71
72export default BreadcrumbNav;
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index a5649db..d8acdf0 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -7,6 +7,7 @@ import { Game } from "@customTypes/Game.ts";
7import { GameChapter, GamesChapters } from "@customTypes/Chapters.ts"; 7import { GameChapter, GamesChapters } from "@customTypes/Chapters.ts";
8 8
9import Map from "./Components/Map"; 9import Map from "./Components/Map";
10import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav";
10 11
11const Maplist: React.FC = () => { 12const Maplist: React.FC = () => {
12 const [game, setGame] = React.useState<Game | null>(null); 13 const [game, setGame] = React.useState<Game | null>(null);
@@ -89,24 +90,17 @@ const Maplist: React.FC = () => {
89 }, [gameChapters, location.search]); 90 }, [gameChapters, location.search]);
90 91
91 return ( 92 return (
92 <div className="px-12"> 93 <div className="">
93 <Helmet> 94 <Helmet>
94 <title>LPHUB | Maplist</title> 95 <title>LPHUB | Maplist</title>
95 </Helmet> 96 </Helmet>
96 97
97 <section className="my-5"> 98 <BreadcrumbNav />
98 <Link to="/games">
99 <button className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-barlow-semicondensed-regular transition-colors duration-100 hover:bg-surface2 flex items-center px-2">
100 <i className="triangle mr-2"></i>
101 <span className="px-2">Games List</span>
102 </button>
103 </Link>
104 </section>
105 99
106 {load ? ( 100 {load ? (
107 <div></div> 101 <div></div>
108 ) : ( 102 ) : (
109 <section> 103 <section className="px-12">
110 <h1 className="text-3xl sm:text-6xl my-0"> 104 <h1 className="text-3xl sm:text-6xl my-0">
111 {game?.name} 105 {game?.name}
112 </h1> 106 </h1>
diff --git a/frontend/src/pages/Maps/Maps.tsx b/frontend/src/pages/Maps/Maps.tsx
index 75e3635..03de289 100644
--- a/frontend/src/pages/Maps/Maps.tsx
+++ b/frontend/src/pages/Maps/Maps.tsx
@@ -9,6 +9,7 @@ import Discussions from "@components/Discussions.tsx";
9import ModMenu from "@components/ModMenu.tsx"; 9import ModMenu from "@components/ModMenu.tsx";
10import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map.ts"; 10import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map.ts";
11import { API } from "@api/Api.ts"; 11import { API } from "@api/Api.ts";
12import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav.tsx";
12 13
13interface MapProps { 14interface MapProps {
14 token?: string; 15 token?: string;
@@ -64,37 +65,28 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
64 // loading placeholder 65 // loading placeholder
65 return ( 66 return (
66 <> 67 <>
67 <main className="*:text-foreground relative left-0 w-[calc(100%-20rem)] min-h-screen p-4 sm:p-8"> 68 <div className="">
68 <section id="section1" className="summary1"> 69 <BreadcrumbNav />
69 <div> 70
70 <Link to="/games"> 71 <div className="px-12">
71 <button 72 <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
72 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" 73 <button className="nav-button">
73 > 74 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
74 <i className="triangle"></i> 75 <span>Summary</span>
75 <span className="px-2">Games List</span> 76 </button>
76 </button> 77 <button className="nav-button">
77 </Link> 78 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
78 </div> 79 <span>Leaderboards</span>
79 </section> 80 </button>
80 81 <button className="nav-button">
81 <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap"> 82 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
82 <button className="nav-button"> 83 <span>Discussions</span>
83 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" /> 84 </button>
84 <span>Summary</span> 85 </section>
85 </button>
86 <button className="nav-button">
87 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
88 <span>Leaderboards</span>
89 </button>
90 <button className="nav-button">
91 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
92 <span>Discussions</span>
93 </button>
94 </section>
95 86
96 <section id="section6" className="summary2 mt-4" /> 87 <section id="section6" className="summary2 mt-4" />
97 </main> 88 </div>
89 </div>
98 </> 90 </>
99 ); 91 );
100 } 92 }
@@ -117,67 +109,43 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
117 <div id="background-image"> 109 <div id="background-image">
118 <img src={mapSummaryData.map.image} alt="" /> 110 <img src={mapSummaryData.map.image} alt="" />
119 </div> 111 </div>
120 <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"> 112 <div className="">
121 <section id="section1" className="summary1"> 113 <BreadcrumbNav chapter={{ label: mapSummaryData.map.chapter_name, to: `/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}` }} />
122 <div> 114 <div className="px-12">
123 <Link to="/games"> 115 <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
124 <button 116 <button className="nav-button" onClick={() => setNavState(0)}>
125 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" 117 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
126 > 118 <span>Summary</span>
127 <i className="triangle"></i> 119 </button>
128 <span className="px-2">Games List</span> 120 <button className="nav-button" onClick={() => setNavState(1)}>
129 </button> 121 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
130 </Link> 122 <span>Leaderboards</span>
131 <Link 123 </button>
132 to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`} 124 <button className="nav-button" onClick={() => setNavState(2)}>
133 > 125 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
134 <button 126 <span>Discussions</span>
135 className="nav-button ml-2" 127 </button>
136 > 128 </section>
137 <i className="triangle"></i> 129
138 <span className="px-2">{mapSummaryData.map.chapter_name}</span> 130 {navState === 0 && (
139 </button> 131 <Summary
140 </Link> 132 selectedRun={selectedRun}
141 <br /> 133 setSelectedRun={setSelectedRun}
142 <span className="block mt-2 text-lg sm:text-xl text-foreground"> 134 data={mapSummaryData}
143 <b>{mapSummaryData.map.map_name}</b> 135 />
144 </span> 136 )}
145 </div> 137 {navState === 1 && <Leaderboards mapID={mapID} />}
146 </section> 138 {navState === 2 && (
147 139 <Discussions
148 <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap"> 140 data={mapDiscussionsData}
149 <button className="nav-button" onClick={() => setNavState(0)}> 141 token={token}
150 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" /> 142 isModerator={isModerator}
151 <span>Summary</span> 143 mapID={mapID}
152 </button> 144 onRefresh={() => _fetch_map_discussions()}
153 <button className="nav-button" onClick={() => setNavState(1)}> 145 />
154 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" /> 146 )}
155 <span>Leaderboards</span> 147 </div>
156 </button> 148 </div>
157 <button className="nav-button" onClick={() => setNavState(2)}>
158 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
159 <span>Discussions</span>
160 </button>
161 </section>
162
163 {navState === 0 && (
164 <Summary
165 selectedRun={selectedRun}
166 setSelectedRun={setSelectedRun}
167 data={mapSummaryData}
168 />
169 )}
170 {navState === 1 && <Leaderboards mapID={mapID} />}
171 {navState === 2 && (
172 <Discussions
173 data={mapDiscussionsData}
174 token={token}
175 isModerator={isModerator}
176 mapID={mapID}
177 onRefresh={() => _fetch_map_discussions()}
178 />
179 )}
180 </main>
181 </> 149 </>
182 ); 150 );
183}; 151};
diff --git a/frontend/src/pages/Rules/Rules.tsx b/frontend/src/pages/Rules/Rules.tsx
index 9c7885c..20d301c 100644
--- a/frontend/src/pages/Rules/Rules.tsx
+++ b/frontend/src/pages/Rules/Rules.tsx
@@ -25,12 +25,12 @@ const Rules: React.FC = () => {
25 }, []); 25 }, []);
26 26
27 return ( 27 return (
28 <main className="ml-16 p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none"> 28 <div className="pl-8 pt-2">
29 <Helmet> 29 <Helmet>
30 <title>LPHUB | Rules</title> 30 <title>LPHUB | Rules</title>
31 </Helmet> 31 </Helmet>
32 <ReactMarkdown>{rulesText}</ReactMarkdown> 32 <ReactMarkdown>{rulesText}</ReactMarkdown>
33 </main> 33 </div>
34 ); 34 );
35}; 35};
36 36
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 16:49:38 +0000