diff options
| -rw-r--r-- | frontend/src/components/pages/home.js | 89 |
1 files changed, 44 insertions, 45 deletions
diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js index ba96904..b0cc75f 100644 --- a/frontend/src/components/pages/home.js +++ b/frontend/src/components/pages/home.js | |||
| @@ -1,20 +1,19 @@ | |||
| 1 | import React, { useEffect, useRef, useState } from 'react'; | 1 | import React, { useEffect, useState } from 'react'; |
| 2 | import { useLocation, Link } from "react-router-dom"; | ||
| 3 | 2 | ||
| 4 | import "./home.css" | 3 | import "./home.css" |
| 5 | import News from '../news'; | 4 | import News from '../news'; |
| 6 | import Record from '../record'; | 5 | import Record from '../record'; |
| 7 | import Login from '../login'; | ||
| 8 | 6 | ||
| 9 | export default function Homepage(prop) { | 7 | export default function Homepage({ token }) { |
| 10 | const { token, setToken } = prop | 8 | const [profile, setProfile] = useState(null); |
| 11 | const [home, setHome] = React.useState(null); | 9 | const [loading, setLoading] = useState(true) |
| 12 | const [profile, setProfile] = React.useState(null); | ||
| 13 | const [loading, setLoading] = React.useState(true) | ||
| 14 | const location = useLocation(); | ||
| 15 | 10 | ||
| 16 | const [isLoggedIn, setIsLoggedIn] = React.useState(false); | 11 | const [isLoggedIn, setIsLoggedIn] = useState(false); |
| 17 | React.useEffect(() => { | 12 | |
| 13 | useEffect(() => { | ||
| 14 | if (!token) { | ||
| 15 | return; | ||
| 16 | } | ||
| 18 | try { | 17 | try { |
| 19 | fetch(`https://lp.ardapektezol.com/api/v1/profile`, { | 18 | fetch(`https://lp.ardapektezol.com/api/v1/profile`, { |
| 20 | headers: { | 19 | headers: { |
| @@ -35,8 +34,8 @@ export default function Homepage(prop) { | |||
| 35 | } catch (error) { | 34 | } catch (error) { |
| 36 | console.log(error) | 35 | console.log(error) |
| 37 | } | 36 | } |
| 38 | 37 | ||
| 39 | }, [token, profile]); | 38 | }, [token]); |
| 40 | 39 | ||
| 41 | useEffect(() => { | 40 | useEffect(() => { |
| 42 | async function fetchMapImg() { | 41 | async function fetchMapImg() { |
| @@ -170,42 +169,42 @@ export default function Homepage(prop) { | |||
| 170 | <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}> | 169 | <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}> |
| 171 | {/* Column 1 */} | 170 | {/* Column 1 */} |
| 172 | {isLoggedIn ? | 171 | {isLoggedIn ? |
| 173 | <section title="Your Profile" className='homepage-panel'> | 172 | <section title="Your Profile" className='homepage-panel'> |
| 174 | <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}> | 173 | <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}> |
| 175 | <div className='stats-div'> | 174 | <div className='stats-div'> |
| 176 | <span>Overall rank</span><br /> | 175 | <span>Overall rank</span><br /> |
| 177 | <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span> | 176 | <span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span> |
| 178 | </div> | 177 | </div> |
| 179 | <div className='stats-div'> | 178 | <div className='stats-div'> |
| 180 | <span>Singleplayer</span><br /> | 179 | <span>Singleplayer</span><br /> |
| 181 | <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b> {profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span> | 180 | <span style={{ fontSize: "22px" }}><b>{profile.rankings.singleplayer.rank > 0 ? "#" + profile.rankings.singleplayer.rank : "No rank"}</b> {profile.rankings.singleplayer.rank > 0 ? "(" + profile.rankings.singleplayer.completion_count + "/" + profile.rankings.singleplayer.completion_total + ")" : ""}</span> |
| 182 | </div> | 181 | </div> |
| 183 | <div className='stats-div'> | 182 | <div className='stats-div'> |
| 184 | <span>Cooperative rank</span><br /> | 183 | <span>Cooperative rank</span><br /> |
| 185 | <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b> {profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span> | 184 | <span style={{ fontSize: "22px" }}><b>{profile.rankings.cooperative.rank > 0 ? "#" + profile.rankings.cooperative.rank : "No rank"}</b> {profile.rankings.cooperative.rank > 0 ? "(" + profile.rankings.cooperative.completion_count + "/" + profile.rankings.cooperative.completion_total + ")" : ""}</span> |
| 185 | </div> | ||
| 186 | </div> | 186 | </div> |
| 187 | </div> | 187 | </section> |
| 188 | </section> | 188 | : null} |
| 189 | : null} | ||
| 190 | {isLoggedIn ? | 189 | {isLoggedIn ? |
| 191 | <section title="What's Next?" className='homepage-panel'> | 190 | <section title="What's Next?" className='homepage-panel'> |
| 192 | <div style={{ display: "flex" }}> | 191 | <div style={{ display: "flex" }}> |
| 193 | <div className='recommended-map-img' id="recommendedMapImg"></div> | 192 | <div className='recommended-map-img' id="recommendedMapImg"></div> |
| 194 | <div style={{ marginLeft: "12px", display: "block", width: "100%" }}> | 193 | <div style={{ marginLeft: "12px", display: "block", width: "100%" }}> |
| 195 | <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span> | 194 | <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span> |
| 196 | <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span> | 195 | <span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span> |
| 197 | <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span> | 196 | <span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span> |
| 198 | <div className='difficulty-bar-home'> | 197 | <div className='difficulty-bar-home'> |
| 199 | <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div> | 198 | <div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div> |
| 200 | <div className='difficulty-point'></div> | 199 | <div className='difficulty-point'></div> |
| 201 | <div className='difficulty-point'></div> | 200 | <div className='difficulty-point'></div> |
| 202 | <div className='difficulty-point'></div> | 201 | <div className='difficulty-point'></div> |
| 203 | <div className='difficulty-point'></div> | 202 | <div className='difficulty-point'></div> |
| 203 | </div> | ||
| 204 | </div> | 204 | </div> |
| 205 | </div> | 205 | </div> |
| 206 | </div> | 206 | </section> |
| 207 | </section> | 207 | : null} |
| 208 | : null} | ||
| 209 | <section title="Newest Records" className='homepage-panel' style={{ height: isLoggedIn ? "250px" : "960px" }}> | 208 | <section title="Newest Records" className='homepage-panel' style={{ height: isLoggedIn ? "250px" : "960px" }}> |
| 210 | <div className='record-title'> | 209 | <div className='record-title'> |
| 211 | <div> | 210 | <div> |