mirror of
https://github.com/lexogrine/dota2-react-hud.git
synced 2026-05-04 04:23:10 +02:00
Updated typings usage
This commit is contained in:
Hubert Walczak
+10
-79
@@ -2,13 +2,15 @@ import React from 'react';
|
||||
import Layout from './HUD/Layout/Layout';
|
||||
import { port, isDev } from './api/api';
|
||||
import ActionManager, { ConfigManager } from './api/actionManager';
|
||||
import { Dota2, DOTA2GSI } from 'dotagsi';
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
import { GSISocket } from "csgogsi-socket";
|
||||
import { Match } from './api/interfaces';
|
||||
import { DOTA2GSI } from './dota2gsi';
|
||||
const DOTA2 = new DOTA2GSI();
|
||||
const socket = io(isDev ? `localhost:${port}` : '/');
|
||||
|
||||
export const { GSI, socket } = GSISocket(isDev ? `localhost:${port}` : '/', "update");
|
||||
const Dota2 = new DOTA2GSI();
|
||||
socket.on('update', (data: any) => {
|
||||
DOTA2.digest(data);
|
||||
});
|
||||
|
||||
export const actions = new ActionManager();
|
||||
export const configs = new ConfigManager();
|
||||
@@ -26,70 +28,7 @@ const dataLoader: DataLoader = {
|
||||
match: null
|
||||
}*/
|
||||
|
||||
const getPlayerInfo = (dota2gsi: any, id: number, attribute: string) => {
|
||||
if(!dota2gsi || !dota2gsi[attribute]) return null;
|
||||
const teams = Object.values(dota2gsi[attribute]) as any[];
|
||||
for(const team of teams){
|
||||
if(team[`player${id}`]){
|
||||
if(attribute !== 'abilities' && attribute !== 'items'){
|
||||
return team[`player${id}`];
|
||||
}
|
||||
if(attribute === 'abilities'){
|
||||
return Object.values(team[`player${id}`]);
|
||||
}
|
||||
const response: any = {};
|
||||
for(const key of Object.keys(team[`player${id}`])){
|
||||
if(key.includes('neutral')){
|
||||
if(!response.neutrals){
|
||||
response.neutrals = [];
|
||||
}
|
||||
response.neutrals.push(team[`player${id}`][key]);
|
||||
} else if (key.includes('slot')){
|
||||
if(!response.slots){
|
||||
response.slots = [];
|
||||
}
|
||||
response.slots.push(team[`player${id}`][key])
|
||||
} else if (key.includes('stash')){
|
||||
if(!response.stashes){
|
||||
response.stashes = [];
|
||||
}
|
||||
response.stashes.push(team[`player${id}`][key])
|
||||
} else if (key.includes('teleport')){
|
||||
if(!response.teleports){
|
||||
response.teleports = [];
|
||||
}
|
||||
response.teleports.push(team[`player${id}`][key])
|
||||
}
|
||||
}
|
||||
return response;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
const getObservedPlayer = (dota2gsi: any): any => {
|
||||
if(!dota2gsi || !dota2gsi.hero) return null;
|
||||
const teams = Object.values(dota2gsi.hero) as any[];
|
||||
for(const team of teams){
|
||||
for(const playerId of Object.keys(team)){
|
||||
const id = Number(playerId.replace("player",""));
|
||||
team[playerId].obs_slot = id;
|
||||
if(team[playerId].selected_unit){
|
||||
const player = {
|
||||
player: getPlayerInfo(dota2gsi, id, 'player'),
|
||||
hero: team[playerId],
|
||||
abilities: getPlayerInfo(dota2gsi, id, 'abilities'),
|
||||
items: getPlayerInfo(dota2gsi, id, 'items'),
|
||||
}
|
||||
return player;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
class App extends React.Component<any, { game: any | null }> {
|
||||
class App extends React.Component<any, { game: Dota2 | null }> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -170,16 +109,8 @@ class App extends React.Component<any, { game: any | null }> {
|
||||
window.top.location.reload();
|
||||
});
|
||||
|
||||
GSI.on('data', game => {
|
||||
/*if (!this.state.game || this.state.steamids.length) this.verifyPlayers(game);
|
||||
this.setState({ game }, () => {
|
||||
if (!this.state.checked) this.loadMatch();
|
||||
});*/
|
||||
});
|
||||
socket.on('update', Dota2.digest);
|
||||
Dota2.on('data', (data: any) => {
|
||||
const player = getObservedPlayer(data);
|
||||
this.setState({ game: { player }});
|
||||
DOTA2.on('data', data => {
|
||||
this.setState({ game: data });
|
||||
})
|
||||
socket.on('match', () => {
|
||||
|
||||
|
||||
@@ -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> {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user