Lexogrine/dota2-react-hud
Template
1
0
Fork 0
mirror of https://github.com/lexogrine/dota2-react-hud.git synced 2026-05-04 12:33:11 +02:00
Code Releases Activity

Updated typings usage

Browse Source
This commit is contained in:
Hubert Walczak
2021-07-22 18:17:46 +02:00
parent 3ba5265d41
commit dbe53ec4a6
5 changed files with 102 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/HUD/Layout/Layout.tsx
+2 -1
View File
@@ -1,3 +1,4 @@
import { Dota2 } from "dotagsi";
import React from "react";
import Observed from "./../Players/Observed";
@@ -5,7 +6,7 @@ import Observed from "./../Players/Observed";
interface Props {
game: any,
game: Dota2,
}
export default class Layout extends React.Component<Props> {
src/HUD/Players/Observed.tsx
+21 -22
View File
@@ -1,49 +1,48 @@
import { Player } from "dotagsi";
import React from "react";
import Ability from "../Ability";
import "./observed.scss";
export default class Observed extends React.Component<{ player: any | null }> {
export default class Observed extends React.Component<{ player: Player | null }> {
render() {
const { player } = this.props;
if (!player) return '';
if (!player || !player.hero) return null;;
return (
<div className={`observed`}>
<div className="main_row">
{
player.hero.name ? <div className="main_row">
<div className={`avatar`}>
<div className={`avatar`}>
<img src={`./heroes/${player.hero.name.replace('npc_dota_hero_', '')}_full.png`} width={140} alt={'Avatar'} />
</div>
<div className="username_container">
<div className="username">[{player.hero.name.replace('npc_dota_hero_', '').toUpperCase()}] {player.name}, level {player.hero.level}</div>
</div>
<div className="grenade_container">
</div>
</div> : null
}
<img src={`./heroes/${player.hero.name.replace('npc_dota_hero_','')}_full.png`} width={140}alt={'Avatar'} />
</div>
<div className="username_container">
<div className="username">[{player.hero.name.replace('npc_dota_hero_','').toUpperCase()}] {player.player.name}, level {player.hero.level}</div>
</div>
<div className="grenade_container">
{/*grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
{
grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
</React.Fragment>)*/}
</div>
</div>
<div className="stats_row">
<div className="statistics">
{
player.abilities.map((ability: any) => <Ability name={ability.name} level={ability.level} available={ability.level > 0} cooldown={ability.cooldown}/>)
player.abilities.map((ability: any) => <Ability name={ability.name} level={ability.level} available={ability.level > 0} cooldown={ability.cooldown} />)
}
</div>
<div className="statistics">
{
player.items.slots.map((item: any) => item.name !== "empty" ? <img src={`./items/${item.name.replace('item_','')}_lg.png`} height={43}/> : null)
player.items.filter(item => item.type === "slot").map(item => item.name !== "empty" ? <img src={`./items/${item.name.replace('item_', '')}_lg.png`} height={43} /> : null)
}
</div>
<div className="bar-container">
<div className="health-bar bar" style={{ width: player.hero.max_health ? `${player.hero.health*100/player.hero.max_health}%` : 0}}></div>{player.hero.health}/{player.hero.max_health}
<div className="health-bar bar" style={{ width: player.hero.max_health ? `${(player.hero.health || 0) * 100 / player.hero.max_health}%` : 0 }}></div>{player.hero.health}/{player.hero.max_health}
</div>
<div className="bar-container">
<div className="mana-bar bar" style={{ width: player.hero.max_health ? `${player.hero.health*100/player.hero.max_health}%` : 0}}></div>{player.hero.mana}/{player.hero.max_mana}
<div className="mana-bar bar" style={{ width: player.hero.max_mana ? `${(player.hero.mana || 0) * 100 / player.hero.max_mana}%` : 0 }}></div>{player.hero.mana}/{player.hero.max_mana}
</div>
</div>
</div>