Merge pull request #988 from the-hideout/pve-profiles

Add PVE player profiles
the-hideout · Sep 16, 2024 · ae1ae73 · ae1ae73
2 parents 11461ad + 74a49bc
commit ae1ae73
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 21 deletions.
diff --git a/src/App.js b/src/App.js
@@ -78,6 +78,7 @@ const WipeLength = React.lazy(() => import('./pages/wipe-length/index.js'));
 const Achievements = React.lazy(() => import('./pages/achievements/index.js'));
 const Players = React.lazy(() => import('./pages/players/index.js'));
 const Player = React.lazy(() => import('./pages/player/index.js'));
+const PlayerForward = React.lazy(() => import('./pages/player/player-forward.js'));
 const Converter = React.lazy(() => import('./pages/converter/index.js'));
 const About = React.lazy(() => import('./pages/about/index.js'));
 
@@ -924,7 +925,7 @@ function App() {
                         ]}
                     />
                     <Route
-                        path="/player/:accountId"
+                        path="/players/:gameMode/:accountId"
                         key="player-route"
                         element={[
                             <Suspense fallback={<Loading />} key="suspense-player-wrapper">
@@ -933,6 +934,16 @@ function App() {
                             remoteControlSessionElement,
                         ]}
                     />
+                    <Route
+                        path="/player/:accountId"
+                        key="player-regular-route"
+                        element={[
+                            <Suspense fallback={<Loading />} key="suspense-player-forward-wrapper">
+                                <PlayerForward />
+                            </Suspense>,
+                            remoteControlSessionElement,
+                        ]}
+                    />
                     <Route
                         path={'/converter'}
                         key="converter-route"

diff --git a/src/modules/player-stats.mjs b/src/modules/player-stats.mjs
@@ -39,17 +39,17 @@ const playerStats = {
             return Promise.reject(error);
         }
     },
