Merge pull request #126 from TheLazySquid/playerlinks

Add more sites to view profiles in

i18n/en_US.json

@@ -141,5 +141,6 @@
   "TERMS_OF_SERVICE": "Terms of Service",
   "TOS_HINT": "Masterbase features are unavailable until you agree to the terms of service.",
   "AGREE_TO_TOS": "Agree to TOS",
-  "GET_ONE_HERE": "get one here"
+  "GET_ONE_HERE": "get one here",
+  "CONFIRM_EXTERNAL_LINKS": "Confirm using links to external sites"
 }

src/Pages/Preferences/Preferences.tsx

@@ -155,6 +155,17 @@ const Preferences = () => {
                 }
               />
             </Flex>
+            <Flex className="preference-option">
+              <div className="preference-title">
+                {t('CONFIRM_EXTERNAL_LINKS')}
+              </div>
+              <Checkbox
+                checked={settings.external?.confirmExternalLinks ?? true}
+                onChange={(e) =>
+                  handleSettingChange('confirmExternalLinks', e, 'external')
+                }
+              />
+            </Flex>
           </Accordion>
           <Accordion title={t('PREF_COLORS')} className="preference-accordion">
             <TextItem className="mr-9">{t('PREF_COLORS_PRECEDENCE')}</TextItem>

src/api/api.d.ts

