Merge pull request #112 from MegaAntiCheat/megascatterbomb/miscfixes

Miscellanious fixes

Author: megascatterbomb

i18n/en_US.json

@@ -116,7 +116,7 @@
   "CLICK_TO_COLLECT_DATA": "Click to collect data",
   "NO_DATA": "No data",
   "ADD_PLAYER": "Add player",
-  "ADD_PLAYER_HELP": "If you search for a SteamID that is not in your archive, click this button to add it.",
+  "ADD_PLAYER_HELP": "If you search for a SteamID that is not in\nyour archive, click this button to add it.",
   "SELECT_VERDICT": "Select a verdict...",
   "SET_CUSTOM_ALIAS": "Set a custom alias...",
   "ADD_CUSTOM_NOTE": "Add additional information...",

public/kiwi_green.webp

@@ -8,6 +8,7 @@ import Checkbox from '@components/General/Checkbox/Checkbox';
 import { getSteamID64 } from '@api/steamid';
 import { useModal } from '../../Context/ModalContext';
 import { AddPlayerModal } from '@components/TF2';
+import { Tooltip } from '@components/General';
 
 // Maps Steam IDs of each search result to its relevance
 export type SearchRelevance = Map<string, string>;
@@ -75,6 +76,7 @@ const PlayerHistory = () => {
       const query64 = getSteamID64(query.trim());
       const result =
         query64 &&
+        query64 === query &&
         ![newRecent, newArchive].flat().some((p) => p.steamID64 === query64)
           ? query64
           : undefined;
@@ -96,20 +98,28 @@ const PlayerHistory = () => {
           className="ml-4 mt-3 mb-3 w-[calc(100%-350px)]"
           onChange={handleSearch}
         />
-        <button
-          className={`ml-4 mt-3 mb-3 h-10v w-[100px] rounded-sm items-center ${
-            playerToAdd ? 'bg-blue-700' : 'bg-gray-400'
-          }`}
-          disabled={!playerToAdd}
-          onClick={() => {
-            if (!playerToAdd) return;
-            openModal(<AddPlayerModal steamID64={playerToAdd} />, {
-              dismissable: true,
-            });
-          }}
+        <Tooltip
+          direction="bottom-left"
+          className="items-center"
+          content={t('ADD_PLAYER_HELP')}
+          noWrap={true}
+          isButton={true}
         >
-          {t('ADD_PLAYER')}
-        </button>
+          <button
+            className={`ml-4 mt-3 mb-3 h-15v w-[100px] rounded-sm items-center ${
+              playerToAdd ? 'bg-blue-700' : 'bg-gray-400'
+            }`}
+            disabled={!playerToAdd}
+            onClick={() => {
+              if (!playerToAdd) return;
+              openModal(<AddPlayerModal steamID64={playerToAdd} />, {
+                dismissable: true,
+              });
+            }}
+          >
+            {t('ADD_PLAYER')}
+          </button>
+        </Tooltip>
         <Checkbox
           className="case-sensitive-checkbox ml-4 mt-3 mb-3 h-4 items-center"
           checked={caseSensitive}

public/kiwi_yellow.webp

@@ -75,6 +75,22 @@ async function fetchPlayerInfos({
   }
 }
 
+function timeoutPromise(ms: number): Promise<never> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('timeout' as never);
+    }, ms);
+  });
+}
+
+async function fetchWithTimeout(
+  url: string,
+  options: RequestInit,
+  timeout: number = 5000,
+): Promise<Response> {
+  return Promise.race([fetch(url, options), timeoutPromise(timeout)]);
+}
+
 async function updateSteamInfo(steamIDs: string[]): Promise<PlayerInfo[]> {
   try {
     if (useFakedata) return [];
@@ -87,7 +103,7 @@ async function updateSteamInfo(steamIDs: string[]): Promise<PlayerInfo[]> {
       },
     };
 
-    const response = await fetch(USER_ENDPOINT, options);
+    const response = await fetchWithTimeout(USER_ENDPOINT, options);
 
     if (!response.ok) throw new Error('Failed to fetch player history');
 

src/Pages/PlayerHistory/PlayerHistory.tsx

@@ -3,7 +3,6 @@
 }
 
 .tooltip.left {
-
   @apply top-2/4 right-full -translate-y-2/4;
 }
 
@@ -15,7 +14,22 @@
   @apply top-full -translate-x-1/3;
 }
 
+.tooltip.bottom-right {
+  @apply top-full left-0;
+}
+
+.tooltip.bottom-left {
+  @apply top-full right-0;
+}
+
+.tooltip.top-left {
+  @apply bottom-full left-0;
+}
+
+.tooltip.top-right {
+  @apply bottom-full right-0;
+}
+
 .tooltip-container:hover .tooltip {
   @apply opacity-100;
 }
-

src/api/players/index.ts

@@ -5,28 +5,48 @@ interface TooltipProps {
   content: string;
   className?: string;
   children?: ReactNode;
-  direction?: 'top' | 'bottom' | 'left' | 'right';
+  direction?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'top-left'
+    | 'top-right';
+  noWrap?: boolean;
+  isButton?: boolean;
 }
 
 const Tooltip = ({
   content,
   className = '',
   children,
   direction = 'top',
+  noWrap = false,
+  isButton = false,
 }: TooltipProps) => {
   const newLineHandledText = content
     .split('\n')
     .map((str, index) => <p key={index}>{str}</p>);
 
   return (
-    <div className={`tooltip-container relative inline-block ${className}`}>
-      <div className="tooltip-content inline-block align-middle">
+    <div
+      className={`tooltip-container relative inline-block ${className} ${
+        isButton ? 'contents' : ''
+      }`}
+    >
+      <div
+        className={`tooltip-content inline-block align-middle ${
+          isButton ? 'contents' : ''
+        }`}
+      >
         {children}
       </div>
       <div
         className={`tooltip absolute p-1 pl-2 pr-2 bg-neutral-900/[98] pointer-events-none text-white text-base z-50 whitespace-nowrap rounded-md opacity-0  ${direction}`}
       >
-        {newLineHandledText}
+        {noWrap ? content : newLineHandledText}
       </div>
     </div>
   );

src/components/General/Tooltip/Tooltip.css

@@ -407,10 +407,16 @@ function buildIconListFromArchive(
           onClick={(event) => {
             event.preventDefault();
             setRefreshing(true);
-            updateSteamInfo([player.steamID64]).then((r) => {
-              player.steamInfo = r[0].steamInfo;
-              setRefreshing(false);
-            });
+            updateSteamInfo([player.steamID64])
+              .then((r) => {
+                if (r) {
+                  player.steamInfo = r[0].steamInfo;
+                }
+                setRefreshing(false);
+              })
+              .catch(() => {
+                setRefreshing(false);
+              });
           }}
           width={18}
           height={18}

src/components/General/Tooltip/Tooltip.tsx

@@ -151,8 +151,8 @@ const ScoreboardTable = ({
         <div className="scoreboard-divider lg:[display:block] h-auto bg-highlight/10 w-[1px] mt-0" />
         <div>
           {renderTeam(RED, 'RED')}
-          {renderTeam(SPEC, 'SPECTATOR')}
           {renderTeam(UNASSIGNED, 'UNASSIGNED')}
+          {renderTeam(SPEC, 'SPECTATOR')}
         </div>
       </div>
     );