Merge pull request #1 from lexogrine/refactor

Added option to replace avatars as team logos

README.md

@@ -13,7 +13,6 @@ Fullfledged example of the React HUD made for HUD Manager. It has:
 
 - Custom actions
 - Keybinds
-- Killfeed
 - Player cam feed
 - Custom Radar
 
@@ -61,11 +60,11 @@ Fullfledged example of the React HUD made for HUD Manager. It has:
 
 # Download
 
-To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/csgo-react-hud/releases/latest)
+To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/cs2-react-hud/releases/latest)
 
 # Instruction
 ## Setting up
-Fork this repo, clone it, and then run `npm install` and `npm start`. HUD should start on the 3500 port. For this to work have HUD Manager opened so it will pass CS:GO data to the HUD.
+Fork this repo, clone it, and then run `npm install` and `npm start`. HUD should start on the 3500 port. For this to work have HUD Manager opened so it will pass CS2 data to the HUD.
 
 ## Identifying HUD
 In `/public` directory edit hud.json so it fits you - fill HUD's name, author, version, specify the radar and killfeed functionalities. At the end replace the thumb.png with your icon :)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lexogrine_cs2_hud",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "./",
   "private": true,
   "dependencies": {
@@ -11,7 +11,7 @@
     "@types/react-dom": "17.0.11",
     "@types/simple-peer": "^9.11.3",
     "buffer": "^6.0.3",
-    "csgogsi-socket": "^2.7.1",
+    "csgogsi-socket": "^2.7.2",
     "query-string": "^6.12.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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/MatchBar/MatchBar.tsx

@@ -159,10 +159,10 @@ export default class TeamBox extends React.Component<IProps, IState> {
   getRoundLabel = () => {
     const { map } = this.props;
     const round = map.round + 1;
-    if (round <= 30) {
-      return `Round ${round}/30`;
+    if (round <= 24) {
+      return `Round ${round}/24`;
     }
-    const additionalRounds = round - 30;
+    const additionalRounds = round - 24;
     const OT = Math.ceil(additionalRounds/6);
     return `OT ${OT} (${additionalRounds - (OT - 1)*6}/6)`;
   }

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>