Update README

Show default CT/T team logo if no custom logo is present

.env

@@ -1,2 +0,0 @@
-GENERATE_SOURCEMAP=false
-BROWSER=none

.env.development

@@ -1 +0,0 @@
-PUBLIC_URL=/dev/

.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,26 @@
-# 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?
+src/HUD/Radar2

OpenBrowserPlugin.js

@@ -1,49 +0,0 @@
-const open = require('open');
-
-module.exports = class OpenBrowser {
-  constructor(options) {
-    if (typeof options === 'string') {
-      this.options = Object.assign(
-        {
-          hasOpen: false
-        },
-        {
-          url: options
-        }
-      );
-    } else {
-      this.options = Object.assign(
-        {
-          port: 8080,
-          host: 'localhost',
-          protocol: 'http:',
-          hasOpen: false
-        },
-        options
-      );
-    }
-  }
-
-  apply(compiler) {
-    const options = this.options;
-    let url;
-    let hasOpen = options.hasOpen;
-    if (options.protocol && !options.protocol.endsWith(':')) options.protocol += ':';
-    if (options.url) url = options.url;
-    else url = `${options.protocol}//${options.host}:${options.port}`;
-    if (compiler.hooks) {
-      compiler.hooks.afterEmit.tap('openBrowser', () => {
-        if (!hasOpen) open(url);
-        hasOpen = true;
-        this.options.hasOpen = true;
-      });
-    } else {
-      compiler.plugin('after-emit', (c, cb) => {
-        if (!hasOpen) open(url);
-        hasOpen = true;
-        this.options.hasOpen = true;
-        return cb();
-      });
-    }
-  }
-};

README.md

@@ -1,133 +1,148 @@
+### **CS2 React HUD for [LHM.gg](https://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](https://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](https://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**
 
-Fullfledged example of the React HUD made for HUD Manager. It has:
+**Left Alt + B**  
+Makes radar smaller by 20px;
 
-- Custom actions
-- Keybinds
-- Player cam feed
-- Custom Radar
+**Left Alt + V**  
+Makes radar bigger by 20px;
 
-## 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 Ctrl + B**
->Make radar invisible
+**Left Alt + C**  
+Toggles camera feed
 
-## **Panel**
-## Trivia settings
+#### **Panel**
 
-|  Field|Description  |
-|--|--|
-|  Trivia title| `Text` |
-|  Trivia content| `Text` |
+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
 
-## Display 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` |
+| Field                       | Description  |
+| --------------------------- | ------------ |
+| 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 :)
 
-  
- ## 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.
+##### **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.
 
-## `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`]})
-	}
+##### **Signing**
+
+To create Signed CS2 HUD for [LHM.gg](https://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:
+
+```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>
+  );
+};
+```
+
+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 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`:
+
+```typescript
+useAction("triviaState", (state) => {
+  setShow(state === "show");
 });
 ```
-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`:
-```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.
 
-## 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`:
+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`:
+
 ```javascript
 componentDidMount() {
 	GSI.on("kill", kill  => {
@@ -135,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](https://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](https://LHM.gg) - that revolutionize the way experts and specialists from different industries work together on a daily basis.
+
+[Lexogrine](https://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.
+
+With over 5 years of experience, Lexogrine delivered hundreds of projects, supporting companies and enterprises from all over the world.

craco.config.js

@@ -1,45 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const homedir = require('os').homedir();
-const internalIp = require('internal-ip');
-const OpenBrowserPlugin = require('./OpenBrowserPlugin');
-
-const pathToConfig = path.join(process.env.APPDATA || path.join(homedir, '.config'), 'hud-manager', 'databases', 'config');
-let port = 1349;
-
-const getPort = () => {
-    if(!fs.existsSync(pathToConfig)){
-        console.warn('LHM Config file unavailable');
-        return port;
-    }
-
-    try {
-        const config = JSON.parse(fs.readFileSync(pathToConfig, 'utf-8'));
-
-        if(!config.port){
-            console.warn('LHM Port unavailable');
-        }
-
-        console.warn('LHM Port detected as', config.port);
-        return config.port;
-        
-    } catch {
-        console.warn('LHM Config file invalid');
-        return port;
-    }
-}
-
-port = getPort();
-
-module.exports = {
-    devServer: {
-        port: 3500,
-        open: false
-    },
-    webpack: {
-        configure: (webpackConfig) => {
-            webpackConfig.plugins.push(new OpenBrowserPlugin({ url: `http://${internalIp.v4.sync()}:${port}/development/`}))
-            return webpackConfig;
-        }
-    }
-};

index.html

@@ -0,0 +1,16 @@
+<!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>LHM CS2 Default HUD</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,60 +1,47 @@
 {
-  "name": "lexogrine_cs2_hud",
-  "version": "1.0.1",
-  "homepage": "./",
+  "name": "cs2-react-hud",
   "private": true,
-  "dependencies": {
-    "@craco/craco": "^5.7.0",
-    "@types/jest": "24.0.19",
-    "@types/node": "16.11.20",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "@types/simple-peer": "^9.11.3",
-    "buffer": "^6.0.3",
-    "csgogsi-socket": "^2.7.2",
-    "query-string": "^6.12.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "simple-peer": "^9.11.0",
-    "simple-websockets": "^1.1.0",
-    "typescript": "^4.5.4",
-    "uuid": "^8.3.2"
-  },
-  "license": "GPL-3.0",
+  "version": "1.0.6",
+  "type": "module",
   "scripts": {
     "zip": "npm-build-zip",
-    "start": "craco start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite --host",
+    "start": "vite --host",
+    "build": "tsc && vite build",
     "pack": "npm run build && npm run zip",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
     "sign": "npm run build && node sign.js && npm-build-zip --name=signed"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "csgogsi": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "simple-peer": "^9.11.1",
+    "simple-websockets": "^1.2.0",
+    "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.1"
   },
+  "license": "MIT",
   "devDependencies": {
-    "@types/history": "^4.7.5",
-    "@types/socket.io-client": "^1.4.32",
-    "@types/uuid": "^8.3.1",
-    "internal-ip": "^6.2.0",
-    "jsonwebtoken": "^8.5.1",
-    "npm-build-zip": "^1.0.2",
-    "open": "^8.0.2",
-    "sass": "^1.32.5",
-    "socket.io-client": "^2.4.0"
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/simple-peer": "^9.11.5",
+    "@types/uuid": "^9.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "events": "^3.3.0",
+    "npm-build-zip": "^1.0.4",
+    "process": "^0.11.10",
+    "sass": "^1.68.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-compatible-readable-stream": "^3.6.1",
+    "vite-plugin-svgr": "^4.1.0"
   }
 }

public/hud.json

@@ -1,13 +1,13 @@
 {
-    "name":"Lexogrine CS2 HUD",
-    "version":"1.0.0",
+    "name":"LHM CS2 Default HUD",
+    "version":"1.0.6",
     "author":"Lexogrine",
     "legacy": false,
     "radar": true,
     "killfeed": false,
     "game":"cs2",
     "boltobserv":{
-        "css":true,
-        "maps":true
+        "css":false,
+        "maps":false
     }
 }

public/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/keybinds.json

@@ -2,5 +2,13 @@
     {
         "bind":"Alt+C",
         "action":"toggleCams"
+    },
+    {
+        "bind":"Alt+V",
+        "action":"radarBigger"
+    },
+    {
+        "bind":"Alt+B",
+        "action":"radarSmaller"
     }
 ]

public/panel.json

@@ -63,6 +63,21 @@
                 "name":"right_image",
                 "label":"Right box's image logo"
             },
+            {
+                "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": "boxesState",

public/radar.css

@@ -1,48 +0,0 @@
-/*
- * Use this file to apply custom styles to the radar image
- */
-
-/* Any player dot */
-div.dot {}
-
-/* Players that are CT or T */
-div.dot.CT {}
-div.dot.T {}
-
-/* The player with the bomb */
-div.dot.bomb{}
-
-/* The player currently being observed */
-div.dot.active {}
-
-/* A dead player */
-div.dot.dead {}
-
-/* The number on a player dot */
-div.label {}
-
-/* The number on the dot being spectated */
-div.label.active {}
-
-/* The dropped or planted bomb on the map */
-#bomb {
-    height: 4vmin;
-    width: 4vmin;
-    background-repeat:no-repeat;
-}
-
-/* Smoke circles on the map */
-#smokes {
-    display: none;
-}
-#smokes > div {
-    display: none;
-}
-
-/* Inferno circles on the map */
-.inferno > div {}
-
-/* The advisory on screen */
-#advisory {
-    display: none !important;
-}

sign.js

