From cfac59282da55f4791d6352f15887a15e9ff6ec5 Mon Sep 17 00:00:00 2001 From: Wolfboy248 <121288977+Wolfboy248@users.noreply.github.com> Date: Wed, 10 Jul 2024 21:51:25 +0200 Subject: Games page, maplist page (#153) Co-authored-by: Wolfboy248 <105884620+Wolfboy248@users.noreply.github.com> --- frontend/src/components/pages/home.js | 198 ++++++++++++++++++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 frontend/src/components/pages/home.js (limited to 'frontend/src/components/pages/home.js') 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('
')) { + 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 ( +
+
+ Welcome back,
+ Krzyhau +
+ +
+
+ {/* Column 1 */} +
+
+
+ Overall rank
+ #69 +
+
+ Singleplayer
+ #10 (60/62) +
+
+ Overall rank
+ #69 (13/37) +
+
+
+
+
+ +
+ Container Ride + Your Record: 4 portals + World Record: 2 portals +
+
+
+
+
+
+
+
+
+
+
+
+
+ Place + Runner + Portals + Time + Date +
+
+
+ + + + + + + +
+
+
+ {/* Column 2 */} +
+
+
+ {newsList.map((newsList, index) => ( + + ))} +
+
+
+
+ + + +
+ ) +} \ No newline at end of file -- cgit v1.2.3