Skip to content

Commit

Permalink
Fixed graph issue (#188) + basic home page api implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wolfboy248
Wolfboy248 committed Jul 12, 2024
1 parent 00dd4e1 commit 8162ed8
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 44 deletions.
2 changes: 1 addition & 1 deletion frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function App() {
<BrowserRouter>
<Sidebar token={token} setToken={setToken}/>
<Routes>
<Route index element={<Homepage token={token} mod={mod}/>}></Route>
<Route index element={<Homepage token={token} mod={mod} setToken={setToken}/>}></Route>
<Route path="/news" element={<Main text="News"/>}></Route>
<Route path="/records" element={<Main text="Records"/>}></Route>
<Route path="/leaderboards" element={<Main text="Leaderboards"/>}></Route>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ React.useEffect(() => {
setToken(d.data.token)
}
})
.then(d => {
setToken("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MjMzNzc5OTksIm1vZCI6ZmFsc2UsInN1YiI6Ijc2NTYxMTk5MDg4MjU3MDk4In0.HNqWFuoXiqra4M3lApHn7V-q87l5UUszu1J-qsNDY1A")
})
}, []);


Expand Down
12 changes: 7 additions & 5 deletions frontend/src/components/pages/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,25 @@

.recommended-map-img {
width: 250px;
border-radius: 24px;
border-radius: 19px;
margin-bottom: 0;
border: 7px solid #2B2E46;
/* border: 7px solid #2B2E46; */
background-size: cover;
background-position-x: 50%;
}

.difficulty-bar-home {
width: 100%;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
align-items: center;
margin: 5px;
margin-top: 16px;
margin: 0px;
margin-top: 7px;
}

.difficulty-point {
background: #2B2E46;
height: 3px;
height: 4px;
margin: 5px;
border-radius: 10px;
}
125 changes: 97 additions & 28 deletions frontend/src/components/pages/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,45 @@ import { useLocation, Link } from "react-router-dom";
import "./home.css"
import News from '../news';
import Record from '../record';
import Login from '../login';

