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.
+# Logs
-
+logs
-# dependencies
+*.log
-/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
-
 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">
+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.
-	<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>
 
-# 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
+**Left Alt + V**  
-- Keybinds
+Makes radar bigger by 20px;
-- Player cam feed
-- Custom Radar
 
-## Keybinds:
+**Left Alt + C**  
-### **Left Alt + S**
+Toggles camera feed
->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
 
-## **Panel**
+#### **Panel**
-## Trivia settings
 
-|  Field|Description  |
+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 title| `Text` |
-|  Trivia content| `Text` |
 
+#### Trivia settings
 
-## Display settings
+| Field          | Description |
+| -------------- | ----------- |
+| Trivia title   | `Text`      |
+| Trivia content | `Text`      |
 
+#### Display settings
 
-|  Field|Description  |
+| Field                       | Description  |
-|--|--|
+| --------------------------- | ------------ |
-|  Left/right box's title| `Text` |
+| Left/right box's title      | `Text`       |
-|  Left/right box's title| `Text` |
+| Left/right box's subtitle   | `Text`       |
-|  Left/right box's image logo| `Image file` |
+| Left/right box's image logo | `Image file` |
 
-## Example settings
+#### **Preview**
-
-![Preview of HUDs settings](settings.png)
-
-## 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
+#### **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.
 
-## Identifying HUD
+##### **Setting up**
-In `/public` directory edit hud.json so it fits you - fill HUD's name, author, version, specify the radar and killfeed functionalities. At the end replace the thumb.png with your icon :)
 
-## Building & distributing
+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.
-To build version to distribute and move around, in the root directory run `npm run pack`. It will create the zip file for distribution. Now you can just drag and drop this file into the HUD Managers upload area.
 
-## Signing
+##### **Identifying HUD**
 
-To create Signed HUD to prevent at least from modyfing compiled Javascript files run `npm run sign`. It's the same as `npm run pack` command but with additional step of signing .js and .css files and hud.json.
+In `/public` directory, edit `hud.json` so it fits you - fill HUD's name, author, version, specify the radar and killfeed functionalities. At the end, replace the `thumb.png` with your icon :)
 
-  
+##### **Building & distributing**
- ## File structure
- The HUD is seperated into two parts - the API part, that connects to the HUD Manager API and communicate with it: `src/App.tsx` file and `src/api` directory. Usually, you don't want to play with it, so the whole runs without a problem.
- The second part is the render part - `src/HUD`, `src/fonts` and `src/assets` are the directories you want to modify. In the `src/HUD` each element of the HUD is seperated into its own folder. Styles are kept in the `src/HUD/styles`. Names are quite self-explanatory, and to modify style of the element you should just find  the styling by the file and class name.
 
+To build a version to distribute and move around, in the root directory, run `npm run pack`. It will create the zip file for distribution. Now you can just drag and drop this file into the LHM.gg upload area.
 
