diff --git a/README.md b/README.md index 6e8afae..bf41fb6 100644 --- a/README.md +++ b/README.md @@ -11,14 +11,70 @@ Fullfledged example of the React HUD made for HUD Manager. +## Preview + +![Preview of HUDs pick process](picking.png) +![Preview of HUDs ingame part](ingame.png) +![Preview of HUDs ending scoreboard](scoreboard.png) + +## 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. \ No newline at end of file diff --git a/ingame.png b/ingame.png new file mode 100644 index 0000000..1bef8c6 Binary files /dev/null and b/ingame.png differ diff --git a/package.json b/package.json index 55da995..3f6732d 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/picking.png b/picking.png new file mode 100644 index 0000000..622fc7d Binary files /dev/null and b/picking.png differ diff --git a/public/hud.json b/public/hud.json index 01eee0c..5825fe4 100644 --- a/public/hud.json +++ b/public/hud.json @@ -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, diff --git a/scoreboard.png b/scoreboard.png new file mode 100644 index 0000000..8acb980 Binary files /dev/null and b/scoreboard.png differ diff --git a/src/HUD/GameHUD/gamehud.scss b/src/HUD/GameHUD/gamehud.scss index 216b15a..540ba88 100644 --- a/src/HUD/GameHUD/gamehud.scss +++ b/src/HUD/GameHUD/gamehud.scss @@ -123,7 +123,7 @@ body { position:fixed; align-items: center; bottom:0; - left:232px; + left:282px; transition: opacity 1s; opacity:1; &.hide { diff --git a/src/HUD/Layout/Layout.tsx b/src/HUD/Layout/Layout.tsx index 6432b84..4ff08d7 100644 --- a/src/HUD/Layout/Layout.tsx +++ b/src/HUD/Layout/Layout.tsx @@ -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, diff --git a/src/HUD/Picker/Vector.png b/src/HUD/Picker/Vector.png deleted file mode 100644 index 1cad317..0000000 Binary files a/src/HUD/Picker/Vector.png and /dev/null differ diff --git a/src/HUD/Picker/activePick.png b/src/HUD/Picker/activePick.png deleted file mode 100644 index 823d70d..0000000 Binary files a/src/HUD/Picker/activePick.png and /dev/null differ diff --git a/src/HUD/Picker/nonActivePick.png b/src/HUD/Picker/nonActivePick.png deleted file mode 100644 index 22170a4..0000000 Binary files a/src/HUD/Picker/nonActivePick.png and /dev/null differ diff --git a/src/HUD/Picker/snowflake.png b/src/HUD/Picker/snowflake.png deleted file mode 100644 index 546234d..0000000 Binary files a/src/HUD/Picker/snowflake.png and /dev/null differ diff --git a/src/HUD/Picker/tournament.png b/src/HUD/Picker/tournament.png deleted file mode 100644 index b0f9e31..0000000 Binary files a/src/HUD/Picker/tournament.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Center.png b/src/HUD/Scoreboard/Center.png deleted file mode 100644 index e342a68..0000000 Binary files a/src/HUD/Scoreboard/Center.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Center1.png b/src/HUD/Scoreboard/Center1.png deleted file mode 100644 index 3a4075c..0000000 Binary files a/src/HUD/Scoreboard/Center1.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 25.png b/src/HUD/Scoreboard/Rectangle 25.png deleted file mode 100644 index 22df3f8..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 25.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 41.png b/src/HUD/Scoreboard/Rectangle 41.png deleted file mode 100644 index ebfe5b5..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 41.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 48.png b/src/HUD/Scoreboard/Rectangle 48.png deleted file mode 100644 index 18723c8..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 48.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 49.png b/src/HUD/Scoreboard/Rectangle 49.png deleted file mode 100644 index 1b2031e..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 49.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 50.png b/src/HUD/Scoreboard/Rectangle 50.png deleted file mode 100644 index e7b91d8..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 50.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 80.png b/src/HUD/Scoreboard/Rectangle 80.png deleted file mode 100644 index ec0b2a8..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 80.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 81.png b/src/HUD/Scoreboard/Rectangle 81.png deleted file mode 100644 index fcf3562..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 81.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 82.png b/src/HUD/Scoreboard/Rectangle 82.png deleted file mode 100644 index ce1c84f..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 82.png and /dev/null differ diff --git a/src/HUD/Scoreboard/Rectangle 83.png b/src/HUD/Scoreboard/Rectangle 83.png deleted file mode 100644 index 9f9bd4e..0000000 Binary files a/src/HUD/Scoreboard/Rectangle 83.png and /dev/null differ diff --git a/src/HUD/Scoreboard/direBorder.png b/src/HUD/Scoreboard/direBorder.png deleted file mode 100644 index bc96e29..0000000 Binary files a/src/HUD/Scoreboard/direBorder.png and /dev/null differ diff --git a/src/HUD/Scoreboard/direLine.png b/src/HUD/Scoreboard/direLine.png deleted file mode 100644 index 87824cc..0000000 Binary files a/src/HUD/Scoreboard/direLine.png and /dev/null differ diff --git a/src/HUD/Scoreboard/facebook.png b/src/HUD/Scoreboard/facebook.png deleted file mode 100644 index 4f68be7..0000000 Binary files a/src/HUD/Scoreboard/facebook.png and /dev/null differ diff --git a/src/HUD/Scoreboard/header_bg.png b/src/HUD/Scoreboard/header_bg.png deleted file mode 100644 index 0d26785..0000000 Binary files a/src/HUD/Scoreboard/header_bg.png and /dev/null differ diff --git a/src/HUD/Scoreboard/hits.png b/src/HUD/Scoreboard/hits.png deleted file mode 100644 index b6aca5a..0000000 Binary files a/src/HUD/Scoreboard/hits.png and /dev/null differ diff --git a/src/HUD/Scoreboard/image 10.png b/src/HUD/Scoreboard/image 10.png deleted file mode 100644 index 94354f4..0000000 Binary files a/src/HUD/Scoreboard/image 10.png and /dev/null differ diff --git a/src/HUD/Scoreboard/instagram.png b/src/HUD/Scoreboard/instagram.png deleted file mode 100644 index ca40657..0000000 Binary files a/src/HUD/Scoreboard/instagram.png and /dev/null differ diff --git a/src/HUD/Scoreboard/money.png b/src/HUD/Scoreboard/money.png deleted file mode 100644 index d7557e7..0000000 Binary files a/src/HUD/Scoreboard/money.png and /dev/null differ diff --git a/src/HUD/Scoreboard/radiantBorder.png b/src/HUD/Scoreboard/radiantBorder.png deleted file mode 100644 index f6270f8..0000000 Binary files a/src/HUD/Scoreboard/radiantBorder.png and /dev/null differ diff --git a/src/HUD/Scoreboard/radiantLine.png b/src/HUD/Scoreboard/radiantLine.png deleted file mode 100644 index 4aa5a77..0000000 Binary files a/src/HUD/Scoreboard/radiantLine.png and /dev/null differ diff --git a/src/HUD/Scoreboard/rec.png b/src/HUD/Scoreboard/rec.png deleted file mode 100644 index 89ef0dd..0000000 Binary files a/src/HUD/Scoreboard/rec.png and /dev/null differ diff --git a/src/HUD/Scoreboard/rectangle.png b/src/HUD/Scoreboard/rectangle.png deleted file mode 100644 index 97036cd..0000000 Binary files a/src/HUD/Scoreboard/rectangle.png and /dev/null differ diff --git a/src/HUD/Scoreboard/twitch.png b/src/HUD/Scoreboard/twitch.png deleted file mode 100644 index c80e531..0000000 Binary files a/src/HUD/Scoreboard/twitch.png and /dev/null differ diff --git a/src/HUD/Scoreboard/twitter.png b/src/HUD/Scoreboard/twitter.png deleted file mode 100644 index 4e72f8c..0000000 Binary files a/src/HUD/Scoreboard/twitter.png and /dev/null differ diff --git a/src/HUD/image.png b/src/HUD/image.png deleted file mode 100644 index 1609f3a..0000000 Binary files a/src/HUD/image.png and /dev/null differ