Merge pull request #907 from the-hideout/player-search-columns

Display search results in columns
the-hideout · Apr 3, 2024 · 39f62cd · 39f62cd
2 parents 8a96d1d + 519774c
commit 39f62cd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/pages/player/index.js b/src/pages/player/index.js
@@ -211,7 +211,7 @@ function Player() {
             return false;
         }
         if (playerData.info.bannedUntil < 0) {
-            return t('Banned Permanently');
+            return t('Banned');
         }
         return t('Banned until {{banLiftDate}}', { banLiftDate: new Date(playerData.info.bannedUntil * 1000).toLocaleString() });
     }, [playerData, t]);

diff --git a/src/pages/players/index.css b/src/pages/players/index.css
@@ -24,3 +24,9 @@
 .error {
     color: #cd1e2f;
 }
+
+.name-results-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
diff --git a/src/pages/players/index.js b/src/pages/players/index.js
@@ -56,7 +56,7 @@ function Players() {
         try {
             setNameResultsError(false);
             setButtonDisabled(true);
-            setNameResults(await playerStats.searchPlayers(nameFilter, turnstileToken.current));
+            setNameResults((await playerStats.searchPlayers(nameFilter, turnstileToken.current)).sort((a, b) => a.name.localeCompare(b.name)));
             setSearched(true);
         } catch (error) {
             setSearched(false);
@@ -74,15 +74,16 @@ function Players() {
             return '';
         }
         if (nameResults.length < 1) {
-            return 'No players with this name. Note: banned players do not show up in name searches.';
+            return <p>{t('No players with this name')}</p>;
         }
         let morePlayers = '';
         if (nameResults.length >= 5) {
-            morePlayers = 'Refine you search to get better results';
+            morePlayers = <p>{t('Refine your search to get better results')}</p>
         }
         return (
             <div>
-                <ul>
+                {morePlayers}
+                <ul className="name-results-list">
                     {nameResults.map(result => {
                         return <li key={`account-${result.aid}`}>
                             <Link to={`/player/${result.aid}`}>
@@ -91,10 +92,9 @@ function Players() {
                         </li>
                     })}
                 </ul>
-                {morePlayers}
             </div>
         );
-    }, [searched, nameResults]);
+    }, [searched, nameResults, t]);
 
     useEffect(() => {
         if (enterPress) {
@@ -140,7 +140,6 @@ function Players() {
                     <p className="error">{nameResultsError}</p>
                 </div>
             )}
-            {!nameResultsError && searchResults}
             <Turnstile 
                 ref={turnstileRef}
                 className="turnstile-widget"
@@ -160,6 +159,7 @@ function Players() {
                 }}
                 options={{appearance: 'interaction-only'}}
             />
+            {!nameResultsError && searchResults}
         </div>,
     ];
 }