export default function Homepage(prop) {
const {token, setToken} = prop
const { token, setToken } = prop
const [home, setHome] = React.useState(null);
const [profile, setProfile] = React.useState(null);
const [loading, setLoading] = React.useState(true)
const location = useLocation();

const [isLoggedIn, setIsLoggedIn] = React.useState(false);
React.useEffect(() => {
try {
fetch(`https://lp.ardapektezol.com/api/v1/profile`, {
headers: {
'Content-Type': 'application/json',
Authorization: token
}
})
.then(r => r.json())
.then(d => setProfile(d.data))
.then(d => {
if (profile != null) {
setIsLoggedIn(true)
}
})
.then(d => {
setLoading(false)
})
} catch (error) {
console.log(error)
}

}, [token, profile]);

useEffect(() => {
async function fetchMapImg() {
if (!isLoggedIn) {
return;
}
try {
const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
headers: {
Expand All @@ -23,11 +54,11 @@ export default function Homepage(prop) {

const recommendedMapImg = document.querySelector("#recommendedMapImg");

recommendedMapImg.src = `${data.data[0].image}`
recommendedMapImg.style.backgroundImage = `url(${data.data[0].image})`

const column1 = document.querySelector("#column1");
const column2 = document.querySelector("#column2");

column2.style.height = column1.clientHeight + "px";
} catch (error) {
console.log(error)
Expand Down Expand Up @@ -115,41 +146,57 @@ export default function Homepage(prop) {
},
]

if (loading) {
return (
<main>
</main>
)
}

return (
<main>
<section style={{marginTop: "40px", userSelect: "none"}}>
<span style={{fontSize: "40px"}}>Welcome back,</span><br/>
<span><b style={{ fontSize: "96px", transform: "translateY(-20px)", display: "block"}}>Krzyhau</b></span>
<section style={{ userSelect: "none", display: "flex" }}>
<h1 style={{ marginTop: "53.6px", fontSize: "80px", marginBottom: "15px" }}>Home</h1>
{isLoggedIn ?
<div style={{ textAlign: "right", width: "100%", marginTop: "20px" }}>
<span style={{ fontSize: "25px" }}>Welcome back,</span><br />

<span><b style={{ fontSize: "80px", transform: "translateY(-20px)", display: "block" }}>Wolfboy248</b></span>
</div>
: null}
</section>

<div style={{display: "grid", gridTemplateColumns: "calc(50%) calc(50%)"}}>
<div style={{ display: "grid", gridTemplateColumns: "calc(50%) calc(50%)" }}>
<div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}>
{/* Column 1 */}
{isLoggedIn ?
<section title="Your Profile" className='homepage-panel'>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px"}}>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px" }}>
<div className='stats-div'>
<span>Overall rank</span><br/>
<span><b>#69</b></span>
<span>Overall rank</span><br />
<span><b>{profile.rankings.overall.rank > 0 ? "#" + profile.rankings.overall.rank : "No rank"}</b></span>
</div>
<div className='stats-div'>
<span>Singleplayer</span><br/>
<span style={{fontSize: "22px"}}><b>#10</b>&nbsp;(60/62)</span>
<span>Singleplayer</span><br />
<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>
</div>
<div className='stats-div'>
<span>Overall rank</span><br/>
<span style={{fontSize: "22px"}}><b>#69</b>&nbsp;(13/37)</span>
<span>Cooperative rank</span><br />
<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>
</div>
</div>
</section>
: null}
{isLoggedIn ?
<section title="What's Next?" className='homepage-panel'>
<div style={{display: "flex"}}>
<img className='recommended-map-img' id="recommendedMapImg"></img>
<div style={{marginLeft: "12px", display: "block", width: "100%"}}>
<span style={{fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block"}}>Container Ride</span>
<span style={{fontSize: "20px"}}>Your Record: 4 portals</span>
<span style={{fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block"}}>World Record: 2 portals</span>
<div style={{ display: "flex" }}>
<div className='recommended-map-img' id="recommendedMapImg"></div>
<div style={{ marginLeft: "12px", display: "block", width: "100%" }}>
<span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "32px", width: "100%", display: "block" }}>Container Ride</span>
<span style={{ fontSize: "20px", display: "block" }}>Your Record: 4 portals</span>
<span style={{ fontFamily: "BarlowSemiCondensed-SemiBold", fontSize: "36px", width: "100%", display: "block" }}>World Record: 2 portals</span>
<div className='difficulty-bar-home'>
<div className='difficulty-point' style={{backgroundColor: "#51C355"}}></div>
<div className='difficulty-point' style={{ backgroundColor: "#51C355" }}></div>
<div className='difficulty-point'></div>
<div className='difficulty-point'></div>
<div className='difficulty-point'></div>
Expand All @@ -158,17 +205,39 @@ export default function Homepage(prop) {
</div>
</div>
</section>
<section title="Newest Records" className='homepage-panel' style={{height: "250px"}}>
: null}
<section title="Newest Records" className='homepage-panel' style={{ height: isLoggedIn ? "250px" : "960px" }}>
<div className='record-title'>
<div>
<span>Place</span>
<span style={{textAlign: "left"}}>Runner</span>
<span style={{ textAlign: "left" }}>Runner</span>
<span>Portals</span>
<span>Time</span>
<span>Date</span>
</div>
</div>
<div style={{overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px"}}>
<div style={{ overflowY: "scroll", height: "calc(100% - 90px)", paddingRight: "10px" }}>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
<Record name={"Krzyhau"} portals={"2"} date={new Date("2024-05-21T08:45:00")} place={"2"} time={"20.20"}></Record>
Expand All @@ -180,19 +249,19 @@ export default function Homepage(prop) {
</section>
</div>
{/* Column 2 */}
<div id='column2' style={{display: "flex", alignItems: "stretch", height: "87px"}}>
<div id='column2' style={{ display: "flex", alignItems: "stretch", height: "1000px" }}>
<section title="News" className='homepage-panel'>
<div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)"}}>
<div id='newsContent' style={{ display: "block", width: "100%", overflowY: "scroll", height: "calc(100% - 50px)" }}>
{newsList.map((newsList, index) => (
<News newsInfo={newsList} key={index}></News>
))}
</div>
</section>
</div>
</div>





</main>
)
}
12 changes: 8 additions & 4 deletions frontend/src/components/pages/maplist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ a {
.game {
width: 100%;
height: 192px;
background: #202232;
/* background: #202232; */
border-radius: 24px;
overflow: hidden;
}
Expand Down Expand Up @@ -112,18 +112,22 @@ a {
align-items: center;
}

.game-nav-btn:hover, .selected {
background-color: #202232;
.game-nav-btn:hover {
cursor: pointer;
}

.selected {
background-color: #202232;
}

.gameview-nav {
margin-top: 20px;
display: flex;
height: 56px;
border-radius: 24px;
overflow: hidden;
background-color: #202232;
gap: 0.06em;
/* background-color: #202232; */
}

.maplist {
Expand Down
29 changes: 24 additions & 5 deletions frontend/src/components/pages/maplist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export default function Maplist(prop) {
const {token,setToken} = prop
const scrollRef = useRef(null)
const [games, setGames] = React.useState(null);
const [hasOpenedStatistics, setHasOpenedStatistics] = React.useState(false);
const [totalPortals, setTotalPortals] = React.useState(0);
const location = useLocation();

let gameTitle;
Expand Down Expand Up @@ -81,6 +83,7 @@ export default function Maplist(prop) {

document.querySelector(".maplist-page").scrollTo({ top: 372, behavior: "smooth" })
document.querySelector(".maplist").setAttribute("currentTab", "stats");
setHasOpenedStatistics(true);
}
} else {
btn.className = "game-nav-btn";
Expand Down Expand Up @@ -349,7 +352,23 @@ export default function Maplist(prop) {
React.useEffect(() => {

const lineChart = document.querySelector(".line-chart")
function createGraph() {
let tempTotalPortals = 0
fetch("https://lp.ardapektezol.com/api/v1/games/1/maps", {
headers: {
'Authorization': token
}
})
.then(r => r.json())
.then(d => {
d.data.maps.forEach((map, i) => {
tempTotalPortals += map.portal_count
})
})
.then(() => {
setTotalPortals(tempTotalPortals)
})
async function createGraph() {
console.log(totalPortals)
// max
let items = [
{
Expand Down Expand Up @@ -689,8 +708,6 @@ export default function Maplist(prop) {
}
}

createGraph()

async function fetchGames() {
try {
const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
Expand Down Expand Up @@ -726,8 +743,10 @@ export default function Maplist(prop) {

const handleResize = (entries) => {
for (let entry of entries) {
lineChart.innerHTML = ""
createGraph()
if (hasOpenedStatistics) {
lineChart.innerHTML = ""
createGraph()
}
if (document.querySelector(".maplist").getAttribute("currentTab") == "stats") {
document.querySelector(".stats").style.display = "block"
} else {
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const [sidebar, setSidebar] = React.useState();
// Clicked buttons
function SidebarClick(x){
const btn = document.querySelectorAll("button.sidebar-button");
console.log(x)

if(sidebar===1){setSidebar(0);SidebarHide()}

Expand Down

0 comments on commit 8162ed8

Please sign in to comment.