Lexogrine/cs2-react-hud
Lexogrine/cs2-react-hud
1
0
Fork 0
mirror of https://github.com/lexogrine/cs2-react-hud.git synced 2025-12-10 02:42:49 +01:00
Code Releases Activity

Update README

Browse Source
This commit is contained in:
Kacper Herchel 2025-07-17 21:20:00 +02:00
parent 02b7bb1a43
commit a15e01cc49
1 changed files with 119 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
README.md
View File

@ -1,134 +1,148 @@
### **CS2 React HUD for [LHM.gg](http://LHM.gg)**
<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>
CS2 React HUD for [LHM.gg](http://LHM.gg), created by Lexogrine, is an open source Counter-Strike 2 HUD that you can use and modify to your needs. It’s the core element of building customized CS2 HUDs and spectator overlays for the [LHM.gg](http://LHM.gg) platform.
# Lexogrine HUD
It comes with a set of default options and features that you can use for creating your unique esport experience.
#### **Keybinds**
**Left Alt + B**
Makes radar smaller by 20px;
Fullfledged example of the React HUD made for HUD Manager. It has:
**Left Alt + V**
Makes radar bigger by 20px;
- Custom actions
- Keybinds
- Player cam feed
- Custom Radar
**Left Alt + C**
Toggles camera feed
## Keybinds:
### **Left Alt + B**
>Makes radar smaller by 20px;
### **Left Alt + V**
>Makes radar bigger by 20px;
### **Left Alt + C**
>Toggles camera feed
#### **Panel**
## **Panel**
## Trivia settings
LHM HUDs can be configured in HUD Settings when opened in LHM. The schema for this configuration panel is available in `/public/panel.json`.
#### Trivia settings
| Field | Description |
|--|--|
| -------------- | ----------- |
| Trivia title | `Text` |
| Trivia content | `Text` |
## Display settings
#### Display settings
| Field | Description |
|--|--|
| Left/right box's title| `Text` |
| --------------------------- | ------------ |
| Left/right box's title | `Text` |
| Left/right box's subtitle | `Text` |
| Left/right box's image logo | `Image file` |
## Example settings
![Preview of HUDs settings](settings.png)
## Preview
#### **Preview**
![Preview of HUDs panel in action](preview.png)
# Download
#### **Download**
To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/cs2-react-hud/releases/latest)
To download it, simply click here: [**DOWNLOAD CS React HUD for LHM.gg**](https://lhm.gg/download?target=cs2)
# 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 CS2 data to the HUD.
#### **Instruction**
## 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 :)
##### **Setting up**
## 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.
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 CS2 data to the HUD.
## Signing
##### **Identifying HUD**
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.
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**
## 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.
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.
##### **Signing**
To create Signed CS2 HUD for [LHM.gg](http://LHM.gg) to prevent at least from modifying compiled JavaScript files, run `npm run sign`. It's the same as `npm run pack` command but with an additional step of signing `.js` and `.css` files and `hud.json`.
##### **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` component:
## `panel.json` API
To get the incoming data from the HUD Manager, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` component:
```typescript
const Sidebox = ({side, hide} : { side: 'left' | 'right', hide: boolean}) => {
const Sidebox = ({ side, hide }: { side: "left" | "right"; hide: boolean }) => {
const [image, setImage] = useState<string | null>(null);
const data = useConfig('display_settings');
const data = useConfig("display_settings");
useOnConfigChange('display_settings', data => {
useOnConfigChange(
"display_settings",
(data) => {
if (data && `${side}_image` in data) {
const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
const imageUrl = `${apiUrl}api/huds/${
hudIdentity.name || "dev"
}/display_settings/${side}_image?isDev=${
hudIdentity.isDev
}&cache=${new Date().getTime()}`;
setImage(imageUrl);
}
}, []);
},
[]
);
if (!data || !data[`${side}_title`]) return null;
return (
<div className={`sidebox ${side} ${hide ? 'hide':''}`}>
<div className={`sidebox ${side} ${hide ? "hide" : ""}`}>
<div className="title_container">
<div className="title">{data[`${side}_title`]}</div>
<div className="subtitle">{data[`${side}_subtitle`]}</div>
</div>
<div className="image_container">
{image ? <img src={image} id={`image_left`} alt={'Left'}/>:null}
{image ? <img src={image} id={`image_left`} alt={"Left"} /> : null}
</div>
</div>
);
}
};
```
You can just read data from the HUDs settings by using `useConfig` hook. Everything is now strictly typed. If you make a change to panel or keybinds JSON files, Vite server will automatically generate types for you, so useConfig should always be up to date.
You can just read data from the HUDs settings by using `useConfig` hook. Everything is now strictly typed. If you make a change to the panel or keybinds JSON files, Vite server will automatically generate types for you, so `useConfig` should always be up to date.
If you want to listen for a change in settings, you can use `useOnConfigChange`. In this case we are using this to force refresh `src` attribute of the img element.
If you want to listen for a change in settings, you can use `useOnConfigChange`. In this case, we are using this to force refresh the `src` attribute of the `img` element.
If you want to listen for action input, you can just use `useAction` hook, like here in `Trivia.tsx`:
If you want to listen for action input, you can just use `useAction` hook, like here in Trivia.tsx:
```typescript
useAction('triviaState', (state) => {
useAction("triviaState", (state) => {
setShow(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. This time the example will be from `RadarMaps.tsx`:
```typescript
useAction('radarBigger', () => {
setRadarSize(p => p+10);
}, []);
useAction('radarSmaller', () => {
setRadarSize(p => p-10);
}, []);
For the action input, we need to import the `actions` object and create a listener with the parameter on it.
##### **keybinds.json API**
Keybinds API works in a very similar way to `panel.json` action API. This time, the example will be from `RadarMaps.tsx`:
```typescript
useAction(
"radarBigger",
() => {
setRadarSize((p) => p + 10);
},
[]
);
useAction(
"radarSmaller",
() => {
setRadarSize((p) => p - 10);
},
[]
);
```
##### **Killfeed**
Listening for kills is very easy - we can see that in `src/HUD/Killfeed/Killfeed.tsx`:
## 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 => {
@ -136,8 +150,17 @@ componentDidMount() {
});
}
```
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.
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](http://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.