Merge pull request #1 from lexogrine/refactor

Added option to replace avatars as team logos

public/panel.json

@@ -63,6 +63,21 @@
                 "name":"right_image",
                 "label":"Right box's image logo"
             },
+            {
+                "type":"select",
+                "name":"replace_avatars",
+                "label":"Use team logos as player avatars",
+                "values": [
+                    {
+                        "label": "Only if player has no avatar",
+                        "name": "if_missing"
+                    },
+                    {
+                        "label": "Always",
+                        "name": "always"
+                    }
+                ]
+            },
             {
                 "type": "action",
                 "name": "boxesState",

src/HUD/Players/Avatar.tsx

@@ -5,9 +5,12 @@ import PlayerCamera from "./../Camera/Camera";
 import { avatars } from './../../api/avatars';
 
 import { Skull } from './../../assets/Icons';
+import { configs } from '../../App';
+import { apiUrl } from '../../api/api';
 
 interface IProps {
   steamid: string,
+  teamId?: string | null,
   slot?: number,
   height?: number,
   width?: number,
@@ -15,13 +18,39 @@ interface IProps {
   showCam?: boolean,
   sidePlayer?: boolean
 }
-export default class Avatar extends React.Component<IProps> {
+export default class Avatar extends React.Component<IProps, { replaceAvatar: 'never' | 'if_missing' | 'always' }> {
+  constructor(props: IProps){
+    super(props);
+    this.state = {
+      replaceAvatar: 'never'
+    }
+  }
+  componentDidMount() {
+    const onDataChange = (data:any) => {
+      if(!data) return;
+      const display = data.display_settings;
+      if(!display) return;
+      this.setState({
+        replaceAvatar: display.replace_avatars || 'never'
+      })
+  };
+    configs.onChange(onDataChange);
+    onDataChange(configs.data);
+  }
+  getAvatarUrl = () => {
+    const avatarData = avatars[this.props.steamid] && avatars[this.props.steamid].url ? avatars[this.props.steamid].url : null;
 
+    if(this.state.replaceAvatar === 'always' || (this.state.replaceAvatar === 'if_missing' && !avatarData)){
+      return this.props.teamId ? `${apiUrl}api/teams/logo/${this.props.teamId}` : avatarData || null;
+    }
+    return avatarData || null;
+
+  }
   render() {
     const { showCam, steamid, width, height, showSkull, sidePlayer } = this.props;
     //const url = avatars.filter(avatar => avatar.steamid === this.props.steamid)[0];
-    const avatarData = avatars[this.props.steamid];
-    if (!avatarData || !avatarData.url) {
+    const avatarUrl = this.getAvatarUrl();
+    if (!avatarUrl) {
       return null;
     }
 
@@ -31,7 +60,7 @@ export default class Avatar extends React.Component<IProps> {
           showCam ? ( sidePlayer ? <div className="videofeed"><PlayerCamera steamid={steamid} visible={true} /></div> : <CameraContainer observedSteamid={steamid} />) : null
         }
         {
-          showSkull ? <Skull height={height} width={width} /> : <img src={avatarData.url} height={height} width={width} alt={'Avatar'} />
+          showSkull ? <Skull height={height} width={width} /> : <img src={avatarUrl} height={height} width={width} alt={'Avatar'} />
         }
 
       </div>

src/HUD/Players/Observed.tsx

@@ -58,7 +58,7 @@ export default class Observed extends React.Component<{ player: Player | null, v
 		return (
 			<div className={`observed ${player.team.side}`}>
 				<div className="main_row">
-					{<Avatar steamid={player.steamid} height={140} width={140} showCam={this.state.showCam} slot={player.observer_slot} />}
+					{<Avatar teamId={player.team.id} steamid={player.steamid} height={140} width={140} showCam={this.state.showCam} slot={player.observer_slot} />}
 					<TeamLogo team={player.team} height={35} width={35} />
 					<div className="username_container">
 						<div className="username">{player.name}</div>

src/HUD/Players/Player.tsx

@@ -76,7 +76,7 @@ const Player = ({ player, isObserved }: IProps) => {
   return (
     <div className={`player ${player.state.health === 0 ? "dead" : ""} ${isObserved ? 'active' : ''}`}>
       <div className="player_data">
-        <Avatar steamid={player.steamid} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
+        <Avatar teamId={player.team.id} steamid={player.steamid} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
         <div className="dead-stats">
           <div className="labels">
             <div className="stat-label">K</div>