@@ -2,6 +2,7 @@ interface Settings {
   external: {
     language?: string;
     openInApp?: boolean;
+    confirmExternalLinks?: boolean;
     colors?: {
       You: string;
       Player: string;

src/components/General/ContextMenu/ContextMenu.tsx

@@ -1,4 +1,11 @@
-import { CSSProperties, useContext, useEffect, useRef, useState } from 'react';
+import {
+  CSSProperties,
+  MouseEvent,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import './ContextMenu.css';
 
 import { ContextMenuContext } from '@context';
@@ -18,7 +25,8 @@ const ContextMenuContent = () => {
     left: position.x,
   };
 
-  const onItemClick = (itemAction: () => void) => {
+  const onItemClick = (e: MouseEvent, itemAction: () => void) => {
+    e.stopPropagation();
     hideMenu();
     itemAction();
   };
@@ -88,8 +96,8 @@ const ContextMenuContent = () => {
           <div
             className="ctx-menu-item"
             key={item.label + index}
-            onClick={() => {
-              if (item?.onClick) onItemClick(item?.onClick);
+            onClick={(e) => {
+              if (item?.onClick) onItemClick(e, item?.onClick);
             }}
             onMouseEnter={() => onMouseEnter(index)}
             onMouseLeave={() => onMouseLeave(index)}
@@ -115,8 +123,8 @@ const ContextMenuContent = () => {
                   <div
                     key={menuItem.label + index}
                     className="ctx-menu-item"
-                    onClick={() => {
-                      if (menuItem?.onClick) onItemClick(menuItem?.onClick);
+                    onClick={(e) => {
+                      if (menuItem?.onClick) onItemClick(e, menuItem?.onClick);
                     }}
                   >
                     {menuItem.label}

src/components/TF2/Player/Modals/ConfirmNavigationModal.tsx

@@ -0,0 +1,66 @@
+import { Button, Checkbox } from '@components/General';
+import { useModal } from '@context';
+import React from 'react';
+
+interface ConfirmNavigationModalProps {
+  link: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onDontShowAgain?: () => void;
+}
+
+const ConfirmNavigationModal = ({
+  link,
+  onConfirm,
+  onCancel,
+  onDontShowAgain,
+}: ConfirmNavigationModalProps) => {
+  const [dontShowAgain, setDontShowAgain] = React.useState(false);
+
+  const { closeModal } = useModal();
+
+  const handleAction = () => {
+    if (dontShowAgain) {
+      onDontShowAgain?.();
+    }
+    closeModal();
+  };
+
+  return (
+    <div>
+      <div className="mb-5 text-lg">
+        You are about to open a link to an external site:{' '}
+        {new URL(link).hostname}.
+        <br />
+        Are you sure you want to continue?
+      </div>
+      <div className="w-full flex gap-3 justify-end items-center">
+        Don't show this again
+        <Checkbox
+          checked={dontShowAgain}
+          onChange={(checked) => {
+            setDontShowAgain(checked);
+          }}
+        />
+        <Button
+          onClick={() => {
+            handleAction();
+            onCancel?.();
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            handleAction();
+            onConfirm?.();
+          }}
+        >
+          Proceed
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmNavigationModal;

src/components/TF2/Player/Player.tsx

@@ -25,25 +25,28 @@ import {
   convertSteamID64toSteamID2,
   convertSteamID64toSteamID3,
 } from '@api/steamid';
+import { profileLinks } from '../../../constants/playerConstants';
+import ConfirmNavigationModal from './Modals/ConfirmNavigationModal';
+import { setSettingKey } from '@api/preferences';
 
 interface PlayerProps {
   player: PlayerInfo;
   icon?: string;
   className?: string;
   onImageLoad?: () => void;
-  playerColors?: Record<string, string>;
-  openInApp?: boolean;
   userSteamID?: string;
   cheatersInLobby: PlayerInfo[];
+  settings: Settings['external'];
+  setSettings: React.Dispatch<React.SetStateAction<Settings['external']>>;
 }
 
 const Player = ({
   player,
   className,
   onImageLoad,
-  playerColors,
-  openInApp,
   cheatersInLobby,
+  settings,
+  setSettings,
 }: PlayerProps) => {
   const isFirstRefresh = useRef(true);
   // Context Menu
@@ -57,7 +60,7 @@ const Player = ({
   const [pfp, setPfp] = useState<string>('./person.webp');
   const [showPlayerDetails, setShowPlayerDetails] = useState(false);
 
-  const urlToOpen = openInApp
+  const urlToOpen = settings.openInApp
     ? `steam://url/SteamIDPage/${player.steamID64}`
     : `https://steamcommunity.com/profiles/${player.steamID64}`;
 
@@ -72,12 +75,12 @@ const Player = ({
   // const color = displayColor(playerColors!, player, cheatersInLobby);
 
   const [color, setColor] = useState<string | undefined>(
-    displayColor(playerColors!, player, cheatersInLobby),
+    displayColor(settings.colors!, player, cheatersInLobby),
   );
 
   useEffect(() => {
-    setColor(displayColor(playerColors!, player, cheatersInLobby));
-  }, [player.localVerdict, playerColors, player, cheatersInLobby]);
+    setColor(displayColor(settings.colors!, player, cheatersInLobby));
+  }, [player.localVerdict, settings.colors, player, cheatersInLobby]);
 
   const localizedLocalVerdictOptions = makeLocalizedVerdictOptions();
 
@@ -129,11 +132,45 @@ const Player = ({
     });
   }, [player.steamInfo?.pfp]);
 
+  const formatUrl = (url: string) => {
+    url = url.replace('{{ID64}}', player.steamID64);
+    return url;
+  };
+
   const handleContextMenu = (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
     const menuItems: MenuItem[] = [
       {
         label: 'Open Profile',
+        multiOptions: [
+          {
+            label: 'Steam Profile',
+            onClick: () => parent.open(urlToOpen, '_blank'),
+          },
+          ...profileLinks.map(([name, url]) => ({
+            label: name,
+            onClick: () => {
+              if (settings.confirmExternalLinks ?? true) {
+                openModal(
+                  <ConfirmNavigationModal
+                    link={formatUrl(url)}
+                    onConfirm={() => parent.open(formatUrl(url), '_blank')}
+                    onDontShowAgain={() => {
+                      setSettingKey('confirmExternalLinks', false, 'external');
+                      setSettings((prev) => ({
+                        ...prev,
+                        confirmExternalLinks: false,
+                      }));
+                    }}
+                  />,
+                  { dismissable: true },
+                );
+              } else {
+                parent.open(formatUrl(url), '_blank');
+              }
+            },
+          })),
+        ],
         onClick: () => {
           parent.open(urlToOpen, '_blank');
         },
@@ -233,7 +270,7 @@ const Player = ({
             // Causes new info to immediately show
             player.localVerdict = e.toString();
             updatePlayer(player.steamID64, e.toString());
-            setColor(displayColor(playerColors!, player, cheatersInLobby));
+            setColor(displayColor(settings.colors!, player, cheatersInLobby));
           }}
         />
         <div onClick={() => setShowPlayerDetails(!showPlayerDetails)}>

src/components/TF2/ScoreboardTable/ScoreboardTable.tsx

@@ -20,7 +20,7 @@ const ScoreboardTable = ({
 }: ScoreboardTableProps) => {
   // Store the users playerID
   const [userSteamID, setUserSteamID] = useState('0');
-  const [playerSettings, setPlayerSettings] = useState<Settings['external']>({
+  const [settings, setSettings] = useState<Settings['external']>({
     colors: {
       You: 'none',
       Player: 'none',
@@ -33,18 +33,19 @@ const ScoreboardTable = ({
       Bot: 'none',
     },
     openInApp: false,
+    confirmExternalLinks: true,
   });
 
   useEffect(() => {
-    const fetchTeamColors = async () => {
+    const fetchSettings = async () => {
       try {
         const { external } = await getAllSettings(); // Replace this with the actual async function that fetches colors
-        setPlayerSettings(external);
+        setSettings(external);
       } catch (error) {
         console.error('Error fetching team colors:', error);
       }
     };
-    fetchTeamColors();
+    fetchSettings();
   }, []);
 
   useEffect(() => {
@@ -108,12 +109,12 @@ const ScoreboardTable = ({
             // Provide the Context Menu Provider to the Element
             <ContextMenuProvider key={player.steamID64}>
               <Player
-                playerColors={playerSettings.colors}
                 className={teamName?.toLowerCase()}
                 player={player}
                 key={player.steamID64}
-                openInApp={playerSettings.openInApp}
                 cheatersInLobby={cheaters}
+                settings={settings}
+                setSettings={setSettings}
               />
             </ContextMenuProvider>
           ))}

src/constants/playerConstants.ts

@@ -0,0 +1,12 @@
+export const profileLinks = [
+  ['Steamrep', 'https://steamrep.com/profiles/{{ID64}}'],
+  ['Backpack.tf', 'https://backpack.tf/profiles/{{ID64}}'],
+  ['SteamHistory', 'https://steamhistory.net/id/{{ID64}}'],
+  ['RGL', 'https://rgl.gg/Public/PlayerProfile?p={{ID64}}'],
+  ['Logs.tf', 'https://logs.tf/profile/{{ID64}}'],
+  ['Demos.tf', 'https://demos.tf/profiles/{{ID64}}'],
+  ['Trends.tf', 'https://trends.tf/player/{{ID64}}'],
+  ['ETF2L', 'https://etf2l.org/search/{{ID64}}'],
+  ['UGC', 'https://www.ugcleague.com/players_page.cfm?player_id={{ID64}}'],
+  ['Ozfortress', 'https://ozfortress.com/users/steam_id/{{ID64}}'],
+];