aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/pages/home.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/pages/home.js')
-rw-r--r--frontend/src/components/pages/home.js242
1 files changed, 0 insertions, 242 deletions
diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js
deleted file mode 100644
index 0a46bec..0000000
--- a/frontend/src/components/pages/home.js
+++ /dev/null
@@ -1,242 +0,0 @@
1import React, { useEffect, useState } from 'react';
2
3import "./home.css"
4import News from '../news';
5import Record from '../record';
6
7export default function Homepage({ token }) {
8 const [profile, setProfile] = useState(null);
9
10// useEffect(() => {
11
12// if (!token) {
13// return;
14// }
15
16// async function home() {
17
18// const profileResponse = await fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
19// headers: {
20// Authorization: token
21// }
22// })
23
24// const profileData = await profileResponse.json();
25
26// setProfile(profileData);
27
28// const gamesResponse = await fetch("https://lp.ardapektezol.com/api/v1/games", {
29// headers: {
30// Authorization: token
31// }
32// });
33
34// const gamesData = await gamesResponse.json();
35
36// const recommendedMapImg = document.querySelector("#recommendedMapImg");
37
38// recommendedMapImg.style.backgroundImage = `url(${gamesData.data[0].image})`
39
40// const column1 = document.querySelector("#column1");
41// const column2 = document.querySelector("#column2");
42
43// column2.style.height = column1.clientHeight + "px";
44
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");
52
53// const titleDiv = document.createElement("div");
54// const titleSpan = document.createElement("span");
55
56// titleDiv.classList.add("homepage-panel-title-div")
57
58// titleSpan.innerText = title
59
60// titleDiv.appendChild(titleSpan)
61// e.insertBefore(titleDiv, e.firstChild)
62// });
63// }
64// try {
65// home();
66// } catch (e) {
67// console.log("error while setting up home page:", e);
68// }
69
70// }, [token]);
71
72const newsList = [
73 {
74 "title": "Portal Saved on Container Ride",
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."
76 },
77 {
78 "title": "Portal Saved on Container Ride",
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."
80 },
81 {
82 "title": "Portal Saved on Container Ride",
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."
84 },
85 {
86 "title": "Portal Saved on Container Ride",
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."
88 },
89 {
90 "title": "Portal Saved on Container Ride",
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."
92 },
93 {
94 "title": "Portal Saved on Container Ride",
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."
96 },
97 {
98 "title": "Portal Saved on Container Ride",
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."
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>
153 </div>
154 <div className='stats-div'>
155 <span>Singleplayer</span><br />
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>
157 </div>
158 <div className='stats-div'>
159 <span>Cooperative rank</span><br />
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>
161 </div>
162 </div>
163 </section>
164 : null}
165 {profile ?
166 <section title="What's Next?" className='homepage-panel'>
167 <div style={{ display: "flex" }}>
168 <div className='recommended-map-img' id="recommendedMapImg"></div>
169 <div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
170 <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
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>
181 </div>
182 </section>
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>
235 </div>
236 </div>
237
238
239
240 </main>
241)
242} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:49:46 +0000