README.md

@@ -1,40 +1,47 @@
-### **Dota 2 React HUD for [LHM.gg](http://LHM.gg)**
 
-Dota2 React HUD for [LHM.gg](http://LHM.gg), created by Lexogrine, is an open source Dota 2 HUD that you can use and modify to your needs. It’s the core element of building customized Dota 2 HUDs and spectator overlays for the [LHM.gg](http://LHM.gg) platform.
+<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>
 
-It comes with a set of default options and features that you can use for creating your unique esport experience.
+# Lexogrine HUD
+
+  
+
+Fullfledged example of the React HUD made for HUD Manager.
+
+## Preview
 
-**Preview**  
 ![Preview of HUDs pick process](picking.png)
 ![Preview of HUDs ingame part](ingame.png)
 ![Preview of HUDs ending scoreboard](scoreboard.png)
 
-**Download**  
-To download it, simply click here: [**DOWNLOAD Dota 2 React HUD for LHM.gg**](https://lhm.gg/download?target=dota2)
+## 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.
 
-**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](http://LHM.gg) open so it will pass Dota 2 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.
+## 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**
+## 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`.
+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**  
+## `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`]})
 	}
@@ -46,9 +53,8 @@ configs.onChange((data:any) => {
 	}
 });
 ```
-
-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`:
-
+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';
 ...
@@ -56,13 +62,9 @@ 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';
 ...
@@ -70,25 +72,9 @@ 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`:
-
-```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.
 
-**About Lexogrine**  
-[Lexogrine](http://lexogrine.com) 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](http://lexogrine.com) 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.
+# Download
 
-With over 5 years of experience, Lexogrine delivered hundreds of projects, supporting companies and enterprises from all over the world.
+To download it just click here: [DOWNLOAD HUD](https://github.com/lexogrine/dota2-react-hud/releases/latest)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "lexogrine_dota2_hud",
-  "version": "1.3.1",
+  "version": "1.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "lexogrine_dota2_hud",
-      "version": "1.3.1",
+      "version": "1.2.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@craco/craco": "^5.7.0",
@@ -15,7 +15,7 @@
         "@types/react": "18.0.35",
         "@types/react-dom": "18.0.11",
         "buffer": "^6.0.3",
-        "dotagsi": "^1.5.0",
+        "dotagsi": "github:Macronic/dota2gsi",
         "query-string": "^6.12.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6795,9 +6795,9 @@
       }
     },
     "node_modules/dotagsi": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/dotagsi/-/dotagsi-1.5.0.tgz",
-      "integrity": "sha512-wbkmoCXhpyddgGA3swuTtRNVnLggktiiNQ9/yapWg2eNOyKLOQCvjesCu3bkwtL77AHjxyz9rKACxCoINEVivA=="
+      "version": "1.3.2",
+      "resolved": "git+ssh://git@github.com/Macronic/dota2gsi.git#df17e53279c67c54b02e583c1ba57eb185197d83",
+      "license": "MIT"
     },
     "node_modules/dotenv": {
       "version": "10.0.0",
@@ -23037,9 +23037,8 @@
       }
     },
     "dotagsi": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/dotagsi/-/dotagsi-1.5.0.tgz",
