[#189 + #193] Games page update

pektezol · Aug 19, 2024 · a56ac0f · a56ac0f
1 parent 3fcebcd
commit a56ac0f
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 37 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -20,6 +20,13 @@ body {
     border-radius: 1000px;
 }
 
+.loader-text.header {
+    height: calc(100% - 10px);
+    display: flex;
+    width: fit-content;
+    transform: translateY(10px);
+}
+
 @keyframes loader {
     0% {
         background-position: 100% 20%;

diff --git a/frontend/src/components/pages/game.js b/frontend/src/components/pages/game.js
@@ -3,35 +3,37 @@ import { useLocation, Link } from "react-router-dom";
 
 import "./games.css"
 
+import GameCategory from './gamecat';
+
 export default function GameEntry({ gameInfo }) {
     const [gameEntry, setGameEntry] = React.useState(null);
     const location = useLocation();
 
     const gameInfoCats = gameInfo.category_portals;
 
-    useEffect(() => {
-        gameInfoCats.forEach(catInfo => {
-            const itemBody = document.createElement("div");
-            const itemTitle = document.createElement("span");
-            const spacing = document.createElement("br");
-            const itemNum = document.createElement("span");
+    // useEffect(() => {
+    //     gameInfoCats.forEach(catInfo => {
+    //         const itemBody = document.createElement("div");
+    //         const itemTitle = document.createElement("span");
+    //         const spacing = document.createElement("br");
+    //         const itemNum = document.createElement("span");
 
-            itemTitle.innerText = catInfo.category.name;
-            itemNum.innerText = catInfo.portal_count;
-            itemTitle.classList.add("games-page-item-body-item-title");
-            itemNum.classList.add("games-page-item-body-item-num");
-            itemBody.appendChild(itemTitle);
-            itemBody.appendChild(spacing);
-            itemBody.appendChild(itemNum);
-            itemBody.className = "games-page-item-body-item";
+    //         itemTitle.innerText = catInfo.category.name;
+    //         itemNum.innerText = catInfo.portal_count;
+    //         itemTitle.classList.add("games-page-item-body-item-title");
+    //         itemNum.classList.add("games-page-item-body-item-num");
+    //         itemBody.appendChild(itemTitle);
+    //         itemBody.appendChild(spacing);
+    //         itemBody.appendChild(itemNum);
+    //         itemBody.className = "games-page-item-body-item";
 
-            // itemBody.innerHTML = `
-            //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
-            //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
+    //         // itemBody.innerHTML = `
+    //         //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
+    //         //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
 
-            document.getElementById(`${gameInfo.id}`).appendChild(itemBody);
-        });
-    })
+    //         document.getElementById(`${gameInfo.id}`).appendChild(itemBody);
+    //     });
+    // })
 
     return (
         <Link to={"/games/" + gameInfo.id}><div className='games-page-item'>
@@ -40,6 +42,9 @@ export default function GameEntry({ gameInfo }) {
                 <span><b>{gameInfo.name}</b></span>
             </div>
             <div id={gameInfo.id} className='games-page-item-body'>
+                {gameInfoCats.map((cat, i) => {
+                    return <GameCategory iteration={i} gameinfo={gameInfo} cat={cat} key={i}></GameCategory>
+                })}
             </div>
         </div></Link>
     )

diff --git a/frontend/src/components/pages/gamecat.js b/frontend/src/components/pages/gamecat.js
@@ -0,0 +1,28 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
+
+export default function GameCategory(prop) {
+    const [iteration, setIteration] = React.useState(prop.iteration);
+    const [category, setCategory] = React.useState(prop.cat);
+    const [gameinfo, setGameinfo] = React.useState(prop.gameinfo);
+
+    let cats = [
+        1,
+        2,
+        3,
+        4,
+        1,
+        2,
+        3,
+    ]
+
+    return (
+        <Link className='games-page-item-body-item' to={`/games/${gameinfo.id}?cat=${cats[iteration] - 1}`}>
+            <div>
+                <span className='games-page-item-body-item-title'>{category.category.name}</span><br></br>
+                <span className='games-page-item-body-item-num'>{category.portal_count}</span>
+            </div>
+        </Link>
+    )
+}
diff --git a/frontend/src/components/pages/map.js b/frontend/src/components/pages/map.js
@@ -0,0 +1,9 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
+
+export default function MapItem(prop) {
+    return (
+        <div>Hello from MapItem</div>
+    )
+}
diff --git a/frontend/src/components/pages/maplist.js b/frontend/src/components/pages/maplist.js
@@ -35,6 +35,13 @@ export default function Maplist(prop) {
         const url = new URL(window.location.href)
 
         const params = new URLSearchParams(url.search)
+
+        if (params.get("cat") != null) {
+            catState = parseFloat(params.get("cat"))
+        }
+
+        console.log(catState)
+
         gameState = parseFloat(location.pathname.split("/")[2])
 
         if (gameState == 1) {
@@ -68,7 +75,7 @@ export default function Maplist(prop) {
 
         // }
 
-        setCatPortalCount(data.data[gameState - 1].category_portals[0].portal_count);
+        setCatPortalCount(data.data[gameState - 1].category_portals[catState].portal_count);
 
         // if (chapterParam) {
         //     document.querySelector("#pageNumbers").innerText = `${chapterParam - minPage + 1}/${maxPage - minPage + 1}`
@@ -127,7 +134,7 @@ export default function Maplist(prop) {
 
         categoryNum++;
         const gameNavBtn = document.createElement("button");
-        if (categoryNum == 1) {
+        if (categoryNum == catState + 1) {
             gameNavBtn.className = "game-nav-btn selected";
         } else {
             gameNavBtn.className = "game-nav-btn";
@@ -158,13 +165,15 @@ export default function Maplist(prop) {
 
         const data = await response.json();
         catState = category.category.id - 1;
-        // console.log(catState)
+        console.log(catState)
         document.querySelector("#catPortalCount").innerText = category.portal_count;
     }
 
     async function changePage(page) {
         const pageNumbers = document.querySelector("#pageNumbers");
 
+        if (pageNumbers == null) return;
+
         pageNumbers.innerText = `${currentPage - minPage + 1}/${maxPage - minPage + 1}`;
 
         const maplistMaps = document.querySelector(".maplist-maps");
@@ -798,7 +807,7 @@ export default function Maplist(prop) {
                     {!loading ?
                         <span><b id='gameTitle'>{gameTitle}</b></span>
                         :
-                        <span><b id='gameTitle' className='loader-text'>LOADINGLOADING</b></span>}
+                        <span><b id='gameTitle' className='loader-text header'>LOADINGLOADING</b></span>}
                 </section>
 
                 <div className='game'>

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
@@ -99,8 +99,8 @@ if(sidebar===1){
 const location = useLocation()
 React.useEffect(()=>{
     if(location.pathname==="/"){SidebarClick(1)}
-    if(location.pathname.includes("news")){SidebarClick(2)}
-    if(location.pathname.includes("games")){SidebarClick(3)}
+    if(location.pathname.includes("games")){SidebarClick(2)}
+    if(location.pathname.includes("news")){SidebarClick(3)}
     if(location.pathname.includes("leaderboards")){SidebarClick(4)}
     if(location.pathname.includes("scorelog")){SidebarClick(5)}
     if(location.pathname.includes("profile")){SidebarClick(6)}
@@ -123,13 +123,15 @@ React.useEffect(()=>{
 
 return (
     <div id='sidebar'>
+        <Link to={"/"}>
         <div id='logo'> {/* logo */}
             <img src={logo} alt="" height={"80px"}/>
             <div id='logo-text'>
                 <span><b>PORTAL 2</b></span><br/>
                 <span>Least Portals</span>
             </div>
         </div>
+        </Link>
         <div id='sidebar-list'> {/* List */}
             <div id='sidebar-toplist'> {/* Top */} 
 
@@ -141,14 +143,14 @@ return (
                     <button className='sidebar-button'><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
                 </Link>
 
-                <Link to="/news" tabIndex={-1}>
-                    <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>
-                </Link>
-
                 <Link to="/games" tabIndex={-1}>
                     <button className='sidebar-button'><img src={img4} alt="" /><span>Games</span></button>
                 </Link>
 
+                <Link to="/news" tabIndex={-1}>
+                    <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>
+                </Link>
+
                 <Link to="/leaderboards" tabIndex={-1}>
                     <button className='sidebar-button'><img src={img5} alt="" /><span>Leaderboards</span></button>
                 </Link>