From 681f7d3ba097cd8d204ff3ac4dae01432d323e5b Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:43:17 +0300
Subject: feat/frontend: dynamic title and meta descriptions (#261)

---
 frontend/src/pages/Maplist.tsx | 48 +++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

(limited to 'frontend/src/pages/Maplist.tsx')

diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 8fc52b0..04938cf 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -1,5 +1,6 @@
 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";
@@ -25,9 +26,9 @@ const Maplist: React.FC = () => {
   const navigate = useNavigate();
 
   function _update_currently_selected(catNum2: number) {
-      setCurrentlySelected(catNum2);
-      navigate("/games/" + game?.id + "?cat=" + catNum2);
-      setHasClicked(true);
+    setCurrentlySelected(catNum2);
+    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    setHasClicked(true);
   }
 
   const _fetch_chapters = async (chapter_id: string) => {
@@ -52,12 +53,12 @@ const Maplist: React.FC = () => {
     // location query params
     const queryParams = new URLSearchParams(location.search);
     if (queryParams.get("chapter")) {
-        let cat = parseFloat(queryParams.get("chapter") || "");
-		if (gameId == 2) {
-			cat += 10;
-		}
-		_fetch_chapters(cat.toString());
-	}
+      let cat = parseFloat(queryParams.get("chapter") || "");
+      if (gameId == 2) {
+        cat += 10;
+      }
+      _fetch_chapters(cat.toString());
+    }
 
     const _fetch_game = async () => {
       const games = await API.get_games();
@@ -68,7 +69,7 @@ const Maplist: React.FC = () => {
         setLoad(false);
       }
     };
-    
+
     const _fetch_game_chapters = async () => {
       const games_chapters = await API.get_games_chapters(gameId.toString());
       setGameChapters(games_chapters);
@@ -81,7 +82,7 @@ const Maplist: React.FC = () => {
   }, []);
 
   useEffect(() => {
-  	const queryParams = new URLSearchParams(location.search);
+    const queryParams = new URLSearchParams(location.search);
     if (gameChapters != undefined && !queryParams.get("chapter")) {
       _fetch_chapters(gameChapters!.chapters[0].id.toString());
     }
@@ -91,6 +92,9 @@ const Maplist: React.FC = () => {
 
   return (
     <main>
+      <Helmet>
+        <title>LPHUB | Maplist</title>
+      </Helmet>
       <section style={{ marginTop: "20px" }}>
         <Link to="/games">
           <button className="nav-button" style={{ borderRadius: "20px" }}>
@@ -121,7 +125,7 @@ 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>
                 ))}
@@ -132,26 +136,26 @@ 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>
                 <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}`}>
+              {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="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
@@ -169,9 +173,9 @@ const Maplist: React.FC = () => {
                         <div className="difficulty-point"></div>
                       </div>
                     </div>
-                    </Link>
-                  </div>
-                })}
+                  </Link>
+                </div>
+              })}
             </section>
           </div>
         </section>
-- 
cgit v1.2.3


From 6a163167c81689f07e76e7ff9ab7449f88ca0ea4 Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Wed, 19 Mar 2025 15:38:58 +0000
Subject: feat/frontend: adjust difficulty to 1-10 scale (#268)

---
 frontend/src/components/Summary.tsx | 21 ++++++++++-----------
 frontend/src/pages/Maplist.tsx      |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'frontend/src/pages/Maplist.tsx')

diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 4bcaa6a..2fec182 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -140,18 +140,17 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
       <section id='section4' className='summary1'>
         <div id='difficulty'>
           <span>Difficulty</span>
-          {data.summary.routes[selectedRun].rating === 0 && (<span>N/A</span>)}
-          {data.summary.routes[selectedRun].rating === 1 && (<span style={{ color: "lime" }}>Very easy</span>)}
-          {data.summary.routes[selectedRun].rating === 2 && (<span style={{ color: "green" }}>Easy</span>)}
-          {data.summary.routes[selectedRun].rating === 3 && (<span style={{ color: "yellow" }}>Medium</span>)}
-          {data.summary.routes[selectedRun].rating === 4 && (<span style={{ color: "orange" }}>Hard</span>)}
-          {data.summary.routes[selectedRun].rating === 5 && (<span style={{ color: "red" }}>Very hard</span>)}
+          {data.summary.routes[selectedRun].rating <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.summary.routes[selectedRun].rating <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
+          {data.summary.routes[selectedRun].rating <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
+          {data.summary.routes[selectedRun].rating <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
+          {data.summary.routes[selectedRun].rating <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
           <div>
-            {data.summary.routes[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating <= 6 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating <= 8 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating <= 10 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
           </div>
         </div>
         <div id='count'>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 04938cf..76f9a52 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -165,7 +165,7 @@ const Maplist: React.FC = () => {
                     </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={map.difficulty <= 2 ? "one" : map.difficulty <= 4 ? "two" : map.difficulty <= 6 ? "three" : map.difficulty <= 8 ? "four" : map.difficulty <= 10 ? "five" : "one"}>
                         <div className="difficulty-point"></div>
                         <div className="difficulty-point"></div>
                         <div className="difficulty-point"></div>
-- 
cgit v1.2.3