Updated setup to vite and moved to hooks instead of class

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -1,24 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-package-lock.json
-yarn.lock
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+build
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -17,20 +17,12 @@ Fullfledged example of the React HUD made for HUD Manager. It has:
 - Custom Radar
 
 ## Keybinds:
-### **Left Alt + S**
->Makes radar smaller by 20px;
 ### **Left Alt + B**
+>Makes radar smaller by 20px;
+### **Left Alt + V**
 >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
@@ -83,48 +75,57 @@ To create Signed HUD to prevent at least from modyfing compiled Javascript files
 
 
 ## `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 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 [ image, setImage ] = useState<string | null>(null);
+    const data = useConfig('display_settings');
+
+    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()}`;
+            setImage(imageUrl);
+        }
+    }, []);
+
+    if(!data || !data[`${side}_title`]) return null;
+    return (
+        <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}
+            </div>
+        </div>
+    );
+}
 ```
-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"})
+
+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.
+
+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 action input, you can just use `useAction` hook, like here in Trivia.tsx:
+```typescript
+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. 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 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);
+}, []);
 ```
-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`:

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>