init

.env

@@ -0,0 +1,2 @@
+GENERATE_SOURCEMAP=false
+BROWSER=none

.env.development

@@ -0,0 +1 @@
+PUBLIC_URL=/dev/

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Lexogrine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

OpenBrowserPlugin.js

@@ -0,0 +1,49 @@
+const open = require('open');
+
+module.exports = class OpenBrowser {
+  constructor(options) {
+    if (typeof options === 'string') {
+      this.options = Object.assign(
+        {
+          hasOpen: false
+        },
+        {
+          url: options
+        }
+      );
+    } else {
+      this.options = Object.assign(
+        {
+          port: 8080,
+          host: 'localhost',
+          protocol: 'http:',
+          hasOpen: false
+        },
+        options
+      );
+    }
+  }
+
+  apply(compiler) {
+    const options = this.options;
+    let url;
+    let hasOpen = options.hasOpen;
+    if (options.protocol && !options.protocol.endsWith(':')) options.protocol += ':';
+    if (options.url) url = options.url;
+    else url = `${options.protocol}//${options.host}:${options.port}`;
+    if (compiler.hooks) {
+      compiler.hooks.afterEmit.tap('openBrowser', () => {
+        if (!hasOpen) open(url);
+        hasOpen = true;
+        this.options.hasOpen = true;
+      });
+    } else {
+      compiler.plugin('after-emit', (c, cb) => {
+        if (!hasOpen) open(url);
+        hasOpen = true;
+        this.options.hasOpen = true;
+        return cb();
+      });
+    }
+  }
+};

README.md

@@ -0,0 +1,139 @@
+
+<p align="center">
+	<p align="center" style="font-weight:600; letter-spacing:1pt; font-size:20pt;">LEXOGRINE HUD</p>
+	<p align="center"><img src="icon.png" alt="Logo" width="80" height="80"></p>
+	<p align="center" style="font-weight:400;">Powered by <a href='https://github.com/lexogrine/hud-manager'><strong>« Lexogrine HUD Manager »</strong></a></p>
+</p>
+
+# Lexogrine HUD
+
+  
+
+Fullfledged example of the React HUD made for HUD Manager. It has:
+
+- Custom actions
+- Keybinds
+- Killfeed
+- Player cam feed
+- Custom Radar
+
+## Keybinds:
+### **Left Alt + S**
+>Makes radar smaller by 20px;
+### **Left Alt + B**
+>Makes radar bigger by 20px;
+### **Left Alt + T**
+>Shows trivia box
+### **Left Alt + M**
+>Toggles upcoming match box
+### **Left Alt + P**
+>Toggles player preview
+### **Left Alt + C**
+>Toggles camera feed
+### **Left Ctrl + B**
+>Make radar invisible
+
+## **Panel**
+## Trivia settings
+
+|  Field|Description  |
+|--|--|
+|  Trivia title| `Text` |
+|  Trivia content| `Text` |
+
+
+## Display settings
+
+
+|  Field|Description  |
+|--|--|
+|  Left/right box's title| `Text` |
+|  Left/right box's title| `Text` |
+|  Left/right box's image logo| `Image file` |
+
+## Example settings
+
+![Preview of HUDs settings](settings.png)
+
+## Preview
+
+![Preview of HUDs panel in action](preview.png)
+
+# Download
+
+To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/csgo-react-hud/releases/latest)
+
+# Instruction
+## 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.
+
+  
+ ## File structure
+ The HUD is seperated into two parts - the API part, that connects to the HUD Manager API and communicate with it: `src/App.tsx` file and `src/api` directory. Usually, you don't want to play with it, so the whole runs without a problem.
+ The second part is the render part - `src/HUD`, `src/fonts` and `src/assets` are the directories you want to modify. In the `src/HUD` each element of the HUD is seperated into its own folder. Styles are kept in the `src/HUD/styles`. Names are quite self-explanatory, and to modify style of the element you should just find  the styling by the file and class name.
+
+
+## `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.
+
+## Killfeed
+Because our  `csgogsi` has the ability to process input from HLAE's MIRV, listening for kills is very easy. We can see than in `src/HUD/Killfeed/Killfeed.tsx`:
+```javascript
+componentDidMount() {
+	GSI.on("kill", kill  => {
+		this.addKill(kill);
+	});
+}
+```
+The Killfeed component basically just keeps kills in the state during the round, and after the round it cleans the state. Kills have CSS animation, that makes them gently show, and after a few seconds disappear, the experience is very smooth. You can fiddle with the styling in the `killfeed.css`
+This killfeed detects who killed whom, if there was an assist (flash assist as well), used weapon, headshot and wallbang.
+
+## Radar
+Radar is custom React-based component, made by Hubert Walczak, and is easily editable from css.

craco.config.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const fs = require('fs');
+const homedir = require('os').homedir();
+const internalIp = require('internal-ip');
+const OpenBrowserPlugin = require('./OpenBrowserPlugin');
+
+const pathToConfig = path.join(process.env.APPDATA || path.join(homedir, '.config'), 'hud-manager', 'databases', 'config');
+let port = 1349;
+
+const getPort = () => {
+    if(!fs.existsSync(pathToConfig)){
+        console.warn('LHM Config file unavailable');
+        return port;
+    }
+
+    try {
+        const config = JSON.parse(fs.readFileSync(pathToConfig, 'utf-8'));
+
+        if(!config.port){
+            console.warn('LHM Port unavailable');
+        }
+
+        console.warn('LHM Port detected as', config.port);
+        return config.port;
+        
+    } catch {
+        console.warn('LHM Config file invalid');
+        return port;
+    }
+}
+
+port = getPort();
+
+module.exports = {
+    devServer: {
+        port: 3500,
+        open: false
+    },
+    webpack: {
+        configure: (webpackConfig) => {
+            webpackConfig.plugins.push(new OpenBrowserPlugin({ url: `http://${internalIp.v4.sync()}:${port}/development/`}))
+            return webpackConfig;
+        }
+    }
+};

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "lexogrine_dota2_hud",
+  "version": "1.0.0",
+  "homepage": "./",
+  "private": true,
+  "dependencies": {
+    "@craco/craco": "^5.7.0",
+    "@types/jest": "24.0.19",
+    "@types/node": "12.11.1",
+    "@types/react": "16.9.9",
+    "@types/react-dom": "16.9.2",
+    "csgogsi-socket": "^2.2.0",
+    "query-string": "^6.12.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "4.0.0",
+    "socket.io-client": "^2.3.0",
+    "typescript": "3.6.4"
+  },
+  "license": "GPL-3.0",
+  "scripts": {
+    "zip": "npm-build-zip",
+    "start": "craco start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "pack": "npm run build && npm run zip"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/history": "^4.7.5",
+    "@types/socket.io-client": "^1.4.32",
+    "internal-ip": "^6.2.0",
+    "npm-build-zip": "^1.0.2",
+    "open": "^8.0.2",
+    "sass": "^1.32.5"
+  }
+}