Removed redundant files
68
README.md
@ -11,14 +11,70 @@
|
||||
|
||||
Fullfledged example of the React HUD made for HUD Manager.
|
||||
|
||||
## Preview
|
||||
|
||||

|
||||

|
||||

|
||||
|
||||
## 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.
|
||||
|
||||
## 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 :)
|
||||
|
||||
## Building & distributing
|
||||
To build version to distribute and move around, in the root directory run `npm run pack`. It will create the zip file for distribution. Now you can just drag and drop this file into the HUD Managers upload area.
|
||||
|
||||
## Signing
|
||||
|
||||
To create Signed HUD to prevent at least from modyfing compiled Javascript files run `npm run sign`. It's the same as `npm run pack` command but with additional step of signing .js and .css files and hud.json.
|
||||
|
||||
## `panel.json` API
|
||||
To get the incoming data from the HUD Manager, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` `componentDidMount()` method:
|
||||
```javascript
|
||||
import {configs} from './../../App';
|
||||
...
|
||||
configs.onChange((data:any) => {
|
||||
if(!data) return;
|
||||
|
||||
const display = data.display_settings;
|
||||
|
||||
if(!display) return;
|
||||
|
||||
if(display[`${this.props.side}_title`]){
|
||||
this.setState({title:display[`${this.props.side}_title`]})
|
||||
}
|
||||
if(display[`${this.props.side}_subtitle`]){
|
||||
this.setState({subtitle:display[`${this.props.side}_subtitle`]})
|
||||
}
|
||||
if(display[`${this.props.side}_image`]){
|
||||
this.setState({image:display[`${this.props.side}_image`]})
|
||||
}
|
||||
});
|
||||
```
|
||||
To retrieve incoming data, you should just import `configs` object and then listen for the changes with `onChange` method. Usually you want to check for the specific data, as in the callback it will always serve the full form from the Manager.
|
||||
However it looks different in the case of action input. In this case, let's look at the `src/HUD/Trivia/Trivia.tsx`:
|
||||
```javascript
|
||||
import {configs, actions} from './../../App';
|
||||
...
|
||||
actions.on("triviaState", (state: any) => {
|
||||
this.setState({show: state === "show"})
|
||||
});
|
||||
```
|
||||
For the action input we need to import the `actions` object and create listener with the parameter on it.
|
||||
## `keybinds.json` API
|
||||
Keybinds API works in very similiar to `panel.json` action API. One more time the example will be from `src/HUD/Trivia/Trivia.tsx`:
|
||||
```javascript
|
||||
import {configs, actions} from './../../App';
|
||||
...
|
||||
actions.on("toggleTrivia", () => {
|
||||
this.setState({show: !this.state.show})
|
||||
});
|
||||
```
|
||||
Keybinds listener works on the same object as action input, in this case however there are no parameter to retrieve.
|
||||
|
||||
## Keybinds & Panel:
|
||||
For keybinds & panel API read [csgo-react-hud docs](https://github.com/lexogrine/csgo-react-hud)
|
||||
|
||||
# Download
|
||||
|
||||
To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/dota2-react-hud/releases/latest)
|
||||
|
||||
# Note
|
||||
|
||||
This is early beta of Dota 2 custom HUD. Current release is targeted for developers to gather their feedback.
|
||||
BIN
ingame.png
Normal file
|
After Width: | Height: | Size: 3.4 MiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lexogrine_dota2_hud",
|
||||
"version": "1.1.0",
|
||||
"version": "1.2.0",
|
||||
"homepage": "./",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
@ -24,7 +24,8 @@
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"pack": "npm run build && npm run zip"
|
||||
"pack": "npm run build && npm run zip",
|
||||
"sign": "npm run build && node sign.js && npm-build-zip --name=signed"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
@ -45,6 +46,7 @@
|
||||
"@types/history": "^4.7.5",
|
||||
"internal-ip": "^6.2.0",
|
||||
"npm-build-zip": "^1.0.2",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"open": "^8.0.2",
|
||||
"sass": "^1.32.5"
|
||||
}
|
||||
|
||||
BIN
picking.png
Normal file
|
After Width: | Height: | Size: 3.0 MiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name":"exogrine Dota2 HUD",
|
||||
"version":"1.1.0",
|
||||
"name":"Lexogrine Dota2 HUD",
|
||||
"version":"1.2.0",
|
||||
"author":"Lexogrine",
|
||||
"legacy": false,
|
||||
"radar": true,
|
||||
|
||||
BIN
scoreboard.png
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
@ -123,7 +123,7 @@ body {
|
||||
position:fixed;
|
||||
align-items: center;
|
||||
bottom:0;
|
||||
left:232px;
|
||||
left:282px;
|
||||
transition: opacity 1s;
|
||||
opacity:1;
|
||||
&.hide {
|
||||
|
||||
@ -12,20 +12,10 @@ import Statistics from "../GameHUD/ObservedStatistics";
|
||||
import TopSideBar from "../GameHUD/TopSideBar";
|
||||
import Scoreboard, { stringToClock } from "../Scoreboard/Scoreboard";
|
||||
|
||||
import TwitchIcon from "./../Scoreboard/twitch.png";
|
||||
import FacebookIcon from './../Scoreboard/facebook.png';
|
||||
import TwitterIcon from "./../Scoreboard/twitter.png";
|
||||
import InstragramIcon from './../Scoreboard/instagram.png';
|
||||
|
||||
import ObservedPlayer from "../GameHUD/Game";
|
||||
import { actions, configs } from "../../App";
|
||||
|
||||
const icons = {
|
||||
twitch: TwitchIcon,
|
||||
facebook: FacebookIcon,
|
||||
instagram: InstragramIcon,
|
||||
twitter: TwitterIcon
|
||||
} as any;
|
||||
|
||||
interface Props {
|
||||
game: Dota2,
|
||||
|
||||
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 338 B |
|
Before Width: | Height: | Size: 1007 B |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 680 B |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 3.4 MiB |