/csgo-custom-hud

react.js based cs:go custom hud

Primary LanguageTypeScript

csgo-custom-hud

react based cs:go custom hud.

How to use

before running app.

  • gameConfig/gamestate_integration_observerspectator.cfg needs to be placed in cfg folder in CS:GO location
  • gameConfig/observer.cfg needs to be placed in cfg folder in CS:GO location.

run app

npm i
npm run build
npm start

configuration

hud settings

you may edit /src/config/hudSettings.ts.
For example,

export const hudSettings: HudSettings = {
    showTeamMoney: true, // show team money when round is freeze time.
};

team config

you may edit /src/config/teamInfo.ts. For example,

export const team1: TeamInfo = {
    name: "NiP",
    logo: "nip.png", // You need to place the file in `/src/resources/teams`
};

export const team2: TeamInfo = {
    name: "fnatic",
    logo: "fnatic.png", // You need to place the file in `/src/resources/teams`
};

player config

you may edit /src/config/playerInfo. For example,

export const playerInfoList: PlayerInfoList = {
    // `76561198005627722` is Steam ID.
    "76561198005627722": {
        twitterId: "@thiry_sk",
        image: "shroud.jpg",
    },
};

shortcuts

  • Alt+Left => swap team information.
  • Alt+Up => Toggle show/hide HUD.

For developer

how to enable Chrome dev tools

npm run install:sdk
npm run build
npm start

Now you may press F12, then you can use Chrome dev tools.

how to start storybook

npm i
npm run start:storybook

access http://localhost:3000/.
Story subjects are currently written in Japanese.
I will change to English whenever I feel like.