1 files changed, 109 insertions, 56 deletions

diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 04938cf..5138964 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
-import { Helmet } from "react-helmet";
+import React, { useEffect } from 'react';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
-import "@css/Maplist.css";
-import { API } from "@api/Api";
-import { Game } from "@customTypes/Game";
-import { GameChapter, GamesChapters } from "@customTypes/Chapters";
+import '@css/Maplist.css';
+import { API } from '@api/Api';
+import { Game } from '@customTypes/Game';
+import { GameChapter, GamesChapters } from '@customTypes/Chapters';
 
 const Maplist: React.FC = () => {
   const [game, setGame] = React.useState<Game | null>(null);
@@ -19,41 +19,41 @@ const Maplist: React.FC = () => {
   const [curChapter, setCurChapter] = React.useState<GameChapter>();
   const [numChapters, setNumChapters] = React.useState<number>(0);
 
-  const [dropdownActive, setDropdownActive] = React.useState("none");
+  const [dropdownActive, setDropdownActive] = React.useState('none');
 
-  const params = useParams<{ id: string, chapter: string }>();
+  const params = useParams<{ id: string; chapter: string }>();
   const location = useLocation();
   const navigate = useNavigate();
 
   function _update_currently_selected(catNum2: number) {
     setCurrentlySelected(catNum2);
-    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    navigate('/games/' + game?.id + '?cat=' + catNum2);
     setHasClicked(true);
   }
 
   const _fetch_chapters = async (chapter_id: string) => {
     const chapters = await API.get_chapters(chapter_id);
     setCurChapter(chapters);
-  }
+  };
 
   const _handle_dropdown_click = () => {
-    if (dropdownActive == "none") {
-      setDropdownActive("block");
+    if (dropdownActive == 'none') {
+      setDropdownActive('block');
     } else {
-      setDropdownActive("none");
+      setDropdownActive('none');
     }
-  }
+  };
 
   // im sorry but im too lazy to fix this right now
   useEffect(() => {
     // gameID
-    const gameId = parseFloat(params.id || "");
+    const gameId = parseFloat(params.id || '');
     setId(gameId);
 
     // location query params
     const queryParams = new URLSearchParams(location.search);
-    if (queryParams.get("chapter")) {
-      let cat = parseFloat(queryParams.get("chapter") || "");
+    if (queryParams.get('chapter')) {
+      let cat = parseFloat(queryParams.get('chapter') || '');
       if (gameId == 2) {
         cat += 10;
       }
@@ -62,7 +62,7 @@ const Maplist: React.FC = () => {
 
     const _fetch_game = async () => {
       const games = await API.get_games();
-      const foundGame = games.find((game) => game.id === gameId);
+      const foundGame = games.find(game => game.id === gameId);
       // console.log(foundGame)
       if (foundGame) {
         setGame(foundGame);
@@ -74,7 +74,7 @@ const Maplist: React.FC = () => {
       const games_chapters = await API.get_games_chapters(gameId.toString());
       setGameChapters(games_chapters);
       setNumChapters(games_chapters.chapters.length);
-    }
+    };
 
     setLoad(true);
     _fetch_game();
@@ -83,21 +83,19 @@ const Maplist: React.FC = () => {
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
-    if (gameChapters != undefined && !queryParams.get("chapter")) {
+    if (gameChapters != undefined && !queryParams.get('chapter')) {
       _fetch_chapters(gameChapters!.chapters[0].id.toString());
     }
-  }, [gameChapters])
-
-
+  }, [gameChapters]);
 
   return (
     <main>
       <Helmet>
         <title>LPHUB | Maplist</title>
       </Helmet>
-      <section style={{ marginTop: "20px" }}>
+      <section style={{ marginTop: '20px' }}>
         <Link to="/games">
-          <button className="nav-button" style={{ borderRadius: "20px" }}>
+          <button className="nav-button" style={{ borderRadius: '20px' }}>
             <i className="triangle"></i>
             <span>Games List</span>
           </button>
@@ -117,7 +115,7 @@ const Maplist: React.FC = () => {
                 <h2 className="portal-count">
                   {
                     game?.category_portals.find(
-                      (obj) => obj.category.id === catNum + 1
+                      obj => obj.category.id === catNum + 1
                     )?.portal_count
                   }
                 </h2>
@@ -125,7 +123,19 @@ const Maplist: React.FC = () => {
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
-                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => { setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id) }}>
+                  <button
+                    key={index}
+                    className={
+                      currentlySelected == cat.category.id ||
+                      (cat.category.id - 1 == catNum && !hasClicked)
+                        ? 'game-cat-button selected'
+                        : 'game-cat-button'
+                    }
+                    onClick={() => {
+                      setCatNum(cat.category.id - 1);
+                      _update_currently_selected(cat.category.id);
+                    }}
+                  >
                     <span>{cat.category.name}</span>
                   </button>
                 ))}
@@ -136,45 +146,88 @@ const Maplist: React.FC = () => {
           <div>
             <section className="chapter-select-container">
               <div>
-                <span style={{ fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px" }}>{curChapter?.chapter.name.split(" - ")[0]}</span>
+                <span
+                  style={{
+                    fontSize: '18px',
+                    transform: 'translateY(5px)',
+                    display: 'block',
+                    marginTop: '10px',
+                  }}
+                >
+                  {curChapter?.chapter.name.split(' - ')[0]}
+                </span>
               </div>
               <div onClick={_handle_dropdown_click} className="dropdown">
-                <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
+                <span>{curChapter?.chapter.name.split(' - ')[1]}</span>
                 <i className="triangle"></i>
               </div>
-              <div className="dropdown-elements" style={{ display: dropdownActive }}>
+              <div
+                className="dropdown-elements"
+                style={{ display: dropdownActive }}
+              >
                 {gameChapters?.chapters.map((chapter, i) => {
-                  return <div className="dropdown-element" onClick={() => { _fetch_chapters(chapter.id.toString()); _handle_dropdown_click() }}>{chapter.name}</div>
-                })
-
-                }
+                  return (
+                    <div
+                      className="dropdown-element"
+                      onClick={() => {
+                        _fetch_chapters(chapter.id.toString());
+                        _handle_dropdown_click();
+                      }}
+                    >
+                      {chapter.name}
+                    </div>
+                  );
+                })}
               </div>
             </section>
             <section className="maplist">
               {curChapter?.maps.map((map, i) => {
-                return <div className="maplist-entry">
-                  <Link to={`/maps/${map.id}`}>
-                    <span>{map.name}</span>
-                    <div className="map-entry-image" style={{ backgroundImage: `url(${map.image})` }}>
-                      <div className="blur map">
-                        <span>{map.is_disabled ? map.category_portals[0].portal_count : map.category_portals.find(
-                          (obj) => obj.category.id === catNum + 1
-                        )?.portal_count}</span>
-                        <span>portals</span>
+                return (
+                  <div className="maplist-entry">
+                    <Link to={`/maps/${map.id}`}>
+                      <span>{map.name}</span>
+                      <div
+                        className="map-entry-image"
+                        style={{ backgroundImage: `url(${map.image})` }}
+                      >
+                        <div className="blur map">
+                          <span>
+                            {map.is_disabled
+                              ? map.category_portals[0].portal_count
+                              : map.category_portals.find(
+                                  obj => obj.category.id === catNum + 1
+                                )?.portal_count}
+                          </span>
+                          <span>portals</span>
+                        </div>
                       </div>
-                    </div>
-                    <div className="difficulty-bar">
-                      {/* <span>Difficulty:</span> */}
-                      <div className={map.difficulty == 0 ? "one" : map.difficulty == 1 ? "two" : map.difficulty == 2 ? "three" : map.difficulty == 3 ? "four" : map.difficulty == 4 ? "five" : "one"}>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
+                      <div className="difficulty-bar">
+                        {/* <span>Difficulty:</span> */}
+                        <div
+                          className={
+                            map.difficulty == 0
+                              ? 'one'
+                              : map.difficulty == 1
+                                ? 'two'
+                                : map.difficulty == 2
+                                  ? 'three'
+                                  : map.difficulty == 3
+                                    ? 'four'
+                                    : map.difficulty == 4
+                                      ? 'five'
+                                      : 'one'
+                          }
+                        >
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                        </div>
                       </div>
-                    </div>
-                  </Link>
-                </div>
+                    </Link>
+                  </div>
+                );
               })}
             </section>
           </div>