1 files changed, 198 insertions, 0 deletions

diff --git a/frontend/src/components/pages/home.js b/frontend/src/components/pages/home.js
new file mode 100644
index 0000000..c1477ab
--- /dev/null
+++ b/frontend/src/components/pages/home.js
@@ -0,0 +1,198 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Link } from "react-router-dom";
+
+import "./home.css"
+import News from '../news';
+import Record from '../record';
+
+export default function Homepage(prop) {
+    const {token, setToken} = prop
+    const [home, setHome] = React.useState(null);
+    const location = useLocation();
+
+    useEffect(() => {
+        async function fetchMapImg() {
+            try {
+                const response = await fetch("https://lp.ardapektezol.com/api/v1/games", {
+                    headers: {
+                        'Authorization': token
+                    }
+                });
+
+                const data = await response.json();
+
+                const recommendedMapImg = document.querySelector("#recommendedMapImg");
+
+                recommendedMapImg.src = `${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)
+            }
+        }
+
+        fetchMapImg()
+
+        const panels = document.querySelectorAll(".homepage-panel");
+        panels.forEach(e => {
+            // this is cuz react is silly
+            if (e.innerHTML.includes('<div class="homepage-panel-title-div">')) {
+                return
+            }
+            const title = e.getAttribute("title");
+
+            const titleDiv = document.createElement("div");
+            const titleSpan = document.createElement("span");
+
+            titleDiv.classList.add("homepage-panel-title-div")
+
+            titleSpan.innerText = title
+
+            titleDiv.appendChild(titleSpan)
+            e.insertBefore(titleDiv, e.firstChild)
+        });
+    })
+
+    const newsList = [
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+        {
+            "title": "Portal Saved on Container Ride",
+            "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."
+        },
+    ]
+
+    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>
+
+            <div style={{display: "grid", gridTemplateColumns: "calc(50%) calc(50%)"}}>
+                <div id='column1' style={{ display: "flex", alignItems: "self-start", flexWrap: "wrap", alignContent: "start" }}>
+                    {/* Column 1 */}
+                    <section title="Your Profile" className='homepage-panel'>
+                        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px"}}>
+                            <div className='stats-div'>
+                                <span>Overall rank</span><br/>
+                                <span><b>#69</b></span>
+                            </div>
+                            <div className='stats-div'>
+                                <span>Singleplayer</span><br/>
+                                <span style={{fontSize: "22px"}}><b>#10</b>&nbsp;(60/62)</span>
+                            </div>
+                            <div className='stats-div'>
+                                <span>Overall rank</span><br/>
+                                <span style={{fontSize: "22px"}}><b>#69</b>&nbsp;(13/37)</span>
+                            </div>
+                        </div>
+                    </section>
+                    <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 className='difficulty-bar-home'>
+                                    <div className='difficulty-point' style={{backgroundColor: "#51C355"}}></div>
+                                    <div className='difficulty-point'></div>
+                                    <div className='difficulty-point'></div>
+                                    <div className='difficulty-point'></div>
+                                    <div className='difficulty-point'></div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <section title="Newest Records" className='homepage-panel' style={{height: "250px"}}>
+                        <div className='record-title'>
+                            <div>
+                                <span>Place</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"}}>
+                            <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>
+                        </div>
+                    </section>
+                </div>
+                {/* Column 2 */}
+                <div id='column2' style={{display: "flex", alignItems: "stretch", height: "87px"}}>
+                    <section title="News" className='homepage-panel'>
+                        <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>
+    )
+}
\ No newline at end of file