Added player alive and adr reference

Author: osztenkurden

src/HUD/Layout/Layout.tsx

@@ -28,7 +28,7 @@ interface State {
 }
 
 export default class Layout extends React.Component<Props, State> {
-  constructor(props: Props){
+  constructor(props: Props) {
     super(props);
     this.state = {
       winner: null,
@@ -37,23 +37,33 @@ export default class Layout extends React.Component<Props, State> {
     }
   }
 
-  componentDidMount(){
+  componentDidMount() {
     GSI.on('roundEnd', score => {
       this.setState({ winner: score.winner, showWin: true }, () => {
         setTimeout(() => {
-          this.setState({showWin: false})
+          this.setState({ showWin: false })
         }, 4000)
       });
     });
     actions.on("boxesState", (state: string) => {
-      if(state === "show"){
-        this.setState({forceHide: false});
-      } else if(state === "hide"){
-        this.setState({forceHide:true});
+      if (state === "show") {
+        this.setState({ forceHide: false });
+      } else if (state === "hide") {
+        this.setState({ forceHide: true });
       }
     });
   }
 
+  getVeto = () => {
+    const { game, match } = this.props;
+    const { map } = game;
+    if (!match) return null;
+    const mapName = map.name.substring(map.name.lastIndexOf('/') + 1);
+    const veto = match.vetos.find(veto => veto.mapName === mapName);
+    if (!veto) return null;
+    return veto;
+  }
+
   render() {
     const { game, match } = this.props;
     const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
@@ -66,26 +76,34 @@ export default class Layout extends React.Component<Props, State> {
 
     return (
       <div className="layout">
+        <div className={`players_alive`}>
+          <div className="title_container">Players alive</div>
+          <div className="counter_container">
+            <div className={`team_counter ${left.side}`}>{leftPlayers.filter(player => player.state.health > 0).length}</div>
+            <div className={`vs_counter`}>VS</div>
+            <div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
+          </div>
+        </div>
         <Killfeed />
         <Overview match={match} map={game.map} players={game.players || []} />
-        <RadarMaps match={match} map={game.map} game={game}/>
-        <MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb}/>
+        <RadarMaps match={match} map={game.map} game={game} />
+        <MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} />
 
         <SeriesBox map={game.map} phase={game.phase_countdowns} match={match} />
 
         <Tournament />
 
-        <Observed player={game.player} />
+        <Observed player={game.player} veto={this.getVeto()} round={game.map.round+1}/>
 
-        <TeamBox team={left} players={leftPlayers} side="left" current={game.player} isFreezetime={isFreezetime}/>
+        <TeamBox team={left} players={leftPlayers} side="left" current={game.player} isFreezetime={isFreezetime} />
         <TeamBox team={right} players={rightPlayers} side="right" current={game.player} isFreezetime={isFreezetime} />
 
         <Trivia />
-        
-        <MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map}/>
+
+        <MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
         <div className={"boxes left"}>
           <UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />
-          <SideBox side="left" hide={forceHide}/>
+          <SideBox side="left" hide={forceHide} />
           <MoneyBox
             team={left.side}
             side="left"

src/HUD/Overview/Overview.tsx

@@ -90,7 +90,7 @@ export default class Overview extends React.Component<IProps, IState> {
     renderPlayer = () => {
         const { player } = this.state;
         if(!player.data) return null;
-        return <PlayerOverview player={player.data} players={this.props.players} show={player.show} veto={this.getVeto()} />
+        return <PlayerOverview round={this.props.map.round + 1} player={player.data} players={this.props.players} show={player.show} veto={this.getVeto()} />
     }
     renderMatch = () => {
         const { match } = this.state;

src/HUD/PlayerOverview/PlayerOverview.tsx

@@ -10,13 +10,14 @@ interface IProps {
     show: boolean,
     veto: I.Veto | null
     players: Player[],
+    round: number
 }
 
 export default class PlayerOverview extends React.Component<IProps> {
     sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
 
     getData = () => {
-        const { veto, player } = this.props;
+        const { veto, player, round } = this.props;
         if(!player || !veto || !veto.rounds) return null;
         const stats = veto.rounds.map(round => round.players[player.steamid]).filter(data => !!data);
         const overall = {
@@ -25,7 +26,7 @@ export default class PlayerOverview extends React.Component<IProps> {
             killshs: this.sum(stats.map(round => round.killshs)),
         };
         const data = {
-            adr: stats.length !== 0 ? (overall.damage/stats.length).toFixed(0) : '0',
+            adr: stats.length !== 0 ? (overall.damage/(round-1)).toFixed(0) : '0',
             kills: overall.kills,
             killshs: overall.kills,
             kpr: stats.length !== 0 ? (overall.kills/stats.length).toFixed(2) : 0,

src/HUD/Players/Observed.tsx

@@ -7,6 +7,7 @@ import "./../Styles/observed.css";
 import {apiUrl} from './../../api/api';
 import { getCountry } from "./../countries";
 import { ArmorHelmetCT, ArmorHelmetT, ArmorFullCT, ArmorFullT, HealthFullCT, HealthFullT, BulletsCT, BulletsT } from './../../assets/Icons';
+import { Veto } from "../../api/interfaces";
 
 
 const armor = {
@@ -20,7 +21,7 @@ const armor = {
   }
 };
 
-class Statistic extends React.PureComponent<{ label: string; value: string | number }> {
+class Statistic extends React.PureComponent<{ label: string; value: string | number, }> {
   render() {
     return (
       <div className="stat">
@@ -31,7 +32,14 @@ class Statistic extends React.PureComponent<{ label: string; value: string | num
   }
 }
 
-export default class Observed extends React.Component<{ player: Player | null }> {
+export default class Observed extends React.Component<{ player: Player | null, veto: Veto | null, round: number }> {
+	getAdr = () => {
+        const { veto, player } = this.props;
+        if(!player || !veto || !veto.rounds) return null;
+		const damageInRounds = veto.rounds.map(round => round.players[player.steamid]).filter(data => !!data).map(roundData => roundData.damage);
+		//console.log(damageInRounds)
+        return damageInRounds.reduce((a, b) => a + b, 0)/(this.props.round-1);
+	}
 	render() {
 		if (!this.props.player) return '';
 		const { player } = this.props;
@@ -42,6 +50,10 @@ export default class Observed extends React.Component<{ player: Player | null }>
 		const { stats } = player;
 		const ratio = stats.deaths === 0 ? stats.kills : stats.kills/stats.deaths;
 		const countryName = country ? getCountry(country) : null;
+
+
+		const adr = this.getAdr() !== null ? this.getAdr() : "-";
+
 		return (
 			<div className={`observed ${player.team.side}`}>
 				<div className="main_row">

src/HUD/Styles/maps.css

@@ -33,8 +33,9 @@
     font-size: 10pt;
 }
 .veto_entry .team_logo img {
-    max-height: 75%;
+    max-height: 23px;
     padding-right: 3px;
+    max-width: 23px;
 }
 .veto_entry .map_name.active {
     text-shadow: 0 0 15px white;

src/HUD/Styles/players.css

@@ -476,4 +476,52 @@ img.weapon.active {
 }
 .teambox.T .player_side_stats .side_stat_row:first-child {
     color: var(--mainT);
+}
+
+.players_alive {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+    background-color: rgba(0,0,0,0.5);
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    opacity: 1;
+    transition: opacity 1s;
+}
+.players_alive.hide {
+    opacity: 0;
+}
+.players_alive .counter_container {
+    display: flex;
+    height: 45px;
+}
+.players_alive .counter_container > div {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size:30px;
+    color: white;
+    background-color: rgba(0,0,0,0.5);
+}
+.players_alive .counter_container .team_counter {
+    background-color: rgba(0,0,0,0.75);
+}
+.players_alive .title_container {
+    color: white;
+    text-transform: uppercase;
+    text-align: center;
+    height:20px;
+    font-size:14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0,0,0,0.75);
+}
+.players_alive .counter_container .CT {
+    color: var(--color-new-ct);
+}
+.players_alive .counter_container .T {
+    color: var(--color-new-t);
 }