aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
authorArda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>2024-08-20 20:05:53 +0300
committerGitHub <noreply@github.com>2024-08-20 20:05:53 +0300
commitb5d0c3ca6a5ed541cb4d23e1965fdc91ee179f02 (patch)
tree51fa88309d827c5fc741f2b36bbcebc26177965c /frontend
parentfix: homepage api call spam (#195) (diff)
downloadlphub-b5d0c3ca6a5ed541cb4d23e1965fdc91ee179f02.tar.gz
lphub-b5d0c3ca6a5ed541cb4d23e1965fdc91ee179f02.tar.bz2
lphub-b5d0c3ca6a5ed541cb4d23e1965fdc91ee179f02.zip
fix: homepage api call spam (#195)
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/components/pages/home.js420
1 files changed, 198 insertions, 222 deletions
diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js
index b0cc75f..c2376f2 100644
--- a/frontend/src/components/pages/home.js
+++ b/frontend/src/components/pages/home.js
@@ -6,261 +6,237 @@ import Record from '../record';
6 6
7export default function Homepage({ token }) { 7export default function Homepage({ token }) {
8 const [profile, setProfile] = useState(null); 8 const [profile, setProfile] = useState(null);
9 const [loading, setLoading] = useState(true)
10
11 const [isLoggedIn, setIsLoggedIn] = useState(false);
12 9
13 useEffect(() => { 10 useEffect(() => {
11
14 if (!token) { 12 if (!token) {
15 return; 13 return;
16 } 14 }
17 try { 15
18 fetch(`https://lp.ardapektezol.com/api/v1/profile`, { 16 async function home() {
17
18 const profileResponse = await fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
19 headers: { 19 headers: {
20 'Content-Type': 'application/json',
21 Authorization: token 20 Authorization: token
22 } 21 }
23 }) 22 })
24 .then(r => r.json())
25 .then(d => setProfile(d.data))
26 .then(d => {
27 if (profile != null) {
28 setIsLoggedIn(true)
29 }
30 })
31 .then(d => {
32 setLoading(false)
33 })
34 } catch (error) {
35 console.log(error)
36 }
37 23
38 }, [token]); 24 const profileData = await profileResponse.json();
39 25
40 useEffect(() => { 26 setProfile(profileData);
41 async function fetchMapImg() {
42 if (!isLoggedIn) {
43 return;
44 }
45 try {
46 const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
47 headers: {
48 'Authorization': token
49 }
50 });
51
52 const data = await response.json();
53 27
54 const recommendedMapImg = document.querySelector("#recommendedMapImg"); 28 const gamesResponse = await fetch("https://lp.ardapektezol.com/api/v1/games", {
55 29 headers: {
56 recommendedMapImg.style.backgroundImage = `url(${data.data[0].image})` 30 Authorization: token
31 }
32 });
57 33
58 const column1 = document.querySelector("#column1"); 34 const gamesData = await gamesResponse.json();
59 const column2 = document.querySelector("#column2");
60 35
61 column2.style.height = column1.clientHeight + "px"; 36 const recommendedMapImg = document.querySelector("#recommendedMapImg");
62 } catch (error) {
63 console.log(error)
64 }
65 }
66 37
67 fetchMapImg() 38 recommendedMapImg.style.backgroundImage = `url(${gamesData.data[0].image})`
68 39
69 const panels = document.querySelectorAll(".homepage-panel"); 40 const column1 = document.querySelector("#column1");
70 panels.forEach(e => { 41 const column2 = document.querySelector("#column2");
71 // this is cuz react is silly
72 if (e.innerHTML.includes('<div class="homepage-panel-title-div">')) {
73 return
74 }
75 const title = e.getAttribute("title");
76 42
77 const titleDiv = document.createElement("div"); 43 column2.style.height = column1.clientHeight + "px";
78 const titleSpan = document.createElement("span");
79 44
80 titleDiv.classList.add("homepage-panel-title-div") 45 const panels = document.querySelectorAll(".homepage-panel");
46 panels.forEach(e => {
47 // this is cuz react is silly
48 if (e.innerHTML.includes('<div class="homepage-panel-title-div">')) {
49 return
50 }
51 const title = e.getAttribute("title");
81 52
82 titleSpan.innerText = title 53 const titleDiv = document.createElement("div");
54 const titleSpan = document.createElement("span");
83 55
84 titleDiv.appendChild(titleSpan) 56 titleDiv.classList.add("homepage-panel-title-div")
85 e.insertBefore(titleDiv, e.firstChild)
86 });
87 }, [token])
88 57
89 const newsList = [ 58 titleSpan.innerText = title
90 {
91 "title": "Portal Saved on Container Ride",
92 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
93 },
94 {
95 "title": "Portal Saved on Container Ride",
96 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
97 },
98 {
99 "title": "Portal Saved on Container Ride",
100 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
101 },
102 {
103 "title": "Portal Saved on Container Ride",
104 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
105 },
106 {
107 "title": "Portal Saved on Container Ride",
108 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
109 },
110 {
111 "title": "Portal Saved on Container Ride",
112 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
113 },
114 {
115 "title": "Portal Saved on Container Ride",
116 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
117 },
118 {
119 "title": "Portal Saved on Container Ride",
120 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
121 },
122 {
123 "title": "Portal Saved on Container Ride",
124 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
125 },
126 {
127 "title": "Portal Saved on Container Ride",
128 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
129 },
130 {
131 "title": "Portal Saved on Container Ride",
132 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
133 },
134 {
135 "title": "Portal Saved on Container Ride",
136 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
137 },
138 {
139 "title": "Portal Saved on Container Ride",
140 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
141 },
142 {
143 "title": "Portal Saved on Container Ride",
144 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
145 },
146 ]
147 59
148 if (loading) { 60 titleDiv.appendChild(titleSpan)
149 return ( 61 e.insertBefore(titleDiv, e.firstChild)
150 <main> 62 });
151 </main> 63 }
152 ) 64 try {
65 home();
66 } catch (e) {
67 console.log("error while setting up home page:", e);
153 } 68 }
154 69
155 return ( 70}, [token]);
156 <main> 71
157 <section style={{ userSelect: "none", display: "flex" }}> 72const newsList = [
158 <h1 style={{ marginTop: "53.6px", fontSize: "80px", marginBottom: "15px" }}>Home</h1> 73 {
159 {isLoggedIn ? 74 "title": "Portal Saved on Container Ride",
160 <div style={{ textAlign: "right", width: "100%", marginTop: "20px" }}> 75 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
161 <span style={{ fontSize: "25px" }}>Welcome back,</span><br /> 76 },
162 77 {
163 <span><b style={{ fontSize: "80px", transform: "translateY(-20px)", display: "block" }}>Wolfboy248</b></span> 78 "title": "Portal Saved on Container Ride",
164 </div> 79 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
165 : null} 80 },
166 </section> 81 {
167 82 "title": "Portal Saved on Container Ride",
168 <div style={{ display: "grid", gridTemplateColumns: "calc(50%) calc(50%)" }}> 83 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
169 <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}> 84 },
170 {/* Column 1 */} 85 {
171 {isLoggedIn ? 86 "title": "Portal Saved on Container Ride",
172 <section title="Your Profile" className='homepage-panel'> 87 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
173 <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}> 88 },
174 <div className='stats-div'> 89 {
175 <span>Overall rank</span><br /> 90 "title": "Portal Saved on Container Ride",
176 <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span> 91 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
177 </div> 92 },
178 <div className='stats-div'> 93 {
179 <span>Singleplayer</span><br /> 94 "title": "Portal Saved on Container Ride",
180 <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b>&nbsp;{profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span> 95 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
181 </div> 96 },
182 <div className='stats-div'> 97 {
183 <span>Cooperative rank</span><br /> 98 "title": "Portal Saved on Container Ride",
184 <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b>&nbsp;{profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span> 99 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
185 </div> 100 },
101 {
102 "title": "Portal Saved on Container Ride",
103 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
104 },
105 {
106 "title": "Portal Saved on Container Ride",
107 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
108 },
109 {
110 "title": "Portal Saved on Container Ride",
111 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
112 },
113 {
114 "title": "Portal Saved on Container Ride",
115 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
116 },
117 {
118 "title": "Portal Saved on Container Ride",
119 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
120 },
121 {
122 "title": "Portal Saved on Container Ride",
123 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
124 },
125 {
126 "title": "Portal Saved on Container Ride",
127 "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula facilisis quam, non ultrices nisl aliquam at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
128 },
129]
130
131return (
132 <main>
133 <section style={{ userSelect: "none", display: "flex" }}>
134 <h1 style={{ marginTop: "53.6px", fontSize: "80px", marginBottom: "15px" }}>Home</h1>
135 {profile ?
136 <div style={{ textAlign: "right", width: "100%", marginTop: "20px" }}>
137 <span style={{ fontSize: "25px" }}>Welcome back,</span><br />
138
139 <span><b style={{ fontSize: "80px", transform: "translateY(-20px)", display: "block" }}>Wolfboy248</b></span>
140 </div>
141 : null}
142 </section>
143
144 <div style={{ display: "grid", gridTemplateColumns: "calc(50%) calc(50%)" }}>
145 <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}>
146 {/* Column 1 */}
147 {profile ?
148 <section title="Your Profile" className='homepage-panel'>
149 <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}>
150 <div className='stats-div'>
151 <span>Overall rank</span><br />
152 <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span>
186 </div> 153 </div>
187 </section> 154 <div className='stats-div'>
188 : null} 155 <span>Singleplayer</span><br />
189 {isLoggedIn ? 156 <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b>&nbsp;{profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span>
190 <section title="What's Next?" className='homepage-panel'>
191 <div style={{ display: "flex" }}>
192 <div className='recommended-map-img' id="recommendedMapImg"></div>
193 <div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
194 <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
195 <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span>
196 <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span>
197 <div className='difficulty-bar-home'>
198 <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div>
199 <div className='difficulty-point'></div>
200 <div className='difficulty-point'></div>
201 <div className='difficulty-point'></div>
202 <div className='difficulty-point'></div>
203 </div>
204 </div>
205 </div> 157 </div>
206 </section> 158 <div className='stats-div'>
207 : null} 159 <span>Cooperative rank</span><br />
208 <section title="Newest Records" className='homepage-panel' style={{ height: isLoggedIn ? "250px" : "960px" }}> 160 <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b>&nbsp;{profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span>
209 <div className='record-title'>
210 <div>
211 <span>Place</span>
212 <span style={{ textAlign: "left" }}>Runner</span>
213 <span>Portals</span>
214 <span>Time</span>
215 <span>Date</span>
216 </div> 161 </div>
217 </div> 162 </div>
218 <div style={{ overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px" }}>
219 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
220 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
221 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
222 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
223 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
224 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
225 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
226 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
227 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
228 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
229 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
230 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
231 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
232 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
233 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
234 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
235 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
236 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
237 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
238 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
239 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
240 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
241 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
242 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
243 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
244 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
245 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
246 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
247 </div>
248 </section> 163 </section>
249 </div> 164 : null}
250 {/* Column 2 */} 165 {profile ?
251 <div id='column2' style={{ display: "flex", alignItems: "stretch", height: "1000px" }}> 166 <section title="What's Next?" className='homepage-panel'>
252 <section title="News" className='homepage-panel'> 167 <div style={{ display: "flex" }}>
253 <div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)" }}> 168 <div className='recommended-map-img' id="recommendedMapImg"></div>
254 {newsList.map((newsList, index) => ( 169 <div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
255 <News newsInfo={newsList} key={index}></News> 170 <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
256 ))} 171 <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span>
172 <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span>
173 <div className='difficulty-bar-home'>
174 <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div>
175 <div className='difficulty-point'></div>
176 <div className='difficulty-point'></div>
177 <div className='difficulty-point'></div>
178 <div className='difficulty-point'></div>
179 </div>
180 </div>
257 </div> 181 </div>
258 </section> 182 </section>
259 </div> 183 : null}
184 <section title="Newest Records" className='homepage-panel' style={{ height: profile ? "250px" : "960px" }}>
185 <div className='record-title'>
186 <div>
187 <span>Place</span>
188 <span style={{ textAlign: "left" }}>Runner</span>
189 <span>Portals</span>
190 <span>Time</span>
191 <span>Date</span>
192 </div>
193 </div>
194 <div style={{ overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px" }}>
195 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
196 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
197 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
198 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
199 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
200 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
201 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
202 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
203 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
204 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
205 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
206 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
207 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
208 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
209 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
210 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
211 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
212 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
213 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
214 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
215 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
216 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
217 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
218 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
219 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
220 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
221 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
222 <Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
223 </div>
224 </section>
225 </div>
226 {/* Column 2 */}
227 <div id='column2' style={{ display: "flex", alignItems: "stretch", height: "1000px" }}>
228 <section title="News" className='homepage-panel'>
229 <div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)" }}>
230 {newsList.map((newsList, index) => (
231 <News newsInfo={newsList} key={index}></News>
232 ))}
233 </div>
234 </section>
260 </div> 235 </div>
236 </div>
261 237
262 238
263 239
264 </main> 240 </main>
265 ) 241)
266} \ No newline at end of file 242} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:46:11 +0000