fix/frontend: games page css rehaul, small maplist fixes

6 files changed, 101 insertions, 30 deletions

diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index d8879ef..80ee416 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -3,6 +3,8 @@ import { Link } from "react-router-dom";
 
 import { Game, GameCategoryPortals } from '@customTypes/Game';
 import "@css/Games.css"
+import games from "@css/Games.module.css";
+import info from "@css/Info.module.css";
 
 interface GameCategoryProps {
     game: Game;
@@ -11,11 +13,11 @@ interface GameCategoryProps {
 
 const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
     return (
-        <Link className="games-page-item-body-item" to={"/games/" + game.id + "?cat=" + cat.category.id}>
+        <Link className={info.infoBlock} to={"/games/" + game.id + "?cat=" + cat.category.id}>
         <div>
-              <span className='games-page-item-body-item-title'>{cat.category.name}</span>
+              <span>{cat.category.name}</span>
               <br />
-              <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
+              <span>{cat.portal_count}</span>
         </div>
         </Link>
     )
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index 3bd2842..ebba419 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 
 import { Game, GameCategoryPortals } from '@customTypes/Game';
 import "@css/Games.css"
+import games from "@css/Games.module.css";
 
 import GameCategory from '@components/GameCategory';
 
@@ -18,12 +19,12 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
   }, [game.category_portals]);
 
   return (
-    <Link to={"/games/" + game.id}><div className='games-page-item'>
-      <div className='games-page-item-header'>
-        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
+    <Link to={"/games/" + game.id}><div className={games.game}>
+      <div className={games.header}>
+                  <div style={{ backgroundImage: `url(${game.image})` }}></div>
         <span><b>{game.name}</b></span>
       </div>
-      <div id={game.id as any as string} className='games-page-item-body'>
+          <div id={game.id as any as string} className={games.infoBlockContainer}>
         {catInfo.map((cat, index) => {
           return <GameCategory cat={cat} game={game} key={index}></GameCategory>
         })}
diff --git a/frontend/src/css/Games.module.css b/frontend/src/css/Games.module.css
new file mode 100644
index 0000000..4c598cd
--- /dev/null
+++ b/frontend/src/css/Games.module.css
@@ -0,0 +1,61 @@
+.content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 24px;
+        margin-top: 24px;
+}
+
+.content a {
+        position: relative;
+        width: 100%;
+}
+
+.game {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        overflow: hidden;
+        border-radius: 24px;
+        background-color: var(--primary-dark);
+}
+
+.header {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+        flex: 1;
+}
+
+.header span {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        text-align: center;
+        justify-content: center;
+        width: 100%;
+        padding: 24px 0px;
+        text-wrap: nowrap;
+}
+
+.header div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        background-size: cover;
+        filter: blur(4px);
+}
+
+.infoBlockContainer {
+        flex: 1;
+        display: flex;
+        gap: 12px;
+        margin: 12px;
+        align-items: center;
+        justify-content: center;
+        height: 50%;
+}
diff --git a/frontend/src/css/Info.module.css b/frontend/src/css/Info.module.css
new file mode 100644
index 0000000..144346e
--- /dev/null
+++ b/frontend/src/css/Info.module.css
@@ -0,0 +1,21 @@
+.infoBlock {
+        background-color: var(--primary);
+        display: flex;
+        width: 100%;
+        border-radius: 18px;
+        text-align: center;
+        justify-content: center;
+        padding: 4px 0px;
+        text-wrap: nowrap;
+}
+
+.infoBlock > div > span:nth-child(1) {
+        margin-top: 0px;
+        font-size: 26px;
+}
+
+.infoBlock > div > span:nth-child(3) {
+        font-size: 50px;
+        font-family: BarlowCondensed-Bold;
+}
+
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index e7e031e..45dd170 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,36 +3,20 @@ import React from 'react';
 import GameEntry from '@components/GameEntry';
 import { Game } from '@customTypes/Game';
 import "@css/Maps.css"
+import gamesCSS from "@css/Games.module.css";
 
 interface GamesProps {
     games: Game[];
 }
 
 const Games: React.FC<GamesProps> = ({ games }) => {
-
-    const _page_load = () => {
-      const loaders = document.querySelectorAll(".loader");
-      loaders.forEach((loader) => {
-          (loader as HTMLElement).style.display = "none";
-      });
-    }
-
-    React.useEffect(() => {
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
-            game.innerHTML = "";
-        });
-        _page_load();
-    }, []);
-
     return (
         <main>
             <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        {games.map((game, index) => (
-                            <GameEntry game={game} key={index} />
-                        ))}
-                    </div>
+                                <div className={gamesCSS.content}>
+                    {games.map((game, index) => (
+                        <GameEntry game={game} key={index} />
+                    ))}
                 </div>
             </section>
         </main>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 7b4ce06..ecea3e1 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -123,7 +123,9 @@ const Maplist: React.FC = () => {
                     )?.portal_count
                   }
                 </h2>
-                <h3>portals</h3>
+                                <h3>{game?.category_portals.find(
+                                        (obj) => obj.category.id === catNum + 1)!.portal_count == 1 ? "portal" : "portals"
+                                }</h3>
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
@@ -162,7 +164,7 @@ const Maplist: React.FC = () => {
                         <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>
+                                        <span>{map.category_portals.find((obj) => obj.category.id === catNum + 1)?.portal_count == 1 ? "portal" : "portals"}</span>
                       </div>
                     </div>
                     <div className="difficulty-bar">