-## `panel.json` API
+##### **Signing**
-To get the incoming data from the HUD Manager, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` `componentDidMount()` method:
+
-```javascript
+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`.
-import {configs} from  './../../App';
+
-...
+##### **File structure**
-configs.onChange((data:any) => {
+
-	if(!data) return;
+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.
-	
+
-	const  display = data.display_settings;
+##### **panel.json API**
-	
+
-	if(!display) return;
+To get the incoming data from the LHM.gg, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` component:
-	
+
-	if(display[`${this.props.side}_title`]){
+```typescript
-		this.setState({title:display[`${this.props.side}_title`]})
+const Sidebox = ({ side, hide }: { side: "left" | "right"; hide: boolean }) => {
-	}
+  const [image, setImage] = useState<string | null>(null);
-	if(display[`${this.props.side}_subtitle`]){
+  const data = useConfig("display_settings");
-		this.setState({subtitle:display[`${this.props.side}_subtitle`]})
+
-	}
+  useOnConfigChange(
-	if(display[`${this.props.side}_image`]){
+    "display_settings",
-		this.setState({image:display[`${this.props.side}_image`]})
+    (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
+For the action input, we need to import the `actions` object and create a listener with the parameter on it.
-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`:
+
+##### **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
+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 is custom React-based component, made by Hubert Walczak, and is easily editable from css.
+
+##### **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",
+  "name": "cs2-react-hud",
-  "version": "1.0.1",
-  "homepage": "./",
   "private": true,
-  "dependencies": {
+  "version": "1.0.6",
-    "@craco/craco": "^5.7.0",
+  "type": "module",
-    "@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",
   "scripts": {
     "zip": "npm-build-zip",
-    "start": "craco start",
+    "dev": "vite --host",
-    "build": "react-scripts build",
+    "start": "vite --host",
-    "test": "react-scripts test",
+    "build": "tsc && vite build",
-    "eject": "react-scripts eject",
     "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": {
+  "dependencies": {
-    "extends": "react-app"
+    "csgogsi": "^3.0.5",
-  },
+    "jsonwebtoken": "^9.0.2",
-  "browserslist": {
+    "react": "^18.2.0",
-    "production": [
+    "react-dom": "^18.2.0",
-      ">0.2%",
+    "simple-peer": "^9.11.1",
-      "not dead",
+    "simple-websockets": "^1.2.0",
-      "not op_mini all"
+    "socket.io-client": "^4.7.2",
-    ],
+    "uuid": "^9.0.1"
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   },
+  "license": "MIT",
   "devDependencies": {
-    "@types/history": "^4.7.5",
+    "@types/react": "^18.2.15",
-    "@types/socket.io-client": "^1.4.32",
+    "@types/react-dom": "^18.2.7",
-    "@types/uuid": "^8.3.1",
+    "@types/simple-peer": "^9.11.5",
-    "internal-ip": "^6.2.0",
+    "@types/uuid": "^9.0.4",
-    "jsonwebtoken": "^8.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "npm-build-zip": "^1.0.2",
+    "@typescript-eslint/parser": "^6.0.0",
-    "open": "^8.0.2",
+    "@vitejs/plugin-react": "^4.0.3",
-    "sass": "^1.32.5",
+    "eslint": "^8.45.0",
-    "socket.io-client": "^2.4.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",
+    "name":"LHM CS2 Default HUD",
-    "version":"1.0.0",
+    "version":"1.0.6",
     "author":"Lexogrine",
     "legacy": false,
     "radar": true,
     "killfeed": false,
     "game":"cs2",
     "boltobserv":{
-        "css":true,
+        "css":false,
-        "maps":true
+        "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/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');
+import path from 'path';
-const fs = require('fs');
+import fs from 'fs';
-const crypto = require('crypto');
+import crypto from 'crypto';
-const jwt = require('jsonwebtoken');
+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 api from '..';
-import { socket as Socket } from "../../App";
+import { socket } from '../socket';
-const Peer = require('simple-peer');
+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 * as I from './types';
-import queryString from 'query-string';
 import { MapConfig } from '../HUD/Radar/LexoRadar/maps';
 
 
-const query = queryString.parseUrl(window.location.href).query;
+const query = new URLSearchParams(window.location.search);
-export const variant = query?.variant || "default";
+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.get("isProd");
-
-export const isDev = !query.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;
+  _id: string;
-	loser_to: string | null; // IDs of Matchups, not Matches
+  loser_to: string | null; // IDs of Matchups, not Matches
-	winner_to: string | null;
+  winner_to: string | null;
-	label: string;
+  label: string;
-	matchId: string | null;
+  matchId: string | null;
-	parents: TournamentMatchup[];
+  parents: TournamentMatchup[];
 }
 
 export interface DepthTournamentMatchup extends TournamentMatchup {
-	depth: number;
+  depth: number;
-	parents: DepthTournamentMatchup[];
+  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;
+  _id: string;
-	name: string;
+  name: string;
-	logo: string;
+  logo: string;
-	matchups: TournamentMatchup[];
+  groups: TournamentStage[];
-	autoCreate: boolean;
+  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"//
-| "knife_css"//--
+  | "knife_css"//--
-| "knife_butterfly"//
+  | "knife_butterfly"//
-| "knife_falchion"//
+  | "knife_falchion"//
-| "knife_flip"//
+  | "knife_flip"//
-| "knife_outdoor" // Nomad Knife
+  | "knife_outdoor" // Nomad Knife
-| "knife_gut"//
+  | "knife_gut"//
-| "knife_gypsy_jackknife"//
+  | "knife_gypsy_jackknife"//
-| "knife_karambit"// 
+  | "knife_karambit"// 
-| "knife_bayonet" //
+  | "knife_bayonet" //
-| "knife_cord" //
+  | "knife_cord" //
-| "knife_m9_bayonet"//
+  | "knife_m9_bayonet"//
-| "knife_push" // Shadow daggers
+  | "knife_push" // Shadow daggers
-| "knife_stiletto"//
+  | "knife_stiletto"//
-| "knife_survival_bowie"//
+  | "knife_survival_bowie"//
-| "knife_t"//
+  | "knife_t"//
-| "knife_skeleton" //
+  | "knife_skeleton" //
-| "knife_tactical"//
+  | "knife_tactical"//
-| "knife_ursus"//
+  | "knife_ursus"//
-| "knife_widowmaker"//
+  | "knife_widowmaker"//
-| "knife_canis";//
+  | "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 './API/socket';
-import { loadAvatarURL } from './api/avatars';
+import { Match } from './API/types';
-import ActionManager, { ConfigManager } from './api/actionManager';
+import api from './API';
+import { GSI } from './API/HUD';
+import { socket } from './API/socket';
 
-import { CSGO, PlayerExtension, GSISocket, CSGORaw } from "csgogsi-socket";
+function App() {
-import { Match } from './api/interfaces';
+  const [ game, setGame ] = useState<CSGO | null>(null);
-import { initiateConnection } from './HUD/Camera/mediaStream';
+  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){
+    setGame(game);
-	window.parent.ipcApi.receive('raw', (data: CSGORaw, damage?: RoundDamage[]) => {
+  }, []);
-		if(damage){
+
-			GSI.damage = damage;
+  if (!game) return null;
-		}
+  return (
-		GSI.digest(data);
+    <SettingsProvider>
-	});
+      <Layout game={game} match={match} />
+    </SettingsProvider>
+  );
 }
 
-type RoundPlayerDamage = {
+export default App
-	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;

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

src/HUD/Indicators/Defuse.tsx

@@ -1,15 +1,11 @@
-import React from 'react';
+import { Player } from 'csgogsi';
-import { Player } from 'csgogsi-socket';
 import {Defuse as DefuseIcon} from './../../assets/Icons';
-export default class Defuse extends React.Component<{ player: Player }> {
+const Defuse = ({ player }: { player: Player }) => {
-    render() {
-        const { player } = this.props;
         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 React, { useState } from 'react';
-import { GSI } from './../../App';
+
-import { KillEvent, Player } from 'csgogsi-socket';
+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)[] }> {
+const Killfeed = () => {
-
+    const [ events, setEvents ] = useState<(BombEvent | ExtendedKillEvent)[]>([]);
-    constructor(props: any){
+    onGSI("kill", kill => {
-        super(props);
+        setEvents(ev => [...ev, {...kill, type: 'kill'}]);
-        this.state = {
+    }, []);
-            events: []
+    onGSI("data", data => {
-        }
+        if(data.round && data.round.phase === "freezetime"){
-    }
+            if(Number(data.phase_countdowns.phase_ends_in) < 10 && events.length > 0){
-    addKill = (kill: KillEvent) => {
+                setEvents([]);
-        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:[]})
-                }
             }
-        });
+        }
-
+    }, []);
-        /*
+    return (
-        GSI.on("bombPlant", player => {
+        <div className="killfeed">
-            this.addBombEvent(player, 'plant');
+            {events.map(event => <Kill event={event}/>)}
-        })
+        </div>
-        GSI.on("bombDefuse", player => {
+    );
-            this.addBombEvent(player, 'defuse');
-        })
-
-        */
-
-	}
-	render() {
-		return (
-			<div className="killfeed">
-                {this.state.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> {
+const Layout = ({game,match}: Props) => {
-  constructor(props: Props) {
+  const [ forceHide, setForceHide ] = useState(false);
-    super(props);
+
-    this.state = {
+  useAction('boxesState', (state) => {
-      winner: null,
+    console.log("UPDATE STATE UMC", state);
-      showWin: false,
+    if (state === "show") {
-      forceHide: false
+       setForceHide(false);
+    } else if (state === "hide") {
+      setForceHide(true);
     }
-  }
+  });
 
-  componentDidMount() {
+  const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
-    GSI.on('roundEnd', score => {
+  const right = game.map.team_ct.orientation === "left" ? game.map.team_t : game.map.team_ct;
-      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 });
-      }
-    });
-  }
 
-  getVeto = () => {
+  const leftPlayers = game.players.filter(player => player.team.side === left.side);
-    const { game, match } = this.props;
+  const rightPlayers = game.players.filter(player => player.team.side === right.side);
-    const { map } = game;
+  const isFreezetime = (game.round && game.round.phase === "freezetime") || game.phase_countdowns.phase === "freezetime";
-    if (!match) return null;
+  return (
-    const mapName = map.name.substring(map.name.lastIndexOf('/') + 1);
+    <div className="layout">
-    const veto = match.vetos.find(veto => veto.mapName === mapName);
+      <div className={`players_alive`}>
-    if (!veto) return null;
+        <div className="title_container">Players alive</div>
-    return veto;
+        <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>
-  render() {
+          <div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
-    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}
-          />
         </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";
-import * as I from "csgogsi-socket";
-import { Match, Veto } from '../../api/interfaces';
 import TeamLogo from "../MatchBar/TeamLogo";
 import "./mapseries.scss";
+import { Match, Veto } from "../../API/types";
 
 interface IProps {
-    match: Match | null;
+  match: Match | null;
-    teams: I.Team[];
+  teams: I.Team[];
-    isFreezetime: boolean;
+  isFreezetime: boolean;
-    map: I.Map
+  map: I.Map;
 }
 
 interface IVetoProps {
-    veto: Veto;
+  veto: Veto;
-    teams: I.Team[];
+  teams: I.Team[];
-    active: boolean;
+  active: boolean;
 }
 
-class VetoEntry extends React.Component<IVetoProps> {
+const VetoEntry = ({ veto, teams, active }: IVetoProps) => {
-    render(){
+  return (
-        const { veto, teams, active } = this.props;
+    <div className={`veto_container ${active ? "active" : ""}`}>
-        return <div className={`veto_container ${active ? 'active' : ''}`}>
+      <div className="veto_map_name">
-            <div className="veto_map_name">
+        {veto.mapName}
-                {veto.mapName}
+      </div>
-            </div>
+      <div className="veto_picker">
-            <div className="veto_picker">
+        <TeamLogo team={teams.filter((team) => team.id === veto.teamId)[0]} />
-                <TeamLogo team={teams.filter(team => team.id === veto.teamId)[0]} />
+      </div>
-            </div>
+      <div className="veto_winner">
-            <div className="veto_winner">
+        <TeamLogo team={teams.filter((team) => team.id === veto.winner)[0]} />
-                <TeamLogo team={teams.filter(team => team.id === veto.winner)[0]} />
+      </div>
-            </div>
+      <div className="veto_score">
-            <div className="veto_score">
+        {Object.values(veto.score || ["-", "-"]).sort().join(":")}
-                {Object.values((veto.score || ['-','-'])).sort().join(":")}
+      </div>
-            </div>
+      <div className="active_container">
-            <div className='active_container'>
+        <div className="active">Currently playing</div>
-                <div className='active'>Currently playing</div>
+      </div>
-            </div>
+    </div>
-        </div>
+  );
-    }
+};
-}
 
-export default class MapSeries extends React.Component<IProps> {
+const MapSeries = ({ match, teams, isFreezetime, map }: IProps) => {
-
+  if (!match || !match.vetos.length) return null;
-    render() {
+  return (
-        const { match, teams, isFreezetime, map } = this.props;
+    <div className={`map_series_container ${isFreezetime ? "show" : "hide"}`}>
-        if (!match || !match.vetos.length) return null;
+      <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'}`}>
+          <VetoEntry
-                <div className="title_bar">
+            key={`${match.id}${veto.mapName}${veto.teamId}${veto.side}`}
-                    <div className="picked">Picked</div>
+            veto={veto}
-                    <div className="winner">Winner</div>
+            teams={teams}
-                    <div className="score">Score</div>
+            active={map.name.includes(veto.mapName)}
-                </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>
         );
-    }
+      })}
-}
+    </div>
+  );
+};
+export default MapSeries;

src/HUD/MatchBar/MatchBar.tsx

@@ -1,11 +1,10 @@
-import React from "react";
+import * as I from "csgogsi";
-import * as I from "csgogsi-socket";
 import "./matchbar.scss";
 import TeamScore from "./TeamScore";
 import Bomb from "./../Timers/BombTimer";
-import Countdown from "./../Timers/Countdown";
+import { useBombTimer } from "./../Timers/Countdown";
-import { GSI } from "../../App";
+import { Match } from './../../API/types';
-import { Match } from "../../api/interfaces";
+
 
 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;
 }
-
+const getRoundLabel = (mapRound: number) => {
-interface IState {
+  const round = mapRound + 1;
-  defusing: Timer,
+  if (round <= 24) {
-  planting: Timer,
+    return `Round ${round}/24`;
-  winState: {
-    side: "left"|"right",
-    show: boolean
   }
+  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> {
+const Matchbar = (props: IProps) => {
-  constructor(props: IProps){
+    const { bomb, match, map, phase } = props;
-    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 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){
+    const bombData = useBombTimer();
-      if(defusing.active){
+    const plantTimer: Timer | null = bombData.state === "planting" ? { time:bombData.plantTime, active: true, side: bombData.player?.team.orientation || "right", player: bombData.player, type: "planting"} : null;
-        if(defusing.side === "left") leftTimer = defusing;
+    const defuseTimer: Timer | null = bombData.state === "defusing" ? { time:bombData.defuseTime, active: true, side: bombData.player?.team.orientation || "left", player: bombData.player, type: "defusing"} : null;
-        else rightTimer = defusing;
+
-      } else {
-        if(planting.side === "left") leftTimer = planting;
-        else rightTimer = planting;
-      }
-    }
     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";
-import * as I from "csgogsi-socket";
+import { Match } from "../../API/types";
-import { Match } from "../../api/interfaces";
 
 interface Props {
   map: I.Map;
-  phase: I.PhaseRaw;
   match: Match | null;
 }
 
-export default class SeriesBox extends React.Component<Props> {
+const SeriesBox = ({ map, match }: Props) => {
-  render() {
-    const { match, map } = this.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';
-import { Team } from 'csgogsi-socket';
+import * as I from '../../API/types';
-import * as I from '../../api/interfaces';
+import { apiUrl } from './../../API';
-import { apiUrl } from './../../api/api';
+import { LogoCT, LogoT } from './../../assets/Icons';
 
-export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> {
+const TeamLogo = ({team, height, width }: { team?: Team | I.Team | null, height?: number, width?: number}) => {
-  render(){
-    const { team } = this.props;
     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";
-import * as I from "csgogsi-socket";
-import WinIndicator from "./WinIndicator";
 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> {
+const TeamScore = ({orientation, timer, team }: IProps) => {
-  render() {
+    const [ show, setShow ] = useState(false);
-    const { orientation, timer, team, showWin } = this.props;
+
+    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 ${orientation} ${team.side || ''}`}>
-          <div className="team-name">{team.name}</div>
+          <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';
-import { Team } from 'csgogsi-socket';
 
-export default class WinAnnouncement extends React.Component<{ team: Team | null, show: boolean }> {
+const WinAnnouncement = ({team, show }: { team: Team | null, show: boolean }) => {
-    render() {
-        const { team, show } = this.props;
         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/types";
-import * as I from '../../api/interfaces';
+import "./index.scss";
-import TeamLogo from '../MatchBar/TeamLogo';
+import TeamLogo from "../MatchBar/TeamLogo";
 
 interface IProps {
-    match: I.Match,
+  match: I.Match;
-    show: boolean,
+  show: boolean;
-    teams: I.Team[],
+  teams: I.Team[];
-    veto: I.Veto | null
+  veto: I.Veto | null;
 }
 
-export default class MatchOverview extends React.Component<IProps> {
+const MatchOverview = ({ match, teams, show }: IProps) => {
-	render() {
+  const left = teams.find((team) => team._id === match.left.id);
-        const { match, teams, show } = this.props;
+  const right = teams.find((team) => team._id === match.right.id);
-        const left = teams.find(team => team._id === match.left.id);
+  if (!match || !left || !right) return null;
-        const right = teams.find(team => team._id === match.right.id);
+  return (
-        if(!match || !left || !right) return null;
+    <div className={`match-overview ${show ? "show" : ""}`}>
-		return (
+      <div className="match-overview-title">
-            <div className={`match-overview ${show ? 'show':''}`}>
+        Upcoming match
-                <div className="match-overview-title">
+      </div>
-                    Upcoming match
+      <div className="match-overview-teams">
-                </div>
+        <div className="match-overview-team">
-                <div className="match-overview-teams">
+          <div className="match-overview-team-logo">
-                    <div className="match-overview-team">
+            <TeamLogo team={left} height={40} />
-                        <div className="match-overview-team-logo">
+          </div>
-                            <TeamLogo team={left} height={40} />
+          <div className="match-overview-team-name">{(left.shortName || left.name).substring(0, 4)}</div>
-                        </div>
+        </div>
-                        <div className="match-overview-team-name">{left.name}</div>
+        <div className="match-overview-vs">vs</div>
-                    </div>
+        <div className="match-overview-team">
-                    <div className="match-overview-vs">vs</div>
+          <div className="match-overview-team-logo">
-                    <div className="match-overview-team">
+            <TeamLogo team={right} height={40} />
-                        <div className="match-overview-team-logo">
+          </div>
-                            <TeamLogo team={right} height={40} />
+          <div className="match-overview-team-name">{(right.shortName || right.name).substring(0, 4)}</div>
-                        </div>
+        </div>
-                        <div className="match-overview-team-name">{right.name}</div>
+      </div>
-                    </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 { useState } from 'react';
-import { actions, configs } from '../../App';
-import * as I from '../../api/interfaces';
 import PlayerOverview from '../PlayerOverview/PlayerOverview';
 import MatchOverview from '../MatchOverview/MatchOverview';
-import TeamOverview from '../TeamOverview/TeamOverview';
+import { Map, Player } from 'csgogsi';
-import { Map, Player } from 'csgogsi-socket';
+import * as I from './../../API/types';
-import api from '../../api/api';
+import api from './../../API';
-
+import { useConfig, useOnConfigChange } from '../../API/contexts/actions';
-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
-    }
-}
 
 interface IProps {
     match: I.Match | null,
@@ -29,97 +12,30 @@ interface IProps {
     players: Player[]
 }
 
-export default class Overview extends React.Component<IProps, IState> {
+const Overview =  ({ match, map, players }: IProps) => {
-    constructor(props: IProps){
+    const [ teams, setTeams ] = useState<I.Team[]>([]);
-        super(props);
+    const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
-        this.state = {
+
-            player: {
+    const previewData = useConfig("preview_settings");
-                data: null,
+
-                show: false
+    useOnConfigChange('preview_settings', async data => {
-            },
+        console.log(data);
-            match: {
+        if(!data?.match_preview?.match?.left.id || !data?.match_preview?.match?.right.id) return;
-                data: null,
+
-                show: false,
+        const teams = await Promise.all([api.teams.getOne(data?.match_preview?.match?.left.id), api.teams.getOne(data?.match_preview?.match?.right.id)]);
-                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)]);
         if(!teams[0] || !teams[1]) return;
-        this.setState(state => {
+
-            state.match.teams = teams;
+        setTeams(teams);
-            return state;
+    }, []);
-        });
+
-    }
+    const playerData = previewData?.player_preview?.player;
-    componentDidMount() {
+    const matchData = previewData?.match_preview?.match;
-        configs.onChange((data: any) => {
+
-            if(!data || !data.preview_settings) return;
+    const veto = match?.vetos.find(veto => veto.mapName === mapName) || null;
-            this.setState({
+    return (<>
-                player: {
+        { playerData ? <PlayerOverview round={map.round + 1} player={playerData} players={players} show={!!previewData.player_preview_toggle} veto={veto} /> : null}
-                    data: (data.preview_settings.player_preview && data.preview_settings.player_preview.player) || null,
+        { matchData && teams[0] && teams[1] ? <MatchOverview match={matchData} veto={veto} teams={teams} show={!!previewData.match_preview_toggle} /> : 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()}
-            </>
-        );
-	}
 }
+
+export default Overview;

src/HUD/PauseTimeout/Pause.tsx

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

src/HUD/PauseTimeout/Timeout.tsx

@@ -1,22 +1,30 @@
-import React from "react";
+import { Map, CSGO } from "csgogsi";
-import { Map, PhaseRaw } from "csgogsi-socket";
-
 
 interface IProps {
-    phase: PhaseRaw | null,
+  phase: CSGO["phase_countdowns"] | null;
-    map: Map
+  map: Map;
 }
 
-export default class Timeout extends React.Component<IProps> {
+const Timeout = ({ phase, map }: IProps) => {
-    render() {
+  const time = phase && Math.abs(Math.ceil(phase.phase_ends_in));
-        const { phase, map } = this.props;
+  const team = phase && phase.phase === "timeout_t" ? map.team_t : map.team_ct;
-        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
-        return (
+      id={`timeout`}
-            <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): ''}`}>
+      className={`${
-                { team.name } TIMEOUT
+        time && time > 2 && phase &&
-            </div>
+          (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/types';
-import * as I from '../../api/interfaces';
-import { avatars } from './../../api/avatars';
-import { apiUrl } from '../../api/api';
 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> {
+const sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
-    sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
 
-    getData = () => {
+const calcWidth = (val: number | string, max?: number) => {
-        const { veto, player, round } = this.props;
+    const value = Number(val);
-        if(!player || !veto || !veto.rounds) return null;
+    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)),
+            damage: sum(stats.map(round => round.damage)),
-            kills: this.sum(stats.map(round => round.kills)),
+            kills: sum(stats.map(round => round.kills)),
-            killshs: this.sum(stats.map(round => round.killshs)),
+            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">
+    const data = getData();
-                    <div className="player-overview-stat">
+    if(!data) return null;
-                        <div className="label">KILLS: {data.kills}</div>
+    const url = player.avatar;
-                        <div className="panel">
+
-                            <div className="filling" style={{width:`${this.calcWidth(data.kills, data.kills <= 30 ? 30 : 40)}%`}}></div>
+    const countryName = player.country ? getCountry(player.country) : null;
-                        </div>
+    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>
-                        <div className="label">HS: {data.hsp}%</div>
+                <div className="player-overview-stat">
-                        <div className="panel">
+                    <div className="label">HS: {data.hsp}%</div>
-                            <div className="filling" style={{width:`${this.calcWidth(data.hsp, 100)}%`}}></div>
+                    <div className="panel">
-                        </div>
+                        <div className="filling" style={{width:`${calcWidth(data.hsp, 100)}%`}}></div>
                     </div>
-                    <div className="player-overview-stat">
+                </div>
-                        <div className="label">ADR: {data.adr}</div>
+                <div className="player-overview-stat">
-                        <div className="panel">
+                    <div className="label">ADR: {data.adr}</div>
-                            <div className="filling" style={{width:`${this.calcWidth(data.adr)}%`}}></div>
+                    <div className="panel">
-                        </div>
+                        <div className="filling" style={{width:`${calcWidth(data.adr)}%`}}></div>
                     </div>
-                    <div className="player-overview-stat">
+                </div>
-                        <div className="label">KPR: {data.kpr}</div>
+                <div className="player-overview-stat">
-                        <div className="panel">
+                    <div className="label">KPR: {data.kpr}</div>
-                            <div className="filling" style={{width:`${this.calcWidth(Number(data.kpr)*100)}%`}}></div>
+                    <div className="panel">
-                        </div>
+                        <div className="filling" style={{width:`${calcWidth(Number(data.kpr)*100)}%`}}></div>
                     </div>
                 </div>
             </div>
-        );
+        </div>
-	}
+    );
+   
 }
+
+export default PlayerOverview;

src/HUD/Players/Avatar.tsx

@@ -1,70 +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 { useConfig } from "../../API/contexts/actions";
-import { Skull } from './../../assets/Icons';
+import { apiUrl } from "../../API";
-import { configs } from '../../App';
-import { apiUrl } from '../../api/api';
 
 interface IProps {
-  steamid: string,
+  steamid: string;
-  teamId?: string | null,
+  url: string | null;
-  slot?: number,
+  slot?: number;
-  height?: number,
+  height?: number;
-  width?: number,
+  width?: number;
-  showSkull?: boolean,
+  showSkull?: boolean;
-  showCam?: boolean,
+  showCam?: boolean;
-  sidePlayer?: boolean
+  sidePlayer?: boolean;
+  teamId?: string | null
 }
-export default class Avatar extends React.Component<IProps, { replaceAvatar: 'never' | 'if_missing' | 'always' }> {
+const Avatar = (
-  constructor(props: IProps){
+  { steamid, url, height, width, showCam, showSkull, sidePlayer, teamId }: IProps,
-    super(props);
+) => {
-    this.state = {
+  const data = useConfig("display_settings");
-      replaceAvatar: 'never'
-    }
-  }
-  componentDidMount() {
-    const onDataChange = (data:any) => {
-      if(!data) return;
-      const display = data.display_settings;
-      if(!display) return;
-      this.setState({
-        replaceAvatar: display.replace_avatars || 'never'
-      })
-  };
-    configs.onChange(onDataChange);
-    onDataChange(configs.data);
-  }
-  getAvatarUrl = () => {
-    const avatarData = avatars[this.props.steamid] && avatars[this.props.steamid].url ? avatars[this.props.steamid].url : null;
 
-    if(this.state.replaceAvatar === 'always' || (this.state.replaceAvatar === 'if_missing' && !avatarData)){
+  const avatarUrl = teamId && (data?.replace_avatars === "always" || (data?.replace_avatars === "if_missing" && !url)) ? `${apiUrl}api/teams/logo/${teamId}` : url;
-      return this.props.teamId ? `${apiUrl}api/teams/logo/${this.props.teamId}` : avatarData || null;
+  if(!avatarUrl && !showCam) return null;
-    }
+  return (
-    return avatarData || null;
+    <div className={`avatar`}>
-
+      {showCam
-  }
+        ? (sidePlayer
-  render() {
+          ? (
-    const { showCam, steamid, width, height, showSkull, sidePlayer } = this.props;
+            <div className="videofeed">
-    //const url = avatars.filter(avatar => avatar.steamid === this.props.steamid)[0];
+              <PlayerCamera steamid={steamid} visible={true} />
-    const avatarUrl = this.getAvatarUrl();
+            </div>
-    if (!avatarUrl) {
+          )
-      return null;
+          : <CameraContainer observedSteamid={steamid} />)
-    }
+        : null}
-
+      {showSkull
-    return (
+        ? <Skull height={height} width={width} />
-      <div className={`avatar`}>
+        : (
-        {
+          avatarUrl ? <img
-          showCam ? ( sidePlayer ? <div className="videofeed"><PlayerCamera steamid={steamid} visible={true} /></div> : <CameraContainer observedSteamid={steamid} />) : null
+            src={avatarUrl}
-        }
+            height={height}
-        {
+            width={width}
-          showSkull ? <Skull height={height} width={width} /> : <img src={avatarUrl} height={height} width={width} alt={'Avatar'} />
+            alt={"Avatar"}
-        }
+          /> : null
-
+        )}
-      </div>
+    </div>
-    );
+  );
-  }
+};
-
+export default Avatar;
-}

src/HUD/Players/Observed.tsx

@@ -1,106 +1,86 @@
-import React from "react";
+import React, { useState } from "react";
-import { Player } from "csgogsi-socket";
+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 { apiUrl } from './../../API';
-import { actions } from "../../App";
+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 }> {
+const Statistic = React.memo(({ label, value }: { label: string; value: string | number, }) => {
-	constructor(props: any){
+	return (
-		super(props);
+		<div className="stat">
-		this.state = {
+			<div className="label">{label}</div>
-		  showCam: true
+			<div className="value">{value}</div>
-		}
+		</div>
-	  }
+	);
-	componentDidMount() {
+});
-		actions.on('toggleCams', () => {
+
-			console.log(this.state.showCam)
+const Observed = ({ player }: { player: Player | null }) => {
-			this.setState({ showCam: !this.state.showCam });
+	const [ showCam, setShowCam ] = useState(true);
-		});
+
-	}
+	useAction('toggleCams', () => {
-	getAdr = () => {
+		setShowCam(p => !p);
-		const { veto, player } = this.props;
+	});
-		if (!player || !veto || !veto.rounds) return null;
+
-		const damageInRounds = veto.rounds.map(round => round ? round.players[player.steamid] : {
+	if (!player) return null;
-			kills: 0,
+	
-			killshs: 0,
+	const country = player.country || player.team.country;
-			damage: 0
+	const currentWeapon = player.weapons.filter(weapon => weapon.state === "active")[0];
-		}).filter(data => !!data).map(roundData => roundData.damage);
+	const grenades = player.weapons.filter(weapon => weapon.type === "Grenade");
-		 
+	const { stats } = player;
-		return damageInRounds.reduce((a, b) => a + b, 0) / (this.props.round - 1);
+	const ratio = stats.deaths === 0 ? stats.kills : stats.kills / stats.deaths;
-	}
+	const countryName = country ? getCountry(country) : null;
-	render() {
+	return (
-		if (!this.props.player) return '';
+		<div className={`observed ${player.team.side}`}>
-		const { player } = this.props;
+			<div className="main_row">
-		const country = player.country || player.team.country;
+				<Avatar teamId={player.team.id} url={player.avatar} steamid={player.steamid} height={140} width={140} showCam={showCam} slot={player.observer_slot} />
-		const weapons = Object.values(player.weapons).map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
+				<TeamLogo team={player.team} height={35} width={35} />
-		const currentWeapon = weapons.filter(weapon => weapon.state === "active")[0];
+				<div className="username_container">
-		const grenades = weapons.filter(weapon => weapon.type === "Grenade");
+					<div className="username">{player.name}</div>
-		const { stats } = player;
+					<div className="real_name">{player.realName}</div>
-		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} 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>
 				</div>
-				<div className="stats_row">
+				<div className="flag">{countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} alt={countryName} /> : ''}</div>
-					<div className="health_armor_container">
+				<div className="grenade_container">
-						<div className="health-icon icon">
+					{grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
-							<HealthFull />
+						<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
-						</div>
+						{
-						<div className="health text">{player.state.health}</div>
+							grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
-						<div className="armor-icon icon">
+					</React.Fragment>)}
-							{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
+				</div>
-						</div>
+			</div>
-						<div className="health text">{player.state.armor}</div>
+			<div className="stats_row">
+				<div className="health_armor_container">
+					<div className="health-icon icon">
+						<HealthFull />
 					</div>
-					<div className="statistics">
+					<div className="health text">{player.state.health}</div>
-						<Statistic label={"K"} value={stats.kills} />
+					<div className="armor-icon icon">
-						<Statistic label={"A"} value={stats.assists} />
+						{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
-						<Statistic label={"D"} value={stats.deaths} />
-						<Statistic label={"K/D"} value={ratio.toFixed(2)} />
 					</div>
-					<div className="ammo">
+					<div className="health text">{player.state.armor}</div>
-						<div className="ammo_icon_container">
+				</div>
-							<Bullets />
+				<div className="statistics">
-						</div>
+					<Statistic label={"K"} value={stats.kills} />
-						<div className="ammo_counter">
+					<Statistic label={"A"} value={stats.assists} />
-							<div className="ammo_clip">{(currentWeapon && currentWeapon.ammo_clip) || "-"}</div>
+					<Statistic label={"D"} value={stats.deaths} />
-							<div className="ammo_reserve">/{(currentWeapon && currentWeapon.ammo_reserve) || "-"}</div>
+					<Statistic label={"K/D"} value={ratio.toFixed(2)} />
-						</div>
+				</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";
-import * as I from "csgogsi-socket";
 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 compareWeapons = (weaponsObjectOne: I.Weapon[], weaponsObjectTwo: I.Weapon[]) => {
-  const weaponsOne = Object.values(weaponsObjectOne).sort((a, b) => (a.name as any) - (b.name as any))
+  const weaponsOne = [...weaponsObjectOne].sort((a, b) => a.name.localeCompare(b.name))
-  const weaponsTwo = Object.values(weaponsObjectTwo).sort((a, b) => (a.name as any) - (b.name as any))
+  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 teamId={player.team.id} 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 React.memo(Player, arePropsEqual);
-export default Player;
+//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,
 }
-
+const TeamBox = ({players, team, side, current}: Props) => {
-export default class TeamBox extends React.Component<Props> {
+  return (
-  render() {
+    <div className={`teambox ${team.side} ${side}`}>
-    return (
+      {players.map(player => <Player
-      <div className={`teambox ${this.props.team.side} ${this.props.side}`}>
+        key={player.steamid}
-        {this.props.players.map(player => <Player
+        player={player}
-          key={player.steamid}
+        isObserved={!!(current && current.steamid === player.steamid)}
-          player={player}
+      />)}
-          isObserved={!!(this.props.current && this.props.current.steamid === player.steamid)}
+    </div>
-        />)}
+  );
-      </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 type { Bomb, Side } from 'csgogsi';
-import { Bomb } from 'csgogsi-socket';
+import maps, { MapConfig, ZoomAreas } from './maps';
-import maps, { ScaleConfig, MapConfig, ZoomAreas } from './maps';
+import './index.scss';
-import './index.css';
 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> {
+const SMOKE_PARTICLE_BASE_AMOUNT = 10;
-  constructor(props: IProps) {
+//const PARTICLE_MAP_SOURCE = Array(SMOKE_PARTICLE_BASE_AMOUNT**2).fill(0);
-    super(props);
+
-    this.state = {
+const SMOKE_PARTICLE_SIZE_ABSOLUT = config.smokeSize/SMOKE_PARTICLE_BASE_AMOUNT;
-      players: [],
+
-      grenades: [],
+const PARTICLE_SIDE = `${SMOKE_PARTICLE_SIZE_ABSOLUT}px`;
-      bomb: null
+
-    }
+
+
+
+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(type === "smoke" && (state === "landed" || state === "exploded")){
-    if ("flames" in grenade) {
-      return null;
-    }
-    const { reverseZoom } = this.props;
     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) => {
+  return (
-    const { reverseZoom } = this.props;
+    <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}
+      <div className={`bomb ${bomb.state} visible`}
-        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})`,
+          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-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="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
-        <div className="label">{player.label}</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>
-      )
+    </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;
 
-    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)}
+        {players.map(player => <PlayerDot reverseZoom={reverseZoom} key={player.id} player={player} />)}
-        {grenades.map(this.renderGrenade)}
+        {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} />)}
-        {this.renderBomb()}
+        <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, Grenade, FragOrFireBombOrFlashbandGrenade } from 'csgogsi';
-import { Player, Bomb } from 'csgogsi-socket';
+import maps from './maps';
-import maps, { ScaleConfig } from './maps';
 import LexoRadar from './LexoRadar';
-import { ExtendedGrenade, Grenade, RadarPlayerObject, RadarGrenadeObject } from './interface';
+import { RadarPlayerObject, RadarGrenadeObject } from './interface';
-import config from './config';
+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> {
+GSI.prependListener("data", () => {
-    round = (n: number) => {
+    
-        const r = 0.02;
+    const currentGrenades = GSI.current?.grenades || []
-        return Math.round(n / r) * r;
+    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;
+        }
     }
-
+    for(const grenadeId of Object.keys(explosionPlaces)){
-    parsePosition = (position: number[], size: number, config: ScaleConfig) => {
+        const doesExist = data.grenades.some(grenade => grenade.id === grenadeId);
-        if (!(this.props.mapName in maps)) {
+        if(!doesExist){
-            return [0, 0];
+            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) => {
+const LexoRadarContainer = ({ size = 300, mapName, bomb, player, players, grenades }: IProps) => {
-        if (!("position" in grenade)) {
+    const offset = (size - (size * size / 1024)) / 2;
-            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];
-        }
 
-        return [x / entryAmount, y / entryAmount];
+    if (!(mapName in maps)) {
-    }
-    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>;
-        }
         return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
-            <LexoRadar
+            Unsupported map
-                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'}
-            />
         </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;
+    height:0px;
-    width:30px;
+    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 {
+.map .grenade .content {
-    width:60px;
+    position: absolute;
-    height:60px;
 }
 .map .grenade.inferno .background {
     background-color: red;
@@ -270,16 +276,29 @@ html, body, .map-container {
     background: red;
 }
 
-@keyframes Hidden {
+.map .player.dead .background {
-    from {
+    display: none;
-    }
+}
-    to {
+.map .player.dead .label {
-        display: none !important;
+    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;
+    opacity: 0 !important;
-    animation: Hidden 1s ease 1s 1;
+}
-    animation-fill-mode: forwards;/**/
 
-}
+.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 {
+export type ExtendedGrenade = Grenade & { side: Side | null, };
-    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, };

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,
+        "pxPerUY": -0.20138282875746794
-        "originHeight": -170,
     },
     "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,
+            "x": 557.7279495268139,
-            "y": 511.81469648562296
+            "y": 507.83243734804853
         },
-        "pxPerUX": 0.21532584158170223,
+        "pxPerUX": 0.22712933753943218,
-        "pxPerUY": -0.21299254526091588
+        "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 api from '../../../../API';
-import { Player } from 'csgogsi-socket';
+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_ancient
-    de_anubis
 }
 
 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 { CSGO } from "csgogsi";
-import { isDev } from './../../api/api';
-import { CSGO } from "csgogsi-socket";
 import LexoRadarContainer from './LexoRadar/LexoRadarContainer';
 
 
 
 interface Props { radarSize: number, game: CSGO }
-interface State {
+
-    showRadar: boolean,
+const Radar = ({ radarSize, game }: Props) => {
-    loaded: boolean,
+    const { players, player, bomb, grenades, map } = game; 
-    boltobserv:{
+    return <LexoRadarContainer
-        css: boolean,
+        players={players}
-        maps: boolean
+        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> {
+export default Radar;
-    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)}
-        />
-    }
-}

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 { Match, Veto } from "../../API/types";
-import { Map, CSGO, Team } from 'csgogsi-socket';
+import { Map, CSGO, Team } from 'csgogsi';
-import { actions } from './../../App';
 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> {
+ const RadarMaps = ({ match, map, game }: Props) => {
-    state = {
+    const [ radarSize, setRadarSize ] = useState(366);
-        showRadar: true,
+    const [ showBig, setShowBig ] = useState(false);
-        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 })) });
 
-        actions.on("toggleRadarView", () => {
+    useAction('radarBigger', () => {
-            this.setState({showBig:!this.state.showBig});
+        setRadarSize(p => p+10);
-        });
+    }, []);
-    }
+
-    radarChangeSize = (delta: number) => {
+    useAction('radarSmaller', () => {
-        const newSize = this.state.radarSize + delta;
+        setRadarSize(p => p-10);
-        this.setState({ radarSize: newSize > 0 ? newSize : this.state.radarSize });
+    }, []);
-    }
+
-    render() {
+    useAction('toggleRadarView', () => {
-        const { match } = this.props;
+        setShowBig(p => !p);
-        const { radarSize, showBig, showRadar } = this.state;
+    }, []);
-        const size = showBig ? 600 : radarSize;
+
-        return (
+    return (
-            <div id={`radar_maps_container`} className={`${!showRadar ? 'hide' : ''} ${showBig ? 'preview':''}`}>
+        <div id={`radar_maps_container`} className={` ${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={match} map={map} game={game} /> : null}
-                {match ? <MapsBar match={this.props.match} map={this.props.map} game={this.props.game} /> : null}
+            <Radar radarSize={showBig ? 600: radarSize} game={game} />
-            </div>
+        </div>
-        );
+    );
-    }
 }
 
-class MapsBar extends React.PureComponent<Props> {
+export default RadarMaps;
-    render() {
+
-        const { match, map } = this.props;
+const MapsBar = ({ match, map }: Props) => {
-        if (!match || !match.vetos.length) return '';
+    if (!match || !match.vetos.length) return '';
-        const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
+    const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
-        if (picks.length > 3) {
+    if (picks.length > 3) {
-            const current = picks.find(veto => map.name.includes(veto.mapName));
+        const current = picks.find(veto => map.name.includes(veto.mapName));
-            if (!current) return null;
+        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>
-        }
         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 }> {
+const MapEntry = ({ veto, map }: { veto: Veto, map: Map, team: Team | null }) => {
-    render() {
+    return <div className="veto_entry">
-        const { veto, map, team } = this.props;
+        <div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName.replace("de_", "")}</div>
-        return <div className="veto_entry">
+    </div>
-            <div className="team_logo">{team ? <TeamLogo team={team} /> : null}</div>
-            <div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName}</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 {
+	.map_name {
-		text-shadow: 0 0 15px white;
+		font-size:12px;
-		font-weight: 600;
+		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' }>{
+const LossBox = React.memo(({ active, side }: { active: boolean; side: "CT" | "T" }) => {
-    render(){
+  return (
-        return <div className={`loss-box ${this.props.side} ${this.props.active ? 'active':''}`}></div>
+    <div
-    }
+      className={`loss-box ${side} ${
-}
+        active ? "active" : ""
+      }`}
+    >
+    </div>
+  );
+});
 
 interface Props {
-    side: 'left' | 'right',
+  side: "left" | "right";
-    team: 'CT' | 'T',
+  team: "CT" | "T";
-    loss: number,
+  loss: number;
-    equipment: number,
+  equipment: number;
-    money: number,
+  money: number;
-    show: boolean,
+  show: boolean;
 }
 
-export default class Money extends React.PureComponent<Props> {
+const Money = ({ side, team, loss, equipment, money, show }: Props) => {
-
+  return (
-	render() {
+    <div className={`moneybox ${side} ${team} ${show ? "show" : "hide"}`}>
-		return (
+      <div className="loss_container">
-			<div className={`moneybox ${this.props.side} ${this.props.team} ${this.props.show ? "show" : "hide"}`}>
+        <LossBox side={team} active={(loss - 1400) / 500 >= 4} />
-                <div className="loss_container">
+        <LossBox side={team} active={(loss - 1400) / 500 >= 3} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 4} />
+        <LossBox side={team} active={(loss - 1400) / 500 >= 2} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 3} />
+        <LossBox side={team} active={(loss - 1400) / 500 >= 1} />
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 2} />
+      </div>
-                    <LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 1} />
+      <div className="money_container">
-                </div>
+        <div className="title">Loss Bonus</div>
-                <div className="money_container">
+        <div className="value">${loss}</div>
-                    <div className="title">Loss Bonus</div>
+      </div>
-                    <div className="value">${this.props.loss}</div>
+      <div className="money_container">
-                </div>
+        <div className="title">Team Money</div>
-                <div className="money_container">
+        <div className="value">${money}</div>
-                    <div className="title">Team Money</div>
+      </div>
-                    <div className="value">${this.props.money}</div>
+      <div className="money_container">
-                </div>
+        <div className="title">Equipment Value</div>
-                <div className="money_container">
+        <div className="value">${equipment}</div>
-                    <div className="title">Equipment Value</div>
+      </div>
-                    <div className="value">${this.props.equipment}</div>
+    </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';
-import { apiUrl } from '../../api/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 }> {
+const Sidebox = ({side, hide} : { side: 'left' | 'right', hide: boolean}) => {
-	constructor(props: any) {
+    const [ image, setImage ] = useState<string | null>(null);
-		super(props);
+    const data = useConfig('display_settings');
-		this.state = {
-            title:'Title',
-            subtitle:'Content',
-		}
-	}
 
-	componentDidMount() {
+    useOnConfigChange('display_settings', data => {
-        configs.onChange((data:any) => {
+        if(data && `${side}_image` in data){
-            if(!data) return;
+            const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
-            const display = data.display_settings;
+            setImage(imageUrl);
-            if(!display) return;
+        }
-            if(`${this.props.side}_title` in display){
+    }, []);
-                this.setState({title:display[`${this.props.side}_title`]})
+
-            }
+    if(!data || !data[`${side}_title`]) return null;
-            if(`${this.props.side}_subtitle` in display){
+    return (
-                this.setState({subtitle:display[`${this.props.side}_subtitle`]})
+        <div className={`sidebox ${side} ${hide ? 'hide':''}`}>
-            }
+            <div className="title_container">
-            if(`${this.props.side}_image` in display){
+                <div className="title">{data[`${side}_title`]}</div>
-                const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${this.props.side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
+                <div className="subtitle">{data[`${side}_subtitle`]}</div>
-                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>
             </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',
+  sides?: "reversed";
-    show: boolean;
+  show: boolean;
-    side: 'CT' | 'T',
+  side: "CT" | "T";
-    players: Player[]
+  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)
+    .filter((player) => player.team.side === side)
-    .map(player => Object.values(player.weapons).filter(weapon => weapon.type === "Grenade"))
+    .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 }> {
+const GrenadeContainer = (
-  render() {
+  { grenade, amount }: { grenade: string; amount: number },
-    return (
+) => {
-      <div className="grenade_container">
+  return (
-        <div className="grenade_image">
+    <div className="grenade_container">
-          <Weapon weapon={this.props.grenade} active={false} isGrenade />
+      <div className="grenade_image">
-        </div>
+        <Weapon weapon={grenade} active={false} isGrenade />
-        <div className="grenade_amount">x{this.props.amount}</div>
       </div>
-    );
+      <div className="grenade_amount">x{amount}</div>
-  }
+    </div>
-}
+  );
+};
 
-export default class SideBox extends React.Component<Props> {
+const SideBox = ({ players, side, show }: Props) => {
-    render() {
+  const grenades = summarise(players, side);
-        const grenades = summarise(this.props.players, this.props.side);
+  const total = Object.values(grenades).reduce((a, b) => a + b, 0);
-        const total = Object.values(grenades).reduce((a, b) => a+b, 0);
+  return (
-        return (
+    <div className={`utilitybox ${side || ""} ${show ? "show" : "hide"}`}>
-            <div className={`utilitybox ${this.props.side || ''} ${this.props.show ? "show" : "hide"}`}>
+      <div className="title_container">
-                <div className="title_container">
+        <div className="title">Utility Level -&nbsp;</div>
-                    <div className="title">Utility Level -&nbsp;</div>
+        <div className="subtitle" style={{ color: utilityColor(total) }}>
-                    <div className="subtitle" style={{color: utilityColor(total)}}>{utilityState(total)}</div>
+          {utilityState(total)}
-                </div>
+        </div>
-                <div className="grenades_container">
+      </div>
-                    <GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
+      <div className="grenades_container">
-                    <GrenadeContainer grenade={this.props.side === 'CT' ? 'incgrenade' : 'molotov'} amount={grenades.inc} />
+        <GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
-                    <GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
+        <GrenadeContainer
-                    <GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
+          grenade={side === "CT" ? "incgrenade" : "molotov"}
-                </div>
+          amount={grenades.inc}
-            </div>
+        />
-        );
+        <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 { MAX_TIMER, useBombTimer } from "./Countdown";
-
-import { GSI } from "./../../App";
-import BombTimer from "./Countdown";
 import { C4 } from "./../../assets/Icons";
 
-export default class Bomb extends React.Component<any, { height: number; show: boolean }> {
+const Bomb = () => {
-  constructor(props: any) {
+  const bombData = useBombTimer();
-    super(props);
+  const show = bombData.state === "planted" || bombData.state === "defusing";
-    this.state = {
+  
-      height: 0,
+  return (
-      show: false
+    <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"}`}>
-  hide = () => {
+        <C4 fill="white" />
-    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>
       </div>
-    );
+    </div>
-  }
+  );
 }
+
+export default Bomb;

src/HUD/Timers/Countdown.ts

@@ -1,46 +1,83 @@
-export default class Countdown {
+import { Bomb, Events, Player } from "csgogsi";
-    last: number;
+import { useEffect, useRef, useState } from "react";
-    time: number;
+import { GSI } from "../../API/HUD";
-    step: (time: number) => void;
-    on: boolean;
-    resetFunc?: Function;
 
-    constructor(step: (time: number) => void){
+export const MAX_TIMER = {
-        this.last = 0;
+    planting: 3,
-        this.time = 0;
+    defuse_kit: 5,
-        this.on = false;
+    defuse_nokit: 10,
-        this.step = step;
+    bomb: 40
-    }
+}
-    onReset(func: Function) {
+const findNewTime = (current: number, newTime: number) => Math.abs(current - newTime) > 2 ? newTime : current;
-        this.resetFunc = func;
+
-    }
+export const useBombTimer = () => {
-    stepWrapper = (time: number) =>{
+    const [ player, setPlayerSteamId ] = useState<Player | null>(null);
-        if(this.time < 0) return this.reset();
+    const [ bombState, setBombState ] = useState<Bomb["state"] | null>(null);
-        if(!this.on) return this.reset();
+    const [ site, setBombSite ] = useState<string | null>(null);
-        if(!this.last) this.last = time;
+
-        if(this.time !== Number((this.time - (time - this.last)/1000))){
+    const [ plantTime, setPlantTime ] = useState(0);
-            this.time = Number((this.time - (time - this.last)/1000));
+    const [ bombTime, setBombTime ] = useState(0);
-            this.step(this.time);
+    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);
 
-    }
+    return ({
-
+        state: bombState,
-    reset(){
+        player,
-        this.last = 0;
+        site,
-        this.time = 0;
+        defuseTime,
-        this.on = false;
+        bombTime,
-        if(this.resetFunc) this.resetFunc();
+        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> {
+const getCaption = (type: "defusing" | "planting", player: Player | null) => {
-  getCaption = (type: "defusing" | "planting", player: Player | null) => {
+  if(!player) return null;
-    if(!player) return null;
+  if(type === "defusing"){
-    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>
-      </>;
-    }
     return <>
-      <I.SmallBomb height={22} fill="var(--color-new-t)"/>
+      <I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
-      <div className={'T'}>{player.name} is planting the bomb</div>
+      <div className={'CT'}>{player.name} is defusing the bomb</div>
     </>;
   }
-  render() {
+  return <>
-    const { side, timer } = this.props;
+    <I.SmallBomb height={22} fill="var(--color-new-t)"/>
-    return (
+    <div className={'T'}>{player.name} is planting the bomb</div>
-      <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>
-    );
-  }
 }
+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/types';
-import * as I from './../../api/interfaces';
+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> {
+const joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
-	joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
+	if (!matchup) return matchup;
-		const { tournament } = this.props;
-		if (!tournament || !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);
+	const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
-		if (!parents.length) return matchup;
+	if (!parents.length) return matchup;
-		matchup.parents.push(...parents.map(parent => this.joinParents(parent, matchups)));
+	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 (!matchup.depth || force) {
-		if (!this.props.tournament) return [];
+		matchup.depth = depth;
-		const matchups = JSON.parse(JSON.stringify(this.props.tournament.matchups)) as I.DepthTournamentMatchup[];
+		getParents(matchup).forEach(matchup => setDepth(matchups, matchup, depth + 1));
-		return matchups;
+	}
+	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 Ladder = ({ tournament, matches, teams }: Props) => {
-		const getParents = (matchup: I.DepthTournamentMatchup) => {
+	const renderBracket = (
-			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 = (
 		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)}
+					{renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
-					{this.renderBracket(matchup.parents[1], 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 joinedParents = joinParents(gf, matchups);
-		const matchupWithDepth = this.setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
+		const matchupWithDepth = setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
-		return this.renderBracket(matchupWithDepth, 0, undefined, 2, true);
+		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/types';
-import * as I from './../../api/interfaces';
+import api from './../../API';
-import api from '../../api/api';
 import Ladder from './Ladder';
-interface State {
+import { useAction } from '../../API/contexts/actions';
-    tournament: I.Tournament | null,
+import { useEffect, useState } from 'react';
-    teams: I.Team[],
+
-    matches: I.Match[],
+const Tournament = () => {
-    show: boolean,
+    const [ show, setShow ] = useState(false);
-}
+    const [ teams, setTeams ] = useState<I.Team[]>([]);
-export default class Tournament extends React.Component<{}, State> {
+    const [ matches, setMatches ] = useState<I.Match[]>([]);
-    constructor(props: {}) {
+    const [ tournament, setTournament ] = useState<I.Tournament | null>(null);
-        super(props);
+    
-        this.state = {
+    useAction("showTournament", (data) => {
-            tournament: null,
+        setShow(data === "show");
-            matches: [],
+    });
-            teams: [],
+
-            show: false
+    useEffect(() => {
-        }
+        api.tournaments.get().then(({ tournament }) => {
-    }
+            if(tournament){
-    async componentDidMount() {
+                setTournament(tournament);
-        const { tournament } = await api.tournaments.get();
+
-        if(tournament){
+                Promise.allSettled([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
-            actions.on("showTournament", async (show: string) => {
+                    setTeams(teams.status === "fulfilled" ? teams.value : []);
-                if(show !== "show"){
+                    setMatches(matches.status === "fulfilled" ? matches.value : []);
-                    return this.setState({show: false});
-                }
-                
-                this.setState({tournament}, () => {
-                    this.setState({show:true})
                 });
-            });
+            }
-            
+        })
-            Promise.all([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
+    }, []);
-                this.setState({matches, teams});
+
-            });
+    if(!tournament) return null;
-        }
+    return (
-    }
+        <div className={`ladder-container ${show ? 'show':''}`}>
-	render() {
+            <div className="tournament-data">
-        const { tournament, matches, teams, show } = this.state;
+                { tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
-        if(!tournament) return null;
+                <div className="tournament-name">
-		return (
+                    {tournament.name}
-			<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>
                 </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 }> {
+    useAction('triviaState', (state) => {
-	constructor(props: any) {
+        setShow(state === "show");
-		super(props);
+    });
-		this.state = {
-            title:'Title',
-            content:'Content',
-            show: false
-		}
-	}
 
-	componentDidMount() {
+    useAction('toggleCams', () => {
-        configs.onChange((data:any) => {
+        setShow(p => !p);
-            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>
-		);
-	}
 
+    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 React from "react";
-import * as Weapons from './../../assets/Weapons';
+import * as Weapons from "./../../assets/Weapons";
 
 interface IProps extends React.SVGProps<SVGSVGElement> {
-	weapon: string,
+  weapon: string;
-	active: boolean,
+  active: boolean;
-	isGrenade?: boolean
+  isGrenade?: boolean;
 }
-export default class WeaponImage extends React.Component<IProps> {
+const WeaponImage = ({ weapon, active, isGrenade, ...rest }: IProps) => {
-	render() {
+  const weaponId = weapon.replace("weapon_", "");
-		const { weapon, active, isGrenade, ...rest } = this.props;
+  const Weapon = (Weapons as any)[weaponId];
-		const Weapon = (Weapons as any)[weapon];
+  const { className, ...svgProps } = rest;
-		const { className, ...svgProps } = rest;
+  if (!Weapon) return null;
-		if(!Weapon) return null;
+  return (
-		return (
+    <Weapon
-			<Weapon fill="white" className={`${active ? 'active':''} weapon ${isGrenade ? 'grenade' : ''} ${className || ''}`} {...svgProps} />
+      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';
+/// <reference types="vite-plugin-svgr/client" />
-import { ReactComponent as ArmorHalf } from './../assets/images/icon_armor_half_default.svg';
+import ArmorFull from './../assets/images/icon_armor_full_default.svg?react';
-import { ReactComponent as ArmorHalfHelmet } from './../assets/images/icon_armor_half_helmet_default.svg';
+import ArmorHalf from './../assets/images/icon_armor_half_default.svg?react';
-import { ReactComponent as ArmorHelmet } from './../assets/images/icon_armor_helmet_default.svg';
+import ArmorHalfHelmet from './../assets/images/icon_armor_half_helmet_default.svg?react';
-import { ReactComponent as ArmorNone } from './../assets/images/icon_armor_none_default.svg';
+import ArmorHelmet from './../assets/images/icon_armor_helmet_default.svg?react';
-import { ReactComponent as Blind } from './../assets/images/icon_blind.svg';
+import ArmorNone from './../assets/images/icon_armor_none_default.svg?react';
-import { ReactComponent as Bomb } from './../assets/images/icon_bomb_default.svg';
+import Blind from './../assets/images/icon_blind.svg?react';
-import { ReactComponent as BombExplosion }  from './../assets/images/icon_bomb_explosion_default.svg';
+import Bomb from './../assets/images/icon_bomb_default.svg?react';
-import { ReactComponent as Bullets }  from './../assets/images/icon_bullets_default.svg';
+import BombExplosion from './../assets/images/icon_bomb_explosion_default.svg?react';
-import { ReactComponent as Burning }  from './../assets/images/icon_burning.svg';
+import Bullets from './../assets/images/icon_bullets_default.svg?react';
-import { ReactComponent as C4 }  from './../assets/images/icon_c4_default.svg';
+import Burning from './../assets/images/icon_burning.svg?react';
-import { ReactComponent as Defuse }  from './../assets/images/icon_defuse_default.svg';
+import C4 from './../assets/images/icon_c4_default.svg?react';
-import { ReactComponent as Health }  from './../assets/images/icon_health_default.svg';
+import Defuse from './../assets/images/icon_defuse_default.svg?react';
-import { ReactComponent as HealthFull }  from './../assets/images/icon_health_full_default.svg';
+import Health from './../assets/images/icon_health_default.svg?react';
-import { ReactComponent as Hourglass }  from './../assets/images/icon_hourglass_default.svg';
+import HealthFull from './../assets/images/icon_health_full_default.svg?react';
-import { ReactComponent as Microphone }  from './../assets/images/icon_microphone.svg';
+import Hourglass from './../assets/images/icon_hourglass_default.svg?react';
-import { ReactComponent as Pause }  from './../assets/images/icon_pause_default.svg';
+import Microphone from './../assets/images/icon_microphone.svg?react';
-import { ReactComponent as Skull }  from './../assets/images/icon_skull_default.svg';
+import Pause from './../assets/images/icon_pause_default.svg?react';
-import { ReactComponent as Timer }  from './../assets/images/icon_timer_default.svg';
+import Skull from './../assets/images/icon_skull_default.svg?react';
-import { ReactComponent as FlashedKill } from './../assets/images/flashed_kill.svg';
+import Timer from './../assets/images/icon_timer_default.svg?react';
-import { ReactComponent as Headshot } from './../assets/images/headshot.svg';
+import FlashedKill from './../assets/images/flashed_kill.svg?react';
-import { ReactComponent as NoScope } from './../assets/images/noscope.svg';
+import Headshot from './../assets/images/headshot.svg?react';
-import { ReactComponent as SmokeKill } from './../assets/images/smoke_kill.svg';
+import NoScope from './../assets/images/noscope.svg?react';
-import { ReactComponent as Suicide } from './../assets/images/suicide.svg';
+import SmokeKill from './../assets/images/smoke_kill.svg?react';
-import { ReactComponent as Wallbang } from './../assets/images/wallbang.svg';
+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 ak47 from './weapons/ak47.svg?react';
-import { ReactComponent as aug } from './weapons/aug.svg';
+import aug  from './weapons/aug.svg?react';
-import { ReactComponent as awp } from './weapons/awp.svg';
+import awp  from './weapons/awp.svg?react';
-import { ReactComponent as bayonet } from './weapons/bayonet.svg';
+import bayonet from './weapons/bayonet.svg?react';
-import { ReactComponent as bizon } from './weapons/bizon.svg';
+import bizon from './weapons/bizon.svg?react';
-import { ReactComponent as c4 } from './weapons/c4.svg';
+import c4 from './weapons/c4.svg?react';
-import { ReactComponent as cz75a } from './weapons/cz75a.svg';
+import cz75a from './weapons/cz75a.svg?react';
-import { ReactComponent as deagle } from './weapons/deagle.svg';
+import deagle from './weapons/deagle.svg?react';
-import { ReactComponent as decoy } from './weapons/decoy.svg';
+import decoy from './weapons/decoy.svg?react';
-import { ReactComponent as elite } from './weapons/elite.svg';
+import elite from './weapons/elite.svg?react';
-import { ReactComponent as famas } from './weapons/famas.svg';
+import famas from './weapons/famas.svg?react';
-import { ReactComponent as fiveseven } from './weapons/fiveseven.svg';
+import fiveseven from './weapons/fiveseven.svg?react';
-import { ReactComponent as flashbang } from './weapons/flashbang.svg';
+import flashbang from './weapons/flashbang.svg?react';
-import { ReactComponent as g3sg1 } from './weapons/g3sg1.svg';
+import g3sg1 from './weapons/g3sg1.svg?react';
-import { ReactComponent as galilar } from './weapons/galilar.svg';
+import galilar from './weapons/galilar.svg?react';
-import { ReactComponent as glock } from './weapons/glock.svg';
+import glock from './weapons/glock.svg?react';
-import { ReactComponent as hegrenade } from './weapons/hegrenade.svg';
+import hegrenade from './weapons/hegrenade.svg?react';
-import { ReactComponent as hkp2000 } from './weapons/hkp2000.svg';
+import hkp2000 from './weapons/hkp2000.svg?react';
-import { ReactComponent as incgrenade } from './weapons/incgrenade.svg';
+import incgrenade from './weapons/incgrenade.svg?react';
-import { ReactComponent as inferno } from './weapons/inferno.svg';
+import inferno from './weapons/inferno.svg?react';
-import { ReactComponent as knife } from './weapons/knife.svg';
+import knife from './weapons/knife.svg?react';
-import { ReactComponent as knife_bayonet } from './weapons/knife_bayonet.svg';
+import knife_bayonet from './weapons/knife_bayonet.svg?react';
-import { ReactComponent as knife_butterfly } from './weapons/knife_butterfly.svg';
+import knife_butterfly from './weapons/knife_butterfly.svg?react';
-import { ReactComponent as knife_canis } from './weapons/knife_canis.svg';
+import knife_canis from './weapons/knife_canis.svg?react';
-import { ReactComponent as knife_cord } from './weapons/knife_cord.svg';
+import knife_cord from './weapons/knife_cord.svg?react';
-import { ReactComponent as knife_css } from './weapons/knife_css.svg';
+import knife_css from './weapons/knife_css.svg?react';
-import { ReactComponent as knife_falchion } from './weapons/knife_falchion.svg';
+import knife_falchion from './weapons/knife_falchion.svg?react';
-import { ReactComponent as knife_flip } from './weapons/knife_flip.svg';
+import knife_flip from './weapons/knife_flip.svg?react';
-import { ReactComponent as knife_gut } from './weapons/knife_gut.svg';
+import knife_gut from './weapons/knife_gut.svg?react';
-import { ReactComponent as knife_gypsy_jackknife } from './weapons/knife_gypsy_jackknife.svg';
+import knife_gypsy_jackknife from './weapons/knife_gypsy_jackknife.svg?react';
-import { ReactComponent as knife_karambit } from './weapons/knife_karambit.svg';
+import knife_karambit from './weapons/knife_karambit.svg?react';
-import { ReactComponent as knife_m9_bayonet } from './weapons/knife_m9_bayonet.svg';
+import knife_m9_bayonet from './weapons/knife_m9_bayonet.svg?react';
-import { ReactComponent as knife_outdoor } from './weapons/knife_outdoor.svg';
+import knife_outdoor from './weapons/knife_outdoor.svg?react';
-import { ReactComponent as knife_push } from './weapons/knife_push.svg';
+import knife_push from './weapons/knife_push.svg?react';
-import { ReactComponent as knife_skeleton } from './weapons/knife_skeleton.svg';
+import knife_skeleton from './weapons/knife_skeleton.svg?react';
-import { ReactComponent as knife_stiletto } from './weapons/knife_stiletto.svg';
+import knife_stiletto from './weapons/knife_stiletto.svg?react';
-import { ReactComponent as knife_survival_bowie } from './weapons/knife_survival_bowie.svg';
+import knife_survival_bowie from './weapons/knife_survival_bowie.svg?react';
-import { ReactComponent as knife_t } from './weapons/knife_t.svg';
+import knife_t from './weapons/knife_t.svg?react';
-import { ReactComponent as knife_tactical } from './weapons/knife_tactical.svg';
+import knife_tactical from './weapons/knife_tactical.svg?react';
-import { ReactComponent as knife_ursus } from './weapons/knife_ursus.svg';
+import knife_ursus from './weapons/knife_ursus.svg?react';
-import { ReactComponent as knife_widowmaker } from './weapons/knife_widowmaker.svg';
+import knife_widowmaker from './weapons/knife_widowmaker.svg?react';
-import { ReactComponent as m249 } from './weapons/m249.svg';
+import m249 from './weapons/m249.svg?react';
-import { ReactComponent as m4a1 } from './weapons/m4a1.svg';
+import m4a1 from './weapons/m4a1.svg?react';
-import { ReactComponent as m4a1_silencer } from './weapons/m4a1_silencer.svg';
+import m4a1_silencer from './weapons/m4a1_silencer.svg?react';
-import { ReactComponent as m4a1_silencer_off } from './weapons/m4a1_silencer_off.svg';
+import m4a1_silencer_off from './weapons/m4a1_silencer_off.svg?react';
-import { ReactComponent as mac10 } from './weapons/mac10.svg';
+import mac10 from './weapons/mac10.svg?react';
-import { ReactComponent as mag7 } from './weapons/mag7.svg';
+import mag7 from './weapons/mag7.svg?react';
-import { ReactComponent as molotov } from './weapons/molotov.svg';
+import molotov from './weapons/molotov.svg?react';
-import { ReactComponent as mp5sd } from './weapons/mp5sd.svg';
+import mp5sd from './weapons/mp5sd.svg?react';
-import { ReactComponent as mp7 } from './weapons/mp7.svg';
+import mp7 from './weapons/mp7.svg?react';
-import { ReactComponent as mp9 } from './weapons/mp9.svg';
+import mp9 from './weapons/mp9.svg?react';
-import { ReactComponent as negev } from './weapons/negev.svg';
+import negev from './weapons/negev.svg?react';
-import { ReactComponent as nova } from './weapons/nova.svg';
+import nova from './weapons/nova.svg?react';
-import { ReactComponent as out } from './weapons/out.svg';
+import out from './weapons/out.svg?react';
-import { ReactComponent as p250 } from './weapons/p250.svg';
+import p250 from './weapons/p250.svg?react';
-import { ReactComponent as p90 } from './weapons/p90.svg';
+import p90 from './weapons/p90.svg?react';
-import { ReactComponent as revolver } from './weapons/revolver.svg';
+import revolver from './weapons/revolver.svg?react';
-import { ReactComponent as sawedoff } from './weapons/sawedoff.svg';
+import sawedoff from './weapons/sawedoff.svg?react';
-import { ReactComponent as scar20 } from './weapons/scar20.svg';
+import scar20 from './weapons/scar20.svg?react';
-import { ReactComponent as sg556 } from './weapons/sg556.svg';
+import sg556 from './weapons/sg556.svg?react';
-import { ReactComponent as smokegrenade } from './weapons/smokegrenade.svg';
+import smokegrenade from './weapons/smokegrenade.svg?react';
-import { ReactComponent as ssg08 } from './weapons/ssg08.svg';
+import ssg08 from './weapons/ssg08.svg?react';
-import { ReactComponent as taser } from './weapons/taser.svg';
+import taser from './weapons/taser.svg?react';
-import { ReactComponent as tec9 } from './weapons/tec9.svg';
+import tec9 from './weapons/tec9.svg?react';
-import { ReactComponent as trigger_hurt } from './weapons/trigger_hurt.svg';
+import trigger_hurt from './weapons/trigger_hurt.svg?react';
-import { ReactComponent as ump45 } from './weapons/ump45.svg';
+import ump45 from './weapons/ump45.svg?react';
-import { ReactComponent as usp_silencer } from './weapons/usp_silencer.svg';
+import usp_silencer from './weapons/usp_silencer.svg?react';
-import { ReactComponent as usp_silencer_off } from './weapons/usp_silencer_off.svg';
+import usp_silencer_off from './weapons/usp_silencer_off.svg?react';
-import { ReactComponent as world } from './weapons/world.svg';
+import world from './weapons/world.svg?react';
-import { ReactComponent as xm1014 } from './weapons/xm1014.svg';
+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";
+:root {
-@import "fonts/stratum2.css";
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-html,
+  line-height: 1.5;
-body,
+  font-weight: 400;
-#root {
+
-  width: 100%;
+  color-scheme: light dark;
-  height: 100%;
+  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;
+  display: flex;
-  -webkit-font-smoothing: antialiased;
+  place-items: center;
-  -moz-osx-font-smoothing: grayscale;
+  min-width: 320px;
-  /*background-image: url('./assets/bg.png');/**/
+  min-height: 100vh;
 }
 
-@font-face {
+h1 {
-  font-family: 'Louis George Cafe';
+  font-size: 3.2em;
-  src: local('Louis George Cafe'), url('./fonts/Louis George Cafe.ttf') format('truetype');
+  line-height: 1.1;
 }
 
-@font-face {
+button {
-  font-family: 'Rounded_Elegance';
+  border-radius: 8px;
-  src: local('Rounded_Elegance'), url('./fonts/Rounded_Elegance.ttf') format('truetype');
+  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 {
+@media (prefers-color-scheme: light) {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  :root {
-    monospace;
+    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": "ES2020",
-    "target": "es5",
+    "useDefineForClassFields": true,
-    "lib": [
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "dom",
+    "module": "ESNext",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+
-    "allowSyntheticDefaultImports": true,
+    /* Bundler mode */
-    "strict": true,
+    "moduleResolution": "bundler",
-    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
-    "module": "esnext",
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
+  "include": ["src"],
-    "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',
+          },
+        },
+      },
+    }
+  )
+})