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 :)
@@ -140,4 +139,4 @@ The Killfeed component basically just keeps kills in the state during the round,
 This killfeed detects who killed whom, if there was an assist (flash assist as well), used weapon, headshot and wallbang.
 
 ## Radar
-Radar is custom React-based component, made by Hubert Walczak, and is easily editable from css.
+Radar is custom React-based component, made by Hubert Walczak, and is easily editable from css.

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) {
+    if (round <= 24) {
-      return `Round ${round}/30`;
+      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];
+    const avatarUrl = this.getAvatarUrl();
-    if (!avatarData || !avatarData.url) {
+    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>