aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages')
-rw-r--r--frontend/src/pages/Maplist/Components/Map.tsx60
-rw-r--r--frontend/src/pages/Maplist/Maplist.tsx81
2 files changed, 80 insertions, 61 deletions
diff --git a/frontend/src/pages/Maplist/Components/Map.tsx b/frontend/src/pages/Maplist/Components/Map.tsx
new file mode 100644
index 0000000..5451830
--- /dev/null
+++ b/frontend/src/pages/Maplist/Components/Map.tsx
@@ -0,0 +1,60 @@
1import React from "react";
2import { Link } from "react-router-dom";
3import type { Map } from "@customTypes/Map";
4
5interface MapProps {
6 map: Map;
7 catNum: number;
8};
9
10const Map: React.FC<MapProps> = ({ map, catNum }) => {
11 return (
12
13 <div className="bg-panel rounded-3xl overflow-hidden">
14 <Link to={`/maps/${map.id}`}>
15 <span className="text-center text-base sm:text-xl w-full block my-1.5 text-foreground truncate">
16 {map.name}
17 </span>
18 <div
19 className="flex h-40 sm:h-48 bg-cover relative"
20 style={{ backgroundImage: `url(${map.image})` }}
21 >
22 <div className="backdrop-blur-sm w-full flex items-center justify-center">
23 <span className="text-3xl sm:text-5xl font-barlow-semicondensed-semibold text-white mr-1.5">
24 {map.is_disabled
25 ? map.category_portals[0].portal_count
26 : map.category_portals.find(
27 obj => obj.category.id === catNum + 1
28 )?.portal_count}
29 </span>
30 <span className="text-2xl sm:text-4xl font-barlow-semicondensed-regular text-white">
31 portals
32 </span>
33 </div>
34 </div>
35
36 <div className="flex mx-5 my-4">
37 <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px">
38 {[1, 2, 3, 4, 5].map((point) => (
39 <div
40 key={point}
41 className={`flex h-[3px] w-full rounded-3xl ${point <= (map.difficulty + 1)
42 ? map.difficulty === 0
43 ? "bg-green-500"
44 : map.difficulty === 1 || map.difficulty === 2
45 ? "bg-lime-500"
46 : map.difficulty === 3
47 ? "bg-red-400"
48 : "bg-red-600"
49 : "bg-block"
50 }`}
51 />
52 ))}
53 </div>
54 </div>
55 </Link>
56 </div>
57 );
58};
59
60export default Map;
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index 8d9c14a..a5649db 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -6,6 +6,8 @@ import { API } from "@api/Api.ts";
6import { Game } from "@customTypes/Game.ts"; 6import { 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";
10
9const Maplist: React.FC = () => { 11const Maplist: React.FC = () => {
10 const [game, setGame] = React.useState<Game | null>(null); 12 const [game, setGame] = React.useState<Game | null>(null);
11 const [catNum, setCatNum] = React.useState(0); 13 const [catNum, setCatNum] = React.useState(0);
@@ -87,14 +89,14 @@ const Maplist: React.FC = () => {
87 }, [gameChapters, location.search]); 89 }, [gameChapters, location.search]);
88 90
89 return ( 91 return (
90 <div> 92 <div className="px-12">
91 <Helmet> 93 <Helmet>
92 <title>LPHUB | Maplist</title> 94 <title>LPHUB | Maplist</title>
93 </Helmet> 95 </Helmet>
94 96
95 <section className="mt-5"> 97 <section className="my-5">
96 <Link to="/games"> 98 <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"> 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">
98 <i className="triangle mr-2"></i> 100 <i className="triangle mr-2"></i>
99 <span className="px-2">Games List</span> 101 <span className="px-2">Games List</span>
100 </button> 102 </button>
@@ -105,36 +107,36 @@ const Maplist: React.FC = () => {
105 <div></div> 107 <div></div>
106 ) : ( 108 ) : (
107 <section> 109 <section>
108 <h1 className="font-[--font-barlow-condensed-bold] text-3xl sm:text-6xl my-0 text-foreground"> 110 <h1 className="text-3xl sm:text-6xl my-0">
109 {game?.name} 111 {game?.name}
110 </h1> 112 </h1>
111 113
112 <div 114 <div
113 className="text-center rounded-3xl overflow-hidden bg-cover bg-[25%] mt-3 relative" 115 className="text-center rounded-3xl overflow-hidden bg-panel bg-[25%] mt-3 relative"
114 style={{ backgroundImage: `url(${game?.image})` }} 116 style={{ backgroundImage: `url(${game?.image})` }}
115 > 117 >
116 <div className="backdrop-blur-sm flex flex-col w-full"> 118 <div className="backdrop-blur-sm flex flex-col w-full">
117 <div className="h-full flex flex-col justify-center items-center py-6"> 119 <div className="h-full flex justify-center items-center py-6">
118 <h2 className="my-5 font-[--font-barlow-semicondensed-semibold] text-4xl sm:text-8xl text-foreground"> 120 <span className="font-barlow-semicondensed-semibold text-8xl">
119 { 121 {
120 game?.category_portals.find( 122 game?.category_portals.find(
121 obj => obj.category.id === catNum + 1 123 obj => obj.category.id === catNum + 1
122 )?.portal_count 124 )?.portal_count
123 } 125 }
124 </h2> 126 </span>
125 <h3 className="font-[--font-barlow-semicondensed-regular] mx-2.5 text-2xl sm:text-4xl my-0 text-foreground"> 127 <span className="font-barlow-semicondensed-regular mx-2.5 text-2xl sm:text-4xl my-0 text-foreground">
126 portals 128 portals
127 </h3> 129 </span>
128 </div> 130 </div>
129 131
130 <div className="flex h-12 bg-surface gap-0.5"> 132 <div className="flex h-12 bg-panel gap-0.5">
131 {game?.category_portals.map((cat, index) => ( 133 {game?.category_portals.map((cat, index) => (
132 <button 134 <button
133 key={index} 135 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 || 136 className={`border-0 text-foreground 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) 137 (cat.category.id - 1 === catNum && !hasClicked)
136 ? "bg-surface" 138 ? "bg-panel"
137 : "bg-surface1 hover:bg-surface" 139 : "bg-block hover:bg-block"
138 }`} 140 }`}
139 onClick={() => { 141 onClick={() => {
140 setCatNum(cat.category.id - 1); 142 setCatNum(cat.category.id - 1);
@@ -164,16 +166,16 @@ const Maplist: React.FC = () => {
164 </span> 166 </span>
165 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i> 167 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
166 </div> 168 </div>
167 \ 169
168 <div 170 <div
169 className={`absolute z-[1000] bg-surface1 rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block" 171 className={`absolute z-[1000] bg-panel rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
170 }`} 172 }`}
171 > 173 >
172 {gameChapters?.chapters.map((chapter, i) => { 174 {gameChapters?.chapters.map((chapter, i) => {
173 return ( 175 return (
174 <div 176 <div
175 key={i} 177 key={i}
176 className="cursor-pointer text-base sm:text-xl rounded-[2000px] p-1 hover:bg-surface text-foreground" 178 className="cursor-pointer text-base sm:text-xl rounded-[2000px] p-1 hover:bg-block text-foreground"
177 onClick={() => { 179 onClick={() => {
178 _fetch_chapters(chapter.id.toString()); 180 _fetch_chapters(chapter.id.toString());
179 _handle_dropdown_click(); 181 _handle_dropdown_click();
@@ -189,50 +191,7 @@ const Maplist: React.FC = () => {
189 <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-5"> 191 <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-5">
190 {curChapter?.maps.map((map, i) => { 192 {curChapter?.maps.map((map, i) => {
191 return ( 193 return (
192 <div key={i} className="bg-surface rounded-3xl overflow-hidden"> 194 <Map key={i} map={map} catNum={catNum} />
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 ); 195 );
237 })} 196 })}
238 </section> 197 </section>
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:54:12 +0000