Merge branch 'main' into css-overhaulcss-overhaul

18 files changed, 330 insertions, 148 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e4bde75..bdd3adc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Routes, Route } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import { UserProfile } from '@customTypes/Profile';
 import Sidebar from './components/Sidebar';
@@ -66,14 +67,12 @@ const App: React.FC = () => {
     _fetch_games();
   }, []);
 
-  if (!games) {
-    return (
-      <></>
-    )
-  };
-
   return (
     <>
+      <Helmet>
+        <title>LPHUB</title>
+        <meta name="description" content="Least Portals Hub" />
+      </Helmet>
       <UploadRunDialog token={token} open={uploadRunDialog} onClose={(updateProfile) => {
         setUploadRunDialog(false);
         if (updateProfile) {
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 2e55ab4..862e688 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -29,13 +29,13 @@ export const API = {
   get_unofficial_rankings: () => get_unofficial_rankings(),
   // Maps
   get_map_summary: (map_id: string) => get_map_summary(map_id),
-  get_map_leaderboard: (map_id: string) => get_map_leaderboard(map_id),
+  get_map_leaderboard: (map_id: string, page: string) => get_map_leaderboard(map_id, page),
   get_map_discussions: (map_id: string) => get_map_discussions(map_id),
   get_map_discussion: (map_id: string, discussion_id: number) => get_map_discussion(map_id, discussion_id),
 
   post_map_discussion: (token: string, map_id: string, content: MapDiscussionContent) => post_map_discussion(token, map_id, content),
   post_map_discussion_comment: (token: string, map_id: string, discussion_id: number, comment: string) => post_map_discussion_comment(token, map_id, discussion_id, comment),
-  post_record: (token: string, run: UploadRunContent) => post_record(token, run),
+  post_record: (token: string, run: UploadRunContent, map_id: number) => post_record(token, run, map_id),
 
   delete_map_discussion: (token: string, map_id: string, discussion_id: number) => delete_map_discussion(token, map_id, discussion_id),
 
diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts
index 89657b5..aa967ce 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -8,8 +8,8 @@ export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
   return response.data.data;
 };
 
-export const get_map_leaderboard = async (map_id: string): Promise<MapLeaderboard | undefined> => {
-  const response = await axios.get(url(`maps/${map_id}/leaderboards`));
+export const get_map_leaderboard = async (map_id: string, page: string): Promise<MapLeaderboard | undefined> => {
+  const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`));
   if (!response.data.success) {
     return undefined;
   }
@@ -73,9 +73,9 @@ export const delete_map_discussion = async (token: string, map_id: string, discu
   return response.data.success;
 };
 
-export const post_record = async (token: string, run: UploadRunContent): Promise<[boolean, string]> => {
+export const post_record = async (token: string, run: UploadRunContent, map_id: number): Promise<[boolean, string]> => {
   if (run.partner_demo) {
-    const response = await axios.postForm(url(`maps/${run.map_id}/record`), {
+    const response = await axios.postForm(url(`maps/${map_id}/record`), {
       "host_demo": run.host_demo,
       "partner_demo": run.partner_demo,
     }, {
@@ -83,16 +83,16 @@ export const post_record = async (token: string, run: UploadRunContent): Promise
         "Authorization": token,
       }
     });
-    return [ response.data.success, response.data.message ];
+    return [response.data.success, response.data.message];
   } else {
-    const response = await axios.postForm(url(`maps/${run.map_id}/record`), {
+    const response = await axios.postForm(url(`maps/${map_id}/record`), {
       "host_demo": run.host_demo,
     }, {
       headers: {
         "Authorization": token,
       }
     });
-    return [ response.data.success, response.data.message ];
+    return [response.data.success, response.data.message];
   }
 }
 
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 4a8b463..fb614fa 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,20 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { DownloadIcon, ThreedotIcon } from '@images/Images';
 import { MapLeaderboard } from '@customTypes/Map';
 import { ticks_to_time, time_ago } from '@utils/Time';
+import { API } from "@api/Api";
 import useMessage from "@hooks/UseMessage";
 import "@css/Maps.css"
 
 interface LeaderboardsProps {
-  data?: MapLeaderboard;
+        mapID: string;
 }
 
-const Leaderboards: React.FC<LeaderboardsProps> = ({ data }) => {
+const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
+  const navigate = useNavigate();
+  const [data, setData] = React.useState<MapLeaderboard | undefined>(undefined);
+  const [pageNumber, setPageNumber] = React.useState<number>(1);
+
+  const _fetch_map_leaderboards = async () => {
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, pageNumber.toString());
+    setData(mapLeaderboards);
+  };
 
   const { message, MessageDialogComponent } = useMessage();
-  const [pageNumber, setPageNumber] = React.useState<number>(1);
+
+  React.useEffect(() => {
+          _fetch_map_leaderboards();
+          console.log(data);
+  }, [pageNumber, navigate])
 
   if (!data) {
     return (
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 4bcaa6a..7da2f1e 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -140,20 +140,34 @@ 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.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.map.difficulty > 2 && data.map.difficulty <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
+          {data.map.difficulty > 4 && data.map.difficulty <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
+          {data.map.difficulty > 6 && data.map.difficulty <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
+          {data.map.difficulty > 8 && data.map.difficulty <= 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.map.difficulty <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.map.difficulty > 2 && data.map.difficulty <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.map.difficulty > 4 && data.map.difficulty <= 6 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.map.difficulty > 6 && data.map.difficulty <= 8 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.map.difficulty > 8 && data.map.difficulty <= 10 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
           </div>
         </div>
+        {/* <div id='difficulty'>
+          <span>Difficulty</span>
+          {data.summary.routes[selectedRun].rating <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.summary.routes[selectedRun].rating > 2 && data.summary.routes[selectedRun].rating <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
+          {data.summary.routes[selectedRun].rating > 4 && data.summary.routes[selectedRun].rating <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
+          {data.summary.routes[selectedRun].rating > 6 && data.summary.routes[selectedRun].rating <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
+          {data.summary.routes[selectedRun].rating > 8 && data.summary.routes[selectedRun].rating <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
+          <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 > 2 && data.summary.routes[selectedRun].rating <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating > 4 && data.summary.routes[selectedRun].rating <= 6 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating > 6 && data.summary.routes[selectedRun].rating <= 8 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating > 8 && data.summary.routes[selectedRun].rating <= 10 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+          </div>
+        </div> */}
         <div id='count'>
           <span>Completion Count</span>
           <div>{data.summary.routes[selectedRun].completion_count}</div>
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index 951944b..971a747 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -5,12 +5,12 @@ import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp';
 import btn from "@css/Button.module.css";
 import '@css/UploadRunDialog.css';
 import { Game } from '@customTypes/Game';
-import { Map } from '@customTypes/Map';
 import { API } from '@api/Api';
 import { useNavigate } from 'react-router-dom';
 import useMessage from '@hooks/UseMessage';
 import useConfirm from '@hooks/UseConfirm';
 import useMessageLoad from "@hooks/UseMessageLoad";
+import { MapNames } from '@customTypes/MapNames';
 
 interface UploadRunDialogProps {
   token?: string;
@@ -28,19 +28,11 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
   const navigate = useNavigate();
 
   const [uploadRunContent, setUploadRunContent] = React.useState<UploadRunContent>({
-    map_id: 0,
     host_demo: null,
     partner_demo: null,
   });
 
-  const [currentMap, setCurrentMap] = React.useState<string>("");
-
-  const _set_current_map = (game_name: string) => {
-    setCurrentMap(game_name);
-  }
-
   const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
-  const [selectedGameMaps, setSelectedGameMaps] = React.useState<Map[]>([]);
   const [selectedGameName, setSelectedGameName] = React.useState<string>("");
 
   // dropdowns
@@ -51,6 +43,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
   const [dragHightlightPartner, setDragHighlightPartner] = React.useState<boolean>(false);
+
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const fileInputRefPartner = React.useRef<HTMLInputElement>(null);
 
@@ -103,14 +96,6 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   const _handle_game_select = async (game_id: string, game_name: string) => {
     setLoading(true);
-    const gameMaps = await API.get_game_maps(game_id);
-    setSelectedGameMaps(gameMaps);
-    setUploadRunContent({
-      map_id: gameMaps.find((map) => !map.is_disabled)!.id, //gameMaps[0].id,
-      host_demo: null,
-      partner_demo: null,
-    });
-    _set_current_map(gameMaps.find((map) => !map.is_disabled)!.name);
     setSelectedGameID(parseInt(game_id) - 1);
     setSelectedGameName(game_name);
     setLoading(false);
@@ -159,6 +144,20 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         await message("Error", "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode.")
         return
       }
+
+      if (!demo.mapName || !MapNames[demo.mapName]) {
+        await message("Error", "Error while processing demo: Invalid map name.")
+        return
+      }
+
+      if (selectedGameID === 0 && MapNames[demo.mapName] > 60) {
+        await message("Error", "Error while processing demo: Invalid cooperative demo in singleplayer submission.")
+        return
+      } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) {
+        await message("Error", "Error while processing demo: Invalid singleplayer demo in cooperative submission.")
+        return
+      }
+
       const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
 
       const userConfirmed = await confirm("Upload Record", `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`);
@@ -168,10 +167,14 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       }
 
       messageLoad("Uploading...");
-      const [success, response] = await API.post_record(token, uploadRunContent);
+      const [success, response] = await API.post_record(token, uploadRunContent, MapNames[demo.mapName]);
       messageLoadClose();
       await message("Upload Record", response);
       if (success) {
+        setUploadRunContent({
+          host_demo: null,
+          partner_demo: null,
+        });
         onClose(success);
         navigate("/profile");
       }
@@ -180,7 +183,6 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
 
   React.useEffect(() => {
     if (open) {
-
       setDragHighlightPartner(false);
       setDragHighlight(false);
       _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
@@ -204,37 +206,20 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                   <div className='dropdown-cur'>{selectedGameName}</div>
                   <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
                 </div>
-                <div style={{top: "110px"}} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
+                <div style={{ top: "110px" }} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
                   {games.map((game) => (
                     <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div>
                   ))}
                 </div>
-                          {!loading && (
-                                <>
-                                        <div style={{ padding: "25px 0px" }}>
-                        <h3 style={{ margin: "0px 0px" }}>Select Map</h3>
-                        <div onClick={() => _handle_dropdowns(2)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}>
-                          <span style={{ userSelect: "none" }}>{currentMap}</span>
-                          <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
-                        </div>
-                      </div>
-                        <div style={{top: "220px"}} id='dropdown2' className={dropdown2Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
-                          {selectedGameMaps && selectedGameMaps.filter(gameMap => !gameMap.is_disabled).map((gameMap) => (
-                            <div onClick={() => { setUploadRunContent({ ...uploadRunContent, map_id: gameMap.id }); _set_current_map(gameMap.name); _handle_dropdowns(2); }} key={gameMap.id}>{gameMap.name}</div>
-                          ))}
-                        </div>
-                                </>
-
-                        )}
-                        </div>
+              </div>
 
               {
                 !loading &&
                 (
                   <>
-                      
-                                          <div>
-                      <h3 style={{margin: "10px 0px"}}>Host Demo</h3>
+
+                    <div>
+                      <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
                       <div onClick={() => { _handle_file_click(true) }} onDragOver={(e) => { _handle_drag_over(e, true) }} onDrop={(e) => { _handle_drop(e, true) }} onDragLeave={(e) => { _handle_drag_leave(e, true) }} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
                         <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
                         {!uploadRunContent.host_demo ?
@@ -253,38 +238,41 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
                         games[selectedGameID].is_coop &&
                         (
                           <>
-                                                        <div>
-                            <h3 style={{margin: "10px 0px"}}>Partner Demo</h3>
-                            <div onClick={() => { _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}>
-                              <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />                                            {!uploadRunContent.partner_demo ?
-                                <div>
-                                  <span>Drag and drop</span>
+                            <div>
+                              <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3>
+                              <div onClick={() => { _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}>
+                                <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />                                                  {!uploadRunContent.partner_demo ?
                                   <div>
                                     <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
                                     <button className={btn.default}>Upload</button>
                                   </div>
-                                </div>
-                                : null}
+                                  : null}
 
-                              <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
+                                <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
+                              </div>
                             </div>
-                                                        </div>
                           </>
                         )
                       }
-                                          </div>
-                      <div className='search-container'>
+                    </div>
+                    <div className='search-container'>
+
+                    </div>
 
-                      </div>
-                      
                   </>
                 )
               }
             </div>
-                        <div className='upload-run-buttons-container'>
-                        <button className={`${btn.defaultWide}`} onClick={_upload_run}>Submit</button>
-                        <button className={`${btn.defaultWide}`} onClick={() => onClose(false)}>Cancel</button>
-                      </div>
+                              <div className='upload-run-buttons-container'>
+              <button className={`${btn.defaultWide}`} onClick={_upload_run}>Submit</button>
+              <button className={`${btn.defaultWide}`} onClick={() => {
+                onClose(false);
+                setUploadRunContent({
+                  host_demo: null,
+                  partner_demo: null,
+                });
+              }}>Cancel</button>
+            </div>
           </div>
         </div>
       </>
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index fe2e25a..b7bd534 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
 
 import '@css/About.css';
 
@@ -28,6 +29,9 @@ const About: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | About</title>
+            </Helmet>
             <ReactMarkdown>{aboutText}</ReactMarkdown>
         </main>
     );
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index e0320af..5e0d5bf 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import GameEntry from '@components/GameEntry';
 import { Game } from '@customTypes/Game';
@@ -11,6 +12,9 @@ interface GamesProps {
 const Games: React.FC<GamesProps> = ({ games }) => {
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Games</title>
+            </Helmet>
             <section>
                                 <div className={gamesCSS.content}>
                     {games.map((game, index) => (
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 68562b6..4f46af5 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 const Homepage: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Homepage</title>
+            </Helmet>
             <section>
-                <p/>
+                <p />
                 <h1>Welcome to Least Portals Hub!</h1>
                 <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
                 <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index ecea3e1..b9e17f7 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());
     }
@@ -97,6 +98,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" }}>
@@ -129,7 +133,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>
                 ))}
@@ -140,26 +144,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,7 +173,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>
@@ -177,9 +181,9 @@ const Maplist: React.FC = () => {
                         <div className="difficulty-point"></div>
                       </div>
                     </div>
-                    </Link>
-                  </div>
-                })}
+                  </Link>
+                </div>
+              })}
             </section>
           </div>
         </section>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index f1daa36..fb13563 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
 import Summary from '@components/Summary';
@@ -35,7 +36,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   };
 
   const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID);
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
     setMapLeaderboardData(mapLeaderboards);
   };
 
@@ -53,26 +54,32 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   if (!mapSummaryData) {
     // loading placeholder
     return (
-      <main>
-        <section id='section1' className='summary1'>
-          <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
-          </div>
-        </section>
-
-        <section id='section2' className='summary1'>
-          <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
-          <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-          <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
-        </section>
-
-        <section id='section6' className='summary2' />
-      </main>
+      <>
+        <main>
+          <section id='section1' className='summary1'>
+            <div>
+              <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+            </div>
+          </section>
+
+          <section id='section2' className='summary1'>
+            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
+            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+          </section>
+
+          <section id='section6' className='summary2' />
+        </main>
+      </>
     );
   }
 
   return (
     <>
+      <Helmet>
+        <title>LPHUB | {mapSummaryData.map.map_name}</title>
+        <meta name="description" content={mapSummaryData.map.map_name} />
+      </Helmet>
       {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
 
       <div id='background-image'>
@@ -94,7 +101,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
         </section>
 
         {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
-        {navState === 1 && <Leaderboards data={mapLeaderboardData} />}
+        {navState === 1 && <Leaderboards mapID={mapID} />}
         {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
       </main>
     </>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 00d8f4e..ee56999 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
@@ -109,6 +110,10 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
 
   return (
     <div style={{position: "absolute", width: "calc(100% - 50px)", left: "350px"}}>
+      <Helmet>
+        <title>LPHUB | {profile.user_name}</title>
+        <meta name="description" content={profile.user_name} />
+      </Helmet>
       {MessageDialogComponent}
       {MessageDialogLoadComponent}
       {ConfirmDialogComponent}
@@ -267,7 +272,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
 
                           <span style={{ display: "grid" }}>{e.score_count}</span>
 
-                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : e.score_count - r.map_wr_count}</span>
+                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
                           <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
                           <span> </span>
                           {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -313,7 +318,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
                             {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
                             <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
                             <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : record!.scores[i].score_count - record!.map_wr_count}</span>
+                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
                             <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                             <span> </span>
                             {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index cdb87a8..71aa427 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { Helmet } from "react-helmet";
 
 import RankingEntry from "@components/RankingEntry";
 import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
@@ -13,9 +14,9 @@ const Rankings: React.FC = () => {
         official,
         unofficial
     }
-        const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
 
-        const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
 
     enum RankingCategories {
         rankings_overall,
@@ -26,7 +27,7 @@ const Rankings: React.FC = () => {
     const [load, setLoad] = React.useState<boolean>(false);
 
     const _fetch_rankings = async () => {
-                setLeaderboardLoad(false);
+        setLeaderboardLoad(false);
         const rankings = await API.get_official_rankings();
         setLeaderboardData(rankings);
         if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -37,12 +38,12 @@ const Rankings: React.FC = () => {
             setCurrentLeaderboard(rankings.rankings_overall)
         }
         setLoad(true);
-                setLeaderboardLoad(true);
+        setLeaderboardLoad(true);
     }
 
     const __dev_fetch_unofficial_rankings = async () => {
         try {
-                        setLeaderboardLoad(false);
+            setLeaderboardLoad(false);
             const rankings = await API.get_unofficial_rankings();
             setLeaderboardData(rankings);
             if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
@@ -53,7 +54,7 @@ const Rankings: React.FC = () => {
             } else {
                 setCurrentLeaderboard(rankings.rankings_overall)
             }
-                        setLeaderboardLoad(true);
+            setLeaderboardLoad(true);
         } catch (e) {
             console.log(e)
         }
@@ -88,12 +89,15 @@ const Rankings: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Rankings</title>
+            </Helmet>
             <section className="nav-container nav-1">
                 <div>
-                    <button onClick={() => {_fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+                    <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
                         <span>Official (LPHUB)</span>
                     </button>
-                    <button onClick={() => {__dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial)}} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
                         <span>Unofficial (Steam)</span>
                     </button>
                 </div>
@@ -128,11 +132,11 @@ const Rankings: React.FC = () => {
                         })
                         }
 
-                                                {leaderboardLoad ? null :
-                                                        <div style={{display: "flex", justifyContent: "center", margin: "30px 0px"}}>
-                                                        <span className="loader"></span>
-                                                        </div>
-                                                }
+                        {leaderboardLoad ? null :
+                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
+                                <span className="loader"></span>
+                            </div>
+                        }
                     </div>
                 </section>
                 : null}
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index b5625ce..9f57b7e 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
 
 import '@css/Rules.css';
 
@@ -29,6 +30,9 @@ const Rules: React.FC = () => {
 
     return (
         <main>
+            <Helmet>
+                <title>LPHUB | Rules</title>
+            </Helmet>
             <ReactMarkdown>{rulesText}</ReactMarkdown>
         </main>
     );
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index f90d1aa..d43c0c6 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
@@ -92,6 +93,10 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
   return (
     <main>
+      <Helmet>
+        <title>LPHUB | {user.user_name}</title>
+        <meta name="description" content={user.user_name} />
+      </Helmet>
       {MessageDialogComponent}
       <section id='section1' className='profile'>
         <div>
@@ -236,7 +241,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
 
                         <span style={{ display: "grid" }}>{e.score_count}</span>
 
-                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : e.score_count - r.map_wr_count}</span>
+                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
                         <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
                         <span> </span>
                         {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
@@ -281,7 +286,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
                           {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
                           <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
                           <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : record!.scores[i].score_count - record!.map_wr_count}</span>
+                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
                           <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                           <span> </span>
                           {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
diff --git a/frontend/src/types/Content.ts b/frontend/src/types/Content.ts
index 42a6917..775fab4 100644
--- a/frontend/src/types/Content.ts
+++ b/frontend/src/types/Content.ts
@@ -18,7 +18,6 @@ export interface MapDiscussionCommentContent {
 };
 
 export interface UploadRunContent {
-  map_id: number;
   host_demo: File | null;
   partner_demo: File | null;
 };
diff --git a/frontend/src/types/Map.ts b/frontend/src/types/Map.ts
index 89c66d5..4f8eabf 100644
--- a/frontend/src/types/Map.ts
+++ b/frontend/src/types/Map.ts
@@ -79,6 +79,7 @@ interface MapSummaryMap {
   map_name: string;
   is_coop: boolean;
   is_disabled: boolean;
+  difficulty: number;
 };
 
 interface MapSummaryDetails {
diff --git a/frontend/src/types/MapNames.ts b/frontend/src/types/MapNames.ts
new file mode 100644
index 0000000..b6313e7
--- /dev/null
+++ b/frontend/src/types/MapNames.ts
@@ -0,0 +1,127 @@
+export const MapNames: { [key: string]: number } = {
+    "sp_a1_intro1": 1,
+    "sp_a1_intro2": 2,
+    "sp_a1_intro3": 3,
+    "sp_a1_intro4": 4,
+    "sp_a1_intro5": 5,
+    "sp_a1_intro6": 6,
+    "sp_a1_intro7": 7,
+    "sp_a1_wakeup": 8,
+    "sp_a2_intro": 9,
+
+    "sp_a2_laser_intro": 10,
+    "sp_a2_laser_stairs": 11,
+    "sp_a2_dual_lasers": 12,
+    "sp_a2_laser_over_goo": 13,
+    "sp_a2_catapult_intro": 14,
+    "sp_a2_trust_fling": 15,
+    "sp_a2_pit_flings": 16,
+    "sp_a2_fizzler_intro": 17,
+
+    "sp_a2_sphere_peek": 18,
+    "sp_a2_ricochet": 19,
+    "sp_a2_bridge_intro": 20,
+    "sp_a2_bridge_the_gap": 21,
+    "sp_a2_turret_intro": 22,
+    "sp_a2_laser_relays": 23,
+    "sp_a2_turret_blocker": 24,
+    "sp_a2_laser_vs_turret": 25,
+    "sp_a2_pull_the_rug": 26,
+
+    "sp_a2_column_blocker": 27,
+    "sp_a2_laser_chaining": 28,
+    "sp_a2_triple_laser": 29,
+    "sp_a2_bts1": 30,
+    "sp_a2_bts2": 31,
+
+    "sp_a2_bts3": 32,
+    "sp_a2_bts4": 33,
+    "sp_a2_bts5": 34,
+    "sp_a2_core": 35,
+
+    "sp_a3_01": 36,
+    "sp_a3_03": 37,
+    "sp_a3_jump_intro": 38,
+    "sp_a3_bomb_flings": 39,
+    "sp_a3_crazy_box": 40,
+    "sp_a3_transition01": 41,
+
+    "sp_a3_speed_ramp": 42,
+    "sp_a3_speed_flings": 43,
+    "sp_a3_portal_intro": 44,
+    "sp_a3_end": 45,
+
+    "sp_a4_intro": 46,
+    "sp_a4_tb_intro": 47,
+    "sp_a4_tb_trust_drop": 48,
+    "sp_a4_tb_wall_button": 49,
+    "sp_a4_tb_polarity": 50,
+    "sp_a4_tb_catch": 51,
+    "sp_a4_stop_the_box": 52,
+    "sp_a4_laser_catapult": 53,
+    "sp_a4_laser_platform": 54,
+    "sp_a4_speed_tb_catch": 55,
+    "sp_a4_jump_polarity": 56,
+
+    "sp_a4_finale1": 57,
+    "sp_a4_finale2": 58,
+    "sp_a4_finale3": 59,
+    "sp_a4_finale4": 60,
+
+    "mp_coop_start": 61,
+    "mp_coop_lobby_3": 62,
+
+    "mp_coop_doors": 63,
+    "mp_coop_race_2": 64,
+    "mp_coop_laser_2": 65,
+    "mp_coop_rat_maze": 66,
+    "mp_coop_laser_crusher": 67,
+    "mp_coop_teambts": 68,
+
+    "mp_coop_fling_3": 69,
+    "mp_coop_infinifling_train": 70,
+    "mp_coop_come_along": 71,
+    "mp_coop_fling_1": 72,
+    "mp_coop_catapult_1": 73,
+    "mp_coop_multifling_1": 74,
+    "mp_coop_fling_crushers": 75,
+    "mp_coop_fan": 76,
+
+    "mp_coop_wall_intro": 77,
+    "mp_coop_wall_2": 78,
+    "mp_coop_catapult_wall_intro": 79,
+    "mp_coop_wall_block": 80,
+    "mp_coop_catapult_2": 81,
+    "mp_coop_turret_walls": 82,
+    "mp_coop_turret_ball": 83,
+    "mp_coop_wall_5": 84,
+
+    "mp_coop_tbeam_redirect": 85,
+    "mp_coop_tbeam_drill": 86,
+    "mp_coop_tbeam_catch_grind_1": 87,
+    "mp_coop_tbeam_laser_1": 88,
+    "mp_coop_tbeam_polarity": 89,
+    "mp_coop_tbeam_polarity2": 90,
+    "mp_coop_tbeam_polarity3": 91,
+    "mp_coop_tbeam_maze": 92,
+    "mp_coop_tbeam_end": 93,
+
+    "mp_coop_paint_come_along": 94,
+    "mp_coop_paint_redirect": 95,
+    "mp_coop_paint_bridge": 96,
+    "mp_coop_paint_walljumps": 97,
+    "mp_coop_paint_speed_fling": 98,
+    "mp_coop_paint_red_racer": 99,
+    "mp_coop_paint_speed_catch": 100,
+    "mp_coop_paint_longjump_intro": 101,
+
+    "mp_coop_separation_1": 102,
+    "mp_coop_tripleaxis": 103,
+    "mp_coop_catapult_catch": 104,
+    "mp_coop_2paints_1bridge": 105,
+    "mp_coop_paint_conversion": 106,
+    "mp_coop_bridge_catch": 107,
+    "mp_coop_laser_tbeam": 108,
+    "mp_coop_paint_rat_maze": 109,
+    "mp_coop_paint_crazy_box": 110,
+};