aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages/Maplist/Maplist.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages/Maplist/Maplist.tsx')
-rw-r--r--frontend/src/pages/Maplist/Maplist.tsx267
1 files changed, 132 insertions, 135 deletions
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index 572eb27..8d9c14a 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -87,162 +87,159 @@ const Maplist: React.FC = () => {
87 }, [gameChapters, location.search]); 87 }, [gameChapters, location.search]);
88 88
89 return ( 89 return (
90 <main className="*:text-foreground w-[calc(100vw-80px)] relative left-0 ml-20 min-h-screen p-4 sm:p-8"> 90 <div>
91 <Helmet> 91 <Helmet>
92 <title>LPHUB | Maplist</title> 92 <title>LPHUB | Maplist</title>
93 </Helmet> 93 </Helmet>
94 94
95 <section className="mt-5"> 95 <section className="mt-5">
96 <Link to="/games"> 96 <Link to="/games">
97 <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"> 97 <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">
98 <i className="triangle mr-2"></i> 98 <i className="triangle mr-2"></i>
99 <span className="px-2">Games List</span> 99 <span className="px-2">Games List</span>
100 </button> 100 </button>
101 </Link> 101 </Link>
102 </section> 102 </section>
103 103
104 {load ? ( 104 {load ? (
105 <div></div> 105 <div></div>
106 ) : ( 106 ) : (
107 <section>
108 <h1 className="font-[--font-barlow-condensed-bold] text-3xl sm:text-6xl my-0 text-foreground">
109 {game?.name}
110 </h1>
111
112 <div
113 className="text-center rounded-3xl overflow-hidden bg-cover bg-[25%] mt-3 relative"
114 style={{ backgroundImage: `url(${game?.image})` }}
115 >
116 <div className="backdrop-blur-sm flex flex-col w-full">
117 <div className="h-full flex flex-col justify-center items-center py-6">
118 <h2 className="my-5 font-[--font-barlow-semicondensed-semibold] text-4xl sm:text-8xl text-foreground">
119 {
120 game?.category_portals.find(
121 obj => obj.category.id === catNum + 1
122 )?.portal_count
123 }
124 </h2>
125 <h3 className="font-[--font-barlow-semicondensed-regular] mx-2.5 text-2xl sm:text-4xl my-0 text-foreground">
126 portals
127 </h3>
128 </div>
129
130 <div className="flex h-12 bg-surface gap-0.5">
131 {game?.category_portals.map((cat, index) => (
132 <button
133 key={index}
134 className={`border-0 text-foreground font-[--font-barlow-semicondensed-regular] text-sm sm:text-xl cursor-pointer transition-all duration-100 w-full ${
135 currentlySelected === cat.category.id ||
136 (cat.category.id - 1 === catNum && !hasClicked)
137 ? "bg-surface"
138 : "bg-surface1 hover:bg-surface"
139 }`}
140 onClick={() => {
141 setCatNum(cat.category.id - 1);
142 _update_currently_selected(cat.category.id);
143 }}
144 >
145 <span className="truncate">{cat.category.name}</span>
146 </button>
147 ))}
148 </div>
149 </div>
150 </div>
151
152 <div>
153 <section> 107 <section>
154 <div> 108 <h1 className="font-[--font-barlow-condensed-bold] text-3xl sm:text-6xl my-0 text-foreground">
155 <span className="text-lg sm:text-lg translate-y-1.5 block mt-2.5 text-foreground"> 109 {game?.name}
156 {curChapter?.chapter.name.split(" - ")[0]} 110 </h1>
157 </span> 111
158 </div>
159 <div
160 onClick={_handle_dropdown_click}
161 className="cursor-pointer select-none flex w-fit items-center"
162 >
163 <span className="text-foreground text-base sm:text-2xl">
164 {curChapter?.chapter.name.split(" - ")[1]}
165 </span>
166 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
167 </div>
168 \
169 <div 112 <div
170 className={`absolute z-[1000] bg-surface1 rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${ 113 className="text-center rounded-3xl overflow-hidden bg-cover bg-[25%] mt-3 relative"
171 dropdownActive === "none" ? "hidden" : "block" 114 style={{ backgroundImage: `url(${game?.image})` }}
172 }`}
173 > 115 >
174 {gameChapters?.chapters.map((chapter, i) => { 116 <div className="backdrop-blur-sm flex flex-col w-full">
175 return ( 117 <div className="h-full flex flex-col justify-center items-center py-6">
176 <div 118 <h2 className="my-5 font-[--font-barlow-semicondensed-semibold] text-4xl sm:text-8xl text-foreground">
177 key={i} 119 {
178 className="cursor-pointer text-base sm:text-xl rounded-[2000px] p-1 hover:bg-surface text-foreground" 120 game?.category_portals.find(
179 onClick={() => { 121 obj => obj.category.id === catNum + 1
180 _fetch_chapters(chapter.id.toString()); 122 )?.portal_count
181 _handle_dropdown_click(); 123 }
182 }} 124 </h2>
183 > 125 <h3 className="font-[--font-barlow-semicondensed-regular] mx-2.5 text-2xl sm:text-4xl my-0 text-foreground">
184 {chapter.name} 126 portals
127 </h3>
128 </div>
129
130 <div className="flex h-12 bg-surface gap-0.5">
131 {game?.category_portals.map((cat, index) => (
132 <button
133 key={index}
134 className={`border-0 text-foreground font-[--font-barlow-semicondensed-regular] text-sm sm:text-xl cursor-pointer transition-all duration-100 w-full ${currentlySelected === cat.category.id ||
135 (cat.category.id - 1 === catNum && !hasClicked)
136 ? "bg-surface"
137 : "bg-surface1 hover:bg-surface"
138 }`}
139 onClick={() => {
140 setCatNum(cat.category.id - 1);
141 _update_currently_selected(cat.category.id);
142 }}
143 >
144 <span className="truncate">{cat.category.name}</span>
145 </button>
146 ))}
147 </div>
185 </div> 148 </div>
186 );
187 })}
188 </div> 149 </div>
189 </section>
190 150
191 <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-5"> 151 <div>
192 {curChapter?.maps.map((map, i) => { 152 <section>
193 return ( 153 <div>
194 <div key={i} className="bg-surface rounded-3xl overflow-hidden"> 154 <span className="text-lg sm:text-lg translate-y-1.5 block mt-2.5 text-foreground">
195 <Link to={`/maps/${map.id}`}> 155 {curChapter?.chapter.name.split(" - ")[0]}
196 <span className="text-center text-base sm:text-xl w-full block my-1.5 text-foreground truncate"> 156 </span>
197 {map.name} 157 </div>
198 </span>
199 <div 158 <div
200 className="flex h-40 sm:h-48 bg-cover relative" 159 onClick={_handle_dropdown_click}
201 style={{ backgroundImage: `url(${map.image})` }} 160 className="cursor-pointer select-none flex w-fit items-center"
202 > 161 >
203 <div className="backdrop-blur-sm w-full flex items-center justify-center"> 162 <span className="text-foreground text-base sm:text-2xl">
204 <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-semibold] text-white mr-1.5"> 163 {curChapter?.chapter.name.split(" - ")[1]}
205 {map.is_disabled
206 ? map.category_portals[0].portal_count
207 : map.category_portals.find(
208 obj => obj.category.id === catNum + 1
209 )?.portal_count}
210 </span> 164 </span>
211 <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-regular] text-white"> 165 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
212 portals
213 </span>
214 </div>
215 </div> 166 </div>
216 167 \
217 <div className="flex mx-2.5 my-4"> 168 <div
218 <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px"> 169 className={`absolute z-[1000] bg-surface1 rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
219 {[1, 2, 3, 4, 5].map((point) => (
220 <div
221 key={point}
222 className={`flex h-0.5 w-full rounded-3xl ${
223 point <= (map.difficulty + 1)
224 ? map.difficulty === 0
225 ? "bg-green-500"
226 : map.difficulty === 1 || map.difficulty === 2
227 ? "bg-lime-500"
228 : map.difficulty === 3
229 ? "bg-red-400"
230 : "bg-red-600"
231 : "bg-surface1"
232 }`} 170 }`}
233 /> 171 >
234 ))} 172 {gameChapters?.chapters.map((chapter, i) => {
235 </div> 173 return (
174 <div
175 key={i}
176 className="cursor-pointer text-base sm:text-xl rounded-[2000px] p-1 hover:bg-surface text-foreground"
177 onClick={() => {
178 _fetch_chapters(chapter.id.toString());
179 _handle_dropdown_click();
180 }}
181 >
182 {chapter.name}
183 </div>
184 );
185 })}
236 </div> 186 </div>
237 </Link> 187 </section>
238 </div> 188
239 ); 189 <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-5">
240 })} 190 {curChapter?.maps.map((map, i) => {
191 return (
192 <div key={i} className="bg-surface rounded-3xl overflow-hidden">
193 <Link to={`/maps/${map.id}`}>
194 <span className="text-center text-base sm:text-xl w-full block my-1.5 text-foreground truncate">
195 {map.name}
196 </span>
197 <div
198 className="flex h-40 sm:h-48 bg-cover relative"
199 style={{ backgroundImage: `url(${map.image})` }}
200 >
201 <div className="backdrop-blur-sm w-full flex items-center justify-center">
202 <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-semibold] text-white mr-1.5">
203 {map.is_disabled
204 ? map.category_portals[0].portal_count
205 : map.category_portals.find(
206 obj => obj.category.id === catNum + 1
207 )?.portal_count}
208 </span>
209 <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-regular] text-white">
210 portals
211 </span>
212 </div>
213 </div>
214
215 <div className="flex mx-2.5 my-4">
216 <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px">
217 {[1, 2, 3, 4, 5].map((point) => (
218 <div
219 key={point}
220 className={`flex h-0.5 w-full rounded-3xl ${point <= (map.difficulty + 1)
221 ? map.difficulty === 0
222 ? "bg-green-500"
223 : map.difficulty === 1 || map.difficulty === 2
224 ? "bg-lime-500"
225 : map.difficulty === 3
226 ? "bg-red-400"
227 : "bg-red-600"
228 : "bg-surface1"
229 }`}
230 />
231 ))}
232 </div>
233 </div>
234 </Link>
235 </div>
236 );
237 })}
238 </section>
239 </div>
241 </section> 240 </section>
242 </div>
243 </section>
244 )} 241 )}
245 </main> 242 </div>
246 ); 243 );
247}; 244};
248 245
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:43:06 +0000