-    searchPlayers: async (searchString, turnstileToken) => {
+    searchPlayers: async (searchString, gameMode = 'regular', turnstileToken) => {
         // Create a form request to send the Turnstile token
         // This avoids sending an extra pre-flight request
         let body;
-        let searchParams = '';
+        let searchParams = `?gameMode=${gameMode}`;
         if (turnstileToken) {
             if (requestMethod === 'POST') {
                 body = new FormData();
                 body.append('Turnstile-Token', turnstileToken);
             } else {
-                searchParams = `?token=${turnstileToken}`;
+                searchParams += `&token=${turnstileToken}`;
             }
         }
         return playerStats.request(`/name/${searchString}${searchParams}`, body).catch(error => {
@@ -59,15 +59,15 @@ const playerStats = {
             return Promise.reject(error);
         });
     },
-    getProfile: async (accountId, turnstileToken) => {
+    getProfile: async (accountId, gameMode = 'regular', turnstileToken) => {
         let body;
-        let searchParams = '';
+        let searchParams = `?gameMode=${gameMode}`;
         if (turnstileToken) {
             if (requestMethod === 'POST') {
                 body = new FormData();
                 body.append('Turnstile-Token', turnstileToken);
             } else {
-                searchParams = `?token=${turnstileToken}`;
+                searchParams += `&token=${turnstileToken}`;
             }
         }
         return playerStats.request(`/account/${accountId}${searchParams}`, body);

diff --git a/src/pages/player/index.js b/src/pages/player/index.js
@@ -78,6 +78,8 @@ function Player() {
     const params = useParams();
     const navigate = useNavigate();
 
+    const gameMode = params.gameMode;
+
     const [accountId, setAccountId] = useState(params.accountId);
 
     useEffect(() => {
@@ -119,13 +121,13 @@ function Player() {
         }
         if (isNaN(accountId)) {
             try {
-                const searchResponse = await playerStats.searchPlayers(accountId, turnstileToken);
+                const searchResponse = await playerStats.searchPlayers(accountId, gameMode, turnstileToken);
                 if (turnstileRef.current?.reset) {
                     turnstileRef.current.reset();
                 }
                 for (const result of searchResponse) {
                     if (result.name.toLowerCase() === accountId.toLowerCase()) {
-                        navigate('/player/'+result.aid);
+                        navigate(`/players/${gameMode}/${result.aid}`);
                         return;
                     }
                 }
@@ -136,14 +138,14 @@ function Player() {
             return;
         }
         try {
-            setPlayerData(await playerStats.getProfile(accountId, turnstileToken));
+            setPlayerData(await playerStats.getProfile(accountId, gameMode, turnstileToken));
             if (turnstileRef.current?.reset) {
                 turnstileRef.current.reset();
             }
         } catch (error) {
             setProfileError(error.message);
         }
-    }, [accountId, setPlayerData, setProfileError, navigate, turnstileToken, turnstileRef]);
+    }, [accountId, setPlayerData, setProfileError, navigate, turnstileToken, turnstileRef, gameMode]);
 
     const downloadProfile = useCallback(() => {
         if (!playerData.aid) {
@@ -166,13 +168,13 @@ function Player() {
                 const data = JSON.parse(text);
                 data.saved = true;
                 setPlayerData(data);
-                window.history.replaceState(null, null, `/player/${data.aid}`);
+                window.history.replaceState(null, null, `/players/${gameMode}/${data.aid}`);
             } catch(error) {
                 setProfileError('Error reading profile');
             }
         };
         reader.readAsText(e.target.files[0]);
-    }, [setPlayerData, setProfileError]);
+    }, [setPlayerData, setProfileError, gameMode]);
 
     const playerLevel = useMemo(() => {
         if (playerData.info.experience === 0) {
@@ -708,11 +710,11 @@ function Player() {
             countLabel = tag.Level;
             let killerInfo = <span>{tag.KillerName}</span>;
             if (tag.KillerAccountId) {
-                killerInfo = <Link to={`/player/${tag.KillerAccountId}`}>{tag.KillerName}</Link>;
+                killerInfo = <Link to={`/players/${gameMode}/${tag.KillerAccountId}`}>{tag.KillerName}</Link>;
             }
             label = (
                 <span>
-                    <Link to={`/player/${tag.AccountId}`}>{tag.Nickname}</Link>
+                    <Link to={`/players/${gameMode}/${tag.AccountId}`}>{tag.Nickname}</Link>
                     <span>{` ${t(tag.Status)} `}</span>
                     {killerInfo}
                     {weapon !== undefined && [
@@ -753,7 +755,7 @@ function Player() {
             />
         );
         return { image: itemImage, label };
-    }, [items, t]);
+    }, [items, t, gameMode]);
 
     const getLoadoutContents = useCallback((parentItem, itemType = 'loadout') => {
         const itemSource = itemType === 'loadout' ? playerData?.equipment?.Items : playerData?.favoriteItems;

diff --git a/src/pages/player/player-forward.js b/src/pages/player/player-forward.js
@@ -0,0 +1,9 @@
+import { useParams, useNavigate } from 'react-router-dom';
+
+function PlayerForward() {
+    const params = useParams();
+    const navigate = useNavigate();
+    navigate('/players/regular/'+params.accountId);
+}
+
+export default PlayerForward;
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
@@ -30,3 +30,13 @@
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
 }
+
+.game-mode .select__control {
+    color: #1b1919;
+    background-color: #2d2c2e;
+    border-color: #9a8866;
+}
+
+.game-mode .select__single-value {
+    color: #fff;
+}
diff --git a/src/pages/players/index.js b/src/pages/players/index.js
@@ -1,8 +1,9 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Turnstile } from '@marsidev/react-turnstile'
-
+import Select from 'react-select';
 import { Icon } from '@mdi/react';
 import { mdiAccountSearch } from '@mdi/js';
 
@@ -12,6 +13,7 @@ import SEO from '../../components/SEO.jsx';
 import { InputFilter } from '../../components/filter/index.js';
 
 import playerStats from '../../modules/player-stats.mjs';
+import gameModes from '../../data/game-modes.json';
 
 import './index.css';
 
@@ -23,6 +25,9 @@ function Players() {
 
     const enterPress = useKeyPress('Enter');
 
+    const gameModeSetting = useSelector((state) => state.settings.gameMode);
+    const [ gameMode, setGameMode ] = useState(gameModeSetting);
+
     const [nameFilter, setNameFilter] = useState('');
     const [nameResults, setNameResults] = useState([]);
     const [nameResultsError, setNameResultsError] = useState(false);
@@ -56,7 +61,7 @@ function Players() {
         try {
             setNameResultsError(false);
             setButtonDisabled(true);
-            setNameResults((await playerStats.searchPlayers(nameFilter, turnstileToken.current)).sort((a, b) => a.name.localeCompare(b.name)));
+            setNameResults((await playerStats.searchPlayers(nameFilter, gameMode, turnstileToken.current)).sort((a, b) => a.name.localeCompare(b.name)));
             setSearched(true);
         } catch (error) {
             setSearched(false);
@@ -67,7 +72,7 @@ function Players() {
         if (turnstileRef.current?.reset) {
             turnstileRef.current.reset();
         }
-    }, [nameFilter, searchTextValid, setNameResults, setNameResultsError, turnstileToken, turnstileRef]);
+    }, [nameFilter, searchTextValid, setNameResults, setNameResultsError, turnstileToken, turnstileRef, gameMode]);
 
     const searchResults = useMemo(() => {
         if (!searched) {
@@ -86,15 +91,15 @@ function Players() {
                 <ul className="name-results-list">
                     {nameResults.map(result => {
                         return <li key={`account-${result.aid}`}>
-                            <Link to={`/player/${result.aid}`}>
+                            <Link to={`/players/${gameMode}/${result.aid}`}>
                                 {result.name}
                             </Link>
                         </li>
                     })}
                 </ul>
             </div>
         );
-    }, [searched, nameResults, t]);
+    }, [searched, nameResults, t, gameMode]);
 
     useEffect(() => {
         if (enterPress) {
@@ -122,6 +127,28 @@ function Players() {
                     </p>
                 </Trans>
             </div>
+            <label className={'single-filter-wrapper'} style={{marginBottom: '1em'}}>
+                <span className={'single-filter-label'}>{t('Game mode')}</span>
+                <Select
+                    label={t('Game mode')}
+                    placeholder={t(`game_mode_${gameModeSetting}`)}
+                    defaultValue={gameModeSetting}
+                    options={gameModes.map(m => {
+                        return {
+                            label: t(`game_mode_${m}`),
+                            value: m,
+                        }
+                    })}
+                    className="basic-multi-select game-mode"
+                    classNamePrefix="select"
+                    onChange={(event) => {
+                        if (searchTextValid && gameMode !== event.value) {
+                            setButtonDisabled(false);
+                        }
+                        setGameMode(event.value);
+                    }}
+                />
+            </label>
             <div className='search-controls'>
                 <InputFilter
                     label={t('Player Name')}