Apex React HUD for LHM.gg

Apex React HUD for LHM.gg, created by Lexogrine, is an open source Apex HUD that you can use and modify to your needs. It’s the core element of building customized Apex HUDs and spectator overlays for the LHM.gg platform.

It comes with a set of default options and features that you can use for creating your unique esport experience.

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 Alt + 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

Preview

Download
To download it, simply click here: DOWNLOAD Apex React HUD for LHM.gg

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 LHM.gg open so it will pass Apex 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 a 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 LHM.gg upload area.

File structure

The HUD is separated into two parts - the API part, which connects to the LHM.gg API and communicates with it: src/App.tsx file and src/api directory. Usually, you don't want to play with it, so the whole thing 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 separated into its own folder. Styles are kept in the src/HUD/styles. Names are quite self-explanatory, and to modify the 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 LHM.gg, let's take a look at the src/HUD/SideBoxes/SideBox.tsx componentDidMount() method:

... 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:

import {configs, actions} from  './../../App';
...
actions.on("toggleTrivia", () => {
	this.setState({show: !this.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:

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
Listening for kills is very easy - we can see that in src/HUD/Killfeed/Killfeed.tsx:

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 a CSS animation, which makes them gently show, and after a few seconds, disappear. The experience is very smooth. You can fiddle with the styling in the killfeed.scss. This killfeed detects who killed whom, if there was an assist (flash assist as well), used weapon, headshot, and wallbang.

Radar
Radar is a custom React-based component made by Hubert Walczak and is easily editable from CSS.

About Lexogrine
Lexogrine is an AI software development company, offering top-tier AI, web, and mobile design and development services for international companies. Alongside that, Lexogrine offers a set of web and mobile applications - including LHM.gg - that revolutionize the way experts and specialists from different industries work together on a daily basis.

Lexogrine specializes in AI development, alongside web, mobile, and cloud development with technologies like TypeScript, Python, LLM, React, React Native, Node.js, Prisma, Medusa, Pytorch, AWS, and Google Cloud Platform.

With over 5 years of experience, Lexogrine delivered hundreds of projects, supporting companies and enterprises from all over the world.