aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages/Maps/Maps.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages/Maps/Maps.tsx')
-rw-r--r--frontend/src/pages/Maps/Maps.tsx150
1 files changed, 59 insertions, 91 deletions
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};
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 16:49:31 +0000