@@ -1,7 +1,10 @@
-const path = require('path');
-const fs = require('fs');
-const crypto = require('crypto');
-const jwt = require('jsonwebtoken');
+import path from 'path';
+import fs from 'fs';
+import crypto from 'crypto';
+import jwt from 'jsonwebtoken';
+import { fileURLToPath } from 'url';
+
+const __esm_dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const sign = () => {
     const getAllFilesToSign = (hudDir) => {
@@ -17,7 +20,7 @@ const sign = () => {
         return files;
     }
     
-    const dir = path.join(__dirname, 'build');
+    const dir = path.join(__esm_dirname, 'build');
     
     const keyFile = path.join(dir, 'key');
     

src/API/HUD/camera.ts

@@ -1,7 +1,7 @@
 import { Instance, SignalData } from 'simple-peer';
-import api from '../../api/api';
-import { socket as Socket } from "../../App";
-const Peer = require('simple-peer');
+import api from '..';
+import { socket } from '../socket';
+import Peer from 'simple-peer';
 
 const wait = (ms: number) => new Promise(r => setTimeout(r, ms));
 
@@ -73,7 +73,6 @@ const closeConnection = (steamid: string) => {
 }
 
 const initiateConnection = async () => {
-    const socket = Socket as SocketIOClient.Socket;
     const camera = await api.camera.get();
     await wait(1000);
 
@@ -104,7 +103,7 @@ const initiateConnection = async () => {
 
         if (camera.uuid !== roomId) return;
 
-        const peerConnection: PeerInstance = new Peer({ initiator: false, trickle: false });
+        const peerConnection = new Peer({ initiator: false, trickle: false }) as PeerInstance;
 
         const mediaStreamPlayer: MediaStreamPlayer = { peerConnection, steamid };
 

src/API/HUD/index.ts

@@ -0,0 +1,88 @@
+import { CSGOGSI, Player, PlayerExtension } from 'csgogsi';
+import api, { isDev } from '..';
+
+export const hudIdentity = {
+	name: '',
+	isDev
+};
+
+export const GSI = new CSGOGSI();
+GSI.regulationMR = 12;
+
+GSI.on("data", data => {
+    loadPlayers(data.players);
+});
+
+const requestedSteamIDs: string[] = [];
+
+const loadPlayers = async (players: Player[]) => {
+    const leftOvers = players.filter(player => !requestedSteamIDs.includes(player.steamid));
+    const leftOverSteamids = leftOvers.map(player => player.steamid);
+    if(!leftOvers.length) return;
+
+    requestedSteamIDs.push(...leftOverSteamids);
+
+    const extensions = await api.players.get(leftOverSteamids);
+
+    const playersExtensions: PlayerExtension[] = extensions.map(player => (
+        {
+            id: player._id,
+            name: player.username,
+            realName: `${player.firstName} ${player.lastName}`,
+            steamid: player.steamid,
+            country: player.country,
+            avatar: player.avatar,
+            extra: player.extra,
+        })
+    )
+
+    GSI.players.push(...playersExtensions);
+
+    
+    leftOvers.forEach(player => {
+        loadAvatarURL(player);
+    });
+}
+
+
+interface AvatarLoader {
+    loader: Promise<string>,
+    url: string,
+}
+
+const avatars: { [key: string]: AvatarLoader } = {};
+
+const loadAvatarURL = (player: Player) => {
+    if(!player.steamid) return;
+    if(avatars[player.steamid]) return avatars[player.steamid].url;
+    avatars[player.steamid] = {
+        url: player.avatar || '',
+        loader: new Promise((resolve) => {
+            api.players.getAvatarURLs(player.steamid).then(result => {
+                const avatarUrl = result.custom || result.steam;
+                const existing = GSI.players.find(playerEx => playerEx.steamid === player.steamid);
+                const target = existing || {
+                    id: player.steamid,
+                    name: player.name,
+                    realName: player.realName,
+                    steamid: player.steamid,
+                    country: player.country,
+                    avatar: player.avatar,
+                    extra: player.extra
+                }
+                if(target) target.avatar = avatarUrl;
+
+                if(!existing){
+                    GSI.players.push(target);
+                }
+
+
+                avatars[player.steamid].url = result.custom || result.steam;
+                resolve(result.custom || result.custom);
+            }).catch(() => {
+                delete avatars[player.steamid];
+                resolve('');
+            });
+        })
+    }
+}

src/API/contexts/actions.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState, createContext, ReactNode, useContext } from "react";
+import ActionManager, { ActionHandler, ConfigManager } from "./managers";
+import { Events } from "csgogsi";
+import { GSI } from "../HUD";
+import type { AllActions, AllInputs, GetInputsFromSection, Sections } from "./settings";
+
+export const actions = new ActionManager();
+export const configs = new ConfigManager();
+
+type EmptyListener = () => void;
+
+type BaseEvents = keyof Events;
+type Callback<K> = K extends BaseEvents ? Events[K] | EmptyListener : EmptyListener;
+
+export function useAction<T extends keyof AllActions>(action: T, callback: ActionHandler<T extends keyof AllActions ? AllActions[T] : never>, deps?: React.DependencyList) {
+  useEffect(() => {
+
+    actions.on(action, callback);
+    return () => {
+        actions.off(action, callback);
+    };
+  }, deps ? [action, ...deps] : [action, callback]);
+  return null;
+}
+export function useOnConfigChange<K extends keyof Sections, T = any>(section: K, callback: ActionHandler<{ [L in keyof (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)]?: (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)[L] } | null>, deps?: React.DependencyList){
+
+    useEffect(() => {
+      const onDataChanged = (data: any) => {
+        callback(data?.[section] || null);
+      };
+
+      configs.onChange(onDataChanged);
+      onDataChanged(configs.data);
+
+      return () => {
+        configs.off(onDataChanged);
+      }
+    }, deps ? [section, ...deps] : [section, callback])
+
+    return null;
+}
+
+export function onGSI<T extends BaseEvents>(event: T, callback: Callback<T>, deps?: React.DependencyList){
+  useEffect(() => {
+    GSI.on(event, callback);
+
+    return () => {
+      GSI.off(event, callback);
+    }
+  }, deps ? [event, ...deps] : [event, callback])
+}
+
+const SettingsContext = createContext<AllInputs | null>({} as AllInputs);
+export const SettingsProvider = ({ children }: { children: ReactNode }) => {
+  const [ data, setData ] = useState<AllInputs | null>(configs.data as AllInputs || null);
+
+
+
+  useEffect(() => {
+    const onDataChanged = (data: any) => {
+      setData(data);
+    };
+
+    configs.onChange(onDataChanged);
+    onDataChanged(configs.data);
+
+    return () => {
+      configs.off(onDataChanged);
+    }
+  }, [])
+
+  return (
+    <SettingsContext.Provider
+      value={data}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export function useConfig<K extends keyof Sections>(section: K){
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error('generic Hook must be used within a Generic Provider');
+  }
+  return context?.[section];
+}

src/API/contexts/keybinds.ts

@@ -0,0 +1,14 @@
+export const keybindDefinition = [
+  {
+    "bind": "Alt+C",
+    "action": "toggleCams"
+  },
+  {
+    "bind": "Alt+V",
+    "action": "radarBigger"
+  },
+  {
+    "bind": "Alt+B",
+    "action": "radarSmaller"
+  }
+] as const;

src/API/contexts/managers.ts

@@ -0,0 +1,71 @@
+export type ActionHandler<T = any> = (data: T) => void;
+
+export default class ActionManager {
+    handlers: { [K in string]?: ActionHandler[] };
+
+    constructor(){
+        this.handlers = {}
+
+        /*this.on('data', _data => {
+        });*/
+    }
+    execute = <T = any>(eventName: string, argument?: T) => {
+        const handlers = this.handlers[eventName] || [];
+        for(const handler of handlers){
+            handler(argument);
+        }
+    }
+
+    on = <T = any>(eventName: string, handler: ActionHandler<T>) => {
+        if(!this.handlers[eventName]) this.handlers[eventName] = [];
+        this.handlers[eventName]!.push(handler);
+    }
+
+    off = (eventName: string, handler: ActionHandler) => {
+        if(!this.handlers[eventName]) this.handlers[eventName] = [];
+        this.handlers[eventName] = this.handlers[eventName]!.filter(h => h !== handler);
+    }
+}
+export class ConfigManager {
+    listeners: ActionHandler[];
+    data: { [K in string]?: any };
+
+    constructor(){
+        this.listeners = [];
+        this.data = {};
+    }
+    save(data: { [K in string]?: any }){
+        this.data = data;
+        this.execute();
+
+        /*const listeners = this.listeners.get(eventName);
+        if(!listeners) return false;
+        listeners.forEach(callback => {
+            if(argument) callback(argument);
+            else callback();
+        });
+        return true;*/
+    }
+
+    execute(){
+        const listeners = this.listeners;
+        if(!listeners || !listeners.length) return false;
+        listeners.forEach(listener => {
+            listener(this.data);
+        });
+        return true;
+    }
+
+    onChange = (listener: ActionHandler) => {
+        const listOfListeners = this.listeners || [];
+        listOfListeners.push(listener);
+        this.listeners = listOfListeners;
+
+        return true;
+    }
+
+    off = (listener: ActionHandler) => {
+        this.listeners = this.listeners.filter(l => l !== listener);
+    }
+
+}

src/API/contexts/panel.ts

@@ -0,0 +1,162 @@
+export const panelDefinition = [
+  {
+    "label": "Trivia",
+    "name": "trivia",
+    "inputs": [
+      {
+        "type": "text",
+        "name": "title",
+        "label": "Trivia title"
+      },
+      {
+        "type": "text",
+        "name": "content",
+        "label": "Trivia content"
+      },
+      {
+        "type": "action",
+        "name": "triviaState",
+        "values": [
+          {
+            "name": "show",
+            "label": "Show trivia"
+          },
+          {
+            "name": "hide",
+            "label": "Hide trivia"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Display settings",
+    "name": "display_settings",
+    "inputs": [
+      {
+        "type": "text",
+        "name": "left_title",
+        "label": "Left box's title"
+      },
+      {
+        "type": "text",
+        "name": "right_title",
+        "label": "Right box's title"
+      },
+      {
+        "type": "text",
+        "name": "left_subtitle",
+        "label": "Left box's subtitle"
+      },
+      {
+        "type": "text",
+        "name": "right_subtitle",
+        "label": "Right box's subtitle"
+      },
+      {
+        "type": "image",
+        "name": "left_image",
+        "label": "Left box's image logo"
+      },
+      {
+        "type": "image",
+        "name": "right_image",
+        "label": "Right box's image logo"
+      },
+      {
+        "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": "boxesState",
+        "values": [
+          {
+            "name": "show",
+            "label": "Show boxes"
+          },
+          {
+            "name": "hide",
+            "label": "Hide boxes"
+          }
+        ]
+      },
+      {
+        "type": "action",
+        "name": "toggleRadarView",
+        "values": [
+          {
+            "name": "toggler",
+            "label": "Toggle radar view"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Player & Match overview",
+    "name": "preview_settings",
+    "inputs": [
+      {
+        "type": "match",
+        "name": "match_preview",
+        "label": "Pick an upcoming match"
+      },
+      {
+        "type": "select",
+        "name": "select_preview",
+        "label": "Mood indicator",
+        "values": [
+          {
+            "name": "show",
+            "label": ":)"
+          },
+          {
+            "name": "hide",
+            "label": ":("
+          }
+        ]
+      },
+      {
+        "type": "player",
+        "name": "player_preview",
+        "label": "Pick a player to preview"
+      },
+      {
+        "type": "checkbox",
+        "name": "player_preview_toggle",
+        "label": "Show player preview"
+      },
+      {
+        "type": "checkbox",
+        "name": "match_preview_toggle",
+        "label": "Show upcoming match"
+      },
+      {
+        "type": "action",
+        "name": "showTournament",
+        "values": [
+          {
+            "name": "show",
+            "label": "Show tournament"
+          },
+          {
+            "name": "hide",
+            "label": "Hide tournament"
+          }
+        ]
+      }
+    ]
+  }
+] as const;

src/API/contexts/settings.ts

@@ -0,0 +1,51 @@
+import { Match, Player, Team } from "../types"
+import { keybindDefinition } from "./keybinds";
+import { panelDefinition } from "./panel";
+
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+  } & {};
+
+type Settings = typeof panelDefinition;
+
+type Keybinds = typeof keybindDefinition;
+
+
+type InputMapper = {
+    text: string;
+    player: {
+        type: "player",
+        id: string,
+        player: Player | null
+    };
+    match: {
+        type: "match",
+        id: string,
+        match: Match | null
+    };
+    team: {
+        type: "team",
+        id: string,
+        team: Team | null
+    };
+    checkbox: boolean;
+    action: never;
+    image: string;
+    images: string[];
+    select: string;
+}
+type NonNeverKeys<T extends { [K: string]: any }> = { [K in keyof T]: T[K] extends never ? never : K }[keyof T];
+
+
+type ValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K["name"]]: K extends { type: "action" } ? never : (K extends { type: "select" } ? K["values"][number]["name"] | "" : InputMapper[K["type"]]) }
+
+export type GetInputsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ValueMapper<T>>]: ValueMapper<T>[K]};
+export type Sections = { [K in Settings[number] as K["name"]]: K["inputs"]}
+
+export type AllInputs = { [K in keyof Sections]: GetInputsFromSection<Sections[K]> };
+
+type ActionValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K["name"]]: K extends { type: "action" } ? K["values"][number]["name"] : never }
+
+type GetActionsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ActionValueMapper<T>>]: ActionValueMapper<T>[K]};
+
+export type AllActions = Prettify<GetActionsFromSection<Settings[number]["inputs"]> & { [K in  Keybinds[number]["action"]]: never }>;

src/API/index.ts

@@ -1,14 +1,12 @@
-import * as I from './interfaces';
-import queryString from 'query-string';
+import * as I from './types';
 import { MapConfig } from '../HUD/Radar/LexoRadar/maps';
 
 
-const query = queryString.parseUrl(window.location.href).query;
-export const variant = query?.variant || "default";
+const query = new URLSearchParams(window.location.search);
+export const port = Number(query.get('port') || 1349);
+export const variant = query.get("variant") || "default";
 
-export const port = (query && Number(query.port)) || 1349;
-
-export const isDev = !query.isProd;
+export const isDev = !query.get("isProd");
 
 export const config = {apiAddress:isDev ? `http://localhost:${port}/` : '/'}
 export const apiUrl = config.apiAddress;
@@ -35,7 +33,22 @@ const api = {
         getCurrent: async (): Promise<I.Match> => apiV2(`match/current`)
     },
     camera: {
-        get: (): Promise<{ availablePlayers: ({steamid:string, label: string})[], uuid: string }> => apiV2('camera')
+        get: (): Promise<{ availablePlayers: ({steamid:string, label: string})[], uuid: string }> => apiV2('camera'),
+        toggleVmix: (status?: boolean) => new Promise<boolean>(r => {
+            const controller = new AbortController();
+            const signal = controller.signal;
+           // let finished = false;
+            const timeoutId = setTimeout(() => {
+                controller.abort();
+                r(false);
+            }, 1000)
+            fetch(`http://localhost:2715/visibility${status !== undefined ? `?status=${status}` : ''}`, { method: "POST", signal }).then(() => {
+                clearTimeout(timeoutId);
+                r(true);
+                //finished = true;
+            }).catch(() => { r(false); });
+
+        })
     },
     teams: {
         getOne: async (id: string): Promise<I.Team> => apiV2(`teams/${id}`),

src/API/socket.ts

@@ -0,0 +1,69 @@
+import { io } from "socket.io-client";
+import { isDev, port } from ".";
+import { GSI, hudIdentity } from "./HUD";
+import { CSGORaw } from "csgogsi";
+import { actions, configs } from "./contexts/actions";
+import { initiateConnection } from "./HUD/camera";
+
+export const socket = io(isDev ? `localhost:${port}` : '/');
+
+type RoundPlayerDamage = {
+	steamid: string;
+	damage: number;
+};
+type RoundDamage = {
+	round: number;
+	players: RoundPlayerDamage[];
+};
+
+socket.on("update", (data: any, damage: any) => {
+    if (damage) {
+        GSI.damage = damage;
+    }
+    GSI.digest(data);
+});
+
+const isInWindow = !!window.parent.ipcApi;
+
+if(isInWindow){
+	window.parent.ipcApi.receive('raw', (data: CSGORaw, damage?: RoundDamage[]) => {
+		if(damage){
+			GSI.damage = damage;
+		}
+		GSI.digest(data);
+	});
+}
+
+const href = window.location.href;
+
+socket.emit("started");
+
+if (isDev) {
+    hudIdentity.name = (Math.random() * 1000 + 1).toString(36).replace(/[^a-z]+/g, '').substr(0, 15);
+    hudIdentity.isDev = true;
+} else {
+    const segment = href.substr(href.indexOf('/huds/') + 6);
+    hudIdentity.name = segment.substr(0, segment.lastIndexOf('/'));
+}
+
+socket.on("readyToRegister", () => {
+    socket.emit("register", hudIdentity.name, isDev, "cs2", isInWindow ? "IPC" : "DEFAULT");
+    initiateConnection();
+});
+socket.on(`hud_config`, (data: any) => {
+    configs.save(data);
+});
+socket.on(`hud_action`, (data: any) => {
+    actions.execute(data.action, data.data);
+});
+socket.on('keybindAction', (action: string) => {
+    actions.execute(action);
+});
+
+socket.on("refreshHUD", () => {
+    window.top?.location.reload();
+});
+
+socket.on("update_mirv", (data: any) => {
+    GSI.digestMIRV(data);
+})

src/API/types.ts

@@ -26,37 +26,47 @@ export interface HUD {
     legacy: boolean,
     dir: string
 }
-
+ 
 export interface Config {
     port: number,
     steamApiKey: string,
     token: string,
 }*/
 export interface TournamentMatchup {
-	_id: string;
-	loser_to: string | null; // IDs of Matchups, not Matches
-	winner_to: string | null;
-	label: string;
-	matchId: string | null;
-	parents: TournamentMatchup[];
+  _id: string;
+  loser_to: string | null; // IDs of Matchups, not Matches
+  winner_to: string | null;
+  label: string;
+  matchId: string | null;
+  parents: TournamentMatchup[];
 }
 
 export interface DepthTournamentMatchup extends TournamentMatchup {
-	depth: number;
-	parents: DepthTournamentMatchup[];
+  depth: number;
+  parents: DepthTournamentMatchup[];
 }
 
+export type TournamentTypes = 'swiss' | 'single' | 'double';
+
+export type TournamentStage = {
+  type: TournamentTypes;
+  matchups: TournamentMatchup[];
+  teams: number;
+  phases: number;
+  participants: string[];
+};
 export interface Tournament {
-	_id: string;
-	name: string;
-	logo: string;
-	matchups: TournamentMatchup[];
-	autoCreate: boolean;
+  _id: string;
+  name: string;
+  logo: string;
+  groups: TournamentStage[];
+  playoffs: TournamentStage;
+  autoCreate: boolean;
 }
 export interface RoundData {
   round: number,
   players: {
-      [steamid: string]: PlayerRoundData
+    [steamid: string]: PlayerRoundData
   },
   winner: 'CT' | 'T' | null,
   win_type: 'bomb' | 'elimination' | 'defuse' | 'time',
@@ -128,24 +138,24 @@ export type Weapon =
 export type Pistol = "c75a" | "deagle" | "elite" | "fiveseven" | "glock" | "hkp2000" | "p250" | "revolver" | "taser" | "tec9" | "usp_silencer";
 
 export type Knife =
-| "knife"//
-| "knife_css"//--
-| "knife_butterfly"//
-| "knife_falchion"//
-| "knife_flip"//
-| "knife_outdoor" // Nomad Knife
-| "knife_gut"//
-| "knife_gypsy_jackknife"//
-| "knife_karambit"// 
-| "knife_bayonet" //
-| "knife_cord" //
-| "knife_m9_bayonet"//
-| "knife_push" // Shadow daggers
-| "knife_stiletto"//
-| "knife_survival_bowie"//
-| "knife_t"//
-| "knife_skeleton" //
-| "knife_tactical"//
-| "knife_ursus"//
-| "knife_widowmaker"//
-| "knife_canis";//
+  | "knife"//
+  | "knife_css"//--
+  | "knife_butterfly"//
+  | "knife_falchion"//
+  | "knife_flip"//
+  | "knife_outdoor" // Nomad Knife
+  | "knife_gut"//
+  | "knife_gypsy_jackknife"//
+  | "knife_karambit"// 
+  | "knife_bayonet" //
+  | "knife_cord" //
+  | "knife_m9_bayonet"//
+  | "knife_push" // Shadow daggers
+  | "knife_stiletto"//
+  | "knife_survival_bowie"//
+  | "knife_t"//
+  | "knife_skeleton" //
+  | "knife_tactical"//
+  | "knife_ursus"//
+  | "knife_widowmaker"//
+  | "knife_canis";//

src/App.css

@@ -0,0 +1,56 @@
+@import "fonts/montserrat.css";
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: "Rajdhani", 'Montserrat', 'Roboto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /*background-image: url('./assets/bg.png');/**/
+}
+
+@font-face {
+  font-family: 'Louis George Cafe';
+  src: local('Louis George Cafe'), url('./fonts/Louis George Cafe.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Rounded_Elegance';
+  src: local('Rounded_Elegance'), url('./fonts/Rounded_Elegance.ttf') format('truetype');
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.layout {
+  width: 100%;
+  height: 100%;
+  perspective: 500px;
+}
+
+:root {
+  --main-panel-color: rgba(12, 15, 18, 0.85);
+  --sub-panel-color: rgba(0, 0, 0, 0.83);
+  --white-dull: rgba(10, 5, 5, 0.25);
+  --white-full: rgba(250, 250, 250, 1);
+  --white-half: rgba(250, 250, 250, 0.5);
+  --color-gray: rgba(191, 191, 191, 1.0);
+  --color-moneys: #a7d32e;
+  --dev-purple: rgba(200, 0, 255, 1);
+  --color-t: #c19511;
+  --color-ct: #5788a8;
+  --color-new-t: #f0c941;
+  --color-new-ct: #5ab8f4;
+  --color-bomb: #f22222;
+  --color-defuse: #2222f2;
+}
+
+
+

src/App.tsx

@@ -1,215 +1,83 @@
-import React from 'react';
+import { useEffect, useState } from 'react'
+import './App.css'
+import { CSGO } from 'csgogsi'
+import { SettingsProvider, onGSI } from './API/contexts/actions'
 import Layout from './HUD/Layout/Layout';
-import api, { port, isDev } from './api/api';
-import { loadAvatarURL } from './api/avatars';
-import ActionManager, { ConfigManager } from './api/actionManager';
+import './API/socket';
+import { Match } from './API/types';
+import api from './API';
+import { GSI } from './API/HUD';
+import { socket } from './API/socket';
 
-import { CSGO, PlayerExtension, GSISocket, CSGORaw } from "csgogsi-socket";
-import { Match } from './api/interfaces';
-import { initiateConnection } from './HUD/Camera/mediaStream';
+function App() {
+  const [ game, setGame ] = useState<CSGO | null>(null);
+  const [ match, setMatch ] = useState<Match | null>(null);
 
-let isInWindow = !!window.parent.ipcApi;
+  useEffect(() => {
+    const onMatchPing = () => {
+      api.match.getCurrent().then(match => {
+          if (!match) {
+              GSI.teams.left = null;
+              GSI.teams.right = null;
+              setMatch(null);
+              return;
+          }
+          setMatch(match);
+  
+          let isReversed = false;
+          if (GSI.last) {
+              const mapName = GSI.last.map.name.substring(GSI.last.map.name.lastIndexOf('/') + 1);
+              const current = match.vetos.filter(veto => veto.mapName === mapName)[0];
+              if (current && current.reverseSide) {
+                  isReversed = true;
+              }
+          }
+          if (match.left.id) {
+              api.teams.getOne(match.left.id).then(left => {
+                  const gsiTeamData = { id: left._id, name: left.name, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra };
+  
+                  if (!isReversed) {
+                      GSI.teams.left = gsiTeamData;
+                  }
+                  else GSI.teams.right = gsiTeamData;
+              });
+          }
+          if (match.right.id) {
+              api.teams.getOne(match.right.id).then(right => {
+                  const gsiTeamData = { id: right._id, name: right.name, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
+  
+                  if (!isReversed) GSI.teams.right = gsiTeamData;
+                  else GSI.teams.left = gsiTeamData;
+              });
+          }
+  
+  
+  
+      }).catch(() => {
+        GSI.teams.left = null;
+        GSI.teams.right = null;
+        setMatch(null);
+      });
+    }
+    socket.on("match", onMatchPing);
+    onMatchPing();
 
-export const { GSI, socket } = GSISocket(isDev ? `localhost:${port}` : '/', "update");
+    return () => {
+      socket.off("match", onMatchPing);
+    }
+  }, [])
 
-GSI.regulationMR = 12;
+  onGSI('data', game => {
 
-if(isInWindow){
-	window.parent.ipcApi.receive('raw', (data: CSGORaw, damage?: RoundDamage[]) => {
-		if(damage){
-			GSI.damage = damage;
-		}
-		GSI.digest(data);
-	});
+    setGame(game);
+  }, []);
+
+  if (!game) return null;
+  return (
+    <SettingsProvider>
+      <Layout game={game} match={match} />
+    </SettingsProvider>
+  );
 }
 
-type RoundPlayerDamage = {
-	steamid: string;
-	damage: number;
-};
-type RoundDamage = {
-	round: number;
-	players: RoundPlayerDamage[];
-};
-
-socket.on('update', (_csgo: any, damage?: RoundDamage[]) => {
-	if(damage) GSI.damage = damage;
-});
-
-export const actions = new ActionManager();
-export const configs = new ConfigManager();
-
-export const hudIdentity = {
-	name: '',
-	isDev: false
-};
-
-interface DataLoader {
-	match: Promise<void> | null
-}
-
-const dataLoader: DataLoader = {
-	match: null
-}
-
-class App extends React.Component<any, { match: Match | null, game: CSGO | null, steamids: string[], checked: boolean }> {
-	constructor(props: any) {
-		super(props);
-		this.state = {
-			game: null,
-			steamids: [],
-			match: null,
-			checked: false
-		}
-	}
-
-	verifyPlayers = async (game: CSGO) => {
-		const steamids = game.players.map(player => player.steamid);
-		steamids.forEach(steamid => {
-			loadAvatarURL(steamid);
-		})
-
-		if (steamids.every(steamid => this.state.steamids.includes(steamid))) {
-			return;
-		}
-
-		const loaded = GSI.players.map(player => player.steamid);
-
-		const notCheckedPlayers = steamids.filter(steamid => !loaded.includes(steamid));
-
-		const extensioned = await api.players.get(notCheckedPlayers);
-
-		const lacking = notCheckedPlayers.filter(steamid => extensioned.map(player => player.steamid).includes(steamid));
-
-		const players: PlayerExtension[] = extensioned
-			.filter(player => lacking.includes(player.steamid))
-			.map(player => (
-				{
-					id: player._id,
-					name: player.username,
-					realName: `${player.firstName} ${player.lastName}`,
-					steamid: player.steamid,
-					country: player.country,
-					avatar: player.avatar,
-					extra: player.extra,
-				})
-			);
-
-		const gsiLoaded = GSI.players;
-
-		gsiLoaded.push(...players);
-		
-		GSI.players = gsiLoaded;
-		this.setState({ steamids });
-	}
-
-
-	componentDidMount() {
-		this.loadMatch();
-		const href = window.location.href;
-		socket.emit("started");
-		let isDev = false;
-		let name = '';
-		if (href.indexOf('/huds/') === -1) {
-			isDev = true;
-			name = (Math.random() * 1000 + 1).toString(36).replace(/[^a-z]+/g, '').substr(0, 15);
-			hudIdentity.isDev = true;
-		} else {
-			const segment = href.substr(href.indexOf('/huds/') + 6);
-			name = segment.substr(0, segment.lastIndexOf('/'));
-			hudIdentity.name = name;
-		}
-
-		socket.on("readyToRegister", () => {
-			socket.emit("register", name, isDev, "cs2", isInWindow ? "IPC" : "DEFAULT");
-			initiateConnection();
-		});
-		socket.on(`hud_config`, (data: any) => {
-			configs.save(data);
-		});
-		socket.on(`hud_action`, (data: any) => {
-			actions.execute(data.action, data.data);
-		});
-		socket.on('keybindAction', (action: string) => {
-			actions.execute(action);
-		});
-
-		socket.on("refreshHUD", () => {
-			window.top?.location.reload();
-		});
-
-		socket.on("update_mirv", (data: any) => {
-			GSI.digestMIRV(data);
-		})
-		GSI.on('data', game => {
-			if (!this.state.game || this.state.steamids.length) this.verifyPlayers(game);
-			
-			const wasLoaded = !!this.state.game;
-
-			this.setState({ game }, () => {
-				if(!wasLoaded) this.loadMatch(true);
-			});
-		});
-		socket.on('match', () => {
-
-			this.loadMatch(true);
-		});
-
-	}
-
-	loadMatch = async (force = false) => {
-		if (!dataLoader.match || force) {
-			dataLoader.match = new Promise((resolve) => {
-				api.match.getCurrent().then(match => {
-					if (!match) {
-						GSI.teams.left = null;
-						GSI.teams.right = null;
-						return;
-					}
-					this.setState({ match });
-
-					let isReversed = false;
-					if (GSI.last) {
-						const mapName = GSI.last.map.name.substring(GSI.last.map.name.lastIndexOf('/') + 1);
-						const current = match.vetos.filter(veto => veto.mapName === mapName)[0];
-						if (current && current.reverseSide) {
-							isReversed = true;
-						}
-						this.setState({ checked: true });
-					}
-					if (match.left.id) {
-						api.teams.getOne(match.left.id).then(left => {
-							const gsiTeamData = { id: left._id, name: left.name, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra };
-
-							if (!isReversed) {
-								GSI.teams.left = gsiTeamData;
-							}
-							else GSI.teams.right = gsiTeamData;
-						});
-					}
-					if (match.right.id) {
-						api.teams.getOne(match.right.id).then(right => {
-							const gsiTeamData = { id: right._id, name: right.name, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
-
-							if (!isReversed) GSI.teams.right = gsiTeamData;
-							else GSI.teams.left = gsiTeamData;
-						});
-					}
-
-
-
-				}).catch(() => {
-					//dataLoader.match = null;
-				});
-			});
-		}
-	}
-	render() {
-		if (!this.state.game) return null;
-		return (
-			<Layout game={this.state.game} match={this.state.match} />
-		);
-	}
-
-}
-export default App;
+export default App

src/HUD/Camera/Camera.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { mediaStreams } from "./mediaStream";
 import { v4 as uuidv4 } from 'uuid';
+import { mediaStreams } from "../../API/HUD/camera";
 type Props = {
     steamid: string,
     visible: boolean;

src/HUD/Camera/Container.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import PlayerCamera from "./Camera";
-import api from "../../api/api";
+import api from "../../API";
 import "./index.scss";
 
 

src/HUD/Indicators/Armor.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-import { Player } from 'csgogsi-socket';
-import {ArmorHelmet, ArmorFull} from './../../assets/Icons';
-export default class Armor extends React.Component<{ player: Player }> {
-    render() {
-        const { player } = this.props;
-        if(!player.state.health || !player.state.armor) return '';
-        return (
-            <div className={`armor_indicator`}>
-                {player.state.helmet ? <ArmorHelmet /> : <ArmorFull/>}
-            </div>
-        );
-    }
+import React from "react";
+import { ArmorFull, ArmorHelmet } from "./../../assets/Icons";
 
-}
+const Armor = ({ health, armor, helmet }: { health: number, armor: number, helmet: boolean }) => {
+  if (!health || !armor) return null;
+  return (
+    <div className={`armor_indicator`}>
+      {helmet ? <ArmorHelmet /> : <ArmorFull />}
+    </div>
+  );
+};
+
+export default React.memo(Armor);

src/HUD/Indicators/Bomb.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-import { Player } from 'csgogsi-socket';
-import {Bomb as BombIcon} from './../../assets/Icons';
-export default class Bomb extends React.Component<{ player: Player }> {
-    render() {
-        const { player } = this.props;
-        if(Object.values(player.weapons).every(weapon => weapon.type !== "C4")) return '';
-        return (
-            <div className={`armor_indicator`}>
-                <BombIcon />
-            </div>
-        );
-    }
-
-}
+import { Player } from "csgogsi";
+import { Bomb as BombIcon } from "./../../assets/Icons";
+const Bomb = ({ player }: { player: Player }) => {
+  if (Object.values(player.weapons).every((weapon) => weapon.type !== "C4")) {
+    return null;
+  }
+  return (
+    <div className={`armor_indicator`}>
+      <BombIcon />
+    </div>
+  );
+};
+export default Bomb;

src/HUD/Indicators/Defuse.tsx

@@ -1,15 +1,11 @@
-import React from 'react';
-import { Player } from 'csgogsi-socket';
+import { Player } from 'csgogsi';
 import {Defuse as DefuseIcon} from './../../assets/Icons';
-export default class Defuse extends React.Component<{ player: Player }> {
-    render() {
-        const { player } = this.props;
+const Defuse = ({ player }: { player: Player }) => {
         if(!player.state.health || !player.state.defusekit) return '';
         return (
             <div className={`defuse_indicator`}>
                 <DefuseIcon />
             </div>
         );
-    }
-
 }
+export default Defuse;

src/HUD/Killfeed/Kill.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import Weapon from './../Weapon/Weapon';
 import flash_assist from './../../assets/flash_assist.png';
-
-
 import { C4, Defuse, FlashedKill, Headshot, NoScope, SmokeKill, Suicide, Wallbang } from "./../../assets/Icons"
 import { ExtendedKillEvent, BombEvent } from "./Killfeed"
-export default class Kill extends React.Component<{ event: ExtendedKillEvent | BombEvent }> {
-	render() {
-		const { event } = this.props;
+
+
+ const Kill = ({event}: { event: ExtendedKillEvent | BombEvent }) => {
 		if (event.type !== "kill") {
 			return (
 				<div className={`single_kill`}>
@@ -50,6 +48,6 @@ export default class Kill extends React.Component<{ event: ExtendedKillEvent | B
 				</div>
 			</div>
 		);
-	}
 
 }
+export default Kill;

src/HUD/Killfeed/Killfeed.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { GSI } from './../../App';
-import { KillEvent, Player } from 'csgogsi-socket';
+import React, { useState } from 'react';
+
+import { KillEvent, Player } from 'csgogsi';
 import Kill from './Kill';
 import './killfeed.scss';
+import { onGSI } from '../../API/contexts/actions';
 
 
 export interface ExtendedKillEvent extends KillEvent {
@@ -14,63 +15,24 @@ export interface BombEvent {
     type: 'plant' | 'defuse'
 }
 
-export default class Killfeed extends React.Component<any, { events: (BombEvent | ExtendedKillEvent)[] }> {
-
-    constructor(props: any){
-        super(props);
-        this.state = {
-            events: []
-        }
-    }
-    addKill = (kill: KillEvent) => {
-        this.setState(state => {
-            state.events.push({...kill, type: 'kill'});
-            return state;
-        })
-    }
-
-    addBombEvent = (player: Player, type: 'plant' | 'defuse') => {
-        if(!player) return;
-        const event: BombEvent = {
-            player: player,
-            type: type
-        }
-        this.setState(state => {
-            state.events.push(event);
-            return state;
-        })
-    }
-    
-	async componentDidMount() {
-		GSI.on("kill", kill => {
-            this.addKill(kill);
-        });
-        GSI.on("data", data => {
-
-            if(data.round && data.round.phase === "freezetime"){
-                if(Number(data.phase_countdowns.phase_ends_in) < 10 && this.state.events.length > 0){
-                    this.setState({events:[]})
-                }
+const Killfeed = () => {
+    const [ events, setEvents ] = useState<(BombEvent | ExtendedKillEvent)[]>([]);
+    onGSI("kill", kill => {
+        setEvents(ev => [...ev, {...kill, type: 'kill'}]);
+    }, []);
+    onGSI("data", data => {
+        if(data.round && data.round.phase === "freezetime"){
+            if(Number(data.phase_countdowns.phase_ends_in) < 10 && events.length > 0){
+                setEvents([]);
             }
-        });
-
-        /*
-        GSI.on("bombPlant", player => {
-            this.addBombEvent(player, 'plant');
-        })
-        GSI.on("bombDefuse", player => {
-            this.addBombEvent(player, 'defuse');
-        })
-
-        */
-
-	}
-	render() {
-		return (
-			<div className="killfeed">
-                {this.state.events.map(event => <Kill event={event}/>)}
-			</div>
-		);
-	}
+        }
+    }, []);
+    return (
+        <div className="killfeed">
+            {events.map(event => <Kill event={event}/>)}
+        </div>
+    );
 
 }
+
+export default React.memo(Killfeed);

src/HUD/Layout/Layout.tsx

@@ -1,14 +1,11 @@
-import React from "react";
+import { useState } from "react";
 import TeamBox from "./../Players/TeamBox";
 import MatchBar from "../MatchBar/MatchBar";
 import SeriesBox from "../MatchBar/SeriesBox";
 import Observed from "./../Players/Observed";
-import { CSGO, Team } from "csgogsi-socket";
-import { Match } from "../../api/interfaces";
 import RadarMaps from "./../Radar/RadarMaps";
 import Trivia from "../Trivia/Trivia";
 import SideBox from '../SideBoxes/SideBox';
-import { GSI, actions } from "./../../App";
 import MoneyBox from '../SideBoxes/Money';
 import UtilityLevel from '../SideBoxes/UtilityLevel';
 import Killfeed from "../Killfeed/Killfeed";
@@ -17,119 +14,93 @@ import Overview from "../Overview/Overview";
 import Tournament from "../Tournament/Tournament";
 import Pause from "../PauseTimeout/Pause";
 import Timeout from "../PauseTimeout/Timeout";
-import PlayerCamera from "../Camera/Camera";
+import { CSGO } from "csgogsi";
+import { Match } from "../../API/types";
+import { useAction } from "../../API/contexts/actions";
+import { Scout } from "../Scout";
 
 interface Props {
   game: CSGO,
   match: Match | null
 }
-
+/*
 interface State {
   winner: Team | null,
   showWin: boolean,
   forceHide: boolean
-}
+}*/
 
-export default class Layout extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      winner: null,
-      showWin: false,
-      forceHide: false
+const Layout = ({game,match}: Props) => {
+  const [ forceHide, setForceHide ] = useState(false);
+
+  useAction('boxesState', (state) => {
+    console.log("UPDATE STATE UMC", state);
+    if (state === "show") {
+       setForceHide(false);
+    } else if (state === "hide") {
+      setForceHide(true);
     }
-  }
+  });
 
-  componentDidMount() {
-    GSI.on('roundEnd', score => {
-      this.setState({ winner: score.winner, showWin: true }, () => {
-        setTimeout(() => {
-          this.setState({ showWin: false })
-        }, 4000)
-      });
-    });
-    actions.on("boxesState", (state: string) => {
-      if (state === "show") {
-        this.setState({ forceHide: false });
-      } else if (state === "hide") {
-        this.setState({ forceHide: true });
-      }
-    });
-  }
+  const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
+  const right = game.map.team_ct.orientation === "left" ? game.map.team_t : game.map.team_ct;
 
-  getVeto = () => {
-    const { game, match } = this.props;
-    const { map } = game;
-    if (!match) return null;
-    const mapName = map.name.substring(map.name.lastIndexOf('/') + 1);
-    const veto = match.vetos.find(veto => veto.mapName === mapName);
-    if (!veto) return null;
-    return veto;
-  }
-
-  render() {
-    const { game, match } = this.props;
-    const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
-    const right = game.map.team_ct.orientation === "left" ? game.map.team_t : game.map.team_ct;
-
-    const leftPlayers = game.players.filter(player => player.team.side === left.side);
-    const rightPlayers = game.players.filter(player => player.team.side === right.side);
-    const isFreezetime = (game.round && game.round.phase === "freezetime") || game.phase_countdowns.phase === "freezetime";
-    const { forceHide } = this.state;
-
-    return (
-      <div className="layout">
-        <div className={`players_alive`}>
-          <div className="title_container">Players alive</div>
-          <div className="counter_container">
-            <div className={`team_counter ${left.side}`}>{leftPlayers.filter(player => player.state.health > 0).length}</div>
-            <div className={`vs_counter`}>VS</div>
-            <div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
-          </div>
-        </div>
-        <Killfeed />
-        <Overview match={match} map={game.map} players={game.players || []} />
-        <RadarMaps match={match} map={game.map} game={game} />
-        <MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} match={match} />
-        <Pause  phase={game.phase_countdowns}/>
-        <Timeout map={game.map} phase={game.phase_countdowns} />
-        <SeriesBox map={game.map} phase={game.phase_countdowns} match={match} />
-
-        <Tournament />
-
-        <Observed player={game.player} veto={this.getVeto()} round={game.map.round+1}/>
-
-        <TeamBox team={left} players={leftPlayers} side="left" current={game.player} />
-        <TeamBox team={right} players={rightPlayers} side="right" current={game.player} />
-
-        <Trivia />
-
-        <MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
-        <div className={"boxes left"}>
-          <UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />
-          <SideBox side="left" hide={forceHide} />
-          <MoneyBox
-            team={left.side}
-            side="left"
-            loss={Math.min(left.consecutive_round_losses * 500 + 1400, 3400)}
-            equipment={leftPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
-            money={leftPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
-            show={isFreezetime && !forceHide}
-          />
-        </div>
-        <div className={"boxes right"}>
-          <UtilityLevel side={right.side} players={game.players} show={isFreezetime && !forceHide} />
-          <SideBox side="right" hide={forceHide} />
-          <MoneyBox
-            team={right.side}
-            side="right"
-            loss={Math.min(right.consecutive_round_losses * 500 + 1400, 3400)}
-            equipment={rightPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
-            money={rightPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
-            show={isFreezetime && !forceHide}
-          />
+  const leftPlayers = game.players.filter(player => player.team.side === left.side);
+  const rightPlayers = game.players.filter(player => player.team.side === right.side);
+  const isFreezetime = (game.round && game.round.phase === "freezetime") || game.phase_countdowns.phase === "freezetime";
+  return (
+    <div className="layout">
+      <div className={`players_alive`}>
+        <div className="title_container">Players alive</div>
+        <div className="counter_container">
+          <div className={`team_counter ${left.side}`}>{leftPlayers.filter(player => player.state.health > 0).length}</div>
+          <div className={`vs_counter`}>VS</div>
+          <div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
         </div>
       </div>
-    );
-  }
+      <Killfeed />
+      <Overview match={match} map={game.map} players={game.players || []} />
+      <RadarMaps match={match} map={game.map} game={game} />
+      <MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} match={match} />
+      <Pause  phase={game.phase_countdowns}/>
+      <Timeout map={game.map} phase={game.phase_countdowns} />
+      <SeriesBox map={game.map} match={match} />
+
+      <Tournament />
+
+      <Observed player={game.player} />
+
+      <TeamBox team={left} players={leftPlayers} side="left" current={game.player} />
+      <TeamBox team={right} players={rightPlayers} side="right" current={game.player} />
+
+      <Trivia />
+      <Scout left={left.side} right={right.side} />
+      <MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
+      <div className={"boxes left"}>
+        <UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />
+        <SideBox side="left" hide={forceHide} />
+        <MoneyBox
+          team={left.side}
+          side="left"
+          loss={Math.min(left.consecutive_round_losses * 500 + 1400, 3400)}
+          equipment={leftPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
+          money={leftPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
+          show={isFreezetime && !forceHide}
+        />
+      </div>
+      <div className={"boxes right"}>
+        <UtilityLevel side={right.side} players={game.players} show={isFreezetime && !forceHide} />
+        <SideBox side="right" hide={forceHide} />
+        <MoneyBox
+          team={right.side}
+          side="right"
+          loss={Math.min(right.consecutive_round_losses * 500 + 1400, 3400)}
+          equipment={rightPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
+          money={rightPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
+          show={isFreezetime && !forceHide}
+        />
+      </div>
+    </div>
+  );
 }
+export default Layout;

src/HUD/MapSeries/MapSeries.tsx

@@ -1,62 +1,66 @@
-import React from "react";
-import * as I from "csgogsi-socket";
-import { Match, Veto } from '../../api/interfaces';
+import * as I from "csgogsi";
 import TeamLogo from "../MatchBar/TeamLogo";
 import "./mapseries.scss";
+import { Match, Veto } from "../../API/types";
 
 interface IProps {
-    match: Match | null;
-    teams: I.Team[];
-    isFreezetime: boolean;
-    map: I.Map
+  match: Match | null;
+  teams: I.Team[];
+  isFreezetime: boolean;
+  map: I.Map;
 }
 
 interface IVetoProps {
-    veto: Veto;
-    teams: I.Team[];
-    active: boolean;
+  veto: Veto;
+  teams: I.Team[];
+  active: boolean;
 }
 
-class VetoEntry extends React.Component<IVetoProps> {
-    render(){
-        const { veto, teams, active } = this.props;
-        return <div className={`veto_container ${active ? 'active' : ''}`}>
-            <div className="veto_map_name">
-                {veto.mapName}
-            </div>
-            <div className="veto_picker">
-                <TeamLogo team={teams.filter(team => team.id === veto.teamId)[0]} />
-            </div>
-            <div className="veto_winner">
-                <TeamLogo team={teams.filter(team => team.id === veto.winner)[0]} />
-            </div>
-            <div className="veto_score">
-                {Object.values((veto.score || ['-','-'])).sort().join(":")}
-            </div>
-            <div className='active_container'>
-                <div className='active'>Currently playing</div>
-            </div>
-        </div>
-    }
-}
+const VetoEntry = ({ veto, teams, active }: IVetoProps) => {
+  return (
+    <div className={`veto_container ${active ? "active" : ""}`}>
+      <div className="veto_map_name">
+        {veto.mapName}
+      </div>
+      <div className="veto_picker">
+        <TeamLogo team={teams.filter((team) => team.id === veto.teamId)[0]} />
+      </div>
+      <div className="veto_winner">
+        <TeamLogo team={teams.filter((team) => team.id === veto.winner)[0]} />
+      </div>
+      <div className="veto_score">
+        {Object.values(veto.score || ["-", "-"]).sort().join(":")}
+      </div>
+      <div className="active_container">
+        <div className="active">Currently playing</div>
+      </div>
+    </div>
+  );
+};
 
-export default class MapSeries extends React.Component<IProps> {
-
-    render() {
-        const { match, teams, isFreezetime, map } = this.props;
-        if (!match || !match.vetos.length) return null;
+const MapSeries = ({ match, teams, isFreezetime, map }: IProps) => {
+  if (!match || !match.vetos.length) return null;
+  return (
+    <div className={`map_series_container ${isFreezetime ? "show" : "hide"}`}>
+      <div className="title_bar">
+        <div className="picked">Picked</div>
+        <div className="winner">Winner</div>
+        <div className="score">Score</div>
+      </div>
+      {match.vetos.filter((veto) =>
+        veto.type !== "ban"
+      ).map((veto) => {
+        if (!veto.mapName) return null;
         return (
-            <div className={`map_series_container ${isFreezetime ? 'show': 'hide'}`}>
-                <div className="title_bar">
-                    <div className="picked">Picked</div>
-                    <div className="winner">Winner</div>
-                    <div className="score">Score</div>
-                </div>
-                {match.vetos.filter(veto => veto.type !== "ban").map(veto => {
-                    if(!veto.mapName) return null;
-                    return <VetoEntry key={`${match.id}${veto.mapName}${veto.teamId}${veto.side}`} veto={veto} teams={teams} active={map.name.includes(veto.mapName)}/>
-                })}
-            </div>
+          <VetoEntry
+            key={`${match.id}${veto.mapName}${veto.teamId}${veto.side}`}
+            veto={veto}
+            teams={teams}
+            active={map.name.includes(veto.mapName)}
+          />
         );
-    }
-}
+      })}
+    </div>
+  );
+};
+export default MapSeries;

src/HUD/MatchBar/MatchBar.tsx

@@ -1,11 +1,10 @@
-import React from "react";
-import * as I from "csgogsi-socket";
+import * as I from "csgogsi";
 import "./matchbar.scss";
 import TeamScore from "./TeamScore";
 import Bomb from "./../Timers/BombTimer";
-import Countdown from "./../Timers/Countdown";
-import { GSI } from "../../App";
-import { Match } from "../../api/interfaces";
+import { useBombTimer } from "./../Timers/Countdown";
+import { Match } from './../../API/types';
+
 
 function stringToClock(time: string | number, pad = true) {
   if (typeof time === "string") {
@@ -23,181 +22,54 @@ function stringToClock(time: string | number, pad = true) {
 interface IProps {
   match: Match | null;
   map: I.Map;
-  phase: I.PhaseRaw,
+  phase: I.CSGO["phase_countdowns"],
   bomb: I.Bomb | null,
 }
 
 export interface Timer {
-  width: number;
+  time: number;
   active: boolean;
-  countdown: number;
   side: "left"|"right";
   type: "defusing" | "planting";
   player: I.Player | null;
 }
-
-interface IState {
-  defusing: Timer,
-  planting: Timer,
-  winState: {
-    side: "left"|"right",
-    show: boolean
+const getRoundLabel = (mapRound: number) => {
+  const round = mapRound + 1;
+  if (round <= 24) {
+    return `Round ${round}/24`;
   }
+  const additionalRounds = round - 24;
+  const OT = Math.ceil(additionalRounds/6);
+  return `OT ${OT} (${additionalRounds - (OT - 1)*6}/6)`;
 }
 
-export default class TeamBox extends React.Component<IProps, IState> {
-  constructor(props: IProps){
-    super(props);
-    this.state = {
-      defusing: {
-        width: 0,
-        active: false,
-        countdown: 10,
-        side: "left",
-        type: "defusing",
-        player: null
-      },
-      planting: {
-        width: 0,
-        active: false,
-        countdown: 10, // Fake
-        side: "right",
-        type: "planting",
-        player: null
-      },
-      winState: {
-        side: 'left',
-        show: false
-      }
-    }
-  }
-  plantStop = () => this.setState(state => {
-    state.planting.active = false;
-    return state;
-  });
-
-  setWidth = (type: 'defusing' | 'planting', width: number) => {
-    this.setState(state => {
-      state[type].width = width;
-      return state;
-    })
-  }
-
-  initPlantTimer = () => {
-    const bomb = new Countdown(time => {
-      let width = time * 100;
-      this.setWidth("planting", width/3);
-    });
-    GSI.on("bombPlantStart", player => {
-      if(!player || !player.team) return;
-      this.setState(state => {
-        state.planting.active = true;
-        state.planting.side = player.team.orientation;
-        state.planting.player = player;
-      })
-    })
-    GSI.on("data", data => {
-      if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "planting") return this.plantStop();
-      this.setState(state => {
-        state.planting.active = true;
-      })
-      return bomb.go(data.bomb.countdown);
-    });
-  }
-
-  defuseStop = () => this.setState(state => {
-    state.defusing.active = false;
-    state.defusing.countdown = 10;
-    return state;
-  });
-
-  initDefuseTimer = () => {
-    const bomb = new Countdown(time => {
-      let width = time > this.state.defusing.countdown ? this.state.defusing.countdown*100 : time * 100;
-      this.setWidth("defusing", width/this.state.defusing.countdown);
-    });
-    GSI.on("defuseStart", player => {
-      if(!player || !player.team) return;
-      this.setState(state => {
-        state.defusing.active = true;
-        state.defusing.countdown = !Boolean(player.state.defusekit) ? 10 : 5;
-        state.defusing.side = player.team.orientation;
-        state.defusing.player = player;
-        return state;
-      })
-    })
-    GSI.on("data", data => {
-      if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "defusing") return this.defuseStop();
-      this.setState(state => {
-        state.defusing.active = true;
-        return state;
-      })
-      return bomb.go(data.bomb.countdown);
-    });
-  }
-
-  resetWin = () => {
-    setTimeout(() => {
-      this.setState(state => {
-        state.winState.show = false;
-        return state;
-      })
-    }, 6000);
-  }
-
-  componentDidMount(){
-    this.initDefuseTimer();
-    this.initPlantTimer();
-    GSI.on("roundEnd", score => {
-      this.setState(state => {
-        state.winState.show = true;
-        state.winState.side = score.winner.orientation;
-        return state;
-      }, this.resetWin);
-    });
-  }
-  getRoundLabel = () => {
-    const { map } = this.props;
-    const round = map.round + 1;
-    if (round <= 24) {
-      return `Round ${round}/24`;
-    }
-    const additionalRounds = round - 24;
-    const OT = Math.ceil(additionalRounds/6);
-    return `OT ${OT} (${additionalRounds - (OT - 1)*6}/6)`;
-  }
-  render() {
-    const { defusing, planting, winState } = this.state;
-    const { bomb, match, map, phase } = this.props;
+const Matchbar = (props: IProps) => {
+    const { bomb, match, map, phase } = props;
     const time = stringToClock(phase.phase_ends_in);
     const left = map.team_ct.orientation === "left" ? map.team_ct : map.team_t;
     const right = map.team_ct.orientation === "left" ? map.team_t : map.team_ct;
     const isPlanted = bomb && (bomb.state === "defusing" || bomb.state === "planted");
     const bo = (match && Number(match.matchType.substr(-1))) || 0;
-    let leftTimer: Timer | null = null, rightTimer: Timer | null = null;
-    if(defusing.active || planting.active){
-      if(defusing.active){
-        if(defusing.side === "left") leftTimer = defusing;
-        else rightTimer = defusing;
-      } else {
-        if(planting.side === "left") leftTimer = planting;
-        else rightTimer = planting;
-      }
-    }
+
+    const bombData = useBombTimer();
+    const plantTimer: Timer | null = bombData.state === "planting" ? { time:bombData.plantTime, active: true, side: bombData.player?.team.orientation || "right", player: bombData.player, type: "planting"} : null;
+    const defuseTimer: Timer | null = bombData.state === "defusing" ? { time:bombData.defuseTime, active: true, side: bombData.player?.team.orientation || "left", player: bombData.player, type: "defusing"} : null;
+
     return (
       <>
         <div id={`matchbar`}>
-          <TeamScore team={left} orientation={"left"} timer={leftTimer} showWin={winState.show && winState.side === "left"} />
+          <TeamScore team={left} orientation={"left"} timer={left.side === "CT" ? defuseTimer : plantTimer}/>
           <div className={`score left ${left.side}`}>{left.score}</div>
           <div id="timer" className={bo === 0 ? 'no-bo' : ''}>
             <div id={`round_timer_text`} className={isPlanted ? "hide":""}>{time}</div>
-            <div id="round_now" className={isPlanted ? "hide":""}>{this.getRoundLabel()}</div>
+            <div id="round_now" className={isPlanted ? "hide":""}>{getRoundLabel(map.round)}</div>
             <Bomb />
           </div>
           <div className={`score right ${right.side}`}>{right.score}</div>
-          <TeamScore team={right} orientation={"right"} timer={rightTimer} showWin={winState.show && winState.side === "right"} />
+          <TeamScore team={right} orientation={"right"} timer={right.side === "CT" ? defuseTimer : plantTimer} />
         </div>
       </>
     );
-  }
 }
+
+export default Matchbar;

src/HUD/MatchBar/SeriesBox.tsx

@@ -1,16 +1,12 @@
-import React from "react";
-import * as I from "csgogsi-socket";
-import { Match } from "../../api/interfaces";
+import * as I from "csgogsi";
+import { Match } from "../../API/types";
 
 interface Props {
   map: I.Map;
-  phase: I.PhaseRaw;
   match: Match | null;
 }
 
-export default class SeriesBox extends React.Component<Props> {
-  render() {
-    const { match, map } = this.props;
+const SeriesBox = ({ map, match }: Props) => {
     const amountOfMaps = (match && Math.floor(Number(match.matchType.substr(-1)) / 2) + 1) || 0;
     const bo = (match && Number(match.matchType.substr(-1))) || 0;
     const left = map.team_ct.orientation === "left" ? map.team_ct : map.team_t;
@@ -40,5 +36,6 @@ export default class SeriesBox extends React.Component<Props> {
         </div>
       </div>
     );
-  }
 }
+
+export default SeriesBox;

src/HUD/MatchBar/TeamLogo.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-import { Team } from 'csgogsi-socket';
-import * as I from '../../api/interfaces';
-import { apiUrl } from './../../api/api';
+import { Team } from 'csgogsi';
+import * as I from '../../API/types';
+import { apiUrl } from './../../API';
+import { LogoCT, LogoT } from './../../assets/Icons';
 
-export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> {
-  render(){
-    const { team } = this.props;
+const TeamLogo = ({team, height, width }: { team?: Team | I.Team | null, height?: number, width?: number}) => {
     if(!team) return null;
     let id = '';
     const { logo } = team;
@@ -16,9 +14,10 @@ export default class TeamLogo extends React.Component<{ team?: Team | I.Team | n
     }
     return (
       <div className={`logo`}>
-          { logo && id ? <img src={`${apiUrl}api/teams/logo/${id}`} width={this.props.width} height={this.props.height} alt={'Team logo'} /> : ''}
+          <img src={logo && id ? `${apiUrl}api/teams/logo/${id}` : ('side' in team && team.side === "CT" ? LogoCT : LogoT)} width={width} height={height} alt={'Team logo'} />
       </div>
     );
-  }
 
 }
+
+export default TeamLogo;

src/HUD/MatchBar/TeamScore.tsx

@@ -1,30 +1,40 @@
-import React from "react";
-import * as I from "csgogsi-socket";
-import WinIndicator from "./WinIndicator";
+import * as I from "csgogsi";
 import { Timer } from "./MatchBar";
 import TeamLogo from './TeamLogo';
 import PlantDefuse from "../Timers/PlantDefuse"
+import { onGSI } from "../../API/contexts/actions";
+import WinAnnouncement from "./WinIndicator";
+import { useState } from "react";
 
 interface IProps {
-  team: I.Team;
   orientation: "left" | "right";
   timer: Timer | null;
-  showWin: boolean;
+  team: I.Team;
 }
 
-export default class TeamScore extends React.Component<IProps> {
-  render() {
-    const { orientation, timer, team, showWin } = this.props;
+const TeamScore = ({orientation, timer, team }: IProps) => {
+    const [ show, setShow ] = useState(false);
+
+    onGSI("roundEnd", result => {
+      if(result.winner.orientation !== orientation) return;
+      setShow(true);
+
+      setTimeout(() => {
+        setShow(false);
+      }, 5000);
+    }, [orientation]);
+
     return (
       <>
-        <div className={`team ${orientation} ${team.side}`}>
-          <div className="team-name">{team.name}</div>
+        <div className={`team ${orientation} ${team.side || ''}`}>
+          <div className="team-name">{team?.name || null}</div>
           <TeamLogo team={team} />
           <div className="round-thingy"><div className="inner"></div></div>
         </div>
         <PlantDefuse timer={timer} side={orientation} />
-        <WinIndicator team={team} show={showWin}/>
+        <WinAnnouncement team={team} show={show} />
       </>
     );
-  }
 }
+
+export default TeamScore;

src/HUD/MatchBar/WinIndicator.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import { Team } from 'csgogsi-socket';
+import { Team } from 'csgogsi';
 
-export default class WinAnnouncement extends React.Component<{ team: Team | null, show: boolean }> {
-    render() {
-        const { team, show } = this.props;
+const WinAnnouncement = ({team, show }: { team: Team | null, show: boolean }) => {
         if(!team) return null;
         return <div className={`win_text ${show ? 'show' : ''} ${team.orientation} ${team.side}`}>
                 WINS THE ROUND!
             </div>   
-    }
 }
+
+
+export default WinAnnouncement;

src/HUD/MatchOverview/MatchOverview.tsx

@@ -1,41 +1,39 @@
-import React from 'react';
-import * as I from '../../api/interfaces';
-import TeamLogo from '../MatchBar/TeamLogo';
+import * as I from "../../API/types";
+import "./index.scss";
+import TeamLogo from "../MatchBar/TeamLogo";
 
 interface IProps {
-    match: I.Match,
-    show: boolean,
-    teams: I.Team[],
-    veto: I.Veto | null
+  match: I.Match;
+  show: boolean;
+  teams: I.Team[];
+  veto: I.Veto | null;
 }
 
-export default class MatchOverview extends React.Component<IProps> {
-	render() {
-        const { match, teams, show } = this.props;
-        const left = teams.find(team => team._id === match.left.id);
-        const right = teams.find(team => team._id === match.right.id);
-        if(!match || !left || !right) return null;
-		return (
-            <div className={`match-overview ${show ? 'show':''}`}>
-                <div className="match-overview-title">
-                    Upcoming match
-                </div>
-                <div className="match-overview-teams">
-                    <div className="match-overview-team">
-                        <div className="match-overview-team-logo">
-                            <TeamLogo team={left} height={40} />
-                        </div>
-                        <div className="match-overview-team-name">{left.name}</div>
-                    </div>
-                    <div className="match-overview-vs">vs</div>
-                    <div className="match-overview-team">
-                        <div className="match-overview-team-logo">
-                            <TeamLogo team={right} height={40} />
-                        </div>
-                        <div className="match-overview-team-name">{right.name}</div>
-                    </div>
-                </div>
-            </div>
-        );
-	}
-}
+const MatchOverview = ({ match, teams, show }: IProps) => {
+  const left = teams.find((team) => team._id === match.left.id);
+  const right = teams.find((team) => team._id === match.right.id);
+  if (!match || !left || !right) return null;
+  return (
+    <div className={`match-overview ${show ? "show" : ""}`}>
+      <div className="match-overview-title">
+        Upcoming match
+      </div>
+      <div className="match-overview-teams">
+        <div className="match-overview-team">
+          <div className="match-overview-team-logo">
+            <TeamLogo team={left} height={40} />
+          </div>
+          <div className="match-overview-team-name">{(left.shortName || left.name).substring(0, 4)}</div>
+        </div>
+        <div className="match-overview-vs">vs</div>
+        <div className="match-overview-team">
+          <div className="match-overview-team-logo">
+            <TeamLogo team={right} height={40} />
+          </div>
+          <div className="match-overview-team-name">{(right.shortName || right.name).substring(0, 4)}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MatchOverview;

src/HUD/MatchOverview/index.scss

@@ -39,4 +39,4 @@
 	flex: unset;
 	background-color: rgba(0,0,0,0.6);
 	font-size: 30px;
-}
+}

src/HUD/Overview/Overview.tsx

@@ -1,27 +1,10 @@
-import React from 'react';
-import { actions, configs } from '../../App';
-import * as I from '../../api/interfaces';
+import { useState } from 'react';
 import PlayerOverview from '../PlayerOverview/PlayerOverview';
 import MatchOverview from '../MatchOverview/MatchOverview';
-import TeamOverview from '../TeamOverview/TeamOverview';
-import { Map, Player } from 'csgogsi-socket';
-import api from '../../api/api';
-
-interface IState {
-    player: {
-        data: I.Player | null,
-        show: boolean
-    },
-    match: {
-        data: I.Match | null,
-        show: boolean,
-        teams: I.Team[],
-    },
-    team: {
-        data: I.Team | null,
-        show: boolean
-    }
-}
+import { Map, Player } from 'csgogsi';
+import * as I from './../../API/types';
+import api from './../../API';
+import { useConfig, useOnConfigChange } from '../../API/contexts/actions';
 
 interface IProps {
     match: I.Match | null,
@@ -29,97 +12,30 @@ interface IProps {
     players: Player[]
 }
 
-export default class Overview extends React.Component<IProps, IState> {
-    constructor(props: IProps){
-        super(props);
-        this.state = {
-            player: {
-                data: null,
-                show: false
-            },
-            match: {
-                data: null,
-                show: false,
-                teams: []
-            },
-            team: {
-                data: null,
-                show: false,
-            }
-        }
-    }
-    loadTeams = async () => {
-        const { match } = this.state;
-        if(!match.data || !match.data.left.id || !match.data.right.id) return;
-        const teams = await Promise.all([api.teams.getOne(match.data.left.id), api.teams.getOne(match.data.right.id)]);
+const Overview =  ({ match, map, players }: IProps) => {
+    const [ teams, setTeams ] = useState<I.Team[]>([]);
+    const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
+
+    const previewData = useConfig("preview_settings");
+
+    useOnConfigChange('preview_settings', async data => {
+        console.log(data);
+        if(!data?.match_preview?.match?.left.id || !data?.match_preview?.match?.right.id) return;
+
+        const teams = await Promise.all([api.teams.getOne(data?.match_preview?.match?.left.id), api.teams.getOne(data?.match_preview?.match?.right.id)]);
         if(!teams[0] || !teams[1]) return;
-        this.setState(state => {
-            state.match.teams = teams;
-            return state;
-        });
-    }
-    componentDidMount() {
-        configs.onChange((data: any) => {
-            if(!data || !data.preview_settings) return;
-            this.setState({
-                player: {
-                    data: (data.preview_settings.player_preview && data.preview_settings.player_preview.player) || null,
-                    show: Boolean(data.preview_settings.player_preview_toggle)
-                },
-                team: {
-                    data: (data.preview_settings.team_preview && data.preview_settings.team_preview.team) || null,
-                    show: Boolean(data.preview_settings.team_preview_toggle)
-                },
-                match: {
-                    data: (data.preview_settings.match_preview && data.preview_settings.match_preview.match) || null,
-                    show: Boolean(data.preview_settings.match_preview_toggle),
-                    teams: this.state.match.teams
-                }
-            }, this.loadTeams);
-        });
-        actions.on("toggleUpcomingMatch", () => {
-            this.setState(state => {
-                state.match.show = !state.match.show;
-                return state;
-            })
-        })
-        actions.on("togglePlayerPreview", () => {
-            this.setState(state => {
-                state.player.show = !state.player.show;
-                return state;
-            })
-        })
-    }
-    getVeto = () => {
-        const { map, match } = this.props;
-        if(!match) return null;
-        const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
-        const veto = match.vetos.find(veto => veto.mapName === mapName);
-        if(!veto) return null;
-        return veto;
-    }
-    renderPlayer = () => {
-        const { player } = this.state;
-        if(!player.data) return null;
-        return <PlayerOverview round={this.props.map.round + 1} player={player.data} players={this.props.players} show={player.show} veto={this.getVeto()} />
-    }
-    renderMatch = () => {
-        const { match } = this.state;
-        if(!match.data || !match.teams[0] || !match.teams[1]) return null;
-        return <MatchOverview match={match.data} show={match.show} veto={this.getVeto()} teams={match.teams}/>
-    }
-    renderTeam = () => {
-        const { team } = this.state;
-        if(!team.data) return null;
-        return <TeamOverview team={team.data} show={team.show} veto={this.getVeto()} />
-    }
-	render() {
-		return (
-            <>
-                {this.renderPlayer()}
-                {this.renderMatch()}
-                {this.renderTeam()}
-            </>
-        );
-	}
+
+        setTeams(teams);
+    }, []);
+
+    const playerData = previewData?.player_preview?.player;
+    const matchData = previewData?.match_preview?.match;
+
+    const veto = match?.vetos.find(veto => veto.mapName === mapName) || null;
+    return (<>
+        { playerData ? <PlayerOverview round={map.round + 1} player={playerData} players={players} show={!!previewData.player_preview_toggle} veto={veto} /> : null}
+        { matchData && teams[0] && teams[1] ? <MatchOverview match={matchData} veto={veto} teams={teams} show={!!previewData.match_preview_toggle} /> : null }
+    </>)
 }
+
+export default Overview;

src/HUD/PauseTimeout/Pause.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import { PhaseRaw } from "csgogsi-socket";
+import { CSGO } from "csgogsi";
 
 interface IProps {
-    phase: PhaseRaw | null
+  phase: CSGO["phase_countdowns"] | null;
 }
 
-export default class Pause extends React.Component<IProps> {
-    render() {
-        const { phase } = this.props;
-        return (
-            <div id={`pause`} className={phase && phase.phase === "paused" ? 'show' : ''}>
-                PAUSE
-            </div>
-        );
-    }
-}
+const Pause = ({ phase }: IProps) => {
+  return (
+    <div
+      id={`pause`}
+      className={phase && phase.phase === "paused" ? "show" : ""}
+    >
+      PAUSE
+    </div>
+  );
+};
+export default Pause;

src/HUD/PauseTimeout/Timeout.tsx

@@ -1,22 +1,30 @@
-import React from "react";
-import { Map, PhaseRaw } from "csgogsi-socket";
-
+import { Map, CSGO } from "csgogsi";
 
 interface IProps {
-    phase: PhaseRaw | null,
-    map: Map
+  phase: CSGO["phase_countdowns"] | null;
+  map: Map;
 }
 
-export default class Timeout extends React.Component<IProps> {
-    render() {
-        const { phase, map } = this.props;
-        const time = phase && Math.abs(Math.ceil(parseFloat(phase.phase_ends_in)));
-        const team = phase && phase.phase === "timeout_t" ? map.team_t : map.team_ct;
-        
-        return (
-            <div id={`timeout`} className={`${time && time > 2 && phase && (phase.phase === "timeout_t" || phase.phase === "timeout_ct") ? 'show' : ''} ${phase && (phase.phase === "timeout_t" || phase.phase === "timeout_ct") ? phase.phase.substr(8): ''}`}>
-                { team.name } TIMEOUT
-            </div>
-        );
-    }
-}
+const Timeout = ({ phase, map }: IProps) => {
+  const time = phase && Math.abs(Math.ceil(phase.phase_ends_in));
+  const team = phase && phase.phase === "timeout_t" ? map.team_t : map.team_ct;
+
+  return (
+    <div
+      id={`timeout`}
+      className={`${
+        time && time > 2 && phase &&
+          (phase.phase === "timeout_t" || phase.phase === "timeout_ct")
+          ? "show"
+          : ""
+      } ${
+        phase && (phase.phase === "timeout_t" || phase.phase === "timeout_ct")
+          ? phase.phase.substring(8)
+          : ""
+      }`}
+    >
+      {team.name} TIMEOUT
+    </div>
+  );
+};
+export default Timeout;

src/HUD/PlayerOverview/PlayerOverview.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-import * as I from '../../api/interfaces';
-import { avatars } from './../../api/avatars';
-import { apiUrl } from '../../api/api';
+import * as I from '../../API/types';
 import { getCountry } from '../countries';
-import { Player } from 'csgogsi-socket';
+import { Player } from 'csgogsi';
 import "./playeroverview.scss";
+import { apiUrl } from '../../API';
 
 interface IProps {
     player: I.Player,
@@ -14,21 +12,34 @@ interface IProps {
     round: number
 }
 
-export default class PlayerOverview extends React.Component<IProps> {
-    sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
+const sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
 
-    getData = () => {
-        const { veto, player, round } = this.props;
-        if(!player || !veto || !veto.rounds) return null;
+const calcWidth = (val: number | string, max?: number) => {
+    const value = Number(val);
+    if(value === 0) return 0;
+    let maximum = max;
+    if(!maximum) {
+        maximum = Math.ceil(value/100)*100;
+    }
+    if(value > maximum){
+        return 100;
+    }
+    return 100*value/maximum;
+}
+
+const PlayerOverview = ({ player, show, veto, players, round }: IProps) => {
+    if(!player || !veto || !veto.rounds) return null;
+    const getData = () => {
+        if(!veto.rounds) return null;
         const stats = veto.rounds.map(round => round ? round.players[player.steamid] : {
 			kills: 0,
 			killshs: 0,
 			damage: 0
 		}).filter(data => !!data);
         const overall = {
-            damage: this.sum(stats.map(round => round.damage)),
-            kills: this.sum(stats.map(round => round.kills)),
-            killshs: this.sum(stats.map(round => round.killshs)),
+            damage: sum(stats.map(round => round.damage)),
+            kills: sum(stats.map(round => round.kills)),
+            killshs: sum(stats.map(round => round.killshs)),
         };
         const data = {
             adr: stats.length !== 0 ? (overall.damage/(round-1)).toFixed(0) : '0',
@@ -39,66 +50,51 @@ export default class PlayerOverview extends React.Component<IProps> {
         }
         return data;
     }
-    calcWidth = (val: number | string, max?: number) => {
-        const value = Number(val);
-        if(value === 0) return 0;
-        let maximum = max;
-        if(!maximum) {
-            maximum = Math.ceil(value/100)*100;
-        }
-        if(value > maximum){
-            return 100;
-        }
-        return 100*value/maximum;
-    }
-	render() {
-        const { player, veto, players } = this.props;
-        const data = this.getData();
-        if(!player || !veto || !veto.rounds || !data) return null;
-        let url = null;
-        // const avatarData = avatars.find(avatar => avatar.steamid === player.steamid);
-        const avatarData = avatars[player.steamid];
-        if(avatarData && avatarData.url){
-            url = avatarData.url;
-        }
-        const countryName = player.country ? getCountry(player.country) : null;
-        let side = '';
-        const inGamePlayer = players.find(inGamePlayer => inGamePlayer.steamid === player.steamid);
-        if(inGamePlayer) side = inGamePlayer.team.side;
-		return (
-            <div className={`player-overview ${this.props.show ? 'show':''} ${side}`}>
-                <div className="player-overview-picture">
-                    {url ? <img src={url} alt={`${player.username}'s avatar`}/> : null}
-                </div>
-                <div className="player-overview-username">{url && countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} className="flag" alt={countryName}/> : null }{player.username.toUpperCase()}</div>
 
-                <div className="player-overview-stats">
-                    <div className="player-overview-stat">
-                        <div className="label">KILLS: {data.kills}</div>
-                        <div className="panel">
-                            <div className="filling" style={{width:`${this.calcWidth(data.kills, data.kills <= 30 ? 30 : 40)}%`}}></div>
-                        </div>
+    const data = getData();
+    if(!data) return null;
+    const url = player.avatar;
+
+    const countryName = player.country ? getCountry(player.country) : null;
+    let side = '';
+    const inGamePlayer = players.find(inGamePlayer => inGamePlayer.steamid === player.steamid);
+    if(inGamePlayer) side = inGamePlayer.team.side;
+    return (
+        <div className={`player-overview ${show ? 'show':''} ${side}`}>
+            <div className="player-overview-picture">
+                {url ? <img src={url} alt={`${player.username}'s avatar`}/> : null}
+            </div>
+            <div className="player-overview-username">{url && countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} className="flag" alt={countryName}/> : null }{player.username.toUpperCase()}</div>
+
+            <div className="player-overview-stats">
+                <div className="player-overview-stat">
+                    <div className="label">KILLS: {data.kills}</div>
+                    <div className="panel">
+                        <div className="filling" style={{width:`${calcWidth(data.kills, data.kills <= 30 ? 30 : 40)}%`}}></div>
                     </div>
-                    <div className="player-overview-stat">
-                        <div className="label">HS: {data.hsp}%</div>
-                        <div className="panel">
-                            <div className="filling" style={{width:`${this.calcWidth(data.hsp, 100)}%`}}></div>
-                        </div>
+                </div>
+                <div className="player-overview-stat">
+                    <div className="label">HS: {data.hsp}%</div>
+                    <div className="panel">
+                        <div className="filling" style={{width:`${calcWidth(data.hsp, 100)}%`}}></div>
                     </div>
-                    <div className="player-overview-stat">
-                        <div className="label">ADR: {data.adr}</div>
-                        <div className="panel">
-                            <div className="filling" style={{width:`${this.calcWidth(data.adr)}%`}}></div>
-                        </div>
+                </div>
+                <div className="player-overview-stat">
+                    <div className="label">ADR: {data.adr}</div>
+                    <div className="panel">
+                        <div className="filling" style={{width:`${calcWidth(data.adr)}%`}}></div>
                     </div>
-                    <div className="player-overview-stat">
-                        <div className="label">KPR: {data.kpr}</div>
-                        <div className="panel">
-                            <div className="filling" style={{width:`${this.calcWidth(Number(data.kpr)*100)}%`}}></div>
-                        </div>
+                </div>
+                <div className="player-overview-stat">
+                    <div className="label">KPR: {data.kpr}</div>
+                    <div className="panel">
+                        <div className="filling" style={{width:`${calcWidth(Number(data.kpr)*100)}%`}}></div>
                     </div>
                 </div>
             </div>
-        );
-	}
+        </div>
+    );
+   
 }
+
+export default PlayerOverview;

src/HUD/Players/Avatar.tsx

@@ -1,41 +1,50 @@
-import React from 'react';
-import CameraContainer from '../Camera/Container';
+import CameraContainer from "../Camera/Container";
 import PlayerCamera from "./../Camera/Camera";
 
-import { avatars } from './../../api/avatars';
-
-import { Skull } from './../../assets/Icons';
+import { Skull } from "./../../assets/Icons";
+import { useConfig } from "../../API/contexts/actions";
+import { apiUrl } from "../../API";
 
 interface IProps {
-  steamid: string,
-  slot?: number,
-  height?: number,
-  width?: number,
-  showSkull?: boolean,
-  showCam?: boolean,
-  sidePlayer?: boolean
+  steamid: string;
+  url: string | null;
+  slot?: number;
+  height?: number;
+  width?: number;
+  showSkull?: boolean;
+  showCam?: boolean;
+  sidePlayer?: boolean;
+  teamId?: string | null
 }
-export default class Avatar extends React.Component<IProps> {
+const Avatar = (
+  { steamid, url, height, width, showCam, showSkull, sidePlayer, teamId }: IProps,
+) => {
+  const data = useConfig("display_settings");
 
-  render() {
-    const { showCam, steamid, width, height, showSkull, sidePlayer } = this.props;
-    //const url = avatars.filter(avatar => avatar.steamid === this.props.steamid)[0];
-    const avatarData = avatars[this.props.steamid];
-    if (!avatarData || !avatarData.url) {
-      return null;
-    }
-
-    return (
-      <div className={`avatar`}>
-        {
-          showCam ? ( sidePlayer ? <div className="videofeed"><PlayerCamera steamid={steamid} visible={true} /></div> : <CameraContainer observedSteamid={steamid} />) : null
-        }
-        {
-          showSkull ? <Skull height={height} width={width} /> : <img src={avatarData.url} height={height} width={width} alt={'Avatar'} />
-        }
-
-      </div>
-    );
-  }
-
-}
+  const avatarUrl = teamId && (data?.replace_avatars === "always" || (data?.replace_avatars === "if_missing" && !url)) ? `${apiUrl}api/teams/logo/${teamId}` : url;
+  if(!avatarUrl && !showCam) return null;
+  return (
+    <div className={`avatar`}>
+      {showCam
+        ? (sidePlayer
+          ? (
+            <div className="videofeed">
+              <PlayerCamera steamid={steamid} visible={true} />
+            </div>
+          )
+          : <CameraContainer observedSteamid={steamid} />)
+        : null}
+      {showSkull
+        ? <Skull height={height} width={width} />
+        : (
+          avatarUrl ? <img
+            src={avatarUrl}
+            height={height}
+            width={width}
+            alt={"Avatar"}
+          /> : null
+        )}
+    </div>
+  );
+};
+export default Avatar;

src/HUD/Players/Observed.tsx

@@ -1,106 +1,86 @@
-import React from "react";
-import { Player } from "csgogsi-socket";
+import React, { useState } from "react";
+import { Player } from "csgogsi";
 import Weapon from "./../Weapon/Weapon";
 import Avatar from "./Avatar";
 import TeamLogo from "./../MatchBar/TeamLogo";
 import "./observed.scss";
-import { apiUrl } from './../../api/api';
 import { getCountry } from "./../countries";
 import { ArmorHelmet, ArmorFull, HealthFull, Bullets } from './../../assets/Icons';
-import { Veto } from "../../api/interfaces";
-import { actions } from "../../App";
+import { apiUrl } from './../../API';
+import { useAction } from "../../API/contexts/actions";
 
-class Statistic extends React.PureComponent<{ label: string; value: string | number, }> {
-	render() {
-		return (
-			<div className="stat">
-				<div className="label">{this.props.label}</div>
-				<div className="value">{this.props.value}</div>
-			</div>
-		);
-	}
-}
 
-export default class Observed extends React.Component<{ player: Player | null, veto: Veto | null, round: number }, { showCam: boolean }> {
-	constructor(props: any){
-		super(props);
-		this.state = {
-		  showCam: true
-		}
-	  }
-	componentDidMount() {
-		actions.on('toggleCams', () => {
-			console.log(this.state.showCam)
-			this.setState({ showCam: !this.state.showCam });
-		});
-	}
-	getAdr = () => {
-		const { veto, player } = this.props;
-		if (!player || !veto || !veto.rounds) return null;
-		const damageInRounds = veto.rounds.map(round => round ? round.players[player.steamid] : {
-			kills: 0,
-			killshs: 0,
-			damage: 0
-		}).filter(data => !!data).map(roundData => roundData.damage);
-		 
-		return damageInRounds.reduce((a, b) => a + b, 0) / (this.props.round - 1);
-	}
-	render() {
-		if (!this.props.player) return '';
-		const { player } = this.props;
-		const country = player.country || player.team.country;
-		const weapons = Object.values(player.weapons).map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
-		const currentWeapon = weapons.filter(weapon => weapon.state === "active")[0];
-		const grenades = weapons.filter(weapon => weapon.type === "Grenade");
-		const { stats } = player;
-		const ratio = stats.deaths === 0 ? stats.kills : stats.kills / stats.deaths;
-		const countryName = country ? getCountry(country) : null;
-		return (
-			<div className={`observed ${player.team.side}`}>
-				<div className="main_row">
-					{<Avatar steamid={player.steamid} height={140} width={140} showCam={this.state.showCam} slot={player.observer_slot} />}
-					<TeamLogo team={player.team} height={35} width={35} />
-					<div className="username_container">
-						<div className="username">{player.name}</div>
-						<div className="real_name">{player.realName}</div>
-					</div>
-					<div className="flag">{countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} alt={countryName} /> : ''}</div>
-					<div className="grenade_container">
-						{grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
-							<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
-							{
-								grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
-						</React.Fragment>)}
-					</div>
+const Statistic = React.memo(({ label, value }: { label: string; value: string | number, }) => {
+	return (
+		<div className="stat">
+			<div className="label">{label}</div>
+			<div className="value">{value}</div>
+		</div>
+	);
+});
+
+const Observed = ({ player }: { player: Player | null }) => {
+	const [ showCam, setShowCam ] = useState(true);
+
+	useAction('toggleCams', () => {
+		setShowCam(p => !p);
+	});
+
+	if (!player) return null;
+	
+	const country = player.country || player.team.country;
+	const currentWeapon = player.weapons.filter(weapon => weapon.state === "active")[0];
+	const grenades = player.weapons.filter(weapon => weapon.type === "Grenade");
+	const { stats } = player;
+	const ratio = stats.deaths === 0 ? stats.kills : stats.kills / stats.deaths;
+	const countryName = country ? getCountry(country) : null;
+	return (
+		<div className={`observed ${player.team.side}`}>
+			<div className="main_row">
+				<Avatar teamId={player.team.id} url={player.avatar} steamid={player.steamid} height={140} width={140} showCam={showCam} slot={player.observer_slot} />
+				<TeamLogo team={player.team} height={35} width={35} />
+				<div className="username_container">
+					<div className="username">{player.name}</div>
+					<div className="real_name">{player.realName}</div>
 				</div>
-				<div className="stats_row">
-					<div className="health_armor_container">
-						<div className="health-icon icon">
-							<HealthFull />
-						</div>
-						<div className="health text">{player.state.health}</div>
-						<div className="armor-icon icon">
-							{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
-						</div>
-						<div className="health text">{player.state.armor}</div>
+				<div className="flag">{countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} alt={countryName} /> : ''}</div>
+				<div className="grenade_container">
+					{grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
+						<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
+						{
+							grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
+					</React.Fragment>)}
+				</div>
+			</div>
+			<div className="stats_row">
+				<div className="health_armor_container">
+					<div className="health-icon icon">
+						<HealthFull />
 					</div>
-					<div className="statistics">
-						<Statistic label={"K"} value={stats.kills} />
-						<Statistic label={"A"} value={stats.assists} />
-						<Statistic label={"D"} value={stats.deaths} />
-						<Statistic label={"K/D"} value={ratio.toFixed(2)} />
+					<div className="health text">{player.state.health}</div>
+					<div className="armor-icon icon">
+						{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
 					</div>
-					<div className="ammo">
-						<div className="ammo_icon_container">
-							<Bullets />
-						</div>
-						<div className="ammo_counter">
-							<div className="ammo_clip">{(currentWeapon && currentWeapon.ammo_clip) || "-"}</div>
-							<div className="ammo_reserve">/{(currentWeapon && currentWeapon.ammo_reserve) || "-"}</div>
-						</div>
+					<div className="health text">{player.state.armor}</div>
+				</div>
+				<div className="statistics">
+					<Statistic label={"K"} value={stats.kills} />
+					<Statistic label={"A"} value={stats.assists} />
+					<Statistic label={"D"} value={stats.deaths} />
+					<Statistic label={"K/D"} value={ratio.toFixed(2)} />
+				</div>
+				<div className="ammo">
+					<div className="ammo_icon_container">
+						<Bullets />
+					</div>
+					<div className="ammo_counter">
+						<div className="ammo_clip">{(currentWeapon && currentWeapon.ammo_clip) || "-"}</div>
+						<div className="ammo_reserve">/{(currentWeapon && currentWeapon.ammo_reserve) || "-"}</div>
 					</div>
 				</div>
 			</div>
-		);
-	}
+		</div>
+	);
 }
+
+export default Observed;

src/HUD/Players/Player.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import * as I from "csgogsi-socket";
+import * as I from "csgogsi";
 import Weapon from "./../Weapon/Weapon";
 import Avatar from "./Avatar";
 import Armor from "./../Indicators/Armor";
 import Bomb from "./../Indicators/Bomb";
 import Defuse from "./../Indicators/Defuse";
+import React from "react";
 
 interface IProps {
   player: I.Player,
@@ -24,9 +24,9 @@ const compareWeapon = (weaponOne: I.WeaponRaw, weaponTwo: I.WeaponRaw) => {
   return false;
 }
 
-const compareWeapons = (weaponsObjectOne: { [key: string]: I.WeaponRaw }, weaponsObjectTwo: { [key: string]: I.WeaponRaw }) => {
-  const weaponsOne = Object.values(weaponsObjectOne).sort((a, b) => (a.name as any) - (b.name as any))
-  const weaponsTwo = Object.values(weaponsObjectTwo).sort((a, b) => (a.name as any) - (b.name as any))
+const compareWeapons = (weaponsObjectOne: I.Weapon[], weaponsObjectTwo: I.Weapon[]) => {
+  const weaponsOne = [...weaponsObjectOne].sort((a, b) => a.name.localeCompare(b.name))
+  const weaponsTwo = [...weaponsObjectTwo].sort((a, b) => a.name.localeCompare(b.name))
 
   if (weaponsOne.length !== weaponsTwo.length) return false;
 
@@ -58,6 +58,8 @@ const arePlayersEqual = (playerOne: I.Player, playerTwo: I.Player) => {
     playerOne.state.equip_value === playerTwo.state.equip_value &&
     playerOne.state.adr === playerTwo.state.adr &&
     playerOne.avatar === playerTwo.avatar &&
+    !!playerOne.team.id === !!playerTwo.team.id &&
+    playerOne.team.side === playerTwo.team.side &&
     playerOne.country === playerTwo.country &&
     playerOne.realName === playerTwo.realName &&
     compareWeapons(playerOne.weapons, playerTwo.weapons)
@@ -65,18 +67,20 @@ const arePlayersEqual = (playerOne: I.Player, playerTwo: I.Player) => {
 
   return false;
 }
-
 const Player = ({ player, isObserved }: IProps) => {
 
-  const weapons = Object.values(player.weapons).map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
+  const weapons = player.weapons.map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
   const primary = weapons.filter(weapon => !['C4', 'Pistol', 'Knife', 'Grenade', undefined].includes(weapon.type))[0] || null;
   const secondary = weapons.filter(weapon => weapon.type === "Pistol")[0] || null;
   const grenades = weapons.filter(weapon => weapon.type === "Grenade");
   const isLeft = player.team.orientation === "left";
+
+  const zeus = weapons.find(weapon => weapon.name === "taser");
+
   return (
     <div className={`player ${player.state.health === 0 ? "dead" : ""} ${isObserved ? 'active' : ''}`}>
       <div className="player_data">
-        <Avatar steamid={player.steamid} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
+        <Avatar teamId={player.team.id} steamid={player.steamid} url={player.avatar} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
         <div className="dead-stats">
           <div className="labels">
             <div className="stat-label">K</div>
@@ -104,10 +108,11 @@ const Player = ({ player, isObserved }: IProps) => {
           <div className="row">
             <div className="armor_and_utility">
               <Bomb player={player} />
-              <Armor player={player} />
+              <Armor health={player.state.health} armor={player.state.armor} helmet={player.state.helmet} />
               <Defuse player={player} />
             </div>
             <div className="money">${player.state.money}</div>
+            {zeus ? <Weapon className={`zeus ${player.team.orientation}`} weapon="taser" active={zeus.state === "active"} /> : null}
             <div className="grenades">
               {grenades.map(grenade => (
                 [
@@ -131,5 +136,5 @@ const arePropsEqual = (prevProps: Readonly<IProps>, nextProps: Readonly<IProps>)
   return arePlayersEqual(prevProps.player, nextProps.player);
 }
 
-//export default React.memo(Player, arePropsEqual);
-export default Player;
+export default React.memo(Player, arePropsEqual);
+//export default Player;

src/HUD/Players/TeamBox.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import Player from './Player'
-import * as I from 'csgogsi-socket';
+import * as I from 'csgogsi';
 import './players.scss';
 
 interface Props {
@@ -9,17 +8,15 @@ interface Props {
   side: 'right' | 'left',
   current: I.Player | null,
 }
-
-export default class TeamBox extends React.Component<Props> {
-  render() {
-    return (
-      <div className={`teambox ${this.props.team.side} ${this.props.side}`}>
-        {this.props.players.map(player => <Player
-          key={player.steamid}
-          player={player}
-          isObserved={!!(this.props.current && this.props.current.steamid === player.steamid)}
-        />)}
-      </div>
-    );
-  }
+const TeamBox = ({players, team, side, current}: Props) => {
+  return (
+    <div className={`teambox ${team.side} ${side}`}>
+      {players.map(player => <Player
+        key={player.steamid}
+        player={player}
+        isObserved={!!(current && current.steamid === player.steamid)}
+      />)}
+    </div>
+  );
 }
+export default TeamBox;

src/HUD/Players/players.scss

@@ -46,6 +46,16 @@
             }
         }
     }
+    .weapon.zeus {
+        height: 30px;
+        position: absolute;
+        &.left {
+            left: 170px;
+        }
+        &.right {
+            right: 170px;
+        }
+    }
     &.right {
         right: 10px;
         .player {

src/HUD/Radar/LexoRadar/LexoRadar.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Bomb } from 'csgogsi-socket';
-import maps, { ScaleConfig, MapConfig, ZoomAreas } from './maps';
-import './index.css';
+import type { Bomb, Side } from 'csgogsi';
+import maps, { MapConfig, ZoomAreas } from './maps';
+import './index.scss';
 import { RadarPlayerObject, RadarGrenadeObject } from './interface';
 import config from './config';
+import { parsePosition } from './utils';
 interface IProps {
   players: RadarPlayerObject[];
   grenades: RadarGrenadeObject[];
@@ -12,99 +12,154 @@ interface IProps {
   zoom?: ZoomAreas;
   mapConfig: MapConfig,
   reverseZoom: string,
-  parsePosition: (position: number[], size: number, config: ScaleConfig) => number[]
+}
+const isShooting = (lastShoot: number) => (new Date()).getTime() - lastShoot <= 250;
+
+type Explosion = {
+  position: number[],
+  grenadeId: string
 }
 
-const isShooting = (lastShoot: number) => (new Date()).getTime() - lastShoot <= 250;
-class App extends React.Component<IProps> {
-  constructor(props: IProps) {
-    super(props);
-    this.state = {
-      players: [],
-      grenades: [],
-      bomb: null
-    }
+/*
+const SMOKE_PARTICLE_BASE_AMOUNT = 10;
+//const PARTICLE_MAP_SOURCE = Array(SMOKE_PARTICLE_BASE_AMOUNT**2).fill(0);
+
+const SMOKE_PARTICLE_SIZE_ABSOLUT = config.smokeSize/SMOKE_PARTICLE_BASE_AMOUNT;
+
+const PARTICLE_SIDE = `${SMOKE_PARTICLE_SIZE_ABSOLUT}px`;
+
+
+
+
+const FRAG_RADIUS = 40;
+//const MAX_DISTANCE_BETWEEN_FRAG_AND_SMOKE = config.smokeSize + FRAG_RADIUS;
+
+const getDistance = (X: number[], Y: number[]) => {
+  const a = X[0] - Y[0];
+  const b = X[1] - Y[1];
+  
+  return Math.sqrt( a*a + b*b );
+}
+
+const getPosOfIndex = (index: number, origin: number[]) => {
+  const leftI = index%10;
+  const topI = Math.floor(index/10);
+  return ([origin[0] - config.smokeSize/2 + (leftI + 0.5) * SMOKE_PARTICLE_SIZE_ABSOLUT, origin[1] - config.smokeSize/2 + (topI + 0.5)*SMOKE_PARTICLE_SIZE_ABSOLUT]);
+}
+
+const Particle = ({ index, explosions, origin }: { index: number, origin: number[], explosions: Explosion[] }) => {
+  const PARTICLE_POSITION = getPosOfIndex(index, origin);
+  const isHidden = getDistance(PARTICLE_POSITION, origin) > config.smokeSize/2 || explosions.some(expl => getDistance(expl.position, PARTICLE_POSITION) <= FRAG_RADIUS);
+  return (<div className={`particle ${isHidden ? 'hide':''}`} style={{ width: PARTICLE_SIDE, height: PARTICLE_SIDE}}/>);
+}
+*/
+
+const Grenade = ({ reverseZoom, type, state, visible, position, flames, side }: { explosions: Explosion[], reverseZoom: string, side: Side | null, flames: boolean, type: RadarGrenadeObject["type"], state: RadarGrenadeObject["state"], visible: boolean, position: number[] }) => {
+  if (flames) {
+    return null;
   }
 
-  renderGrenade = (grenade: RadarGrenadeObject) => {
-    if ("flames" in grenade) {
-      return null;
-    }
-    const { reverseZoom } = this.props;
+  if(type === "smoke" && (state === "landed" || state === "exploded")){
     return (
-      <div key={grenade.id} className={`grenade ${grenade.type} ${grenade.side || ''} ${grenade.state} ${grenade.visible ? 'visible':'hidden'}`}
+      <div className={`grenade ${type} ${state} ${side || ''} ${visible ? 'visible':'hidden'}`}
         style={{
-          transform: `translateX(${grenade.position[0].toFixed(2)}px) translateY(${grenade.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
+          transform: `translateX(${position[0]}px) translateY(${position[1]}px) translateZ(10px) scale(${reverseZoom})`,
         }}>
+        <div className="content" style={{ width: config.smokeSize, height: config.smokeSize }}>
           <div className="explode-point"></div>
-          <div className="background"></div>
+          <div className="background">
+          </div>
+      </div>
       </div>
     )
   }
-  renderDot = (player: RadarPlayerObject) => {
-    const { reverseZoom } = this.props;
+  return (
+    <div className={`grenade ${type} ${state} ${side || ''} ${visible ? 'visible':'hidden'}`}
+      style={{
+        transform: `translateX(${position[0]}px) translateY(${position[1]}px) translateZ(10px) scale(${reverseZoom})`,
+      }}>
+      <div className="content">
+        <div className="explode-point"></div>
+        <div className="background"></div>
+      </div>
+    </div>
+  )
+}
+
+const Bomb = ({ bomb, mapConfig, reverseZoom }: { reverseZoom: string, bomb?: Bomb | null, mapConfig: MapConfig }) => {
+  if(!bomb) return null;
+  if(bomb.state === "carried" || bomb.state === "planting") return null;
+  if("config" in mapConfig){
+    const position = parsePosition(bomb.position, mapConfig.config);
+    if(!position) return null;
+    
     return (
-      <div key={player.id}
-        className={`player ${player.shooting? 'shooting':''} ${player.flashed ? 'flashed':''} ${player.side} ${player.hasBomb ? 'hasBomb':''} ${player.isActive ? 'active' : ''} ${!player.isAlive ? 'dead' : ''} ${player.visible ? 'visible':'hidden'}`}
+      <div className={`bomb ${bomb.state} visible`}
         style={{
-          transform: `translateX(${player.position[0].toFixed(2)}px) translateY(${player.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
+          transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
+        }}>
+        <div className="content">
+          <div className="explode-point"></div>
+          <div className="background"></div>
+        </div>
+      </div>
+    )
+  }
+  return mapConfig.configs.map(config => {
+    const position = parsePosition(bomb.position, config.config);
+    if(!position) return null;
+    return (
+      <div key={`bomb_${config.id}`} className={`bomb ${bomb.state} ${config.isVisible(bomb.position[2]) ? 'visible':'hidden'}`}
+        style={{
+          transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
+        }}>
+          <div className="content">
+            <div className="explode-point"></div>
+            <div className="background"></div>
+          </div>
+      </div>
+    )
+  });
+}
+
+const PlayerDot = ({ player, reverseZoom }: { reverseZoom: string, player: RadarPlayerObject }) => {
+  const isShootingNow = isShooting(player.lastShoot);
+  //console.log('x',isShooting(player.lastShoot), player.steamid);
+  return (
+    <div
+      className={`player ${player.shooting? 'shooting':''} ${player.flashed ? 'flashed':''} ${player.side} ${player.hasBomb ? 'hasBomb':''} ${player.isActive ? 'active' : ''} ${!player.isAlive ? 'dead' : ''} ${player.visible ? 'visible':'hidden'}`}
+      style={{
+        transform: `translateX(${player.position[0].toFixed(2)}px) translateY(${player.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
+        
+      }}>
+        <div className="content" style={{
           width: config.playerSize * player.scale,
-          height: config.playerSize * player.scale,
+          height: config.playerSize * player.scale
         }}>
-        <div className="background-fire" style={{ transform: `rotate(${-90 + player.position[2]}deg)`, opacity: isShooting(player.lastShoot) ? 1 : 0 }} ><div className="bg"/></div>
-        <div className="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
-        <div className="label">{player.label}</div>
-      </div>
-    )
-  }
-  renderBomb = () => {
-    const { bomb, mapConfig, reverseZoom } = this.props;
-    if(!bomb) return null;
-    if(bomb.state === "carried" || bomb.state === "planting") return null;
-    if("config" in mapConfig){
-      const position = this.props.parsePosition(bomb.position, 30, mapConfig.config);
-      if(!position) return null;
-      
-      return (
-        <div className={`bomb ${bomb.state} visible`}
-          style={{
-            transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
-          }}>
-          <div className="explode-point"></div>
-          <div className="background"></div>
+          <div className="background-fire" style={{ transform: `rotate(${-90 + player.position[2]}deg)`, opacity: isShootingNow ? 1 : 0 }} ><div className="bg"/></div>
+          <div className="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
+          <div className="label">{player.label}</div>
         </div>
-      )
-    }
-    return mapConfig.configs.map(config => {
-      const position = this.props.parsePosition(bomb.position, 30, config.config);
-      if(!position) return null;
-      return (
-        <div className={`bomb ${bomb.state} ${config.isVisible(bomb.position[2]) ? 'visible':'hidden'}`}
-          style={{
-            transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px)`
-          }}>
-          <div className="explode-point"></div>
-          <div className="background"></div>
-        </div>
-      )
-    });
-  }
-  render() {
-    const { players, grenades, zoom } = this.props;
+    </div>
+  )
+}
 
-    const style: React.CSSProperties = { backgroundImage: `url(${maps[this.props.mapName].file})` }
+
+const Radar = ({ players, grenades, mapConfig, bomb, mapName, zoom, reverseZoom }: IProps) => {
+    //if(players.length === 0) return null;
+    
+    const style: React.CSSProperties = { backgroundImage: `url(${maps[mapName].file})` }
 
     if(zoom){
       style.transform = `scale(${zoom.zoom})`;
       style.transformOrigin = `${zoom.origin[0]}px ${zoom.origin[1]}px`;
     }
-    //if(players.length === 0) return null;
+    const explosions = grenades.filter(grenade => grenade.type === "frag" && grenade.state === "exploded");
     return <div className="map" style={style}>
-        {players.map(this.renderDot)}
-        {grenades.map(this.renderGrenade)}
-        {this.renderBomb()}
+        {players.map(player => <PlayerDot reverseZoom={reverseZoom} key={player.id} player={player} />)}
+        {grenades.map(grenade => <Grenade explosions={explosions.map(g => ({ position: g.position, grenadeId: g.id }))} reverseZoom={reverseZoom} side={grenade.side} key={grenade.id} type={grenade.type} state={grenade.state} visible={grenade.visible} position={grenade.position} flames={"flames" in grenade} />)}
+        <Bomb reverseZoom={reverseZoom} bomb={bomb} mapConfig={mapConfig} />
       </div>;
-  }
 }
 
-export default App;
+export default Radar;

src/HUD/Radar/LexoRadar/LexoRadarContainer.tsx

@@ -1,322 +1,79 @@
-import React from 'react';
-import { Player, Bomb } from 'csgogsi-socket';
-import maps, { ScaleConfig } from './maps';
+import { Player, Bomb, Grenade, FragOrFireBombOrFlashbandGrenade } from 'csgogsi';
+import maps from './maps';
 import LexoRadar from './LexoRadar';
-import { ExtendedGrenade, Grenade, RadarPlayerObject, RadarGrenadeObject } from './interface';
-import config from './config';
+import { RadarPlayerObject, RadarGrenadeObject } from './interface';
+import { EXPLODE_TIME_FRAG, explosionPlaces, extendGrenade, extendPlayer, grenadesStates, playersStates } from './utils';
+import { GSI } from '../../../API/HUD';
 
 const DESCALE_ON_ZOOM = true;
-
-
-let playersStates: Player[][] = [];
-let grenadesStates: ExtendedGrenade[][] = [];
-const directions: Record<string, number> = {};
-type ShootingState = {
-    ammo: number,
-    weapon: string,
-    lastShoot: number
-}
-let shootingState: Record<string, ShootingState> = {};
-
-const calculateDirection = (player: Player) => {
-    if (directions[player.steamid] && !player.state.health) return directions[player.steamid];
-
-    const [forwardV1, forwardV2] = player.forward;
-    let direction = 0;
-
-    const [axisA, axisB] = [Math.asin(forwardV1), Math.acos(forwardV2)].map(axis => axis * 180 / Math.PI);
-
-    if (axisB < 45) {
-        direction = Math.abs(axisA);
-    } else if (axisB > 135) {
-        direction = 180 - Math.abs(axisA);
-    } else {
-        direction = axisB;
-    }
-
-    if (axisA < 0) {
-        direction = -(direction -= 360);
-    }
-
-    if (!directions[player.steamid]) {
-        directions[player.steamid] = direction;
-    }
-
-    const previous = directions[player.steamid];
-
-    let modifier = previous;
-    modifier -= 360 * Math.floor(previous / 360);
-    modifier = -(modifier -= direction);
-
-    if (Math.abs(modifier) > 180) {
-        modifier -= 360 * Math.abs(modifier) / modifier;
-    }
-    directions[player.steamid] += modifier;
-
-    return directions[player.steamid];
-}
-
 interface IProps {
     players: Player[],
     bomb?: Bomb | null,
     player: Player | null,
-    grenades?: any
+    grenades: Grenade[]
     size?: number,
     mapName: string
 }
 
-class App extends React.Component<IProps> {
-    round = (n: number) => {
-        const r = 0.02;
-        return Math.round(n / r) * r;
+GSI.prependListener("data", () => {
+    
+    const currentGrenades = GSI.current?.grenades || []
+    grenadesStates.unshift(currentGrenades);
+    grenadesStates.splice(5);
+
+    playersStates.unshift(GSI.current?.players || []);
+    playersStates.splice(5);
+});
+
+GSI.prependListener("data", data => {
+    const { last } = GSI;
+    if(!last) return;
+
+    for(const grenade of data.grenades.filter((grenade): grenade is FragOrFireBombOrFlashbandGrenade => grenade.type === "frag")){
+        const old = last.grenades.find((oldGrenade): oldGrenade is FragOrFireBombOrFlashbandGrenade => oldGrenade.id === grenade.id);
+        if(!old) continue;
+
+        if(grenade.lifetime >= EXPLODE_TIME_FRAG && old.lifetime < EXPLODE_TIME_FRAG){
+            explosionPlaces[grenade.id] = grenade.position;
+        }
     }
-
-    parsePosition = (position: number[], size: number, config: ScaleConfig) => {
-        if (!(this.props.mapName in maps)) {
-            return [0, 0];
+    for(const grenadeId of Object.keys(explosionPlaces)){
+        const doesExist = data.grenades.some(grenade => grenade.id === grenadeId);
+        if(!doesExist){
+            delete explosionPlaces[grenadeId];
         }
-        const left = config.origin.x + (position[0] * config.pxPerUX) - (size / 2);
-        const top = config.origin.y + (position[1] * config.pxPerUY) - (size / 2);
-
-        return [this.round(left), this.round(top)];
     }
+});
 
-    parseGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
-        if (!("position" in grenade)) {
-            return null;
-        }
-        let size = 30;
-        if (grenade.type === "smoke") {
-            size = 60;
-        }
-        return this.parsePosition(grenade.position.split(", ").map(pos => Number(pos)), size, config);
-    }
-    getGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
-        const grenadeData = grenadesStates.slice(0, 5).map(grenades => grenades.filter(gr => gr.id === grenade.id)[0]).filter(pl => !!pl);
-        if (grenadeData.length === 0) return null;
-        const positions = grenadeData.map(grenadeEntry => this.parseGrenadePosition(grenadeEntry, config)).filter(posData => posData !== null) as number[][];
-        if (positions.length === 0) return null;
-        const entryAmount = positions.length;
-        let x = 0;
-        let y = 0;
-        for (const position of positions) {
-            x += position[0];
-            y += position[1];
-        }
+const LexoRadarContainer = ({ size = 300, mapName, bomb, player, players, grenades }: IProps) => {
+    const offset = (size - (size * size / 1024)) / 2;
 
-        return [x / entryAmount, y / entryAmount];
-    }
-    getPosition = (player: Player, mapConfig: ScaleConfig, scale: number) => {
-        const playerData = playersStates.slice(0, 5).map(players => players.filter(pl => pl.steamid === player.steamid)[0]).filter(pl => !!pl);
-        if (playerData.length === 0) return [0, 0];
-        const positions = playerData.map(playerEntry => this.parsePosition(playerEntry.position, config.playerSize * scale, mapConfig));
-        const entryAmount = positions.length;
-        let x = 0;
-        let y = 0;
-        for (const position of positions) {
-            x += position[0];
-            y += position[1];
-        }
-
-        const degree = calculateDirection(player);
-        return [x / entryAmount, y / entryAmount, degree];
-    }
-    mapPlayer = (active: Player | null) => (player: Player): RadarPlayerObject | RadarPlayerObject[] | null => {
-        if (!(this.props.mapName in maps)) {
-            return null;
-        }
-
-        const weapons = player.weapons ? Object.values(player.weapons) : [];
-        const weapon = weapons.find(weapon => weapon.state === "active" && weapon.type !== "C4" && weapon.type !== "Knife" && weapon.type !== "Grenade");
-
-        const shooting: ShootingState = { ammo: weapon && weapon.ammo_clip || 0, weapon: weapon && weapon.name || '', lastShoot: 0 };
-
-        const lastShoot = shootingState[player.steamid] || shooting;
-
-        let isShooting = false;
-
-        if (shooting.weapon === lastShoot.weapon && shooting.ammo < lastShoot.ammo) {
-            isShooting = true;
-        }
-
-        shooting.lastShoot = isShooting ? (new Date()).getTime() : lastShoot.lastShoot;
-
-        shootingState[player.steamid] = shooting;
-
-
-        const map = maps[this.props.mapName];
-        const playerObject: RadarPlayerObject = {
-            id: player.steamid,
-            label: player.observer_slot !== undefined ? player.observer_slot : "",
-            side: player.team.side,
-            position: [],
-            visible: true,
-            isActive: !!active && active.steamid === player.steamid,
-            forward: 0,
-            steamid: player.steamid,
-            isAlive: player.state.health > 0,
-            hasBomb: !!Object.values(player.weapons).find(weapon => weapon.type === "C4"),
-            flashed: player.state.flashed > 35,
-            shooting: isShooting,
-            lastShoot: shooting.lastShoot,
-            scale: 1,
-            player
-        }
-        if ("config" in map) {
-            const scale = map.config.originHeight === undefined ? 1 : (1 + (player.position[2] - map.config.originHeight) / 1000);
-
-            playerObject.scale = scale;
-
-            const position = this.getPosition(player, map.config, scale);
-            playerObject.position = position;
-
-            return playerObject;
-        }
-        return map.configs.map(config => {
-            const scale = config.config.originHeight === undefined ? 1 : (1 + (player.position[2] - config.config.originHeight) / 750);
-
-            playerObject.scale = scale;
-
-            return ({
-                ...playerObject,
-                position: this.getPosition(player, config.config, scale),
-                id: `${player.steamid}_${config.id}`,
-                visible: config.isVisible(player.position[2])
-            })
-        });
-    }
-    mapGrenade = (extGrenade: ExtendedGrenade) => {
-        if (!(this.props.mapName in maps)) {
-            return null;
-        }
-        const map = maps[this.props.mapName];
-        if (extGrenade.type === "inferno") {
-            const mapFlame = (id: string) => {
-                if ("config" in map) {
-                    return ({
-                        position: this.parsePosition(extGrenade.flames[id].split(", ").map(pos => Number(pos)), 12, map.config),
-                        id: `${id}_${extGrenade.id}`,
-                        visible: true
-                    });
-                }
-                return map.configs.map(config => ({
-                    id: `${id}_${extGrenade.id}_${config.id}`,
-                    visible: config.isVisible(extGrenade.flames[id].split(", ").map(Number)[2]),
-                    position: this.parsePosition(extGrenade.flames[id].split(", ").map(pos => Number(pos)), 12, config.config)
-                }));
-            }
-            const flames = Object.keys(extGrenade.flames).map(mapFlame).flat();
-            const flameObjects: RadarGrenadeObject[] = flames.map(flame => ({
-                ...flame,
-                side: extGrenade.side,
-                type: 'inferno',
-                state: 'landed'
-            }));
-            return flameObjects;
-        }
-
-        if ("config" in map) {
-            const position = this.getGrenadePosition(extGrenade, map.config);
-            if (!position) return null;
-            const grenadeObject: RadarGrenadeObject = {
-                type: extGrenade.type,
-                state: 'inair',
-                side: extGrenade.side,
-                position,
-                id: extGrenade.id,
-                visible: true
-            }
-            if (extGrenade.type === "smoke") {
-                if (extGrenade.effecttime !== "0.0") {
-                    grenadeObject.state = "landed";
-                    if (Number(extGrenade.effecttime) >= 16.5) {
-                        grenadeObject.state = 'exploded';
-                    }
-                }
-            } else if (extGrenade.type === 'flashbang' || extGrenade.type === 'frag') {
-                if (Number(extGrenade.lifetime) >= 1.25) {
-                    grenadeObject.state = 'exploded';
-                }
-            }
-            return grenadeObject;
-        }
-        return map.configs.map(config => {
-            const position = this.getGrenadePosition(extGrenade, config.config);
-            if (!position) return null;
-            const grenadeObject: RadarGrenadeObject = {
-                type: extGrenade.type,
-                state: 'inair',
-                side: extGrenade.side,
-                position,
-                id: `${extGrenade.id}_${config.id}`,
-                visible: config.isVisible(extGrenade.position.split(", ").map(Number)[2])
-            }
-            if (extGrenade.type === "smoke") {
-                if (extGrenade.effecttime !== "0.0") {
-                    grenadeObject.state = "landed";
-                    if (Number(extGrenade.effecttime) >= 16.5) {
-                        grenadeObject.state = 'exploded';
-                    }
-                }
-            } else if (extGrenade.type === 'flashbang' || extGrenade.type === 'frag') {
-                if (Number(extGrenade.lifetime) >= 1.25) {
-                    grenadeObject.state = 'exploded';
-                }
-            }
-            return grenadeObject;
-        }).filter((grenade): grenade is RadarGrenadeObject => grenade !== null);
-
-    }
-    getSideOfGrenade = (grenade: Grenade) => {
-        const owner = this.props.players.find(player => player.steamid === grenade.owner);
-        if (!owner) return null;
-        return owner.team.side;
-    }
-    render() {
-        const players: RadarPlayerObject[] = this.props.players.map(this.mapPlayer(this.props.player)).filter((player): player is RadarPlayerObject => player !== null).flat();
-        playersStates.unshift(this.props.players);
-        if (playersStates.length > 5) {
-            playersStates = playersStates.slice(0, 5);
-        }
-        let grenades: RadarGrenadeObject[] = [];
-        const currentGrenades = Object.keys(this.props.grenades as { [key: string]: Grenade }).map(grenadeId => ({ ...this.props.grenades[grenadeId], id: grenadeId, side: this.getSideOfGrenade(this.props.grenades[grenadeId]) })) as ExtendedGrenade[];
-        if (currentGrenades) {
-            grenades = currentGrenades.map(this.mapGrenade).filter(entry => entry !== null).flat() as RadarGrenadeObject[];
-            grenadesStates.unshift(currentGrenades);
-        }
-        if (grenadesStates.length > 5) {
-            grenadesStates = grenadesStates.slice(0, 5);
-        }
-        const size = this.props.size || 300;
-        const offset = (size - (size * size / 1024)) / 2;
-
-        const config = maps[this.props.mapName];
-
-        const zooms = config && config.zooms || [];
-
-        const activeZoom = zooms.find(zoom => zoom.threshold(players.map(pl => pl.player)));
-
-        const reverseZoom = 1/(activeZoom && activeZoom.zoom || 1);
-
-        // s*(1024-s)/2048
-        if (!(this.props.mapName in maps)) {
-            return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
-                Unsupported map
-            </div>;
-        }
+    if (!(mapName in maps)) {
         return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
-            <LexoRadar
-                players={players}
-                grenades={grenades}
-                parsePosition={this.parsePosition}
-                bomb={this.props.bomb}
-                mapName={this.props.mapName}
-                mapConfig={maps[this.props.mapName]}
-                zoom={activeZoom}
-                reverseZoom={DESCALE_ON_ZOOM ? reverseZoom.toFixed(2) : '1'}
-            />
+            Unsupported map
         </div>;
     }
+    const playersExtended: RadarPlayerObject[] = players.map(pl => extendPlayer({ player: pl, steamId: player?.steamid || null, mapName })).filter((player): player is RadarPlayerObject => player !== null).flat();
+    const grenadesExtended =  grenades.map(grenade => extendGrenade({ grenade, side: playersExtended.find(player => player.steamid === grenade.owner)?.side || 'CT', mapName })).filter(entry => entry !== null).flat() as RadarGrenadeObject[];
+    const config = maps[mapName];
+
+    const zooms = config && config.zooms || [];
+
+    const activeZoom = zooms.find(zoom => zoom.threshold(playersExtended.map(pl => pl.player)));
+
+    const reverseZoom = 1/(activeZoom && activeZoom.zoom || 1);
+    // s*(1024-s)/2048
+    return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
+        <LexoRadar
+            players={playersExtended}
+            grenades={grenadesExtended}
+            bomb={bomb}
+            mapName={mapName}
+            mapConfig={config}
+            zoom={activeZoom}
+            reverseZoom={DESCALE_ON_ZOOM ? reverseZoom.toFixed(2) : '1'}
+        />
+    </div>;
 }
 
-export default App;
+export default LexoRadarContainer;

src/HUD/Radar/LexoRadar/config.ts

@@ -1,5 +1,6 @@
 const config = {
-    playerSize: 60,
+    playerSize: 70,
+    smokeSize: 50
 }
 
 export default config;

src/HUD/Radar/LexoRadar/index.scss

@@ -51,12 +51,20 @@ html, body, .map-container {
 }
 .map .player, .map .grenade, .map .bomb {
     position: absolute;
-    height:30px;
-    width:30px;
+    height:0px;
+    width:0px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.5s ease;
+    .content {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     /*transition: all 0.1s ease;/**/
 }
 .map .player .background {
@@ -66,7 +74,7 @@ html, body, .map-container {
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
-    transition:transform 0.2s ease;
+    transition:transform 0.2s linear;
 }
 .map .player .background-fire {
     position: absolute;
@@ -140,10 +148,12 @@ html, body, .map-container {
 }
 */
 .map .player.active {
-    width:120%;
-    height:120%;
     z-index: 3;
 }
+.map .player.active .content {
+    width:48px;
+    height:48px;
+}
 .map .grenade .background {
     border-radius:50%;
     background-size: contain;
@@ -157,9 +167,6 @@ html, body, .map-container {
     opacity: 1;
     transition: opacity 1s;
 }
-.map .grenade.smoke {
-    transition: all 0.5s;
-}
 .map .grenade.smoke.inair .background {
     background-color: transparent !important;
     border: none !important;
@@ -167,7 +174,6 @@ html, body, .map-container {
     filter: invert(1);
 }
 .map .grenade.smoke.exploded .background {
-    opacity: 0;
 }
 .map .grenade.flashbang, .map .grenade.frag {
     filter: invert(1);
@@ -183,6 +189,8 @@ html, body, .map-container {
 .map .grenade .explode-point, .map .bomb .explode-point {
     position: absolute;
     width: 2px;
+    top: calc(50% - 1px);
+    left:  calc(50% - 1px);
     height: 2px;
     border-radius: 0.08px;
 }
@@ -194,7 +202,6 @@ html, body, .map-container {
     opacity: 0;
 }
 .map .grenade.smoke .background {
-    border: 5px solid grey;
     background-color: rgba(255,255,255,0.5);
 }
 .map .grenade.smoke.CT .background {
@@ -214,9 +221,8 @@ html, body, .map-container {
     width:12px;
     height:12px;
 }
-.map .grenade.smoke {
-    width:60px;
-    height:60px;
+.map .grenade .content {
+    position: absolute;
 }
 .map .grenade.inferno .background {
     background-color: red;
@@ -270,16 +276,29 @@ html, body, .map-container {
     background: red;
 }
 
-@keyframes Hidden {
-    from {
-    }
-    to {
-        display: none !important;
-    }
+.map .player.dead .background {
+    display: none;
+}
+.map .player.dead .label {
+    background: transparent;
+}
+.map .player.dead.CT .label, .map .player.CT .label div {
+    color: var(--color-new-ct);
+}
+.map .player.dead.T .label, .map .player.T .label div {
+    color: var(--color-new-t);
 }
 .map .hidden {
-    opacity: 0;
-    animation: Hidden 1s ease 1s 1;
-    animation-fill-mode: forwards;/**/
+    opacity: 0 !important;
+}
 
-}
+.map .grenade {
+    &.smoke {
+        &.exploded, &.landed {
+            .background {
+                display: flex;
+                flex-wrap: wrap;
+            }
+        }
+    }
+}

src/HUD/Radar/LexoRadar/interface.ts

@@ -1,4 +1,4 @@
-import { Player, Side } from "csgogsi";
+import { Player, Side, Grenade } from "csgogsi";
 
 export interface RadarPlayerObject {
     id: string,
@@ -26,30 +26,5 @@ export interface RadarGrenadeObject {
     visible: boolean,
     id: string,
 } 
-export interface GrenadeBase {
-    owner: string,
-    type: 'decoy' | 'smoke' | 'frag' | 'firebomb' | 'flashbang' | 'inferno'
-    lifetime: string
-}
 
-export interface DecoySmokeGrenade extends GrenadeBase {
-    position: string,
-    velocity: string,
-    type: 'decoy' | 'smoke',
-    effecttime: string,
-}
-
-export interface DefaultGrenade extends GrenadeBase {
-    position: string,
-    type: 'frag' | 'firebomb' | 'flashbang',
-    velocity: string,
-}
-
-export interface InfernoGrenade extends GrenadeBase {
-    type: 'inferno',
-    flames: { [key: string]: string }
-}
-
-export type Grenade = DecoySmokeGrenade | DefaultGrenade | InfernoGrenade;
-
-export type ExtendedGrenade = Grenade & { id: string, side: Side | null, };
+export type ExtendedGrenade = Grenade & { side: Side | null, };

src/HUD/Radar/LexoRadar/maps/de_anubis/index.ts

@@ -1,15 +0,0 @@
-import radar from './radar.png'
-
-const config = {
-    "config": {
-        "origin": {
-            "x": 536.3392873296655,
-            "y": 638.0789844851904
-        },
-        "pxPerUX": 0.1907910426894958,
-        "pxPerUY": -0.18993888105312648
-    },
-    "file":radar
-}
-
-export default config;

src/HUD/Radar/LexoRadar/maps/de_mirage/index.ts

@@ -7,8 +7,7 @@ const config = {
             "y": 340.2921393569175
         },
         "pxPerUX": 0.20118507589946494,
-        "pxPerUY": -0.20138282875746794,
-        "originHeight": -170,
+        "pxPerUY": -0.20138282875746794
     },
     "file": radar
 }

src/HUD/Radar/LexoRadar/maps/de_train/index.ts

@@ -3,11 +3,11 @@ import radar from './radar.png'
 const config = {
     "config": {
         "origin": {
-            "x": 527.365542903922,
-            "y": 511.81469648562296
+            "x": 557.7279495268139,
+            "y": 507.83243734804853
         },
-        "pxPerUX": 0.21532584158170223,
-        "pxPerUY": -0.21299254526091588
+        "pxPerUX": 0.22712933753943218,
+        "pxPerUY": -0.23013108811174968
     },
     "file":radar
 }

src/HUD/Radar/LexoRadar/maps/de_vertigo/index.ts

@@ -1,4 +1,3 @@
-import { Player } from 'csgogsi-socket';
 import radar from './radar.png'
 
 const high = {
@@ -32,21 +31,6 @@ const config = {
             isVisible: (height: number) => height < 11700,
         },
     ],
-    zooms: [{
-        threshold: (players: Player[]) => {
-            const alivePlayers = players.filter(player => player.state.health);
-            return alivePlayers.length > 0 && alivePlayers.every(player => player.position[2] < 11700)
-        },
-        origin: [472, 1130],
-        zoom: 2
-    }, {
-        threshold: (players: Player[]) => {
-            const alivePlayers = players.filter(player => player.state.health);
-            return alivePlayers.length > 0 && players.filter(player => player.state.health).every(player => player.position[2] >= 11700);
-        },
-        origin: [528, 15],
-        zoom: 1.75
-    }],
     file: radar
 }
 

src/HUD/Radar/LexoRadar/maps/index.ts

@@ -6,17 +6,15 @@ import de_train from './de_train';
 import de_overpass from './de_overpass';
 import de_nuke from './de_nuke';
 import de_vertigo from './de_vertigo';
-import de_anubis from './de_anubis';
 import de_ancient from './de_ancient';
-import api from '../../../../api/api';
-import { Player } from 'csgogsi-socket';
+import api from '../../../../API';
+import { Player } from 'csgogsi';
 
 export type ZoomAreas = {
     threshold: (players: Player[]) => boolean;
     origin: number[],
     zoom: number
 }
-
 export interface ScaleConfig {
     origin: {
         x:number,
@@ -29,7 +27,7 @@ export interface ScaleConfig {
 
 interface SingleLayer {
     config: ScaleConfig,
-    file: string,
+    file: string
     zooms?: ZoomAreas[]
 }
 
@@ -39,7 +37,7 @@ interface DoubleLayer {
         config: ScaleConfig,
         isVisible: (height: number) => boolean
     }[],
-    file: string,
+    file: string
     zooms?: ZoomAreas[]
 }
 
@@ -54,8 +52,7 @@ const maps: { [key: string] : MapConfig} = {
     de_overpass,
     de_nuke,
     de_vertigo,
-    de_ancient,
-    de_anubis
+    de_ancient
 }
 
 api.maps.get().then(fallbackMaps => {

src/HUD/Radar/LexoRadar/utils.ts

@@ -0,0 +1,244 @@
+import { Player, Side, Grenade } from "csgogsi";
+import maps, { ScaleConfig } from "./maps";
+import { ExtendedGrenade, RadarGrenadeObject, RadarPlayerObject } from "./interface";
+import { InfernoGrenade } from "csgogsi";
+
+export const playersStates: Player[][] = [];
+export const grenadesStates: Grenade[][] = [];
+const directions: { [key: string]: number } = {};
+
+export const explosionPlaces: Record<string, number[]> = {};
+
+type ShootingState = {
+    ammo: number,
+    weapon: string,
+    lastShoot: number
+}
+let shootingState: Record<string, ShootingState> = {};
+
+const calculateDirection = (player: Player) => {
+    if (directions[player.steamid] && !player.state.health) return directions[player.steamid];
+
+    const [forwardV1, forwardV2] = player.forward;
+    let direction = 0;
+
+    const [axisA, axisB] = [Math.asin(forwardV1), Math.acos(forwardV2)].map(axis => axis * 180 / Math.PI);
+
+    if (axisB < 45) {
+        direction = Math.abs(axisA);
+    } else if (axisB > 135) {
+        direction = 180 - Math.abs(axisA);
+    } else {
+        direction = axisB;
+    }
+
+    if (axisA < 0) {
+        direction = -(direction -= 360);
+    }
+
+    if (!directions[player.steamid]) {
+        directions[player.steamid] = direction;
+    }
+
+    const previous = directions[player.steamid];
+
+    let modifier = previous;
+    modifier -= 360 * Math.floor(previous / 360);
+    modifier = -(modifier -= direction);
+
+    if (Math.abs(modifier) > 180) {
+        modifier -= 360 * Math.abs(modifier) / modifier;
+    }
+    directions[player.steamid] += modifier;
+
+    return directions[player.steamid];
+}
+
+export const round = (n: number) => {
+    const r = 0.02;
+    return Math.round(n / r) * r;
+}
+
+export const parsePosition = (position: number[], config: ScaleConfig) => {
+    const left = config.origin.x + (position[0] * config.pxPerUX);
+    const top = config.origin.y + (position[1] * config.pxPerUY);
+
+    return [round(left), round(top)];
+}
+
+export const parsePlayerPosition = (player: Player, mapConfig: ScaleConfig) => {
+    const playerData = playersStates.slice(0, 5).map(players => players.filter(pl => pl.steamid === player.steamid)[0]).filter(pl => !!pl);
+    if (playerData.length === 0) return [0, 0];
+    const positions = playerData.map(playerEntry => parsePosition(playerEntry.position, mapConfig));
+    const entryAmount = positions.length;
+    let x = 0;
+    let y = 0;
+    for (const position of positions) {
+        x += position[0];
+        y += position[1];
+    }
+
+    const degree = calculateDirection(player);
+    return [x / entryAmount, y / entryAmount, degree];
+}
+
+
+const parseGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
+    if(grenade.id in explosionPlaces) return parsePosition(explosionPlaces[grenade.id], config);
+    const grenadeData = grenadesStates.slice(0, 5).map(grenades => grenades.filter(gr => gr.id === grenade.id)[0]).filter(pl => !!pl);
+    if (grenadeData.length === 0) return "position" in grenade ? parsePosition(grenade.position, config) : null;
+    const positions = grenadeData.map(grenadeEntry => ("position" in grenadeEntry ? parsePosition(grenadeEntry.position, config) : null)).filter(posData => posData !== null) as number[][];
+    if (positions.length === 0) return null;
+    const entryAmount = positions.length;
+    let x = 0;
+    let y = 0;
+    for (const position of positions) {
+        x += position[0];
+        y += position[1];
+    }
+
+    return [x / entryAmount, y / entryAmount];
+}
+
+export const EXPLODE_TIME_FRAG = 1.6;
+export const EXPLODE_TIME_FLASH = 1.45;
+
+export const extendGrenade = ({grenade, mapName, side }: { side: Side, grenade: Grenade, mapName: string}) => {
+   // const owner = this.props.players.find(player => player.steamid === grenade.owner);
+    const extGrenade: ExtendedGrenade = {
+        ...grenade,
+        side:/* owner?.team.side ||*/ side
+    }
+    const map = maps[mapName];
+    if (extGrenade.type === "inferno") {
+        const mapFlame = (flame: InfernoGrenade["flames"][number]) => {
+            if ("config" in map) {
+                return ({
+                    position: parsePosition(flame.position, map.config),
+                    id: `${flame.id}_${extGrenade.id}`,
+                    visible: true
+                });
+            }
+            return map.configs.map(config => ({
+                id: `${flame.id}_${extGrenade.id}_${config.id}`,
+                visible: config.isVisible(flame.position[2]),
+                position: parsePosition(flame.position, config.config)
+            }));
+        }
+        const flames = extGrenade.flames.map(mapFlame).flat();
+        const flameObjects: RadarGrenadeObject[] = flames.map(flame => ({
+            ...flame,
+            side: extGrenade.side,
+            type: 'inferno',
+            state: 'landed'
+        }));
+        return flameObjects;
+    }
+
+    if ("config" in map) {
+        const position = parseGrenadePosition(extGrenade, map.config);
+        
+        if (!position) return null;
+        const grenadeObject: RadarGrenadeObject = {
+            type: extGrenade.type,
+            state: 'inair',
+            side: extGrenade.side,
+            position,
+            id: extGrenade.id,
+            visible: true
+        }
+        if (extGrenade.type === "smoke") {
+            if (extGrenade.effecttime !== 0) {
+                grenadeObject.state = "landed";
+                if (extGrenade.effecttime >= 16.5) {
+                    grenadeObject.state = 'exploded';
+                }
+            }
+        } else if ((extGrenade.type === 'flashbang' && extGrenade.lifetime >= EXPLODE_TIME_FLASH) || (extGrenade.type === 'frag' && extGrenade.lifetime >= EXPLODE_TIME_FRAG)) {
+            grenadeObject.state = 'exploded';
+        }
+        return grenadeObject;
+    }
+    return map.configs.map(config => {
+        const position = parseGrenadePosition(extGrenade, config.config);
+        if (!position) return null;
+        const grenadeObject: RadarGrenadeObject = {
+            type: extGrenade.type,
+            state: 'inair',
+            side: extGrenade.side,
+            position,
+            id: `${extGrenade.id}_${config.id}`,
+            visible: config.isVisible(extGrenade.position[2])
+        }
+        if (extGrenade.type === "smoke") {
+            if (extGrenade.effecttime !== 0) {
+                grenadeObject.state = "landed";
+                if (extGrenade.effecttime >= 16.5) {
+                    grenadeObject.state = 'exploded';
+                }
+            }
+        } else if ((extGrenade.type === 'flashbang' && extGrenade.lifetime >= EXPLODE_TIME_FLASH) || (extGrenade.type === 'frag' && extGrenade.lifetime >= EXPLODE_TIME_FRAG)) {
+            grenadeObject.state = 'exploded';
+        }
+        return grenadeObject;
+    }).filter((grenade): grenade is RadarGrenadeObject => grenade !== null);
+}
+
+export const extendPlayer = ({ player, steamId, mapName }: { mapName: string, player: Player, steamId: string | null}): RadarPlayerObject | RadarPlayerObject[] | null => {
+    const weapons = player.weapons ? Object.values(player.weapons) : [];
+    const weapon = weapons.find(weapon => weapon.state === "active" && weapon.type !== "C4" && weapon.type !== "Knife" && weapon.type !== "Grenade");
+
+    const shooting: ShootingState = { ammo: weapon && weapon.ammo_clip || 0, weapon: weapon && weapon.name || '', lastShoot: 0 };
+
+    const lastShoot = shootingState[player.steamid] || shooting;
+
+    let isShooting = false;
+
+    if (shooting.weapon === lastShoot.weapon && shooting.ammo < lastShoot.ammo) {
+        isShooting = true;
+    }
+
+    shooting.lastShoot = isShooting ? (new Date()).getTime() : lastShoot.lastShoot;
+
+    shootingState[player.steamid] = shooting;
+    const map = maps[mapName];
+    const playerObject: RadarPlayerObject = {
+        id: player.steamid,
+        label: player.observer_slot !== undefined ? player.observer_slot : "",
+        side: player.team.side,
+        position: [],
+        visible: true,
+        isActive: steamId === player.steamid,
+        forward: 0,
+        scale: 1,
+        steamid: player.steamid,
+        flashed: player.state.flashed > 35,
+        shooting: isShooting,
+        lastShoot: shooting.lastShoot,
+        isAlive: player.state.health > 0,
+        hasBomb: !!Object.values(player.weapons).find(weapon => weapon.type === "C4"),
+        player
+    }
+    if ("config" in map) {
+        const scale = map.config.originHeight === undefined ? 1 : (1 + (player.position[2] - map.config.originHeight) / 1000);
+
+        playerObject.scale = scale;
+
+        const position = parsePlayerPosition(player, map.config);
+        playerObject.position = position;
+
+        return playerObject;
+    }
+    return map.configs.map(config => {
+        const scale = config.config.originHeight === undefined ? 1 : (1 + (player.position[2] - config.config.originHeight) / 750);
+
+        playerObject.scale = scale;
+
+        return ({
+            ...playerObject,
+            position: parsePlayerPosition(player, config.config),
+            id: `${player.steamid}_${config.id}`,
+            visible: config.isVisible(player.position[2])
+        })
+    });
+}

src/HUD/Radar/Radar.tsx

@@ -1,50 +1,20 @@
-import React from "react";
-import { isDev } from './../../api/api';
-import { CSGO } from "csgogsi-socket";
+import { CSGO } from "csgogsi";
 import LexoRadarContainer from './LexoRadar/LexoRadarContainer';
 
 
 
 interface Props { radarSize: number, game: CSGO }
-interface State {
-    showRadar: boolean,
-    loaded: boolean,
-    boltobserv:{
-        css: boolean,
-        maps: boolean
-    }
+
+const Radar = ({ radarSize, game }: Props) => {
+    const { players, player, bomb, grenades, map } = game; 
+    return <LexoRadarContainer
+        players={players}
+        player={player}
+        bomb={bomb}
+        grenades={grenades}
+        size={radarSize}
+        mapName={map.name.substring(map.name.lastIndexOf('/')+1)}
+    />
 }
 
-export default class Radar extends React.Component<Props, State> {
-    state = {
-        showRadar: true,
-        loaded: !isDev,
-        boltobserv: {
-            css: true,
-            maps: true
-        }
-    }
-    async componentDidMount(){
-        /*if(isDev){
-            const response = await fetch('hud.json');
-            const hud = await response.json();
-            const boltobserv = {
-                css: Boolean(hud && hud.boltobserv && hud.boltobserv.css),
-                maps: Boolean(hud && hud.boltobserv && hud.boltobserv.maps)
-            }
-            this.setState({boltobserv, loaded: true});
-        }*/
-    }
-
-    render() {
-        const { players, player, bomb, grenades, map } = this.props.game; 
-        return <LexoRadarContainer
-            players={players}
-            player={player}
-            bomb={bomb}
-            grenades={grenades}
-            size={this.props.radarSize}
-            mapName={map.name.substring(map.name.lastIndexOf('/')+1)}
-        />
-    }
-}
+export default Radar;

src/HUD/Radar/RadarMaps.tsx

@@ -1,70 +1,58 @@
-import React from "react";
+import { useState } from "react";
 import "./radar.scss";
-import { Match, Veto } from "../../api/interfaces";
-import { Map, CSGO, Team } from 'csgogsi-socket';
-import { actions } from './../../App';
+import { Match, Veto } from "../../API/types";
+import { Map, CSGO, Team } from 'csgogsi';
 import Radar from './Radar'
-import TeamLogo from "../MatchBar/TeamLogo";
+
+import { useAction } from "../../API/contexts/actions";
 
 interface Props { match: Match | null, map: Map, game: CSGO }
-interface State { showRadar: boolean, radarSize: number, showBig: boolean }
 
-export default class RadarMaps extends React.Component<Props, State> {
-    state = {
-        showRadar: true,
-        radarSize: 350,
-        showBig: false
-    }
-    componentDidMount() {
-        actions.on('radarBigger', () => this.radarChangeSize(20));
-        actions.on('radarSmaller', () => this.radarChangeSize(-20));
-        actions.on('toggleRadar', () => { this.setState(state => ({ showRadar: !state.showRadar })) });
+ const RadarMaps = ({ match, map, game }: Props) => {
+    const [ radarSize, setRadarSize ] = useState(366);
+    const [ showBig, setShowBig ] = useState(false);
 
-        actions.on("toggleRadarView", () => {
-            this.setState({showBig:!this.state.showBig});
-        });
-    }
-    radarChangeSize = (delta: number) => {
-        const newSize = this.state.radarSize + delta;
-        this.setState({ radarSize: newSize > 0 ? newSize : this.state.radarSize });
-    }
-    render() {
-        const { match } = this.props;
-        const { radarSize, showBig, showRadar } = this.state;
-        const size = showBig ? 600 : radarSize;
-        return (
-            <div id={`radar_maps_container`} className={`${!showRadar ? 'hide' : ''} ${showBig ? 'preview':''}`}>
-                <div className="radar-component-container" style={{width: `${size}px`, height: `${size}px`}}><Radar radarSize={size} game={this.props.game} /></div>
-                {match ? <MapsBar match={this.props.match} map={this.props.map} game={this.props.game} /> : null}
-            </div>
-        );
-    }
+    useAction('radarBigger', () => {
+        setRadarSize(p => p+10);
+    }, []);
+
+    useAction('radarSmaller', () => {
+        setRadarSize(p => p-10);
+    }, []);
+
+    useAction('toggleRadarView', () => {
+        setShowBig(p => !p);
+    }, []);
+
+    return (
+        <div id={`radar_maps_container`} className={` ${showBig ? 'preview':''}`}>
+            {match ? <MapsBar match={match} map={map} game={game} /> : null}
+            <Radar radarSize={showBig ? 600: radarSize} game={game} />
+        </div>
+    );
 }
 
-class MapsBar extends React.PureComponent<Props> {
-    render() {
-        const { match, map } = this.props;
-        if (!match || !match.vetos.length) return '';
-        const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
-        if (picks.length > 3) {
-            const current = picks.find(veto => map.name.includes(veto.mapName));
-            if (!current) return null;
-            return <div id="maps_container">
-                {<MapEntry veto={current} map={map} team={current.type === "decider" ? null : map.team_ct.id === current.teamId ? map.team_ct : map.team_t} />}
-            </div>
-        }
+export default RadarMaps;
+
+const MapsBar = ({ match, map }: Props) => {
+    if (!match || !match.vetos.length) return '';
+    const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
+    if (picks.length > 3) {
+        const current = picks.find(veto => map.name.includes(veto.mapName));
+        if (!current) return null;
         return <div id="maps_container">
-            {match.vetos.filter(veto => veto.type !== "ban").filter(veto => veto.teamId || veto.type === "decider").map(veto => <MapEntry key={veto.mapName} veto={veto} map={this.props.map} team={veto.type === "decider" ? null : map.team_ct.id === veto.teamId ? map.team_ct : map.team_t} />)}
+            <div className="bestof">Best of {match.matchType.replace("bo", "")}</div>
+            {<MapEntry veto={current} map={map} team={current.type === "decider" ? null : map.team_ct.id === current.teamId ? map.team_ct : map.team_t} />}
         </div>
     }
+    return <div id="maps_container">
+    <div className="bestof">Best of {match.matchType.replace("bo", "")}</div>
+        {match.vetos.filter(veto => veto.type !== "ban").filter(veto => veto.teamId || veto.type === "decider").map(veto => <MapEntry key={veto.mapName} veto={veto} map={map} team={veto.type === "decider" ? null : map.team_ct.id === veto.teamId ? map.team_ct : map.team_t} />)}
+    </div>
 }
 
-class MapEntry extends React.PureComponent<{ veto: Veto, map: Map, team: Team | null }> {
-    render() {
-        const { veto, map, team } = this.props;
-        return <div className="veto_entry">
-            <div className="team_logo">{team ? <TeamLogo team={team} /> : null}</div>
-            <div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName}</div>
-        </div>
-    }
+const MapEntry = ({ veto, map }: { veto: Veto, map: Map, team: Team | null }) => {
+    return <div className="veto_entry">
+        <div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName.replace("de_", "")}</div>
+    </div>
 }

src/HUD/Radar/radar.scss

@@ -3,7 +3,6 @@
 	top: 10px;
 	left: 10px;
 	border: none;
-	background-color: rgba(0,0,0,0.5);
 	transition: all 1s;
 	.map-container {
 		transition: all 1s;
@@ -24,18 +23,24 @@
 		perspective: 500px;
 	}
 }
-.radar-component-container {
-	width: 350px;
-	height:350px;
-	overflow: hidden;
-}
 #maps_container {
 	width: 100%;
 	height: 30px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-evenly;
-	background-color: rgba(0,0,0,0.5);
+	color: white;
+	background-color: var(--sub-panel-color);
+
+	.bestof {
+		width: 121px;
+		font-size: 16px;
+		font-weight: 700;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: uppercase;
+	}
 }
 .veto_entry {
 	display: flex;
@@ -59,8 +64,15 @@
 			width: 23px;
 		}
 	}
-	.map_name.active {
-		text-shadow: 0 0 15px white;
-		font-weight: 600;
+	.map_name {
+		font-size:12px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		opacity: 0.5;
+
+		&.active {
+			opacity: 1;
+		}
 	}
 }

src/HUD/Scout/index.scss

@@ -0,0 +1,63 @@
+#scout {
+    width: 512.5px;
+    background-color: var(--sub-panel-color);
+    padding: 10px;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    top: 126px;
+    opacity: 0;
+    transition: opacity 0.5s;
+
+    &.show {
+        opacity: 1;
+    }
+    .bar-container {
+        position: relative;
+        width: 100%;
+        height: 29px;
+        display: flex;
+
+        .bar {
+            position: relative;
+            width: 100%;
+            z-index: 0;
+            height: 100%;
+            .team-prediction {
+                position: absolute;
+                height: 100%;
+                width: 100%;
+            }
+            .left {
+                z-index: 0;
+
+            }
+            .right {
+                margin-left: auto;
+                width: 50%;
+                z-index: 2;
+                right: 0;
+            }
+            .team-CT {
+                background-color: var(--color-new-ct);
+            }
+            .team-T {
+                background-color: var(--color-new-t);
+            }
+        }
+        .overlay {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            z-index: 2;
+            align-items: center;
+            .team-prediction-value {
+                margin: 0 10px;
+                text-shadow: 1px 1px 0px black;
+            }
+        }
+    }
+}

src/HUD/Scout/index.tsx

@@ -0,0 +1,17 @@
+import { Side } from "csgogsi";
+import "./index.scss";
+
+export const Scout = ({ left, right }: { left: Side, right: Side }) => {
+    return <div id="scout">
+        <div className="bar-container">
+            <div className="overlay">
+                <div className={`team-prediction-value left ${left}`}>50%</div>
+                <div className={`team-prediction-value right ${right}`}>50%</div>
+            </div>
+            <div className="bar">
+                <div className={`team-prediction team-${left} left`} />
+                <div className={`team-prediction team-${right} right`} />
+            </div>
+        </div>
+    </div>
+}

src/HUD/SideBoxes/Money.tsx

@@ -1,45 +1,47 @@
-import React from 'react';
+import React from "react";
 
-class LossBox extends React.PureComponent<{ active: boolean, side: 'CT' | 'T' }>{
-    render(){
-        return <div className={`loss-box ${this.props.side} ${this.props.active ? 'active':''}`}></div>
-    }
-}
+const LossBox = React.memo(({ active, side }: { active: boolean; side: "CT" | "T" }) => {
+  return (
+    <div
+      className={`loss-box ${side} ${
+        active ? "active" : ""
+      }`}
+    >
+    </div>
+  );
+});
 
 interface Props {
-    side: 'left' | 'right',
-    team: 'CT' | 'T',
-    loss: number,
-    equipment: number,
-    money: number,
-    show: boolean,
+  side: "left" | "right";
+  team: "CT" | "T";
+  loss: number;
+  equipment: number;
+  money: number;
+  show: boolean;
 }
 
-export default class Money extends React.PureComponent<Props> {
-
-	render() {
-		return (
-			<div className={`moneybox ${this.props.side} ${this.props.team} ${this.props.show ? "show" : "hide"}`}>
-                <div className="loss_container">
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 4} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 3} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 2} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 1} />
-                </div>
-                <div className="money_container">
-                    <div className="title">Loss Bonus</div>
-                    <div className="value">${this.props.loss}</div>
-                </div>
-                <div className="money_container">
-                    <div className="title">Team Money</div>
-                    <div className="value">${this.props.money}</div>
-                </div>
-                <div className="money_container">
-                    <div className="title">Equipment Value</div>
-                    <div className="value">${this.props.equipment}</div>
-                </div>
-            </div>
-		);
-	}
-
-}
+const Money = ({ side, team, loss, equipment, money, show }: Props) => {
+  return (
+    <div className={`moneybox ${side} ${team} ${show ? "show" : "hide"}`}>
+      <div className="loss_container">
+        <LossBox side={team} active={(loss - 1400) / 500 >= 4} />
+        <LossBox side={team} active={(loss - 1400) / 500 >= 3} />
+        <LossBox side={team} active={(loss - 1400) / 500 >= 2} />
+        <LossBox side={team} active={(loss - 1400) / 500 >= 1} />
+      </div>
+      <div className="money_container">
+        <div className="title">Loss Bonus</div>
+        <div className="value">${loss}</div>
+      </div>
+      <div className="money_container">
+        <div className="title">Team Money</div>
+        <div className="value">${money}</div>
+      </div>
+      <div className="money_container">
+        <div className="title">Equipment Value</div>
+        <div className="value">${equipment}</div>
+      </div>
+    </div>
+  );
+};
+export default Money;

src/HUD/SideBoxes/SideBox.tsx

@@ -1,49 +1,32 @@
-import React from 'react';
+import { useState } from 'react';
 import './sideboxes.scss'
-import {configs, hudIdentity} from './../../App';
-import { apiUrl } from '../../api/api';
+import { apiUrl } from './../../API';
+import { useConfig, useOnConfigChange } from '../../API/contexts/actions';
+import { hudIdentity } from '../../API/HUD';
 
-export default class SideBox extends React.Component<{ side: 'left' | 'right', hide: boolean}, { title: string, subtitle: string, image?: string }> {
-	constructor(props: any) {
-		super(props);
-		this.state = {
-            title:'Title',
-            subtitle:'Content',
-		}
-	}
+const Sidebox = ({side, hide} : { side: 'left' | 'right', hide: boolean}) => {
+    const [ image, setImage ] = useState<string | null>(null);
+    const data = useConfig('display_settings');
 
-	componentDidMount() {
-        configs.onChange((data:any) => {
-            if(!data) return;
-            const display = data.display_settings;
-            if(!display) return;
-            if(`${this.props.side}_title` in display){
-                this.setState({title:display[`${this.props.side}_title`]})
-            }
-            if(`${this.props.side}_subtitle` in display){
-                this.setState({subtitle:display[`${this.props.side}_subtitle`]})
-            }
-            if(`${this.props.side}_image` in display){
-                const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${this.props.side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
-                this.setState({image:imageUrl})
-            }
-        });
-	}
-	
-	render() {
-        const { image, title, subtitle} = this.state;
-        if(!title) return '';
-		return (
-			<div className={`sidebox ${this.props.side} ${this.props.hide ? 'hide':''}`}>
-                <div className="title_container">
-                    <div className="title">{title}</div>
-                    <div className="subtitle">{subtitle}</div>
-                </div>
-                <div className="image_container">
-                    {image ? <img src={image} id={`image_left`} alt={'Left'}/>:''}
-                </div>
+    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>
+    );
 }
+
+export default Sidebox;

src/HUD/SideBoxes/UtilityLevel.tsx

@@ -1,12 +1,11 @@
-import React from "react";
 import Weapon from "./../Weapon/Weapon";
-import { Player, WeaponRaw, Side } from "csgogsi-socket";
+import { Player, Side, WeaponRaw } from "csgogsi";
 
 interface Props {
-    sides?: 'reversed',
-    show: boolean;
-    side: 'CT' | 'T',
-    players: Player[]
+  sides?: "reversed";
+  show: boolean;
+  side: "CT" | "T";
+  players: Player[];
 }
 
 function utilityState(amount: number) {
@@ -49,17 +48,30 @@ function utilityColor(amount: number) {
 
 function sum(grenades: WeaponRaw[], name: string) {
   return (
-    grenades.filter(grenade => grenade.name === name).reduce((prev, next) => ({ ...next, ammo_reserve: (prev.ammo_reserve || 0) + (next.ammo_reserve || 0) }), { name: "", ammo_reserve: 0 })
+    grenades.filter((grenade) => grenade.name === name).reduce(
+      (prev, next) => ({
+        ...next,
+        ammo_reserve: (prev.ammo_reserve || 0) + (next.ammo_reserve || 0),
+      }),
+      { name: "", ammo_reserve: 0 },
+    )
       .ammo_reserve || 0
   );
 }
 
 function parseGrenades(players: Player[], side: Side) {
   const grenades = players
-    .filter(player => player.team.side === side)
-    .map(player => Object.values(player.weapons).filter(weapon => weapon.type === "Grenade"))
+    .filter((player) => player.team.side === side)
+    .map((player) =>
+      Object.values(player.weapons).filter((weapon) =>
+        weapon.type === "Grenade"
+      )
+    )
     .flat()
-    .map(grenade => ({ ...grenade, name: grenade.name.replace("weapon_", "") }));
+    .map((grenade) => ({
+      ...grenade,
+      name: grenade.name.replace("weapon_", ""),
+    }));
   return grenades;
 }
 
@@ -69,40 +81,44 @@ export function summarise(players: Player[], side: Side) {
     hg: sum(grenades, "hegrenade"),
     flashes: sum(grenades, "flashbang"),
     smokes: sum(grenades, "smokegrenade"),
-    inc: sum(grenades, "incgrenade") + sum(grenades, "molotov")
+    inc: sum(grenades, "incgrenade") + sum(grenades, "molotov"),
   };
 }
 
-class GrenadeContainer extends React.PureComponent<{ grenade: string; amount: number }> {
-  render() {
-    return (
-      <div className="grenade_container">
-        <div className="grenade_image">
-          <Weapon weapon={this.props.grenade} active={false} isGrenade />
-        </div>
-        <div className="grenade_amount">x{this.props.amount}</div>
+const GrenadeContainer = (
+  { grenade, amount }: { grenade: string; amount: number },
+) => {
+  return (
+    <div className="grenade_container">
+      <div className="grenade_image">
+        <Weapon weapon={grenade} active={false} isGrenade />
       </div>
-    );
-  }
-}
+      <div className="grenade_amount">x{amount}</div>
+    </div>
+  );
+};
 
-export default class SideBox extends React.Component<Props> {
-    render() {
-        const grenades = summarise(this.props.players, this.props.side);
-        const total = Object.values(grenades).reduce((a, b) => a+b, 0);
-        return (
-            <div className={`utilitybox ${this.props.side || ''} ${this.props.show ? "show" : "hide"}`}>
-                <div className="title_container">
-                    <div className="title">Utility Level -&nbsp;</div>
-                    <div className="subtitle" style={{color: utilityColor(total)}}>{utilityState(total)}</div>
-                </div>
-                <div className="grenades_container">
-                    <GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
-                    <GrenadeContainer grenade={this.props.side === 'CT' ? 'incgrenade' : 'molotov'} amount={grenades.inc} />
-                    <GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
-                    <GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
-                </div>
-            </div>
-        );
-    }
-}
+const SideBox = ({ players, side, show }: Props) => {
+  const grenades = summarise(players, side);
+  const total = Object.values(grenades).reduce((a, b) => a + b, 0);
+  return (
+    <div className={`utilitybox ${side || ""} ${show ? "show" : "hide"}`}>
+      <div className="title_container">
+        <div className="title">Utility Level -&nbsp;</div>
+        <div className="subtitle" style={{ color: utilityColor(total) }}>
+          {utilityState(total)}
+        </div>
+      </div>
+      <div className="grenades_container">
+        <GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
+        <GrenadeContainer
+          grenade={side === "CT" ? "incgrenade" : "molotov"}
+          amount={grenades.inc}
+        />
+        <GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
+        <GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
+      </div>
+    </div>
+  );
+};
+export default SideBox;

src/HUD/TeamOverview/TeamOverview.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import * as I from '../../api/interfaces';
-import "./teamoverview.scss";
-
-interface IProps {
-    team: I.Team,
-    show: boolean,
-    veto: I.Veto | null
-}
-
-export default class TeamOverview extends React.Component<IProps> {
-	render() {
-        if(!this.props.team) return null;
-		return (
-            null
-        );
-	}
-}

src/HUD/Timers/BombTimer.tsx

@@ -1,49 +1,18 @@
-import React from "react";
-
-import { GSI } from "./../../App";
-import BombTimer from "./Countdown";
+import { MAX_TIMER, useBombTimer } from "./Countdown";
 import { C4 } from "./../../assets/Icons";
 
-export default class Bomb extends React.Component<any, { height: number; show: boolean }> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      height: 0,
-      show: false
-    };
-  }
-  hide = () => {
-    this.setState({ show: false, height: 100 });
-  };
-  componentDidMount() {
-    const bomb = new BombTimer(time => {
-      let height = time > 40 ? 4000 : time * 100;
-      this.setState({ height: height / 40 });
-    });
-    bomb.onReset(this.hide);
-    GSI.on("data", data => {
-      if (data.bomb && data.bomb.countdown) {
-        if (data.bomb.state === "planted") {
-          this.setState({ show: true });
-          return bomb.go(data.bomb.countdown);
-        }
-        if (data.bomb.state !== "defusing") {
-          this.hide();
-        }
-      } else {
-        this.hide();
-      }
-    });
-  }
-
-  render() {
-    return (
-      <div id={`bomb_container`}>
-        <div className={`bomb_timer ${this.state.show ? "show" : "hide"}`} style={{ height: `${this.state.height}%` }}></div>
-        <div className={`bomb_icon ${this.state.show ? "show" : "hide"}`}>
-          <C4 fill="white" />
-        </div>
+const Bomb = () => {
+  const bombData = useBombTimer();
+  const show = bombData.state === "planted" || bombData.state === "defusing";
+  
+  return (
+    <div id={`bomb_container`}>
+      <div className={`bomb_timer ${show ? "show" : "hide"}`} style={{ height: `${bombData.bombTime*100/MAX_TIMER.bomb}%` }}></div>
+      <div className={`bomb_icon ${show ? "show" : "hide"}`}>
+        <C4 fill="white" />
       </div>
-    );
-  }
+    </div>
+  );
 }
+
+export default Bomb;

src/HUD/Timers/Countdown.ts

@@ -1,46 +1,83 @@
-export default class Countdown {
-    last: number;
-    time: number;
-    step: (time: number) => void;
-    on: boolean;
-    resetFunc?: Function;
+import { Bomb, Events, Player } from "csgogsi";
+import { useEffect, useRef, useState } from "react";
+import { GSI } from "../../API/HUD";
 
-    constructor(step: (time: number) => void){
-        this.last = 0;
-        this.time = 0;
-        this.on = false;
-        this.step = step;
-    }
-    onReset(func: Function) {
-        this.resetFunc = func;
-    }
-    stepWrapper = (time: number) =>{
-        if(this.time < 0) return this.reset();
-        if(!this.on) return this.reset();
-        if(!this.last) this.last = time;
-        if(this.time !== Number((this.time - (time - this.last)/1000))){
-            this.time = Number((this.time - (time - this.last)/1000));
-            this.step(this.time);
+export const MAX_TIMER = {
+    planting: 3,
+    defuse_kit: 5,
+    defuse_nokit: 10,
+    bomb: 40
+}
+const findNewTime = (current: number, newTime: number) => Math.abs(current - newTime) > 2 ? newTime : current;
+
+export const useBombTimer = () => {
+    const [ player, setPlayerSteamId ] = useState<Player | null>(null);
+    const [ bombState, setBombState ] = useState<Bomb["state"] | null>(null);
+    const [ site, setBombSite ] = useState<string | null>(null);
+
+    const [ plantTime, setPlantTime ] = useState(0);
+    const [ bombTime, setBombTime ] = useState(0);
+    const [ defuseTime, setDefuseTime ] = useState(0);
+
+    // Inner loop logic
+    const previousTimeRef = useRef(0);
+    const rAFRef = useRef<number>();
+
+    useEffect(() => {
+        const onData: Events["data"] = data => {
+            const { bomb } = data;
+
+            const bombPlayer = bomb?.player || null;
+            const state = bomb?.state || null;
+            const site = bomb?.site || null;
+
+            const countdown = bomb?.countdown || 0;
+
+            setPlayerSteamId(bombPlayer);
+            setBombState(state);
+            setBombSite(site);
+
+            const plantNewTime = state === "planting" ? countdown : 0;
+            const defuseNewTime = state === "defusing" ? countdown : 0;
+
+
+            setPlantTime(curr => findNewTime(curr, plantNewTime));
+            setDefuseTime(curr => findNewTime(curr, defuseNewTime));
+            setBombTime(p => state === "planted" ? findNewTime(p, countdown) : p);      
+        }
+
+        GSI.on("data", onData);
+
+        const animationFrame = (time: number) => {
+            if(previousTimeRef.current){
+                const deltaTime = time - previousTimeRef.current;
+                const dTs = deltaTime/1000;
+          
+                setPlantTime(p => p <= 0 ? 0 : p - dTs);
+                setDefuseTime(p => p <= 0 ? 0 : p - dTs);
+                setBombTime(p => p <= 0 ? 0 : p - dTs);
+            }
+            previousTimeRef.current = time;
+            rAFRef.current = requestAnimationFrame(animationFrame);
+        }
+
+        rAFRef.current = requestAnimationFrame(animationFrame);
+
+        return () => {
+            GSI.off("data", onData);
+            if(rAFRef.current) cancelAnimationFrame(rAFRef.current);
         }
-        this.last =time;
 
 
-        if(this.last) requestAnimationFrame(this.stepWrapper)
-    }
+    }, []);
 
-    go(duration: string | number){
-        //console.log("STARTED WITH ", duration);
-        if(typeof duration === "string") duration = Number(duration);
-        if(Math.abs(duration - this.time) > 2) this.time = duration;
-        this.on = true;
-        if(!this.last ) requestAnimationFrame(this.stepWrapper);
 
-    }
-
-    reset(){
-        this.last = 0;
-        this.time = 0;
-        this.on = false;
-        if(this.resetFunc) this.resetFunc();
-    }
-}
+    return ({
+        state: bombState,
+        player,
+        site,
+        defuseTime,
+        bombTime,
+        plantTime
+    })
+}

src/HUD/Timers/PlantDefuse.tsx

@@ -1,41 +1,39 @@
-import React from "react";
-
 import { Timer } from "../MatchBar/MatchBar";
 import { Player } from "csgogsi";
 import * as I from "./../../assets/Icons";
+import { MAX_TIMER } from "./Countdown";
 
 interface IProps {
   timer: Timer | null;
   side: "right" | "left"
 }
 
-export default class Bomb extends React.Component<IProps> {
-  getCaption = (type: "defusing" | "planting", player: Player | null) => {
-    if(!player) return null;
-    if(type === "defusing"){
-      return <>
-        <I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
-        <div className={'CT'}>{player.name} is defusing the bomb</div>
-      </>;
-    }
+const getCaption = (type: "defusing" | "planting", player: Player | null) => {
+  if(!player) return null;
+  if(type === "defusing"){
     return <>
-      <I.SmallBomb height={22} fill="var(--color-new-t)"/>
-      <div className={'T'}>{player.name} is planting the bomb</div>
+      <I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
+      <div className={'CT'}>{player.name} is defusing the bomb</div>
     </>;
   }
-  render() {
-    const { side, timer } = this.props;
-    return (
-      <div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
-        {
-          timer ?
-          <div className={`defuse_plant_caption`}>
-            {this.getCaption(timer.type, timer.player)}
-          </div> : null
-        }
-          
-          <div className="defuse_plant_bar" style={{ width: `${(timer && timer.width) || 0}%` }}></div>
-      </div>
-    );
-  }
+  return <>
+    <I.SmallBomb height={22} fill="var(--color-new-t)"/>
+    <div className={'T'}>{player.name} is planting the bomb</div>
+  </>;
 }
+const Bomb = ({ timer, side }: IProps) =>{ 
+  if(!timer) return null;
+  return (
+    <div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
+      {
+        timer ?
+        <div className={`defuse_plant_caption`}>
+          {getCaption(timer.type, timer.player)}
+        </div> : null
+      }
+        
+        <div className="defuse_plant_bar" style={{ width: `${(timer.time * 100 / (timer.type === "planting" ? MAX_TIMER.planting : timer.player?.state.defusekit ? MAX_TIMER.defuse_kit : MAX_TIMER.defuse_nokit ))}%` }}></div>
+    </div>
+  );
+}
+export default Bomb;

src/HUD/Tournament/Ladder.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import * as I from './../../api/interfaces';
+import * as I from './../../API/types';
+import { apiUrl } from '../../API';
 
 interface MatchData {
 	left: { name: string; score: string | number; logo: string };
@@ -11,83 +11,79 @@ interface Props {
     teams: I.Team[]
 }
 
-export default class Ladder extends React.Component<Props> {
-	joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
-		const { tournament } = this.props;
-		if (!tournament || !matchup) return matchup;
+const joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
+	if (!matchup) return matchup;
 
-		if (matchup.parents.length) return matchup;
+	if (matchup.parents.length) return matchup;
 
-		const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
-		if (!parents.length) return matchup;
-		matchup.parents.push(...parents.map(parent => this.joinParents(parent, matchups)));
+	const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
+	if (!parents.length) return matchup;
+	matchup.parents.push(...parents.map(parent => joinParents(parent, matchups)));
 
-		return matchup;
+	return matchup;
+};
+
+const copyMatchups = (currentMatchups: I.TournamentMatchup[]): I.DepthTournamentMatchup[] => {
+	const matchups = JSON.parse(JSON.stringify(currentMatchups)) as I.DepthTournamentMatchup[];
+	return matchups;
+};
+
+const setDepth = (matchups: I.DepthTournamentMatchup[], matchup: I.DepthTournamentMatchup, depth: number, force = false) => {
+	const getParents = (matchup: I.DepthTournamentMatchup) => {
+		return matchups.filter(parent => parent.loser_to === matchup._id || parent.winner_to === matchup._id);
 	};
 
-	copyMatchups = (): I.DepthTournamentMatchup[] => {
-		if (!this.props.tournament) return [];
-		const matchups = JSON.parse(JSON.stringify(this.props.tournament.matchups)) as I.DepthTournamentMatchup[];
-		return matchups;
+	if (!matchup.depth || force) {
+		matchup.depth = depth;
+		getParents(matchup).forEach(matchup => setDepth(matchups, matchup, depth + 1));
+	}
+	if (matchup.depth <= depth - 1) {
+		setDepth(matchups, matchup, depth - 1, true);
+	}
+	return matchup;
+};
+
+const getMatch = ({ matchup, matches, teams: allTeams}: { matches: I.Match[], teams: I.Team[], matchup: I.TournamentMatchup}) => {
+	const matchData: MatchData = {
+		left: { name: 'TBD', score: '-', logo: '' },
+		right: { name: 'TBD', score: '-', logo: '' }
 	};
+	const match = matches.find(match => match.id === matchup.matchId);
+	if (!match) return matchData;
+	const teams = [
+		allTeams.find(team => team._id === match.left.id),
+		allTeams.find(team => team._id === match.right.id)
+	];
+	if (teams[0]) {
+		matchData.left.name = teams[0].name;
+		matchData.left.score = match.left.wins;
+		matchData.left.logo = teams[0].logo;
+	}
+	if (teams[1]) {
+		matchData.right.name = teams[1].name;
+		matchData.right.score = match.right.wins;
+		matchData.right.logo = teams[1].logo;
+	}
+	return matchData;
+};
 
-	setDepth = (matchups: I.DepthTournamentMatchup[], matchup: I.DepthTournamentMatchup, depth: number, force = false) => {
-		const getParents = (matchup: I.DepthTournamentMatchup) => {
-			return matchups.filter(parent => parent.loser_to === matchup._id || parent.winner_to === matchup._id);
-		};
-
-		if (!matchup.depth || force) {
-			matchup.depth = depth;
-			getParents(matchup).forEach(matchup => this.setDepth(matchups, matchup, depth + 1));
-		}
-		if (matchup.depth <= depth - 1) {
-			this.setDepth(matchups, matchup, depth - 1, true);
-		}
-		return matchup;
-	};
-
-	getMatch = (matchup: I.TournamentMatchup) => {
-		const { matches } = this.props;
-		const matchData: MatchData = {
-			left: { name: 'TBD', score: '-', logo: '' },
-			right: { name: 'TBD', score: '-', logo: '' }
-		};
-		const match = matches.find(match => match.id === matchup.matchId);
-		if (!match) return matchData;
-		const teams = [
-			this.props.teams.find(team => team._id === match.left.id),
-			this.props.teams.find(team => team._id === match.right.id)
-		];
-		if (teams[0]) {
-			matchData.left.name = teams[0].name;
-			matchData.left.score = match.left.wins;
-			matchData.left.logo = teams[0].logo;
-		}
-		if (teams[1]) {
-			matchData.right.name = teams[1].name;
-			matchData.right.score = match.right.wins;
-			matchData.right.logo = teams[1].logo;
-		}
-		return matchData;
-	};
-
-	renderBracket = (
+const Ladder = ({ tournament, matches, teams }: Props) => {
+	const renderBracket = (
 		matchup: I.DepthTournamentMatchup | null | undefined,
 		depth: number,
 		fromChildId: string | undefined,
 		childVisibleParents: number,
 		isLast = false
 	) => {
-		const { tournament, matches } = this.props;
 		if (!matchup || !tournament) return null;
-		const match = this.getMatch(matchup);
+		const match = getMatch({ teams: teams, matches: matches, matchup});
 
 		if (fromChildId === matchup.loser_to) return null;
 		const parentsToRender = matchup.parents.filter(matchupParent => matchupParent.loser_to !== matchup._id);
 		if (matchup.depth > depth) {
 			return (
 				<div className="empty-bracket">
-					{this.renderBracket(matchup, depth + 1, fromChildId, parentsToRender.length)}
+					{renderBracket(matchup, depth + 1, fromChildId, parentsToRender.length)}
 					<div className="connector"></div>
 				</div>
 			);
@@ -97,8 +93,8 @@ export default class Ladder extends React.Component<Props> {
 		return (
 			<div className={`bracket depth-${depth}`}>
 				<div className="parent-brackets">
-					{this.renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
-					{this.renderBracket(matchup.parents[1], depth + 1, matchup._id, parentsToRender.length)}
+					{renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
+					{renderBracket(matchup.parents[1], depth + 1, matchup._id, parentsToRender.length)}
 				</div>
 				<div className="bracket-details">
 					<div
@@ -110,14 +106,14 @@ export default class Ladder extends React.Component<Props> {
 					<div className={`match-details ${isCurrent ? 'current':''}`}>
 						<div className="team-data">
 							<div className="team-logo">
-								{match.left.logo ? <img src={match.left.logo} alt="Logo" /> : null}
+								{match.left.logo ? <img src={`${apiUrl}api/teams/logo/direct/${match.left.logo}`} alt="Logo" /> : null}
 							</div>
 							<div className="team-name">{match.left.name}</div>
 							<div className="team-score">{match.left.score}</div>
 						</div>
 						<div className="team-data">
 							<div className="team-logo">
-								{match.right.logo ? <img src={match.right.logo} alt="Logo" /> : null}
+								{match.right.logo ? <img src={`${apiUrl}api/teams/logo/direct/${match.right.logo}`} alt="Logo" /> : null}
 							</div>
 							<div className="team-name">{match.right.name}</div>
 							<div className="team-score">{match.right.score}</div>
@@ -132,14 +128,13 @@ export default class Ladder extends React.Component<Props> {
 		);
 	};
 
-	render() {
-		const { tournament } = this.props;
 		if (!tournament) return null;
-		const matchups = this.copyMatchups();
+		const matchups = copyMatchups(tournament.playoffs.matchups);
 		const gf = matchups.find(matchup => matchup.winner_to === null);
 		if (!gf) return null;
-		const joinedParents = this.joinParents(gf, matchups);
-		const matchupWithDepth = this.setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
-		return this.renderBracket(matchupWithDepth, 0, undefined, 2, true);
-	}
+		const joinedParents = joinParents(gf, matchups);
+		const matchupWithDepth = setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
+		return renderBracket(matchupWithDepth, 0, undefined, 2, true);
 }
+
+export default Ladder;

src/HUD/Tournament/Tournament.tsx

@@ -1,62 +1,51 @@
 import React from 'react';
 import './tournament.scss';
-import { actions } from '../../App';
-import * as I from './../../api/interfaces';
-import api from '../../api/api';
+import * as I from './../../API/types';
+import api from './../../API';
 import Ladder from './Ladder';
-interface State {
-    tournament: I.Tournament | null,
-    teams: I.Team[],
-    matches: I.Match[],
-    show: boolean,
-}
-export default class Tournament extends React.Component<{}, State> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            tournament: null,
-            matches: [],
-            teams: [],
-            show: false
-        }
-    }
-    async componentDidMount() {
-        const { tournament } = await api.tournaments.get();
-        if(tournament){
-            actions.on("showTournament", async (show: string) => {
-                if(show !== "show"){
-                    return this.setState({show: false});
-                }
-                
-                this.setState({tournament}, () => {
-                    this.setState({show:true})
+import { useAction } from '../../API/contexts/actions';
+import { useEffect, useState } from 'react';
+
+const Tournament = () => {
+    const [ show, setShow ] = useState(false);
+    const [ teams, setTeams ] = useState<I.Team[]>([]);
+    const [ matches, setMatches ] = useState<I.Match[]>([]);
+    const [ tournament, setTournament ] = useState<I.Tournament | null>(null);
+    
+    useAction("showTournament", (data) => {
+        setShow(data === "show");
+    });
+
+    useEffect(() => {
+        api.tournaments.get().then(({ tournament }) => {
+            if(tournament){
+                setTournament(tournament);
+
+                Promise.allSettled([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
+                    setTeams(teams.status === "fulfilled" ? teams.value : []);
+                    setMatches(matches.status === "fulfilled" ? matches.value : []);
                 });
-            });
-            
-            Promise.all([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
-                this.setState({matches, teams});
-            });
-        }
-    }
-	render() {
-        const { tournament, matches, teams, show } = this.state;
-        if(!tournament) return null;
-		return (
-			<div className={`ladder-container ${show ? 'show':''}`}>
-                <div className="tournament-data">
-                    { tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
-                    <div className="tournament-name">
-                        {tournament.name}
-                    </div>
+            }
+        })
+    }, []);
+
+    if(!tournament) return null;
+    return (
+        <div className={`ladder-container ${show ? 'show':''}`}>
+            <div className="tournament-data">
+                { tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
+                <div className="tournament-name">
+                    {tournament.name}
                 </div>
-                <Ladder
-                    tournament={tournament}
-                    matches={matches}
-                    teams={teams}
-                />
-
             </div>
-		);
-	}
+            <Ladder
+                tournament={tournament}
+                matches={matches}
+                teams={teams}
+            />
 
+        </div>
+    );
 }
+
+export default React.memo(Tournament);

src/HUD/Trivia/Trivia.tsx

@@ -1,43 +1,26 @@
-import React from 'react';
 import './trivia.scss';
+import { useAction, useConfig } from '../../API/contexts/actions';
+import React, { useState } from 'react';
 
-import {configs, actions} from './../../App';
+const Trivia = () => {
+    const [ show, setShow ] = useState(false);
+    
+    const data = useConfig('trivia');
 
-export default class Trivia extends React.Component<any, { title: string, content: string, show: boolean }> {
-	constructor(props: any) {
-		super(props);
-		this.state = {
-            title:'Title',
-            content:'Content',
-            show: false
-		}
-	}
+    useAction('triviaState', (state) => {
+        setShow(state === "show");
+    });
 
-	componentDidMount() {
-        configs.onChange((data:any) => {
-            if(!data) return;
-            const trivia = data.trivia;
-            if(!trivia) return;
-
-            if(trivia.title && trivia.content){
-                this.setState({title:trivia.title, content:trivia.content})
-            }
-        });
-        actions.on("triviaState", (state: any) => {
-            this.setState({show: state === "show"})
-        });
-        actions.on("toggleTrivia", () => {
-            this.setState({show: !this.state.show})
-        });
-	}
-	
-	render() {
-		return (
-			<div className={`trivia_container ${this.state.show ? 'show': 'hide'}`}>
-                <div className="title">{this.state.title}</div>
-                <div className="content">{this.state.content}</div>
-            </div>
-		);
-	}
+    useAction('toggleCams', () => {
+        setShow(p => !p);
+    });
 
+    return (
+        <div className={`trivia_container ${show ? 'show': 'hide'}`}>
+            <div className="title">{data?.title}</div>
+            <div className="content">{data?.content}</div>
+        </div>
+    );
 }
+
+export default React.memo(Trivia);

src/HUD/Weapon/Weapon.tsx

@@ -1,19 +1,25 @@
-import React from 'react';
-import * as Weapons from './../../assets/Weapons';
+import React from "react";
+import * as Weapons from "./../../assets/Weapons";
 
 interface IProps extends React.SVGProps<SVGSVGElement> {
-	weapon: string,
-	active: boolean,
-	isGrenade?: boolean
+  weapon: string;
+  active: boolean;
+  isGrenade?: boolean;
 }
-export default class WeaponImage extends React.Component<IProps> {
-	render() {
-		const { weapon, active, isGrenade, ...rest } = this.props;
-		const Weapon = (Weapons as any)[weapon];
-		const { className, ...svgProps } = rest;
-		if(!Weapon) return null;
-		return (
-			<Weapon fill="white" className={`${active ? 'active':''} weapon ${isGrenade ? 'grenade' : ''} ${className || ''}`} {...svgProps} />
-		);
-	}	
-}
+const WeaponImage = ({ weapon, active, isGrenade, ...rest }: IProps) => {
+  const weaponId = weapon.replace("weapon_", "");
+  const Weapon = (Weapons as any)[weaponId];
+  const { className, ...svgProps } = rest;
+  if (!Weapon) return null;
+  return (
+    <Weapon
+      fill="white"
+      className={`${active ? "active" : ""} weapon ${
+        isGrenade ? "grenade" : ""
+      } ${className || ""}`}
+      {...svgProps}
+    />
+  );
+};
+
+export default React.memo(WeaponImage);

src/api/actionManager.ts

@@ -1,65 +0,0 @@
-export default class ActionManager {
-    listeners: Map<string, Function[]>;
-
-    constructor(){
-        this.listeners = new Map();
-
-        /*this.on('data', _data => {
-        });*/
-    }
-    execute(eventName: string, argument?: any){
-        const listeners = this.listeners.get(eventName);
-        if(!listeners) return false;
-        listeners.forEach(callback => {
-            if(argument) callback(argument);
-            else callback();
-        });
-        return true;
-    }
-
-    on(eventName: string, listener: Function){
-        const listOfListeners = this.listeners.get(eventName) || [];
-        listOfListeners.push(listener);
-        this.listeners.set(eventName, listOfListeners);
-
-        return true;
-    }
-}
-export class ConfigManager {
-    listeners: Function[];
-    data: any;
-
-    constructor(){
-        this.listeners = [];
-        this.data = {};
-    }
-    save(data: any){
-        this.data = data;
-        this.execute();
-
-        /*const listeners = this.listeners.get(eventName);
-        if(!listeners) return false;
-        listeners.forEach(callback => {
-            if(argument) callback(argument);
-            else callback();
-        });
-        return true;*/
-    }
-
-    execute(){
-        const listeners = this.listeners;
-        if(!listeners || !listeners.length) return false;
-        listeners.forEach(listener => {
-            listener(this.data);
-        });
-        return true;
-    }
-
-    onChange(listener: Function){
-        const listOfListeners = this.listeners || [];
-        listOfListeners.push(listener);
-        this.listeners = listOfListeners;
-
-        return true;
-    }
-}

src/api/avatars.ts

@@ -1,24 +0,0 @@
-import api from './api';
-interface AvatarLoader {
-    loader: Promise<string>,
-    url: string,
-}
-
-export const avatars: { [key: string]: AvatarLoader } = {};
-
-export const loadAvatarURL = (steamid: string) => {
-    if(!steamid) return;
-    if(avatars[steamid]) return avatars[steamid].url;
-    avatars[steamid] = {
-        url: '',
-        loader: new Promise((resolve) => {
-            api.players.getAvatarURLs(steamid).then(result => {
-                avatars[steamid].url = result.custom || result.steam;
-                resolve(result.custom || result.custom);
-            }).catch(() => {
-                delete avatars[steamid];
-                resolve('');
-            });
-        })
-    }
-}

src/assets/Icons.tsx

@@ -1,32 +1,32 @@
-import { ReactComponent as ArmorFull } from './../assets/images/icon_armor_full_default.svg';
-import { ReactComponent as ArmorHalf } from './../assets/images/icon_armor_half_default.svg';
-import { ReactComponent as ArmorHalfHelmet } from './../assets/images/icon_armor_half_helmet_default.svg';
-import { ReactComponent as ArmorHelmet } from './../assets/images/icon_armor_helmet_default.svg';
-import { ReactComponent as ArmorNone } from './../assets/images/icon_armor_none_default.svg';
-import { ReactComponent as Blind } from './../assets/images/icon_blind.svg';
-import { ReactComponent as Bomb } from './../assets/images/icon_bomb_default.svg';
-import { ReactComponent as BombExplosion }  from './../assets/images/icon_bomb_explosion_default.svg';
-import { ReactComponent as Bullets }  from './../assets/images/icon_bullets_default.svg';
-import { ReactComponent as Burning }  from './../assets/images/icon_burning.svg';
-import { ReactComponent as C4 }  from './../assets/images/icon_c4_default.svg';
-import { ReactComponent as Defuse }  from './../assets/images/icon_defuse_default.svg';
-import { ReactComponent as Health }  from './../assets/images/icon_health_default.svg';
-import { ReactComponent as HealthFull }  from './../assets/images/icon_health_full_default.svg';
-import { ReactComponent as Hourglass }  from './../assets/images/icon_hourglass_default.svg';
-import { ReactComponent as Microphone }  from './../assets/images/icon_microphone.svg';
-import { ReactComponent as Pause }  from './../assets/images/icon_pause_default.svg';
-import { ReactComponent as Skull }  from './../assets/images/icon_skull_default.svg';
-import { ReactComponent as Timer }  from './../assets/images/icon_timer_default.svg';
-import { ReactComponent as FlashedKill } from './../assets/images/flashed_kill.svg';
-import { ReactComponent as Headshot } from './../assets/images/headshot.svg';
-import { ReactComponent as NoScope } from './../assets/images/noscope.svg';
-import { ReactComponent as SmokeKill } from './../assets/images/smoke_kill.svg';
-import { ReactComponent as Suicide } from './../assets/images/suicide.svg';
-import { ReactComponent as Wallbang } from './../assets/images/wallbang.svg';
+/// <reference types="vite-plugin-svgr/client" />
+import ArmorFull from './../assets/images/icon_armor_full_default.svg?react';
+import ArmorHalf from './../assets/images/icon_armor_half_default.svg?react';
+import ArmorHalfHelmet from './../assets/images/icon_armor_half_helmet_default.svg?react';
+import ArmorHelmet from './../assets/images/icon_armor_helmet_default.svg?react';
+import ArmorNone from './../assets/images/icon_armor_none_default.svg?react';
+import Blind from './../assets/images/icon_blind.svg?react';
+import Bomb from './../assets/images/icon_bomb_default.svg?react';
+import BombExplosion from './../assets/images/icon_bomb_explosion_default.svg?react';
+import Bullets from './../assets/images/icon_bullets_default.svg?react';
+import Burning from './../assets/images/icon_burning.svg?react';
+import C4 from './../assets/images/icon_c4_default.svg?react';
+import Defuse from './../assets/images/icon_defuse_default.svg?react';
+import Health from './../assets/images/icon_health_default.svg?react';
+import HealthFull from './../assets/images/icon_health_full_default.svg?react';
+import Hourglass from './../assets/images/icon_hourglass_default.svg?react';
+import Microphone from './../assets/images/icon_microphone.svg?react';
+import Pause from './../assets/images/icon_pause_default.svg?react';
+import Skull from './../assets/images/icon_skull_default.svg?react';
+import Timer from './../assets/images/icon_timer_default.svg?react';
+import FlashedKill from './../assets/images/flashed_kill.svg?react';
+import Headshot from './../assets/images/headshot.svg?react';
+import NoScope from './../assets/images/noscope.svg?react';
+import SmokeKill from './../assets/images/smoke_kill.svg?react';
+import Suicide from './../assets/images/suicide.svg?react';
+import Wallbang from './../assets/images/wallbang.svg?react';
 import LogoCT  from './../assets/images/logo_CT_default.png';
 import LogoT  from './../assets/images/logo_T_default.png';
-import { ReactComponent as SmallBomb }  from "./../assets/images/bomb.svg";
-
+import SmallBomb from "./../assets/images/bomb.svg?react";
 
 export {
     SmallBomb,

src/assets/Weapons.tsx

@@ -1,73 +1,73 @@
-import { ReactComponent as ak47 } from './weapons/ak47.svg';
-import { ReactComponent as aug } from './weapons/aug.svg';
-import { ReactComponent as awp } from './weapons/awp.svg';
-import { ReactComponent as bayonet } from './weapons/bayonet.svg';
-import { ReactComponent as bizon } from './weapons/bizon.svg';
-import { ReactComponent as c4 } from './weapons/c4.svg';
-import { ReactComponent as cz75a } from './weapons/cz75a.svg';
-import { ReactComponent as deagle } from './weapons/deagle.svg';
-import { ReactComponent as decoy } from './weapons/decoy.svg';
-import { ReactComponent as elite } from './weapons/elite.svg';
-import { ReactComponent as famas } from './weapons/famas.svg';
-import { ReactComponent as fiveseven } from './weapons/fiveseven.svg';
-import { ReactComponent as flashbang } from './weapons/flashbang.svg';
-import { ReactComponent as g3sg1 } from './weapons/g3sg1.svg';
-import { ReactComponent as galilar } from './weapons/galilar.svg';
-import { ReactComponent as glock } from './weapons/glock.svg';
-import { ReactComponent as hegrenade } from './weapons/hegrenade.svg';
-import { ReactComponent as hkp2000 } from './weapons/hkp2000.svg';
-import { ReactComponent as incgrenade } from './weapons/incgrenade.svg';
-import { ReactComponent as inferno } from './weapons/inferno.svg';
-import { ReactComponent as knife } from './weapons/knife.svg';
-import { ReactComponent as knife_bayonet } from './weapons/knife_bayonet.svg';
-import { ReactComponent as knife_butterfly } from './weapons/knife_butterfly.svg';
-import { ReactComponent as knife_canis } from './weapons/knife_canis.svg';
-import { ReactComponent as knife_cord } from './weapons/knife_cord.svg';
-import { ReactComponent as knife_css } from './weapons/knife_css.svg';
-import { ReactComponent as knife_falchion } from './weapons/knife_falchion.svg';
-import { ReactComponent as knife_flip } from './weapons/knife_flip.svg';
-import { ReactComponent as knife_gut } from './weapons/knife_gut.svg';
-import { ReactComponent as knife_gypsy_jackknife } from './weapons/knife_gypsy_jackknife.svg';
-import { ReactComponent as knife_karambit } from './weapons/knife_karambit.svg';
-import { ReactComponent as knife_m9_bayonet } from './weapons/knife_m9_bayonet.svg';
-import { ReactComponent as knife_outdoor } from './weapons/knife_outdoor.svg';
-import { ReactComponent as knife_push } from './weapons/knife_push.svg';
-import { ReactComponent as knife_skeleton } from './weapons/knife_skeleton.svg';
-import { ReactComponent as knife_stiletto } from './weapons/knife_stiletto.svg';
-import { ReactComponent as knife_survival_bowie } from './weapons/knife_survival_bowie.svg';
-import { ReactComponent as knife_t } from './weapons/knife_t.svg';
-import { ReactComponent as knife_tactical } from './weapons/knife_tactical.svg';
-import { ReactComponent as knife_ursus } from './weapons/knife_ursus.svg';
-import { ReactComponent as knife_widowmaker } from './weapons/knife_widowmaker.svg';
-import { ReactComponent as m249 } from './weapons/m249.svg';
-import { ReactComponent as m4a1 } from './weapons/m4a1.svg';
-import { ReactComponent as m4a1_silencer } from './weapons/m4a1_silencer.svg';
-import { ReactComponent as m4a1_silencer_off } from './weapons/m4a1_silencer_off.svg';
-import { ReactComponent as mac10 } from './weapons/mac10.svg';
-import { ReactComponent as mag7 } from './weapons/mag7.svg';
-import { ReactComponent as molotov } from './weapons/molotov.svg';
-import { ReactComponent as mp5sd } from './weapons/mp5sd.svg';
-import { ReactComponent as mp7 } from './weapons/mp7.svg';
-import { ReactComponent as mp9 } from './weapons/mp9.svg';
-import { ReactComponent as negev } from './weapons/negev.svg';
-import { ReactComponent as nova } from './weapons/nova.svg';
-import { ReactComponent as out } from './weapons/out.svg';
-import { ReactComponent as p250 } from './weapons/p250.svg';
-import { ReactComponent as p90 } from './weapons/p90.svg';
-import { ReactComponent as revolver } from './weapons/revolver.svg';
-import { ReactComponent as sawedoff } from './weapons/sawedoff.svg';
-import { ReactComponent as scar20 } from './weapons/scar20.svg';
-import { ReactComponent as sg556 } from './weapons/sg556.svg';
-import { ReactComponent as smokegrenade } from './weapons/smokegrenade.svg';
-import { ReactComponent as ssg08 } from './weapons/ssg08.svg';
-import { ReactComponent as taser } from './weapons/taser.svg';
-import { ReactComponent as tec9 } from './weapons/tec9.svg';
-import { ReactComponent as trigger_hurt } from './weapons/trigger_hurt.svg';
-import { ReactComponent as ump45 } from './weapons/ump45.svg';
-import { ReactComponent as usp_silencer } from './weapons/usp_silencer.svg';
-import { ReactComponent as usp_silencer_off } from './weapons/usp_silencer_off.svg';
-import { ReactComponent as world } from './weapons/world.svg';
-import { ReactComponent as xm1014 } from './weapons/xm1014.svg';
+import ak47 from './weapons/ak47.svg?react';
+import aug  from './weapons/aug.svg?react';
+import awp  from './weapons/awp.svg?react';
+import bayonet from './weapons/bayonet.svg?react';
+import bizon from './weapons/bizon.svg?react';
+import c4 from './weapons/c4.svg?react';
+import cz75a from './weapons/cz75a.svg?react';
+import deagle from './weapons/deagle.svg?react';
+import decoy from './weapons/decoy.svg?react';
+import elite from './weapons/elite.svg?react';
+import famas from './weapons/famas.svg?react';
+import fiveseven from './weapons/fiveseven.svg?react';
+import flashbang from './weapons/flashbang.svg?react';
+import g3sg1 from './weapons/g3sg1.svg?react';
+import galilar from './weapons/galilar.svg?react';
+import glock from './weapons/glock.svg?react';
+import hegrenade from './weapons/hegrenade.svg?react';
+import hkp2000 from './weapons/hkp2000.svg?react';
+import incgrenade from './weapons/incgrenade.svg?react';
+import inferno from './weapons/inferno.svg?react';
+import knife from './weapons/knife.svg?react';
+import knife_bayonet from './weapons/knife_bayonet.svg?react';
+import knife_butterfly from './weapons/knife_butterfly.svg?react';
+import knife_canis from './weapons/knife_canis.svg?react';
+import knife_cord from './weapons/knife_cord.svg?react';
+import knife_css from './weapons/knife_css.svg?react';
+import knife_falchion from './weapons/knife_falchion.svg?react';
+import knife_flip from './weapons/knife_flip.svg?react';
+import knife_gut from './weapons/knife_gut.svg?react';
+import knife_gypsy_jackknife from './weapons/knife_gypsy_jackknife.svg?react';
+import knife_karambit from './weapons/knife_karambit.svg?react';
+import knife_m9_bayonet from './weapons/knife_m9_bayonet.svg?react';
+import knife_outdoor from './weapons/knife_outdoor.svg?react';
+import knife_push from './weapons/knife_push.svg?react';
+import knife_skeleton from './weapons/knife_skeleton.svg?react';
+import knife_stiletto from './weapons/knife_stiletto.svg?react';
+import knife_survival_bowie from './weapons/knife_survival_bowie.svg?react';
+import knife_t from './weapons/knife_t.svg?react';
+import knife_tactical from './weapons/knife_tactical.svg?react';
+import knife_ursus from './weapons/knife_ursus.svg?react';
+import knife_widowmaker from './weapons/knife_widowmaker.svg?react';
+import m249 from './weapons/m249.svg?react';
+import m4a1 from './weapons/m4a1.svg?react';
+import m4a1_silencer from './weapons/m4a1_silencer.svg?react';
+import m4a1_silencer_off from './weapons/m4a1_silencer_off.svg?react';
+import mac10 from './weapons/mac10.svg?react';
+import mag7 from './weapons/mag7.svg?react';
+import molotov from './weapons/molotov.svg?react';
+import mp5sd from './weapons/mp5sd.svg?react';
+import mp7 from './weapons/mp7.svg?react';
+import mp9 from './weapons/mp9.svg?react';
+import negev from './weapons/negev.svg?react';
+import nova from './weapons/nova.svg?react';
+import out from './weapons/out.svg?react';
+import p250 from './weapons/p250.svg?react';
+import p90 from './weapons/p90.svg?react';
+import revolver from './weapons/revolver.svg?react';
+import sawedoff from './weapons/sawedoff.svg?react';
+import scar20 from './weapons/scar20.svg?react';
+import sg556 from './weapons/sg556.svg?react';
+import smokegrenade from './weapons/smokegrenade.svg?react';
+import ssg08 from './weapons/ssg08.svg?react';
+import taser from './weapons/taser.svg?react';
+import tec9 from './weapons/tec9.svg?react';
+import trigger_hurt from './weapons/trigger_hurt.svg?react';
+import ump45 from './weapons/ump45.svg?react';
+import usp_silencer from './weapons/usp_silencer.svg?react';
+import usp_silencer_off from './weapons/usp_silencer_off.svg?react';
+import world from './weapons/world.svg?react';
+import xm1014  from './weapons/xm1014.svg?react';
 export {
     ak47,
     aug,

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/fonts/stratum2.css

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

src/index.css

@@ -1,57 +1,69 @@
-@import "fonts/montserrat.css";
-@import "fonts/stratum2.css";
-html,
-body,
-#root {
-  width: 100%;
-  height: 100%;
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
 }
 
 body {
   margin: 0;
-  font-family: 'Stratum2', 'Montserrat', 'Roboto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /*background-image: url('./assets/bg.png');/**/
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
-@font-face {
-  font-family: 'Louis George Cafe';
-  src: local('Louis George Cafe'), url('./fonts/Louis George Cafe.ttf') format('truetype');
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
 }
 
-@font-face {
-  font-family: 'Rounded_Elegance';
-  src: local('Rounded_Elegance'), url('./fonts/Rounded_Elegance.ttf') format('truetype');
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }
-
-.layout {
-  width: 100%;
-  height: 100%;
-  perspective: 500px;
-}
-
-:root {
-  --main-panel-color: rgba(12, 15, 18, 0.85);
-  --sub-panel-color: rgba(0, 0, 0, 0.83);
-  --white-dull: rgba(10, 5, 5, 0.25);
-  --white-full: rgba(250, 250, 250, 1);
-  --white-half: rgba(250, 250, 250, 0.5);
-  --color-gray: rgba(191, 191, 191, 1.0);
-  --color-moneys: #a7d32e;
-  --dev-purple: rgba(200, 0, 255, 1);
-  --color-t: #c19511;
-  --color-ct: #5788a8;
-  --color-new-t: #f0c941;
-  --color-new-ct: #5ab8f4;
-  --color-bomb: #f22222;
-  --color-defuse: #2222f2;
-}
-
-
-

src/index.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import "./fonts/Louis George Cafe.ttf";
-import "./fonts/Rounded_Elegance.ttf";
-import App from "./App";    
-declare global {
-	interface Window {
-		ipcApi: {
-			send: (channel: string, ...arg: any) => void;
-			receive: (channel: string, func: (...arg: any) => void) => void;
-		};
-	}
-}
-
-ReactDOM.render(<App />, document.getElementById("root"));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA

src/main.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import * as process from "process";
+globalThis.process = process;
+declare global {
+	interface Window {
+		ipcApi: {
+			send: (channel: string, ...arg: any) => void;
+			receive: (channel: string, func: (...arg: any) => void) => void;
+		};
+	}
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -1,26 +1,25 @@
 {
   "compilerOptions": {
-    "noFallthroughCasesInSwitch": true,
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,77 @@
+import { PluginOption, defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+import path from 'path';
+import fs from 'fs';
+
+const getDefinitionTemplate = (variable: string, content: string) => {
+  return `export const ${variable} = ${content} as const;`;
+}
+
+const updateDefinitonFile = async ({ filePath, content }: { filePath: string, content?: string }) => {
+  const fileContent = content || await fs.promises.readFile(filePath, 'utf-8');
+  const fileName = filePath.endsWith("panel.json") ? "panel.ts" : "keybinds.ts";
+
+  try {
+    const json = JSON.parse(fileContent);
+    const variableName = filePath.endsWith("panel.json") ? "panelDefinition" : "keybindDefinition";
+    fs.writeFileSync(path.join(".", "src", "API", "contexts", fileName), getDefinitionTemplate(variableName, JSON.stringify(json, null, 2)));
+  } catch (e) {
+    console.error(`Updating ${fileName} failed:`);
+    console.log(e);
+  }
+}
+
+const settingsAndKeybindsPlugin = () => {
+  return {
+    name: 'settingsAndKeybinds',
+    enforce: 'post',
+    // HMR
+    async handleHotUpdate({ file, read }) {
+      if (file.endsWith('panel.json') || file.endsWith("keybinds.json")) {
+        console.debug(`[vite][${path.basename(file)}] Rebuilding type definitions...`);
+        const content = await read();
+
+        await updateDefinitonFile({ filePath: file, content });
+      }
+    },
+  } satisfies PluginOption
+}
+// https://vitejs.dev/config/
+
+export default defineConfig(async ({ command, mode }) => {
+
+  await updateDefinitonFile({ filePath: path.join(".", "public", "panel.json") });
+  await updateDefinitonFile({ filePath: path.join(".", "public", "keybinds.json") });
+  return (
+    {
+      plugins: [
+        react(),
+        svgr(),
+        settingsAndKeybindsPlugin()
+      ],
+      build: {
+        outDir: 'build'
+      },
+      resolve: {
+        alias: {
+          "readable-stream": "vite-compatible-readable-stream"
+        }
+      },
+      base: mode === "development" ? '/dev/' : './',
+      server: {
+        open: "http://localhost:1349/development/",
+        host: 'localhost',
+        port: 3500,
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          // Node.js global to browser globalThis
+          define: {
+            global: 'globalThis',
+          },
+        },
+      },
+    }
+  )
+})