-      "integrity": "sha512-wbkmoCXhpyddgGA3swuTtRNVnLggktiiNQ9/yapWg2eNOyKLOQCvjesCu3bkwtL77AHjxyz9rKACxCoINEVivA=="
+      "version": "git+ssh://git@github.com/Macronic/dota2gsi.git#df17e53279c67c54b02e583c1ba57eb185197d83",
+      "from": "dotagsi@github:Macronic/dota2gsi"
     },
     "dotenv": {
       "version": "10.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lexogrine_dota2_hud",
-  "version": "1.3.1",
+  "version": "1.3.0",
   "homepage": "./",
   "private": true,
   "dependencies": {
@@ -9,8 +9,8 @@
     "@types/node": "18.15.11",
     "@types/react": "18.0.35",
     "@types/react-dom": "18.0.11",
+    "dotagsi": "github:Macronic/dota2gsi",
     "buffer": "^6.0.3",
-    "dotagsi": "^1.5.0",
     "query-string": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

public/hud.json

@@ -1,6 +1,6 @@
 {
-    "name":"LHM Dota 2 Default HUD",
-    "version":"1.3.1",
+    "name":"Lexogrine Dota2 HUD",
+    "version":"1.3.0",
     "author":"Lexogrine",
     "legacy": false,
     "radar": true,

public/panel.json

@@ -8,21 +8,6 @@
                 "name": "info_box",
                 "label": "Top right corner match info"
             },
-            {
-                "type":"select",
-                "name":"replace_avatars",
-                "label":"Use team logos as player avatars",
-                "values": [
-                    {
-                        "label": "Only if player has no avatar",
-                        "name": "if_missing"
-                    },
-                    {
-                        "label": "Always",
-                        "name": "always"
-                    }
-                ]
-            },
             {
                 "type": "action",
                 "name": "viewType",

src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Layout from './HUD/Layout/Layout';
 import api, { port, isDev } from './api/api';
 import ActionManager, { ConfigManager } from './api/actionManager';
-import { Dota2, DOTA2GSI, PlayerExtension, TeamExtension } from 'dotagsi';
+import { Dota2, DOTA2GSI, PlayerExtension } from 'dotagsi';
 import io from "socket.io-client";
 import { loadAvatarURL } from './api/avatars';
 import { Match } from './api/interfaces';
@@ -181,7 +181,7 @@ class App extends React.Component<any, { game: Dota2 | null,summary: GameSummary
 
 					if (match.left.id) {
 						api.teams.getOne(match.left.id).then(left => {
-							const gsiTeamData: TeamExtension = { id: left._id, name: left.name, short_name: left.shortName, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra, };
+							const gsiTeamData = { id: left._id, name: left.name, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra };
 							if (!isReversed) {
 								DOTA2.teams.radiant = gsiTeamData;
 							}
@@ -190,7 +190,7 @@ class App extends React.Component<any, { game: Dota2 | null,summary: GameSummary
 					}
 					if (match.right.id) {
 						api.teams.getOne(match.right.id).then(right => {
-							const gsiTeamData: TeamExtension = { id: right._id, name: right.name, short_name: right.shortName, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
+							const gsiTeamData = { id: right._id, name: right.name, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
 
 							if (!isReversed) DOTA2.teams.dire = gsiTeamData;
 							else DOTA2.teams.radiant = gsiTeamData;

src/HUD/GameHUD/Game.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Draft, Team, Faction, Player, TeamDraft } from 'dotagsi';
 import { apiUrl, getAssetURL } from '../../api/api';
 import CameraContainer from '../Camera/Container';
-import { Avatar } from '../Players/Avatar';
 
 const ObservedPlayer = ({ players, player, team, show}: { show: boolean, player: Player | null, players: Player[], team: Team | null }) => {
     const getPlayerById = (id: number) => {
@@ -33,7 +32,7 @@ const ObservedPlayer = ({ players, player, team, show}: { show: boolean, player:
             </div>
             <div className="player_picture">
 				<CameraContainer observedSteamid={player.steamid} />
-                <Avatar player={player} teamId={team?.id} />
+                {player.avatar ? <img src={player.avatar} /> : null}
             </div>
         </div> : null}
         

src/HUD/Players/Avatar.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "react";
-import { configs } from "../../App";
-import { apiUrl } from "../../api/api";
-import React from "react";
-import { Player } from "dotagsi";
-
-export const Avatar = (
-  { player, teamId }: { player: Player; teamId?: string | null },
-) => {
-
-  const [replaceAvatars, setAvatars] = useState<"always" | "never" | "if_missing">("never");
-
-  useEffect(() => {
-    const onData = (data: any) => {
-      if (!data) return;
-      const display = data.view;
-      if (!display) return;
-      setAvatars(display.replace_avatars || "never");
-    };
-    configs.onChange(onData);
-    onData(configs.data);
-
-    return () => {
-      configs.listeners = configs.listeners.filter((l) => l !== onData);
-    };
-  }, []);
-
-  const getUrl = () => {
-    const avatarData = player.avatar;
-  
-    if(replaceAvatars === 'always' || (replaceAvatars === 'if_missing' && !avatarData)){
-      return teamId ? `${apiUrl}api/teams/logo/${teamId}` : avatarData || null;
-    }
-    return avatarData || null;
-  }
-
-  const url = getUrl();
-
-  if(!url) return null
-  
-  return <img src={url} />
-};

src/HUD/Scoreboard/Scoreboard.tsx

@@ -5,7 +5,6 @@ import DireBorder from './direBorder.png';
 import "./scoreboard.scss";
 import { Match } from '../../api/interfaces';
 import { apiUrl, getAssetURL } from '../../api/api';
-import { heroFacets } from '../../api/heroFacets';
 export function stringToClock(time: string | number, pad = true) {
     if (typeof time === "string") {
         time = parseFloat(time);
@@ -20,15 +19,6 @@ export function stringToClock(time: string | number, pad = true) {
 }
 const ScoreboardPlayer = ({ player }: { player: Player }) => {
     const neutralItem = player.items.find(item => item.type === 'neutral');
-
-    const facetIndex = player.hero?.facetIndex ?? null;
-    const facets = heroFacets[(player.hero?.name || "")] ?? [];
-    const facet = facetIndex !== null ? facets[facetIndex] : null;
-
-    if(facet){
-        const _facetUrl = getAssetURL(facet.icon, "facets")
-    }
-    
     return <div className={`player_scoreboard`}>
         <div className="main_panel">
             <div className="player_name shadowed-text">

src/api/api.ts

@@ -19,7 +19,6 @@ export const getAssetURL = (
       | "items"
       | "abilities"
       | "runes"
-      | "facets"
   ) => {
     if (!asset) return "";
     if (assetType === "heroes_animated") {
@@ -40,9 +39,6 @@ export const getAssetURL = (
         ""
       )}.webp`;
     }
-    if(assetType === "facets"){
-      return `${apiUrl}static/dota2/${assetType}/${asset}.png`;
-    }
     return `${apiUrl}static/dota2/${assetType}/${asset}.webp`;
   };
   

src/fonts/stratum2.css

@@ -0,0 +1,6 @@
+
+@font-face {
+    font-family: 'Stratum2';
+    font-style: normal;
+    src: url('./Stratum2/Stratum2 Bold Regular.ttf') format('truetype');
+}

src/index.css

@@ -1,4 +1,5 @@
 @import "fonts/montserrat.css";
+@import "fonts/stratum2.css";
 html,
 body,
 #root {
@@ -8,7 +9,7 @@ body,
 
 body {
   margin: 0;
-  font-family: 'Rajdhani','Montserrat', 'Roboto', sans-serif;
+  font-family: 'Rajdhani','Stratum2', 'Montserrat', 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /*background-image: url('./HUD/image.png');/**/

yarn.lock

@@ -3926,10 +3926,9 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
-dotagsi@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/dotagsi/-/dotagsi-1.5.0.tgz"
-  integrity sha512-wbkmoCXhpyddgGA3swuTtRNVnLggktiiNQ9/yapWg2eNOyKLOQCvjesCu3bkwtL77AHjxyz9rKACxCoINEVivA==
+"dotagsi@github:Macronic/dota2gsi":
+  version "1.3.2"
+  resolved "git+ssh://git@github.com/Macronic/dota2gsi.git#df17e53279c67c54b02e583c1ba57eb185197d83"
 
 dotenv-expand@^5.1.0:
   version "5.1.0"