initial commit

src/App.tsx

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

src/HUD/Camera/Camera.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { mediaStreams } from "./mediaStream";
+import { v4 as uuidv4 } from 'uuid';
+type Props = {
+    steamid: string,
+    visible: boolean;
+}
+
+const CameraView = ({ steamid, visible }: Props) => {
+    const [uuid] = useState(uuidv4());
+    const [ forceHide, setForceHide ] = useState(false);
+
+    useEffect(() => {
+
+    }, [])
+
+    useEffect(() => {
+        const mountStream = (stream: MediaStream) => {
+            console.log("mounting video");
+            const remoteVideo = document.getElementById(`remote-video-${steamid}-${uuid}`) as HTMLVideoElement;
+            if(!remoteVideo || !stream){
+                console.log("no video element")
+            }
+            if (!remoteVideo || !stream) return;
+    
+            remoteVideo.srcObject = stream;
+    
+            remoteVideo.play();
+        }
+
+        const mountExistingStream = () => {
+            const currentStream = mediaStreams.players.find(player => player.steamid === steamid);
+            if(!currentStream || !currentStream.peerConnection || !currentStream.peerConnection._remoteStreams) return;
+
+            const stream = currentStream.peerConnection._remoteStreams[0];
+
+            if(!stream) return;
+
+            mountStream(stream);
+        }
+
+        const onStreamCreate = (stream: MediaStream) => {
+            mountStream(stream);
+        }
+
+
+
+        const onStreamDestroy = () => {
+            const remoteVideo = document.getElementById(`remote-video-${steamid}-${uuid}`) as HTMLVideoElement;
+
+            if (!remoteVideo) return;
+
+            remoteVideo.srcObject = null;
+        }
+
+        const onBlockedUpdate = (steamids: string[]) => {
+            setForceHide(steamids.includes(steamid));
+        }
+
+        mediaStreams.onStreamCreate(onStreamCreate, steamid);
+        mediaStreams.onStreamDestroy(onStreamDestroy, steamid);
+        mediaStreams.onBlockedUpdate(onBlockedUpdate);
+
+        mountExistingStream();
+
+        return () => {
+            mediaStreams.removeListener(onStreamCreate);
+            mediaStreams.removeListener(onStreamDestroy);
+            mediaStreams.removeListener(onBlockedUpdate);
+        }
+    }, [steamid]);
+
+    return <React.Fragment>
+        <video className="video-call-preview" autoPlay muted id={`remote-video-${steamid}-${uuid}`} style={{ opacity: visible && !forceHide ? 1 : 0.001 }}></video>
+    </React.Fragment>
+}
+
+export default CameraView;

src/HUD/Camera/Container.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import PlayerCamera from "./Camera";
+import api from "../../api/api";
+import "./index.scss";
+
+
+
+const CameraContainer = ({ observedSteamid }: { observedSteamid: string | null }) => {
+    const [ players, setPlayers ] = useState<string[]>([]);
+
+    useEffect(() => {
+        api.camera.get().then(response => {
+            setPlayers(response.availablePlayers.map(player => player.steamid));
+        });
+    }, []);
+
+    return <div id="cameras-container">
+        {
+            players.map(steamid => (<PlayerCamera key={steamid} steamid={steamid} visible={observedSteamid === steamid} />))
+        }
+    </div>
+}
+
+export default CameraContainer;

src/HUD/Camera/index.scss

@@ -0,0 +1,13 @@
+#cameras-container {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    video {
+        height: 100%;
+        position: absolute;
+    }
+}

src/HUD/Camera/mediaStream.ts

@@ -0,0 +1,153 @@
+import { Instance, SignalData } from 'simple-peer';
+import api from '../../api/api';
+import { socket as Socket } from "../../App";
+const Peer = require('simple-peer');
+
+const wait = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+type OfferData = {
+    offer: SignalData,
+}
+
+type PeerInstance = Instance & { _remoteStreams: MediaStream[] }
+
+type MediaStreamPlayer = {
+    peerConnection: PeerInstance | null;
+    steamid: string;
+}
+
+type ListenerType = ({ listener: (stream: MediaStream) => void, event: 'create', steamid: string } | ({ listener: () => void, event: 'destroy', steamid: string }));
+
+type MediaStreamManager = {
+    blocked: string[];
+    blockedListeners: ((blocked: string[]) => void)[],
+    players: MediaStreamPlayer[];
+    onStreamCreate: (listener: (stream: MediaStream) => void, steamid: string) => void;
+    onStreamDestroy: (listener: () => void, steamid: string) => void;
+    onBlockedUpdate: (listener: (steamids: string[]) => void) => void;
+    removeListener: (listener: any) => void;
+    listeners: ListenerType[];
+}
+
+const mediaStreams: MediaStreamManager = {
+    blocked: [],
+    blockedListeners: [],
+    players: [],
+    listeners: [],
+    onStreamCreate: (listener: (stream: MediaStream) => void, steamid: string) => {
+        mediaStreams.listeners.push({ listener, event: "create", steamid });
+    },
+    onBlockedUpdate: (listener: (blocked: string[]) => void) => {
+        mediaStreams.blockedListeners.push(listener);
+    },
+    onStreamDestroy: (listener: () => void, steamid: string) => {
+        mediaStreams.listeners.push({ listener, event: "destroy", steamid });
+    },
+    removeListener: (listenerToRemove: any) => {
+        mediaStreams.listeners = mediaStreams.listeners.filter(listener => listener !== listenerToRemove);
+        mediaStreams.blockedListeners = mediaStreams.blockedListeners.filter(listener => listener !== listenerToRemove);
+    }
+};
+
+const getConnectionInfo = (steamid: string) => mediaStreams.players.find(player => player.steamid === steamid) || null;
+
+const closeConnection = (steamid: string) => {
+    const connectionInfo = getConnectionInfo(steamid);
+    try {
+        if (connectionInfo) {
+            if (connectionInfo.peerConnection) {
+                connectionInfo.peerConnection.removeAllListeners();
+                connectionInfo.peerConnection.destroy();
+            }
+            connectionInfo.peerConnection = null;
+        }
+    } catch {
+
+    }
+
+    for (const listener of mediaStreams.listeners.filter(listener => listener.steamid === steamid)) {
+        if (listener.event === "destroy") listener.listener();
+    }
+    mediaStreams.players = mediaStreams.players.filter(player => player.steamid !== steamid);
+    console.log(mediaStreams.players)
+}
+
+const initiateConnection = async () => {
+    const socket = Socket as SocketIOClient.Socket;
+    const camera = await api.camera.get();
+    await wait(1000);
+
+    socket.emit("registerAsHUD", camera.uuid);
+
+    socket.on('playersCameraStatus', (players: { steamid: string, label: string, allow: boolean, active: boolean }[]) => {
+        const blockedSteamids = players.filter(player => !player.allow).map(player => player.steamid);
+        mediaStreams.blocked = blockedSteamids;
+
+        for (const listener of mediaStreams.blockedListeners) {
+            listener(blockedSteamids);
+        }
+    });
+
+    socket.on('offerFromPlayer', async (roomId: string, offerData: OfferData, steamid: string) => {
+        // It's not from available player, ignore incoming request
+        /*if(!camera.availablePlayers.find(player => player.steamid === steamid)){
+            console.log("Wrong player");
+            return;
+        }*/
+        const currentConnection = getConnectionInfo(steamid);
+
+        // Connection already made, ignore incoming request
+        if (currentConnection) {
+            console.log("Connection has been made already");
+            return;
+        }
+
+        if (camera.uuid !== roomId) return;
+
+        const peerConnection: PeerInstance = new Peer({ initiator: false, trickle: false });
+
+        const mediaStreamPlayer: MediaStreamPlayer = { peerConnection, steamid };
+
+        mediaStreams.players.push(mediaStreamPlayer);
+
+        peerConnection.on('signal', answer => {
+            console.log("SIGNAL COMING IN");
+            const offer = JSON.parse(JSON.stringify(answer)) as RTCSessionDescriptionInit;
+            socket.emit("offerFromHUD", roomId, { offer }, steamid);
+        });
+
+        peerConnection.on('error', (err) => {
+            console.log(err)
+            closeConnection(steamid);
+        });
+
+        peerConnection.on('stream', () => {
+            console.log("STREAM COMING IN");
+            const currentConnection = getConnectionInfo(steamid);
+            if (!currentConnection) {
+                console.log("Connection not established");
+                closeConnection(steamid);
+                return;
+            }
+            if (peerConnection._remoteStreams.length === 0) {
+                console.log('no stream?');
+                return;
+            }
+            for (const listener of mediaStreams.listeners.filter(listener => listener.steamid === steamid)) {
+                if (listener.event === "create") listener.listener(peerConnection._remoteStreams[0]);
+            }
+        });
+
+        peerConnection.on('close', () => {
+            console.log("CLOSE COMING IN");
+            const currentConnection = getConnectionInfo(steamid);
+            if (!currentConnection) return;
+
+            closeConnection(steamid);
+        });
+        console.log("Sending offer");
+        peerConnection.signal(offerData.offer);
+    });
+}
+
+export { mediaStreams, initiateConnection };

src/HUD/Indicators/Armor.tsx

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

src/HUD/Indicators/Bomb.tsx

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

src/HUD/Indicators/Defuse.tsx

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

src/HUD/Killfeed/Kill.tsx

@@ -0,0 +1,55 @@
+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;
+		if (event.type !== "kill") {
+			return (
+				<div className={`single_kill`}>
+					<div className={`killer_name ${event.player.team.side}`}>{event.player.name}</div>
+					<div className="way">
+						{event.type === "plant" ? <C4 height="18px" /> : <Defuse height="18px" />}
+					</div>
+					<div className={`victim_name`}>{event.type === "plant" ? "planted the bomb" : "defused the bomb"}</div>
+
+				</div>
+
+			)
+		}
+		let weapon = <Weapon weapon={event.weapon} active={false} />;
+		if(event.killer === event.victim) {
+			weapon = <Suicide />;
+		} else if(event.weapon === 'planted_c4'){
+			weapon = <Weapon weapon={'c4'} active={false} />
+		}
+		return (
+			<div className='single_kill_container'>
+				<div className={`single_kill`}>
+					{event.attackerblind ? <FlashedKill /> : null}
+					{event.killer ? <div className={`killer_name ${event.killer.team.side}`}>{event.killer.name}</div> : null}
+					{event.assister ?
+						<React.Fragment>
+							<div className="plus">+</div>
+							{event.flashed ? <img src={flash_assist} className="flash_assist" alt={'[FLASH]'} /> : null}
+							<div className={`assister_name ${event.assister.team.side}`}>{event.assister.name}</div>
+						</React.Fragment>
+						: ''}
+					<div className="way">
+						{weapon}
+						{event.thrusmoke ? <SmokeKill /> : null}
+						{event.noscope ? <NoScope /> : null}
+						{event.wallbang ? <Wallbang /> : null}
+						{event.headshot ? <Headshot /> : null}
+					</div>
+					<div className={`victim_name ${event.victim.team.side}`}>{event.victim.name}</div>
+				</div>
+			</div>
+		);
+	}
+
+}

src/HUD/Killfeed/Killfeed.tsx

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

src/HUD/Killfeed/killfeed.scss

@@ -0,0 +1,112 @@
+@keyframes KillLifeCycle {
+	0% {
+		opacity: 0;
+		height: 0;
+	}
+	5% {
+		opacity: 1;
+		height: 43px;
+	}
+	95% {
+		opacity: 1;
+		height: 43px;
+	}
+	100% {
+		opacity: 0;
+		height: 0;
+	}
+}
+
+.killfeed {
+    position: fixed;
+    right: 20px;
+    top: 93px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    .single_kill_container {
+        animation: KillLifeCycle 5s linear 1;
+        animation-fill-mode: forwards;/**/
+        overflow: hidden;
+    }
+    .single_kill {
+        display: flex;
+        flex-direction: row;
+        background-color: rgba(0,0,0,0.64);
+        margin-bottom:5px;
+        color:white;
+        height: 38px;
+        font-size: 14px;
+        overflow: hidden;
+        align-items: center;
+        font-family: Montserrat;
+        font-weight:500;
+        padding-left:15px;
+        padding-right:15px;
+
+        > svg {
+            max-height: 24px;
+            max-width: 28px;
+        }
+
+        div {
+            margin:10px;
+            display:flex;
+            align-items:center;
+        }
+
+        svg.weapon {
+            height: 28px;
+            filter: invert(0%);
+        }
+
+        .CT {
+            color: var(--color-new-ct);
+        }
+
+        .T {
+            color: var(--color-new-t);
+        }
+
+        .way .headshot, .way .wallbang, .flash_assist, .flash_kill, .smoke_kill, .noscope_kill {
+            max-height:20px;
+            margin-left:5px;
+        }
+
+        .flash_assist {
+            margin-left: 0;
+            margin-right:5px;
+        }
+
+        .plus {
+            margin-left: 0;
+            font-weight: 600;
+            margin-right: 8px;
+        }
+
+        .assister_name {
+            margin-left:0px;
+        }
+
+        .way {
+            text-align: center;
+
+            .wallbang {
+                max-height: 24px;
+            }
+            svg:not(.weapon) {
+                max-height: 24px;
+                max-width: 28px;
+            }
+        }
+        &.hide {
+            transition:height 1s, padding 1s,  opacity 1s, margin 1s;
+            opacity:0;
+            height:0;
+            margin:0;
+        }
+        &.show {
+            opacity:1;
+        }
+    }
+}

src/HUD/Layout/Layout.tsx

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

src/HUD/MapSeries/MapSeries.tsx

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

src/HUD/MapSeries/mapseries.scss

@@ -0,0 +1,153 @@
+.map_series_container {
+	position: fixed;
+	top: 100px;
+	right: 20px;
+	width: 347px;
+	display: flex;
+	opacity: 0;
+	transition: opacity 0.5s;
+	flex-direction: column;
+	font-size: 13px;
+	.veto_container {
+		display: flex;
+		background-color: rgba(0,0,0,0.8);
+		color: white;
+		align-items: center;
+        height: 40px;
+        &.active {
+            .veto_winner {
+                display: none;
+            }
+            .veto_score {
+                display: none;
+            }
+        }
+		.veto_map_name {
+			width: 116px;
+			text-transform: uppercase;
+			background-color: rgba(255,255,255,1);
+			color: black;
+			height: 100%;
+			display: flex;
+			font-family: Montserrat;
+			font-weight: 700;
+			align-items: center;
+			justify-content: center;
+		}
+		div {
+			img {
+				max-height: 30px;
+				max-width: 30px;
+			}
+		}
+		.veto_picker {
+			width: 77px;
+			text-align: center;
+		}
+		.veto_winner {
+			width: 77px;
+			text-align: center;
+		}
+		.active_container {
+			width: 154px;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.active {
+				background: white;
+				color: black;
+				width: 117px;
+				height: 25px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 9px;
+				font-weight: 700;
+				font-family: Montserrat;
+				text-transform: uppercase;
+			}
+		}
+		&:not(.active) {
+			.active_container {
+				display: none;
+			}
+		}
+		.veto_score {
+			width: 77px;
+			text-align: center;
+			font-size: 14px;
+		}
+		.logo {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+	.title_bar {
+		display: flex;
+		background-color: rgba(0,0,0,0.64);
+		height: 25px;
+		color: white;
+		border-radius: 6px 6px 0 0;
+		font-family: Montserrat;
+		font-size: 13px;
+		font-weight: 600;
+		margin-bottom: 2px;
+		div {
+			width: 77px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.picked {
+			margin-left: auto;
+		}
+    }
+    &.show {
+        opacity: 1;
+    }
+}
+
+#timeout {
+	text-transform: uppercase;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	top: 150px;
+	background-color: var(--sub-panel-color);
+	width: 600px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100px;
+	font-size: 35px;
+	transition: opacity 1.5s;
+	opacity: 0;
+}
+#pause {
+	text-transform: uppercase;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	top: 150px;
+	background-color: var(--sub-panel-color);
+	width: 600px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100px;
+	font-size: 35px;
+	transition: opacity 1.5s;
+	opacity: 0;
+	color: white;
+}
+#timeout.show, #pause.show {
+	opacity: 1;
+}
+#timeout.t {
+	color: var(--color-new-t);
+}
+#timeout.ct {
+	color: var(--color-new-ct);
+}

src/HUD/MatchBar/MatchBar.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import * as I from "csgogsi-socket";
+import "./matchbar.scss";
+import TeamScore from "./TeamScore";
+import Bomb from "./../Timers/BombTimer";
+import Countdown from "./../Timers/Countdown";
+import { GSI } from "../../App";
+import { Match } from "../../api/interfaces";
+
+function stringToClock(time: string | number, pad = true) {
+  if (typeof time === "string") {
+    time = parseFloat(time);
+  }
+  const countdown = Math.abs(Math.ceil(time));
+  const minutes = Math.floor(countdown / 60);
+  const seconds = countdown - minutes * 60;
+  if (pad && seconds < 10) {
+    return `${minutes}:0${seconds}`;
+  }
+  return `${minutes}:${seconds}`;
+}
+
+interface IProps {
+  match: Match | null;
+  map: I.Map;
+  phase: I.PhaseRaw,
+  bomb: I.Bomb | null,
+}
+
+export interface Timer {
+  width: number;
+  active: boolean;
+  countdown: number;
+  side: "left"|"right";
+  type: "defusing" | "planting";
+  player: I.Player | null;
+}
+
+interface IState {
+  defusing: Timer,
+  planting: Timer,
+  winState: {
+    side: "left"|"right",
+    show: boolean
+  }
+}
+
+export default class TeamBox extends React.Component<IProps, IState> {
+  constructor(props: IProps){
+    super(props);
+    this.state = {
+      defusing: {
+        width: 0,
+        active: false,
+        countdown: 10,
+        side: "left",
+        type: "defusing",
+        player: null
+      },
+      planting: {
+        width: 0,
+        active: false,
+        countdown: 10, // Fake
+        side: "right",
+        type: "planting",
+        player: null
+      },
+      winState: {
+        side: 'left',
+        show: false
+      }
+    }
+  }
+  plantStop = () => this.setState(state => {
+    state.planting.active = false;
+    return state;
+  });
+
+  setWidth = (type: 'defusing' | 'planting', width: number) => {
+    this.setState(state => {
+      state[type].width = width;
+      return state;
+    })
+  }
+
+  initPlantTimer = () => {
+    const bomb = new Countdown(time => {
+      let width = time * 100;
+      this.setWidth("planting", width/3);
+    });
+    GSI.on("bombPlantStart", player => {
+      if(!player || !player.team) return;
+      this.setState(state => {
+        state.planting.active = true;
+        state.planting.side = player.team.orientation;
+        state.planting.player = player;
+      })
+    })
+    GSI.on("data", data => {
+      if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "planting") return this.plantStop();
+      this.setState(state => {
+        state.planting.active = true;
+      })
+      return bomb.go(data.bomb.countdown);
+    });
+  }
+
+  defuseStop = () => this.setState(state => {
+    state.defusing.active = false;
+    state.defusing.countdown = 10;
+    return state;
+  });
+
+  initDefuseTimer = () => {
+    const bomb = new Countdown(time => {
+      let width = time > this.state.defusing.countdown ? this.state.defusing.countdown*100 : time * 100;
+      this.setWidth("defusing", width/this.state.defusing.countdown);
+    });
+    GSI.on("defuseStart", player => {
+      if(!player || !player.team) return;
+      this.setState(state => {
+        state.defusing.active = true;
+        state.defusing.countdown = !Boolean(player.state.defusekit) ? 10 : 5;
+        state.defusing.side = player.team.orientation;
+        state.defusing.player = player;
+        return state;
+      })
+    })
+    GSI.on("data", data => {
+      if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "defusing") return this.defuseStop();
+      this.setState(state => {
+        state.defusing.active = true;
+        return state;
+      })
+      return bomb.go(data.bomb.countdown);
+    });
+  }
+
+  resetWin = () => {
+    setTimeout(() => {
+      this.setState(state => {
+        state.winState.show = false;
+        return state;
+      })
+    }, 6000);
+  }
+
+  componentDidMount(){
+    this.initDefuseTimer();
+    this.initPlantTimer();
+    GSI.on("roundEnd", score => {
+      this.setState(state => {
+        state.winState.show = true;
+        state.winState.side = score.winner.orientation;
+        return state;
+      }, this.resetWin);
+    });
+  }
+  getRoundLabel = () => {
+    const { map } = this.props;
+    const round = map.round + 1;
+    if (round <= 30) {
+      return `Round ${round}/30`;
+    }
+    const additionalRounds = round - 30;
+    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){
+      if(defusing.active){
+        if(defusing.side === "left") leftTimer = defusing;
+        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"} />
+          <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>
+            <Bomb />
+          </div>
+          <div className={`score right ${right.side}`}>{right.score}</div>
+          <TeamScore team={right} orientation={"right"} timer={rightTimer} showWin={winState.show && winState.side === "right"} />
+        </div>
+      </>
+    );
+  }
+}

src/HUD/MatchBar/SeriesBox.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import * as I from "csgogsi-socket";
+import { Match } from "../../api/interfaces";
+
+interface Props {
+  map: I.Map;
+  phase: I.PhaseRaw;
+  match: Match | null;
+}
+
+export default class SeriesBox extends React.Component<Props> {
+  render() {
+    const { match, map } = this.props;
+    const 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;
+    const right = map.team_ct.orientation === "left" ? map.team_t : map.team_ct;
+    return (
+      <div id="encapsulator">
+        <div className="container left">
+          <div className={`series_wins left `}>
+            <div className={`wins_box_container`}>
+              {new Array(amountOfMaps).fill(0).map((_, i) => (
+                <div key={i} className={`wins_box ${left.matches_won_this_series > i ? "win" : ""} ${left.side}`} />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div id="series_container">
+          <div id="series_text">{ bo ? `BEST OF ${bo}` : '' }</div>
+        </div>
+        <div className="container right">
+          <div className={`series_wins right `}>
+            <div className={`wins_box_container`}>
+              {new Array(amountOfMaps).fill(0).map((_, i) => (
+                <div key={i} className={`wins_box ${right.matches_won_this_series > i ? "win" : ""} ${right.side}`} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/HUD/MatchBar/TeamLogo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Team } from 'csgogsi-socket';
+import * as I from '../../api/interfaces';
+import { apiUrl } from './../../api/api';
+
+export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> {
+  render(){
+    const { team } = this.props;
+    if(!team) return null;
+    let id = '';
+    const { logo } = team;
+    if('_id' in team){
+      id = team._id;
+    } else if('id' in team && team.id){
+      id = team.id;
+    }
+    return (
+      <div className={`logo`}>
+          { logo && id ? <img src={`${apiUrl}api/teams/logo/${id}`} width={this.props.width} height={this.props.height} alt={'Team logo'} /> : ''}
+      </div>
+    );
+  }
+
+}

src/HUD/MatchBar/TeamScore.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import * as I from "csgogsi-socket";
+import WinIndicator from "./WinIndicator";
+import { Timer } from "./MatchBar";
+import TeamLogo from './TeamLogo';
+import PlantDefuse from "../Timers/PlantDefuse"
+
+interface IProps {
+  team: I.Team;
+  orientation: "left" | "right";
+  timer: Timer | null;
+  showWin: boolean;
+}
+
+export default class TeamScore extends React.Component<IProps> {
+  render() {
+    const { orientation, timer, team, showWin } = this.props;
+    return (
+      <>
+        <div className={`team ${orientation} ${team.side}`}>
+          <div className="team-name">{team.name}</div>
+          <TeamLogo team={team} />
+          <div className="round-thingy"><div className="inner"></div></div>
+        </div>
+        <PlantDefuse timer={timer} side={orientation} />
+        <WinIndicator team={team} show={showWin}/>
+      </>
+    );
+  }
+}

src/HUD/MatchBar/WinIndicator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Team } from 'csgogsi-socket';
+
+export default class WinAnnouncement extends React.Component<{ 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>   
+    }
+}

src/HUD/MatchBar/matchbar.scss

@@ -0,0 +1,391 @@
+@keyframes ShowWinCycle {
+	0% {
+		opacity: 0;
+		height: 0;
+	}
+	5% {
+		opacity: 1;
+		height: 50px;
+	}
+	95% {
+		opacity: 1;
+		height: 50px;
+	}
+	100% {
+		opacity: 0;
+		height: 0;
+	}
+}
+#matchbar {
+	display: flex;
+	flex-direction: row;
+	position: fixed;
+	justify-content: center;
+	width: 1148px;
+	height: 70px;
+	top: 10px;
+	left: 50%;
+	transform: translateX(-50%);
+	.CT {
+		color: var(--color-new-ct);
+		.round-thingy {
+			.inner {
+				background-color: #28abff;
+			}
+			background-color: #28abff80;
+		}
+	}
+	.T {
+		color: var(--color-new-t);
+		.round-thingy {
+			.inner {
+				background-color: #ffc600;
+			}
+			background-color: #ffc60080;
+		}
+	}
+	#timer {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		width: 126px;
+		height: 115px;
+		margin-left: 8px;
+		margin-right: 8px;
+		background-color: var(--sub-panel-color);
+        top: -10px;
+        &.no-bo {
+            height: 87px;
+        }
+	}
+	#bomb_container {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: center;
+		position: absolute;
+		width: 100%;
+		height: 70px;
+		z-index: 0;
+		.bomb_timer {
+			width: 100%;
+			top: 0;
+			height: 0;
+            background-color: var(--color-bomb);
+            &.hide {
+                display: none;
+            }
+		}
+		.bomb_icon {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			svg {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				top: 6px;
+				max-height: 80%;
+				max-width: 80%;
+            }
+            &.hide {
+                display: none;
+            }
+		}
+	}
+	#round_timer_text {
+		display: flex;
+		width: 100%;
+		height: 55px;
+		justify-content: center;
+		font-size: 34px;
+		font-weight: bold;
+		z-index: 1;
+		color: var(--white-full);
+        align-items: flex-end;
+        &.hide {
+            display: none;
+        }
+	}
+	#round_now {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 27px;
+		align-items: center;
+		justify-content: center;
+		font-size: 14px;
+		font-weight: bold;
+		z-index: 1;
+        color: var(--white-full);
+        &.hide {
+            display: none;
+        }
+	}
+	.team {
+		width: 426px;
+		display: flex;
+		align-items: center;
+		.logo {
+			display: flex;
+			flex-direction: row;
+			width: 105px;
+			height: 70px;
+			align-items: center;
+			overflow: hidden;
+			background-color: var(--sub-panel-color);
+			img {
+				max-width: 90%;
+				max-height: 65%;
+			}
+        }
+        &.left {
+            justify-content: center;
+            flex-direction: row-reverse;
+            .round-thingy {
+                left: -30px;
+            }
+            .logo {
+                justify-content: flex-end;
+            }
+        }
+        &.right {
+            justify-content: center;
+            flex-direction: row;
+            .round-thingy {
+                right: -30px;
+            }
+            .logo {
+                justify-content: flex-start;
+            }
+        }
+	}
+	.team-name {
+		display: flex;
+		width: 360px;
+		height: 70px;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		font-size: 30px;
+		background-color: var(--sub-panel-color);
+	}
+	.round-thingy {
+		width: 60px;
+		height: 60px;
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		.inner {
+			width: 35px;
+			height: 35px;
+			border-radius: 50%;
+		}
+	}
+	.score {
+		display: flex;
+		flex-direction: row;
+		width: 77px;
+		height: 70px;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		font-size: 36px;
+		background-color: var(--sub-panel-color);
+	}
+	.bar {
+		display: flex;
+		flex-direction: row;
+		width: 10px;
+        height: 70px;
+        &.CT {
+            background-color: var(--color-new-ct);
+        }
+        &.T {
+            background-color: var(--color-new-t);
+        }
+	}
+
+}
+.win_text {
+	position: fixed;
+	display: none;
+	opacity: 1;
+	width: 503px;
+	height: 50px;
+	top: 70px;
+	align-items: center;
+	color: black;
+	justify-content: center;
+	background-color: white;
+	font-size: 20px;
+	font-family: Montserrat;
+    font-weight: 600;
+    &.show {
+        display: flex;
+        animation: ShowWinCycle 5s linear 1;
+        animation-fill-mode: forwards;
+    }
+    &.right {
+        left: calc(50% + 71px);
+    }
+    &.left {
+        right: calc(50% + 71px);
+    }
+}
+
+.defuse_plant_container {
+	position: fixed;
+	display: flex;
+	opacity: 1;
+	width: 503px;
+	height: 49px;
+	top: 70px;
+	align-items: center;
+	color: white;
+    justify-content: center;
+    background-color: rgba(0,0,0,0.65);
+	.defuse_plant_bar {
+		height: 49px;
+		background-color: #3c3c3c;
+		position: absolute;
+		width: 0%;
+	}
+	.defuse_plant_caption {
+		z-index: 1;
+		display: flex;
+		text-transform: uppercase;
+		align-items: flex-end;
+		svg {
+			margin-right: 13px;
+		}
+    }
+    &.right {
+        left: calc(50% + 71px);
+        .defuse_plant_bar {
+            left: 0;
+        }
+    }
+    &.left {
+        right: calc(50% + 71px);
+        .defuse_plant_bar {
+            right: 0;
+        }
+    }
+    &.hide {
+        opacity: 0;
+    }
+}
+#encapsulator {
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
+	position: fixed;
+	justify-content: center;
+	top: 80px;
+	width: 1148px;
+	height: 50px;
+	left: 50%;
+	transform: translateX(-50%);
+	.CT {
+		color: var(--color-new-ct);
+	}
+	.T {
+		color: var(--color-new-t);
+	}
+	.wins_bar {
+		display: flex;
+		flex-direction: row;
+		width: 10px;
+		height: 30px;
+	}
+	.wins_bar.CT {
+		background-color: var(--color-new-ct);
+	}
+	.wins_bar.T {
+		background-color: var(--color-new-t);
+	}
+}
+.alert_bar.CT {
+	background-color: var(--color-new-ct);
+}
+.alert_bar.T {
+	background-color: var(--color-new-t);
+}
+#series_container {
+	display: flex;
+	flex-direction: row;
+	width: 126px;
+	height: 30px;
+}
+#series_text {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	font-weight: bold;
+	color: var(--white-full);
+}
+.container {
+	display: flex;
+	flex-direction: row;
+	width: 511px;
+	height: 100%;
+}
+.container.left {
+	justify-content: flex-end;
+}
+.container.right {
+	justify-content: flex-start;
+}
+.series_wins {
+	display: flex;
+	flex-direction: row;
+	width: 400px;
+	height: 30px;
+	z-index: 1;
+	padding-left: 6px;
+	padding-right: 6px;
+	top: -30px;
+	transition: top 0.5s;
+}
+.series_wins.show {
+	top: 0px;
+}
+.wins_box_container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	align-items: flex-start;
+	justify-content: flex-start;
+}
+.series_wins.left {
+	.wins_box_container {
+		flex-direction: row-reverse;
+	}
+}
+.wins_box {
+	width: 77px;
+	height: 7px;
+	margin-left: 2px;
+	margin-right: 2px;
+	box-sizing: border-box;
+}
+.wins_box.CT {
+	background-color: rgba(0,0,0,0.6);
+}
+.wins_box.CT.win {
+	background-color: var(--color-new-ct);
+}
+.wins_box.T {
+	background-color: rgba(0,0,0,0.6);
+}
+.wins_box.T.win {
+	background-color: var(--color-new-t);
+}

src/HUD/MatchOverview/MatchOverview.tsx

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

src/HUD/Overview/Overview.tsx

@@ -0,0 +1,125 @@
+import React 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-socket';
+import api from '../../api/api';
+
+interface IState {
+    player: {
+        data: I.Player | null,
+        show: boolean
+    },
+    match: {
+        data: I.Match | null,
+        show: boolean,
+        teams: I.Team[],
+    },
+    team: {
+        data: I.Team | null,
+        show: boolean
+    }
+}
+
+interface IProps {
+    match: I.Match | null,
+    map: Map,
+    players: Player[]
+}
+
+export default class Overview extends React.Component<IProps, IState> {
+    constructor(props: IProps){
+        super(props);
+        this.state = {
+            player: {
+                data: null,
+                show: false
+            },
+            match: {
+                data: null,
+                show: false,
+                teams: []
+            },
+            team: {
+                data: null,
+                show: false,
+            }
+        }
+    }
+    loadTeams = async () => {
+        const { match } = this.state;
+        if(!match.data || !match.data.left.id || !match.data.right.id) return;
+        const teams = await Promise.all([api.teams.getOne(match.data.left.id), api.teams.getOne(match.data.right.id)]);
+        if(!teams[0] || !teams[1]) return;
+        this.setState(state => {
+            state.match.teams = teams;
+            return state;
+        });
+    }
+    componentDidMount() {
+        configs.onChange((data: any) => {
+            if(!data || !data.preview_settings) return;
+            this.setState({
+                player: {
+                    data: (data.preview_settings.player_preview && data.preview_settings.player_preview.player) || null,
+                    show: Boolean(data.preview_settings.player_preview_toggle)
+                },
+                team: {
+                    data: (data.preview_settings.team_preview && data.preview_settings.team_preview.team) || null,
+                    show: Boolean(data.preview_settings.team_preview_toggle)
+                },
+                match: {
+                    data: (data.preview_settings.match_preview && data.preview_settings.match_preview.match) || null,
+                    show: Boolean(data.preview_settings.match_preview_toggle),
+                    teams: this.state.match.teams
+                }
+            }, this.loadTeams);
+        });
+        actions.on("toggleUpcomingMatch", () => {
+            this.setState(state => {
+                state.match.show = !state.match.show;
+                return state;
+            })
+        })
+        actions.on("togglePlayerPreview", () => {
+            this.setState(state => {
+                state.player.show = !state.player.show;
+                return state;
+            })
+        })
+    }
+    getVeto = () => {
+        const { map, match } = this.props;
+        if(!match) return null;
+        const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
+        const veto = match.vetos.find(veto => veto.mapName === mapName);
+        if(!veto) return null;
+        return veto;
+    }
+    renderPlayer = () => {
+        const { player } = this.state;
+        if(!player.data) return null;
+        return <PlayerOverview round={this.props.map.round + 1} player={player.data} players={this.props.players} show={player.show} veto={this.getVeto()} />
+    }
+    renderMatch = () => {
+        const { match } = this.state;
+        if(!match.data || !match.teams[0] || !match.teams[1]) return null;
+        return <MatchOverview match={match.data} show={match.show} veto={this.getVeto()} teams={match.teams}/>
+    }
+    renderTeam = () => {
+        const { team } = this.state;
+        if(!team.data) return null;
+        return <TeamOverview team={team.data} show={team.show} veto={this.getVeto()} />
+    }
+	render() {
+		return (
+            <>
+                {this.renderPlayer()}
+                {this.renderMatch()}
+                {this.renderTeam()}
+            </>
+        );
+	}
+}

src/HUD/PauseTimeout/Pause.tsx

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

src/HUD/PauseTimeout/Timeout.tsx

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

src/HUD/PlayerOverview/PlayerOverview.tsx

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

src/HUD/PlayerOverview/playeroverview.scss

@@ -0,0 +1,74 @@
+.player-overview {
+	position: fixed;
+	top: 130px;
+	background-color: #000000a8;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 300px;
+	padding: 30px;
+	color: white;
+	opacity: 0;
+	transition: opacity 0.75s;
+}
+.player-overview.show {
+	opacity: 1;
+}
+.player-overview-stat {
+	display: flex;
+	flex-direction: column;
+	margin: 8px 0;
+	.panel {
+		height: 10px;
+		margin: 3px 0;
+		.filling {
+			height: 100%;
+		}
+	}
+}
+.player-overview.CT {
+	.player-overview-stat {
+		.panel {
+			.filling {
+				background-color: var(--color-new-ct);
+			}
+			background-color: #082435;
+		}
+	}
+}
+.player-overview.T {
+	.player-overview-stat {
+		.panel {
+			.filling {
+				background-color: var(--color-new-t);
+			}
+			background-color: #331b00;
+		}
+	}
+}
+.player-overview-picture {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	img {
+		border-radius: 50%;
+		margin-bottom: 20px;
+		max-width: 170px;
+		max-height: 170px;
+	}
+}
+.player-overview-username {
+	text-align: center;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+img.flag {
+	border-radius: 0;
+	margin: 0;
+	left: 0;
+	bottom: 0;
+	height: 22px;
+	margin-right: 8px;
+}

src/HUD/Players/Avatar.tsx

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

src/HUD/Players/Observed.tsx

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

src/HUD/Players/Player.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+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";
+
+interface IProps {
+  player: I.Player,
+  isObserved: boolean,
+}
+
+const compareWeapon = (weaponOne: I.WeaponRaw, weaponTwo: I.WeaponRaw) => {
+  if (weaponOne.name === weaponTwo.name &&
+    weaponOne.paintkit === weaponTwo.paintkit &&
+    weaponOne.type === weaponTwo.type &&
+    weaponOne.ammo_clip === weaponTwo.ammo_clip &&
+    weaponOne.ammo_clip_max === weaponTwo.ammo_clip_max &&
+    weaponOne.ammo_reserve === weaponTwo.ammo_reserve &&
+    weaponOne.state === weaponTwo.state
+  ) return true;
+
+  return false;
+}
+
+const compareWeapons = (weaponsObjectOne: { [key: string]: I.WeaponRaw }, weaponsObjectTwo: { [key: string]: I.WeaponRaw }) => {
+  const weaponsOne = Object.values(weaponsObjectOne).sort((a, b) => (a.name as any) - (b.name as any))
+  const weaponsTwo = Object.values(weaponsObjectTwo).sort((a, b) => (a.name as any) - (b.name as any))
+
+  if (weaponsOne.length !== weaponsTwo.length) return false;
+
+  return weaponsOne.every((weapon, i) => compareWeapon(weapon, weaponsTwo[i]));
+}
+
+const arePlayersEqual = (playerOne: I.Player, playerTwo: I.Player) => {
+  if (playerOne.name === playerTwo.name &&
+    playerOne.steamid === playerTwo.steamid &&
+    playerOne.observer_slot === playerTwo.observer_slot &&
+    playerOne.defaultName === playerTwo.defaultName &&
+    playerOne.clan === playerTwo.clan &&
+    playerOne.stats.kills === playerTwo.stats.kills &&
+    playerOne.stats.assists === playerTwo.stats.assists &&
+    playerOne.stats.deaths === playerTwo.stats.deaths &&
+    playerOne.stats.mvps === playerTwo.stats.mvps &&
+    playerOne.stats.score === playerTwo.stats.score &&
+    playerOne.state.health === playerTwo.state.health &&
+    playerOne.state.armor === playerTwo.state.armor &&
+    playerOne.state.helmet === playerTwo.state.helmet &&
+    playerOne.state.defusekit === playerTwo.state.defusekit &&
+    playerOne.state.flashed === playerTwo.state.flashed &&
+    playerOne.state.smoked === playerTwo.state.smoked &&
+    playerOne.state.burning === playerTwo.state.burning &&
+    playerOne.state.money === playerTwo.state.money &&
+    playerOne.state.round_killhs === playerTwo.state.round_killhs &&
+    playerOne.state.round_kills === playerTwo.state.round_kills &&
+    playerOne.state.round_totaldmg === playerTwo.state.round_totaldmg &&
+    playerOne.state.equip_value === playerTwo.state.equip_value &&
+    playerOne.state.adr === playerTwo.state.adr &&
+    playerOne.avatar === playerTwo.avatar &&
+    playerOne.country === playerTwo.country &&
+    playerOne.realName === playerTwo.realName &&
+    compareWeapons(playerOne.weapons, playerTwo.weapons)
+  ) return true;
+
+  return false;
+}
+
+const Player = ({ player, isObserved }: IProps) => {
+
+  const weapons = Object.values(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";
+  return (
+    <div className={`player ${player.state.health === 0 ? "dead" : ""} ${isObserved ? 'active' : ''}`}>
+      <div className="player_data">
+        <Avatar steamid={player.steamid} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
+        <div className="dead-stats">
+          <div className="labels">
+            <div className="stat-label">K</div>
+            <div className="stat-label">A</div>
+            <div className="stat-label">D</div>
+          </div>
+          <div className="values">
+            <div className="stat-value">{player.stats.kills}</div>
+            <div className="stat-value">{player.stats.assists}</div>
+            <div className="stat-value">{player.stats.deaths}</div>
+          </div>
+        </div>
+        <div className="player_stats">
+          <div className="row">
+            <div className="health">
+              {player.state.health}
+            </div>
+            <div className="username">
+              <div>{isLeft ? <span>{player.observer_slot}</span> : null} {player.name} {!isLeft ? <span>{player.observer_slot}</span> : null}</div>
+              {primary || secondary ? <Weapon weapon={primary ? primary.name : secondary.name} active={primary ? primary.state === "active" : secondary.state === "active"} /> : ""}
+              {player.state.round_kills ? <div className="roundkills-container">{player.state.round_kills}</div> : null}
+            </div>
+          </div>
+          <div className={`hp_bar ${player.state.health <= 20 ? 'low' : ''}`} style={{ width: `${player.state.health}%` }}></div>
+          <div className="row">
+            <div className="armor_and_utility">
+              <Bomb player={player} />
+              <Armor player={player} />
+              <Defuse player={player} />
+            </div>
+            <div className="money">${player.state.money}</div>
+            <div className="grenades">
+              {grenades.map(grenade => (
+                [
+                  <Weapon key={`${grenade.name}-${grenade.state}`} weapon={grenade.name} active={grenade.state === "active"} isGrenade />,
+                  grenade.ammo_reserve === 2 ? <Weapon key={`${grenade.name}-${grenade.state}-double`} weapon={grenade.name} active={false} isGrenade /> : null,
+                ]
+              ))}
+            </div>
+            <div className="secondary_weapon">{primary && secondary ? <Weapon weapon={secondary.name} active={secondary.state === "active"} /> : ""}</div>
+          </div>
+          <div className="active_border"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const arePropsEqual = (prevProps: Readonly<IProps>, nextProps: Readonly<IProps>) => {
+  if (prevProps.isObserved !== nextProps.isObserved) return false;
+
+  return arePlayersEqual(prevProps.player, nextProps.player);
+}
+
+//export default React.memo(Player, arePropsEqual);
+export default Player;

src/HUD/Players/TeamBox.tsx

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

src/HUD/Players/observed.scss

@@ -0,0 +1,247 @@
+.observed {
+    position: fixed;
+    width: 620px;
+    bottom: 120px;
+    margin-left: -310px;
+    left: 50%;
+    height: 86px;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    background-color: rgba(0,0,0,0.6);
+
+    .main_row, .stats_row {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        position: relative;
+        height: 43px;
+    }
+
+    .stats_row {
+        height: 28px;
+
+        .stats_cell {
+            height: 100%;
+            width: 56px;
+            display: flex;
+            flex-direction: column;
+            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+
+            .label {
+                height: 13px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 10px;
+                color: #b2b2b2;
+            }
+
+            .stat {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+        .ammo {
+            height: 100%;
+            width: 140px;
+            display: flex;
+            .ammo_counter {
+                flex: 1;
+                display: flex;
+                font-size: 18px;
+                font-weight: 600;
+                > div {
+                    width: 32px;
+                    display: flex;
+                    align-items: center;
+                }
+                .ammo_clip {
+                    justify-content: flex-end;
+                }
+                .ammo_reserve {
+                    justify-content: flex-start;
+                }
+            }
+            .ammo_icon_container {
+                display: flex;
+                height: 100%;
+                width: 48px;
+                align-items: center;
+                justify-content: center;
+                svg {
+                    max-width: 30px;
+                    fill: white;
+                }
+            }
+        }
+        .health_armor_container {
+            display: flex;
+            height: 100%;
+            width: 140px;
+            justify-content: center;
+            .text {
+                width: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 600;
+                font-size: 21px;
+                height: 100%;
+                padding-top: 2px;
+            }
+            
+            .icon {
+                display: flex;
+                width: 30px;
+                align-items: center;
+                justify-content: center;
+                svg {
+                    max-height:30px;
+                    max-width:22px;
+                }
+            }
+        }
+        .statistics {
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            .stat {
+                display: flex;
+                font-weight: 600;
+                font-size: 18px;
+                margin-right: 24px;
+            }
+        }
+    }
+
+    .main_row {
+        font-weight: 600;
+        .logo {
+            height: 43px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .grenade_container {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            width: 140px;
+            justify-content: center;
+        
+        }
+        .username_container {
+            height: 100%;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            .real_name {
+                font-size: 7pt;
+                color: rgba(255, 255, 255, 0.5);
+            }
+        }
+        .weapon.grenade {
+            height: 28px;
+            /*filter: invert(1);*/
+
+            &:last-child {
+                margin-right: 5px;
+            }
+        }
+        
+    }
+    .sidebar {
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        &:first-child {
+            left: -10px;
+        }
+        &:last-child {
+            right: -10px;
+        }
+    }
+    .flag {
+        height: 43px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            height: 43px;
+        }
+    }
+    .avatar {
+        align-self: flex-end;
+        display: flex;
+        position: relative;
+        width: 140px;
+        height: 140px;
+        img {
+            border-radius:50%;
+        }
+    }
+    
+    &.T {
+        border-bottom: 6px solid var(--color-new-t);
+        .main_row .username_container .username, .stats_row .ammo .ammo_counter .ammo_reserve {
+            color: var(--color-new-t)
+        }
+        .sidebar {
+            background-color: var(--color-new-t)
+        }
+        .stats_row .statistics .stat .label {
+            color: var(--color-new-t);
+            margin-right: 2px;
+        }
+        .stats_row .health_armor_container .icon, .stats_row .ammo .ammo_icon_container {
+            svg {
+                fill: var(--color-new-t);
+            }
+        }
+    }
+    &.CT {
+        border-bottom: 6px solid var(--color-new-ct);
+        .main_row .username_container .username, .stats_row .ammo .ammo_counter .ammo_reserve {
+            color: var(--color-new-ct)
+        }
+        .sidebar {
+            background-color: var(--color-new-ct)
+        }
+        .stats_row .statistics .stat .label {
+            color: var(--color-new-ct);
+            margin-right: 2px;
+        }
+        .stats_row .health_armor_container .icon, .stats_row .ammo .ammo_icon_container {
+            svg {
+                fill: var(--color-new-ct);
+            }
+        }
+        
+    }
+}
+
+#cameraFeed {
+    width: 150px;
+    height: 150px;
+    overflow: hidden;
+    position: absolute;
+    transform: scale(0.94);
+    left: 0px;
+    bottom: 0;
+    transform-origin: bottom left;
+    iframe {
+        position: relative;
+        border: none;
+        width: 750px;
+        height: 300px;
+    }
+}

src/HUD/Players/players.scss

@@ -0,0 +1,371 @@
+.teambox {
+    position: fixed;
+    bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    transition: opacity 0.75s;
+    &.CT {
+        .player .hp_bar {
+            background-color: var(--color-new-ct);
+        }
+    }
+    &.T {
+        .player .hp_bar {
+            background-color: var(--color-new-t);
+        }
+    }
+    &.hide {
+        opacity: 0;
+    }
+    &.left {
+        left: 10px;
+        .player {
+            .row {
+                flex-direction: row;
+                .grenades {
+                    padding-right: 5px;
+                }
+                
+                .armor_and_utility {
+                    justify-content: flex-start;
+                }
+                .money {
+                    margin-right: auto;
+                }
+                .username .roundkills-container {
+                    right: 115px;
+                }
+                .secondary_weapon {
+                    padding-right: 10px;
+                }
+                
+            }
+            .dead-stats {
+                right: 8px;
+            }
+        }
+    }
+    &.right {
+        right: 10px;
+        .player {
+            flex-direction: row-reverse;
+            .dead-stats {
+                left: 8px;
+            }
+            .player_data {
+                flex-direction: row-reverse;
+                .hp_bar {
+                    align-self: flex-end;
+                }
+                .row {
+                    flex-direction: row-reverse;
+                    .grenades {
+                        padding-left: 5px;
+                    }
+                    .username {
+                        flex-direction: row-reverse;
+                        .roundkills-container {
+                            left: 115px;
+                        }
+                    }
+                    .secondary_weapon {
+                        padding-left: 10px;
+                    }
+                    .armor_and_utility {
+                        justify-content: flex-end;
+                    }
+                    .money {
+                        margin-left: auto;
+                        justify-content: flex-end;
+                    } 
+                    .weapon {
+                        transform: scaleX(-1);
+                    }
+                }
+                .avatar {
+                    justify-content: flex-start;
+                }
+            }
+        }
+    }  
+    .player {
+        width: 645px;
+        height: 70px;
+        margin-bottom: 4px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        &.active {
+            .player_data {
+                border: 2px solid white;
+            }
+        }
+        &.dead {
+            opacity: 0.7;
+            .player_side_bar {
+                background-color: var(--main-panel-color) !important;
+            }
+            .player_data {
+                .avatar {
+                    filter: grayscale(100%);
+                }
+                .dead-stats {
+                    display: flex;
+                }
+                .row {
+                    .hp_background_2 {
+                        opacity: 0;
+                    }
+                    .health {
+                        color: #b2b2b2;
+                        overflow: hidden;
+                    }
+                    .username {
+                        color: #b2b2b2;
+                    }
+                    .armor_and_utility {
+                        width: 0px;
+                        overflow: hidden;
+                    }
+                    .money {
+                        color: #466722;
+                    }
+                }
+            }
+        }
+        &:last-child .player_data {
+            border-radius: 0 0 20px 20px;
+        }
+        .player_side_bar {
+            width: 10px;
+            height: 70px;
+            &.CT {
+                background-color: var(--color-new-ct);
+            }
+            &.T {
+                background-color: var(--color-new-t);
+            }
+        }
+        .dead-stats {
+            position: absolute;
+            height: 85%;
+            width: 60px;
+            display: none;
+            flex-direction: column;
+            font-weight: 600;
+            color: white;
+            opacity: 0.75;
+            top: 10%;
+            .labels, .values {
+                display: flex;
+                flex-direction: row;
+                flex: 1;
+                .stat-label, .stat-value {
+                    display: flex;
+                    flex: 1;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+        .player_data {
+            background-color: var(--sub-panel-color);
+            width: 415px;
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            height: 100%;
+            .player_stats {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                min-width: 0;
+                .hp_bar {
+                    height: 2px;
+                    &.low {
+                        background-color: red;
+                    }
+                }
+                .row {
+                    flex: 1;
+                    display: flex;
+                    position: relative;
+                    svg.weapon {
+                        filter: invert(45%);
+                        &.active {
+                            filter: invert(0);
+                        }
+                    }
+                    .hp_background, .hp_background_2 {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        z-index: 0;
+                    }
+                    .hp_background_2 {
+                        background-color: var(--color-bomb);
+                        transition: width 0.75s 1.5s;
+                    }
+                    .armor_and_utility {
+                        width: 39px;
+                        display: flex;
+                        align-items: center;
+                        padding-left: 5px;
+                        padding-right: 5px;
+                        .armor_indicator, .bomb_indicator, .defuse_indicator {
+                            svg {
+                                max-height: 20px;
+                                fill: white;
+                            }
+                        }
+                        div {
+                            display: flex;
+                            width: 50%;
+                        }
+                    }
+                    .username {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        z-index: 1;
+                        color: white;
+                        font-weight: 600;
+                        max-width: calc(100% - 49px);
+                        justify-content: space-between;
+                        overflow: hidden;
+                        font-size: 18px;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        .roundkills-container {
+                            position: absolute;
+                            background-image: url('./../../assets/images/icon_skull_default.svg');
+                            background-repeat: no-repeat;
+                            background-size: 10px;
+                            background-position: left 2px;
+                            padding-left: 16px;
+                            font-size: 13px;
+                        }
+                        div span {
+                            opacity: 0.6;
+                            font-size:15px;
+                        }
+                        svg.weapon {
+                            max-height: 30px;
+                            width: auto;
+                            margin-left: 5px;
+                            margin-right: 5px;
+                            max-width: 100px;
+                            height: 30px;
+                        }
+                    }
+                    .money {
+                        width: 60px;
+                        color: var(--color-moneys);
+                        font-weight: 600;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-start;
+                    }
+                    .grenades {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-around;
+                        svg.grenade {
+                            max-height: 20px;
+                            height: 20px;
+                        }
+                    }
+                    .health {
+                        width: 49px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        z-index: 1;
+                        color: white;
+                        font-weight: 600;
+                        font-size:18px;
+                    }
+                    .secondary_weapon {
+                        display: flex;
+                        align-items: center;
+                        svg {
+                            max-height: 30px;
+                            height: 30px;
+                        }
+                    }
+                }
+            }
+            .avatar {
+                width: 70px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                overflow: hidden;
+                position: relative;
+                .videofeed {
+                    width:70px;
+                    height:70px;
+                    position: absolute;
+                    display: flex;
+                    justify-content: center;
+                    video {
+                        height: 70px;
+                        position: absolute;
+                    }
+                }
+                img {
+                    border-radius:50%;
+                }
+            }
+        }
+    }
+}
+
+.players_alive {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+    background-color: rgba(0,0,0,0.5);
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    opacity: 1;
+    transition: opacity 1s;
+    .counter_container {
+        display: flex;
+        height: 45px;
+        > div {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size:30px;
+            color: white;
+            background-color: rgba(0,0,0,0.5);
+        }
+        .team_counter {
+            background-color: rgba(0,0,0,0.75);
+        }
+        .CT {
+            color: var(--color-new-ct);
+        }
+        .T {
+            color: var(--color-new-t);
+        }
+    }
+    .title_container {
+        color: white;
+        text-transform: uppercase;
+        text-align: center;
+        height:20px;
+        font-size:14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0,0,0,0.75);
+    }
+    &.hide {
+        opacity: 0;
+    }
+}

src/HUD/Radar/LexoRadar/LexoRadar.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Bomb } from 'csgogsi-socket';
+import maps, { ScaleConfig, MapConfig, ZoomAreas } from './maps';
+import './index.css';
+import { RadarPlayerObject, RadarGrenadeObject } from './interface';
+import config from './config';
+interface IProps {
+  players: RadarPlayerObject[];
+  grenades: RadarGrenadeObject[];
+  bomb?: Bomb | null;
+  mapName: string;
+  zoom?: ZoomAreas;
+  mapConfig: MapConfig,
+  reverseZoom: string,
+  parsePosition: (position: number[], size: number, config: ScaleConfig) => number[]
+}
+
+const isShooting = (lastShoot: number) => (new Date()).getTime() - lastShoot <= 250;
+class App extends React.Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      players: [],
+      grenades: [],
+      bomb: null
+    }
+  }
+
+  renderGrenade = (grenade: RadarGrenadeObject) => {
+    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'}`}
+        style={{
+          transform: `translateX(${grenade.position[0].toFixed(2)}px) translateY(${grenade.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
+        }}>
+          <div className="explode-point"></div>
+          <div className="background"></div>
+      </div>
+    )
+  }
+  renderDot = (player: RadarPlayerObject) => {
+    const { reverseZoom } = this.props;
+    return (
+      <div key={player.id}
+        className={`player ${player.shooting? 'shooting':''} ${player.flashed ? 'flashed':''} ${player.side} ${player.hasBomb ? 'hasBomb':''} ${player.isActive ? 'active' : ''} ${!player.isAlive ? 'dead' : ''} ${player.visible ? 'visible':'hidden'}`}
+        style={{
+          transform: `translateX(${player.position[0].toFixed(2)}px) translateY(${player.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
+          width: config.playerSize * player.scale,
+          height: config.playerSize * player.scale,
+        }}>
+        <div className="background-fire" style={{ transform: `rotate(${-90 + player.position[2]}deg)`, opacity: isShooting(player.lastShoot) ? 1 : 0 }} ><div className="bg"/></div>
+        <div className="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
+        <div className="label">{player.label}</div>
+      </div>
+    )
+  }
+  renderBomb = () => {
+    const { bomb, mapConfig, reverseZoom } = this.props;
+    if(!bomb) return null;
+    if(bomb.state === "carried" || bomb.state === "planting") return null;
+    if("config" in mapConfig){
+      const position = this.props.parsePosition(bomb.position, 30, mapConfig.config);
+      if(!position) return null;
+      
+      return (
+        <div className={`bomb ${bomb.state} visible`}
+          style={{
+            transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
+          }}>
+          <div className="explode-point"></div>
+          <div className="background"></div>
+        </div>
+      )
+    }
+    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})` }
+
+    if(zoom){
+      style.transform = `scale(${zoom.zoom})`;
+      style.transformOrigin = `${zoom.origin[0]}px ${zoom.origin[1]}px`;
+    }
+    //if(players.length === 0) return null;
+    return <div className="map" style={style}>
+        {players.map(this.renderDot)}
+        {grenades.map(this.renderGrenade)}
+        {this.renderBomb()}
+      </div>;
+  }
+}
+
+export default App;

src/HUD/Radar/LexoRadar/LexoRadarContainer.tsx

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

src/HUD/Radar/LexoRadar/config.ts

@@ -0,0 +1,5 @@
+const config = {
+    playerSize: 60,
+}
+
+export default config;

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

@@ -0,0 +1,5 @@
+import Firebomb from './firebomb.png'
+import Flash from './flash.png'
+import Smoke from './smoke.png'
+
+export { Firebomb, Flash, Smoke };

src/HUD/Radar/LexoRadar/index.css

@@ -0,0 +1,285 @@
+html, body, .map-container {
+    width:100%;
+    height:100%;
+    margin: 0;
+}
+
+@keyframes FlashOrFragDeployed {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
+        opacity: 1;
+    }
+    100% {
+        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.8);
+        opacity:0;
+    }
+}
+@keyframes BombPlanted {
+    0% {
+        box-shadow: 0 0 0 0 rgba(185, 5, 5, 0.8);
+    }
+    100% {
+        box-shadow: 0 0 0 50px rgba(185, 5, 5, 0);
+    }
+}
+@keyframes BombExploded {
+    0% {
+        box-shadow: 0 0 0 0 rgba(185, 5, 5, 0.8);
+    }
+    100% {
+        box-shadow: 0 0 0 150px rgba(185, 5, 5, 0);
+    }
+}
+@keyframes BombDefused {
+    0% {
+        box-shadow: 0 0 0 0 rgba(5, 185, 5, 0.8);
+    }
+    100% {
+        box-shadow: 0 0 0 150px rgba(5, 185, 5, 0);
+    }
+}
+.map-container {
+    position: relative;
+}
+
+.map-container .map {
+    width:1024px;
+    height: 1024px;
+    position: relative;
+    transform: scale(1);
+    transition: all 0.5s;
+}
+.map .player, .map .grenade, .map .bomb {
+    position: absolute;
+    height:30px;
+    width:30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.5s ease;
+    /*transition: all 0.1s ease;/**/
+}
+.map .player .background {
+    /*background-color:white;*/
+    /*clip-path: polygon(0 0, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);*/
+    background-image: url('./assets/playerBg.png');
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition:transform 0.2s ease;
+}
+.map .player .background-fire {
+    position: absolute;
+    width:200%;
+    height:200%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:transform 0.2s ease;
+    /*background-color:white;*/
+    /*clip-path: polygon(0 0, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);*/
+
+}
+@keyframes Blink {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.map .player .background-fire .bg {
+    width:100%;
+    height:100%;
+    background-image: url('./assets/shootFire.png');
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    position: relative;
+    left: 50%;
+    animation: Blink;
+    animation-duration: 0.25s;
+    animation-iteration-count: infinite;
+}
+.map .player.dead {
+    opacity: 0.2;
+    z-index: 1;
+}
+.map .player {
+    transition:transform 0.1s ease, opacity 1s;
+    image-rendering: -moz-crisp-edges; /* Firefox */
+    image-rendering: -o-crisp-edges; /* Opera */
+    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
+    image-rendering: crisp-edges;
+    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
+}
+.map .player:not(.dead) {
+    z-index: 2;
+}
+
+.map .player.flashed.CT:not(.dead) .label {
+    background: rgb(159 197 255);
+}
+.map .player.flashed.T:not(.dead) .label {
+    background: rgb(255 219 165);
+}
+.map .player.active .background {
+    width:120%;
+    height:120%;
+}
+
+/*
+.map .player.shooting .background {
+    width: 110%;
+    height: 110%;
+}
+
+.map .player.active.shooting .background {
+    width: 132%;
+    height: 132%;
+}
+*/
+.map .player.active {
+    width:120%;
+    height:120%;
+    z-index: 3;
+}
+.map .grenade .background {
+    border-radius:50%;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity:1;
+    transition: opacity 0.25s;
+}
+.map .grenade.smoke .background {
+    background-color: rgba(255,255,255,0.5);
+    opacity: 1;
+    transition: opacity 1s;
+}
+.map .grenade.smoke {
+    transition: all 0.5s;
+}
+.map .grenade.smoke.inair .background {
+    background-color: transparent !important;
+    border: none !important;
+    background-image: url('./grenades/smoke.png');
+    filter: invert(1);
+}
+.map .grenade.smoke.exploded .background {
+    opacity: 0;
+}
+.map .grenade.flashbang, .map .grenade.frag {
+    filter: invert(1);
+}
+.map .grenade.flashbang .background {
+    background-image: url('./grenades/flash.png');
+    background-color: transparent;
+}
+.map .grenade.frag .background {
+    background-image: url('./grenades/frag.png');
+    background-color: transparent;
+}
+.map .grenade .explode-point, .map .bomb .explode-point {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    border-radius: 0.08px;
+}
+.map .grenade.flashbang.exploded .explode-point, .map .grenade.frag.exploded .explode-point {
+    animation: FlashOrFragDeployed 0.25s 1 forwards;
+}
+
+.map .grenade.flashbang.exploded .background, .map .grenade.frag.exploded .background {
+    opacity: 0;
+}
+.map .grenade.smoke .background {
+    border: 5px solid grey;
+    background-color: rgba(255,255,255,0.5);
+}
+.map .grenade.smoke.CT .background {
+    border: 5px solid var(--color-new-ct);
+    background-color: rgba(255, 255, 255,0.5);
+}
+.map .grenade.smoke.T .background {
+    border: 5px solid var(--color-new-t);
+    background-color: rgba(255, 255, 255,0.5);
+}
+.map .grenade.firebomb .background {
+    background-color:transparent;
+    background-image: url('./grenades/firebomb.png');
+    filter: invert(1);
+}
+.map .grenade.inferno {
+    width:12px;
+    height:12px;
+}
+.map .grenade.smoke {
+    width:60px;
+    height:60px;
+}
+.map .grenade.inferno .background {
+    background-color: red;
+    opacity: 0.5;
+    border: 2px solid orange;
+}
+.map .player .background, .map .player .label,.map .grenade .background, .map .bomb .background {
+    position: absolute;
+    width:100%;
+    height:100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.map .player .label {
+    color: white;
+    font-weight: 600;
+    border-radius: 50%;
+    transition: background-color 0.5s;
+    -webkit-font-smoothing: crisp-edges;
+    font-size: 37px;
+    text-shadow: 4px 4px 0 black;
+}
+.map .bomb {
+    transition:transform 0.1s ease;
+}
+.map .bomb .background {
+    background-image: url('./grenades/bomb.png');
+    background-size: 66%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius:50%;
+}
+.map .bomb.planted .explode-point, .map .bomb.defusing .explode-point {
+    animation: BombPlanted 2s infinite;
+}
+.map .bomb.exploded .explode-point {
+    animation: BombExploded 2s 1 forwards;
+}
+.map .bomb.defused .explode-point {
+    animation: BombDefused 2s 1 forwards;
+}
+.map .player.CT .label {
+    background: rgb(16, 88, 197)
+}
+.map .player.T .label {
+    background: rgb(255, 153, 0);
+}
+.map .player.T.hasBomb .label {
+    background: red;
+}
+
+@keyframes Hidden {
+    from {
+    }
+    to {
+        display: none !important;
+    }
+}
+.map .hidden {
+    opacity: 0;
+    animation: Hidden 1s ease 1s 1;
+    animation-fill-mode: forwards;/**/
+
+}

src/HUD/Radar/LexoRadar/interface.ts

@@ -0,0 +1,55 @@
+import { Player, Side } from "csgogsi";
+
+export interface RadarPlayerObject {
+    id: string,
+    label: string | number,
+    visible: boolean,
+    side: Side,
+    position: number[],
+    forward: number,
+    isActive: boolean,
+    isAlive: boolean,
+    steamid: string,
+    hasBomb: boolean,
+    flashed: boolean,
+    shooting: boolean,
+    lastShoot: number,
+    scale: number,
+    player: Player
+}
+
+export interface RadarGrenadeObject {
+    state: 'inair' | 'landed' | 'exploded'
+    side: Side | null,
+    type: 'decoy' | 'smoke' | 'frag' | 'firebomb' | 'flashbang' | 'inferno',
+    position: number[],
+    visible: boolean,
+    id: string,
+} 
+export interface GrenadeBase {
+    owner: string,
+    type: 'decoy' | 'smoke' | 'frag' | 'firebomb' | 'flashbang' | 'inferno'
+    lifetime: string
+}
+
+export interface DecoySmokeGrenade extends GrenadeBase {
+    position: string,
+    velocity: string,
+    type: 'decoy' | 'smoke',
+    effecttime: string,
+}
+
+export interface DefaultGrenade extends GrenadeBase {
+    position: string,
+    type: 'frag' | 'firebomb' | 'flashbang',
+    velocity: string,
+}
+
+export interface InfernoGrenade extends GrenadeBase {
+    type: 'inferno',
+    flames: { [key: string]: string }
+}
+
+export type Grenade = DecoySmokeGrenade | DefaultGrenade | InfernoGrenade;
+
+export type ExtendedGrenade = Grenade & { id: string, side: Side | null, };

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

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 583.2590342775677,
+            "y": 428.92222042149115
+        },
+        "pxPerUX": 0.1983512056034216,
+        "pxPerUY": -0.20108163914549304
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,15 @@
+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_cache/index.ts

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 361.7243823603619,
+            "y": 579.553558767951
+        },
+        "pxPerUX": 0.1830927328891829,
+        "pxPerUY": -0.17650705879909936
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 563.1339320329055,
+            "y": 736.9535330430065
+        },
+        "pxPerUX": 0.2278315639654376,
+        "pxPerUY": -0.22776482548619972
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 426.51386123945593,
+            "y": 790.7266981544722
+        },
+        "pxPerUX": 0.2041685571162696,
+        "pxPerUY": -0.20465735943851654
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,16 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 645.7196725473384,
+            "y": 340.2921393569175
+        },
+        "pxPerUX": 0.20118507589946494,
+        "pxPerUY": -0.20138282875746794,
+        "originHeight": -170,
+    },
+    "file": radar
+}
+
+export default config;

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

@@ -0,0 +1,37 @@
+import radar from './radar.png'
+
+const high = {
+    "origin": {
+        "x": 473.1284773048749,
+        "y": 165.7329003801045
+    },
+    "pxPerUX": 0.14376095926926907,
+    "pxPerUY": -0.14736670935219626
+};
+
+const low = {
+    "origin": {
+        "x": 473.66746071612374,
+        "y": 638.302101754172
+    },
+    "pxPerUX": 0.1436068746398272,
+    "pxPerUY": -0.14533406508526941
+};
+
+const config = {
+    configs: [
+        {
+            id: 'high',
+            config: high,
+            isVisible: (height: number) => height >= -450,
+        },
+        {
+            id: 'low',
+            config: low,
+            isVisible: (height: number) => height < -450,
+        },
+    ],
+    file: radar
+}
+
+export default config;

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

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 927.3988878244819,
+            "y": 343.8221009185496
+        },
+        "pxPerUX": 0.1923720959212443,
+        "pxPerUY": -0.19427507725530338
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,15 @@
+import radar from './radar.png'
+
+const config = {
+    "config": {
+        "origin": {
+            "x": 527.365542903922,
+            "y": 511.81469648562296
+        },
+        "pxPerUX": 0.21532584158170223,
+        "pxPerUY": -0.21299254526091588
+    },
+    "file":radar
+}
+
+export default config;

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

@@ -0,0 +1,67 @@
+import { Player } from 'csgogsi-socket';
+import radar from './radar.png'
+
+const high = {
+    "origin": {
+        "x": 784.4793452283254,
+        "y": 255.42597837029027
+    },
+    "pxPerUX": 0.19856123172015677,
+    "pxPerUY": -0.19820052722907044
+};
+
+const low = {
+    "origin": {
+        "x": 780.5145858437052,
+        "y": 695.4259783702903
+    },
+    "pxPerUX": 0.1989615567841087,
+    "pxPerUY": -0.19820052722907044
+};
+
+const config = {
+    configs: [
+        {
+            id: 'high',
+            config: high,
+            isVisible: (height: number) => height >= 11700,
+        },
+        {
+            id: 'low',
+            config: low,
+            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
+}
+
+export default config;
+/*
+import radar from './radar.png'
+
+export default {
+    "config": {
+        "origin": {
+            "x": 971.5536135341899,
+            "y": 424.5618319055844
+        },
+        "pxPerUX": 0.34708183044632246,
+        "pxPerUY": -0.3450882697407333
+    },
+    "file":radar
+}*/

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

@@ -0,0 +1,71 @@
+import de_mirage from './de_mirage';
+import de_cache from './de_cache';
+import de_dust2 from './de_dust2';
+import de_inferno from './de_inferno';
+import de_train from './de_train';
+import de_overpass from './de_overpass';
+import de_nuke from './de_nuke';
+import de_vertigo from './de_vertigo';
+import de_anubis from './de_anubis';
+import de_ancient from './de_ancient';
+import api from '../../../../api/api';
+import { Player } from 'csgogsi-socket';
+
+export type ZoomAreas = {
+    threshold: (players: Player[]) => boolean;
+    origin: number[],
+    zoom: number
+}
+
+export interface ScaleConfig {
+    origin: {
+        x:number,
+        y:number
+    },
+    pxPerUX: number,
+    pxPerUY: number,
+    originHeight?: number
+}
+
+interface SingleLayer {
+    config: ScaleConfig,
+    file: string,
+    zooms?: ZoomAreas[]
+}
+
+interface DoubleLayer {
+    configs: {
+        id: string,
+        config: ScaleConfig,
+        isVisible: (height: number) => boolean
+    }[],
+    file: string,
+    zooms?: ZoomAreas[]
+}
+
+export type MapConfig = SingleLayer | DoubleLayer;
+
+const maps: { [key: string] : MapConfig} = {
+    de_mirage,
+    de_cache,
+    de_inferno,
+    de_dust2,
+    de_train,
+    de_overpass,
+    de_nuke,
+    de_vertigo,
+    de_ancient,
+    de_anubis
+}
+
+api.maps.get().then(fallbackMaps => {
+    const mapNames = Object.keys(fallbackMaps);
+    for(const mapName of mapNames){
+        if(mapName in maps){
+            continue;
+        }
+        maps[mapName] = fallbackMaps[mapName];
+    }
+}).catch(() => {});
+
+export default maps;

src/HUD/Radar/Radar.tsx

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

src/HUD/Radar/RadarMaps.tsx

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

src/HUD/Radar/radar.scss

@@ -0,0 +1,66 @@
+#radar_maps_container {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	border: none;
+	background-color: rgba(0,0,0,0.5);
+	transition: all 1s;
+	.map-container {
+		transition: all 1s;
+	}
+}
+#iframe_radar {
+	border: none;
+}
+#radar_maps_container.hide {
+	opacity: 0;
+}
+#radar_maps_container.preview {
+    transform: rotate3d(1, 0, 0, 14deg) translateX(-50%);
+    transform-style: preserve-3d;
+    left: 50%;
+    top: 100px;
+	.map {
+		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);
+}
+.veto_entry {
+	display: flex;
+	justify-content: center;
+	>div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: white;
+		text-transform: uppercase;
+		font-size: 10pt;
+	}
+	.team_logo {
+		img {
+			max-height: 23px;
+			padding-right: 3px;
+			max-width: 23px;
+		}
+		.logo {
+			height: 23px;
+			width: 23px;
+		}
+	}
+	.map_name.active {
+		text-shadow: 0 0 15px white;
+		font-weight: 600;
+	}
+}

src/HUD/SideBoxes/Money.tsx

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

src/HUD/SideBoxes/SideBox.tsx

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

src/HUD/SideBoxes/UtilityLevel.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import Weapon from "./../Weapon/Weapon";
+import { Player, WeaponRaw, Side } from "csgogsi-socket";
+
+interface Props {
+    sides?: 'reversed',
+    show: boolean;
+    side: 'CT' | 'T',
+    players: Player[]
+}
+
+function utilityState(amount: number) {
+  if (amount === 20) {
+    return "Full";
+  }
+  if (amount > 14) {
+    return "Great";
+  }
+  if (amount > 9) {
+    return "Good";
+  }
+  if (amount > 5) {
+    return "Low";
+  }
+  if (amount > 0) {
+    return "Poor";
+  }
+  return "None";
+}
+
+function utilityColor(amount: number) {
+  if (amount === 20) {
+    return "#22f222";
+  }
+  if (amount > 14) {
+    return "#32f218";
+  }
+  if (amount > 9) {
+    return "#8ef218";
+  }
+  if (amount > 5) {
+    return "#f29318";
+  }
+  if (amount > 0) {
+    return "#f25618";
+  }
+  return "#f21822";
+}
+
+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 })
+      .ammo_reserve || 0
+  );
+}
+
+function parseGrenades(players: Player[], side: Side) {
+  const grenades = players
+    .filter(player => player.team.side === side)
+    .map(player => Object.values(player.weapons).filter(weapon => weapon.type === "Grenade"))
+    .flat()
+    .map(grenade => ({ ...grenade, name: grenade.name.replace("weapon_", "") }));
+  return grenades;
+}
+
+export function summarise(players: Player[], side: Side) {
+  const grenades = parseGrenades(players, side);
+  return {
+    hg: sum(grenades, "hegrenade"),
+    flashes: sum(grenades, "flashbang"),
+    smokes: sum(grenades, "smokegrenade"),
+    inc: sum(grenades, "incgrenade") + sum(grenades, "molotov")
+  };
+}
+
+class GrenadeContainer extends React.PureComponent<{ grenade: string; amount: number }> {
+  render() {
+    return (
+      <div className="grenade_container">
+        <div className="grenade_image">
+          <Weapon weapon={this.props.grenade} active={false} isGrenade />
+        </div>
+        <div className="grenade_amount">x{this.props.amount}</div>
+      </div>
+    );
+  }
+}
+
+export default class SideBox extends React.Component<Props> {
+    render() {
+        const grenades = summarise(this.props.players, this.props.side);
+        const total = Object.values(grenades).reduce((a, b) => a+b, 0);
+        return (
+            <div className={`utilitybox ${this.props.side || ''} ${this.props.show ? "show" : "hide"}`}>
+                <div className="title_container">
+                    <div className="title">Utility Level -&nbsp;</div>
+                    <div className="subtitle" style={{color: utilityColor(total)}}>{utilityState(total)}</div>
+                </div>
+                <div className="grenades_container">
+                    <GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
+                    <GrenadeContainer grenade={this.props.side === 'CT' ? 'incgrenade' : 'molotov'} amount={grenades.inc} />
+                    <GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
+                    <GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
+                </div>
+            </div>
+        );
+    }
+}

src/HUD/SideBoxes/sideboxes.scss

@@ -0,0 +1,221 @@
+.boxes {
+	position: fixed;
+	bottom: 384px;
+}
+.boxes.left {
+	left: 10px;
+}
+.boxes.right {
+	right: 10px;
+}
+.boxes.hide {
+	.utilitybox {
+		height: 0;
+		opacity: 0;
+	}
+	.moneybox {
+		height: 0;
+		opacity: 0;
+	}
+	.sidebox {
+		height: 0;
+		opacity: 0;
+	}
+}
+.utilitybox.hide {
+	height: 0;
+	opacity: 0;
+}
+.moneybox.hide {
+	height: 0;
+	opacity: 0;
+}
+.sidebox.hide {
+	height: 0;
+	opacity: 0;
+}
+.sidebox {
+	width: 415px;
+	height: 70px;
+	display: flex;
+	flex-direction: row;
+	opacity: 1;
+	transition: all 0.75s;
+	background-color: var(--sub-panel-color);
+	margin-bottom: 4px;
+	margin-top: 4px;
+	align-items: center;
+	.title_container {
+		color: var(--white-full);
+		height: 60px;
+		width: 100%;
+		font-size: 20px;
+		display: flex;
+		flex-direction: column;
+		>div {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			font-weight: 600;
+			font-size: 18px;
+		}
+	}
+	.image_container {
+		width: 70px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		img {
+			max-width: 70px;
+			max-height: 70px;
+		}
+	}
+}
+.utilitybox {
+	width: 415px;
+	height: 70px;
+	display: flex;
+	flex-direction: row;
+	opacity: 1;
+	transition: all 0.75s;
+	background-color: var(--sub-panel-color);
+	margin-bottom: 4px;
+	margin-top: 4px;
+	flex-direction: column;
+	margin-bottom: 4px;
+	border-radius: 20px 20px 0 0;
+	.title_container {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		font-weight: 600;
+		font-size: 16px;
+		height: 24px;
+	}
+	.title {
+		height: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.grenades_container {
+		display: flex ;
+		
+		flex: 1;
+		height: 46px;
+		.grenade_container {
+			display: flex;
+			flex: 1;
+			color: white;
+			align-items: center;
+			font-weight: 600;
+			font-size: 18px;
+			justify-content: center;
+			
+			svg {
+				height: 30px;
+				width:auto;				
+			}
+		}
+	}
+}
+.moneybox {
+	width: 415px;
+	height: 70px;
+	display: flex;
+	flex-direction: row;
+	opacity: 1;
+	transition: all 0.75s;
+	background-color: var(--sub-panel-color);
+	margin-bottom: 4px;
+	margin-top: 4px;
+	font-weight: 600;
+	margin-bottom: 0px;
+	.money_container {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		color: white;
+		.title {
+			height: 25px;
+			display: flex;
+			align-items: flex-end;
+			font-size: 16px;
+			justify-content: center;
+		}
+		.value {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			font-size: 18px;
+			justify-content: center;
+		}
+	}
+	.loss_container {
+		width: 4px;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+		.loss-box {
+			height: 13px;
+			width: 100%;
+			background-color: #515254;
+			margin-top: 1px;
+			margin-bottom: 1px;
+		}
+		.loss-box.active.CT {
+			background-color: var(--color-new-ct);
+		}
+		.loss-box.active.T {
+			background-color: var(--color-new-t);
+		}
+	}
+}
+.sidebox.right {
+	flex-direction: row-reverse;
+	.title_container {
+		>div {
+			flex-direction: row-reverse;
+			text-align: right;
+			padding-right: 10px;
+		}
+	}
+}
+.sidebox.left {
+	.title_container {
+		>div {
+			flex-direction: row;
+			text-align: left;
+			padding-left: 10px;
+		}
+	}
+}
+.utilitybox.CT {
+	.title {
+		color: var(--color-new-ct);
+	}
+}
+.utilitybox.T {
+	.title {
+		color: var(--color-new-t);
+	}
+}
+.moneybox.right {
+	flex-direction: row-reverse;
+}
+.moneybox.CT {
+	.money_container {
+		.title {
+			color: var(--color-new-ct);
+		}
+	}
+}
+.moneybox.T {
+	.money_container {
+		.title {
+			color: var(--color-new-t);
+		}
+	}
+}

src/HUD/TeamOverview/TeamOverview.tsx

@@ -0,0 +1,18 @@
+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/TeamOverview/teamoverview.scss

@@ -0,0 +1,42 @@
+.match-overview {
+	opacity: 0;
+	transition: opacity 0.75s;
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	right: 10px;
+	top: 375px;
+	background-color: #000000a8;
+	text-transform: uppercase;
+	width: 250px;
+	color: white;
+}
+.match-overview.show {
+	opacity: 1;
+}
+.match-overview-teams {
+	display: flex;
+	>div {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 5px 0;
+		&:not(.match-overview-vs) {
+			background-color: rgba(0,0,0,0.7);
+		}
+	}
+}
+.match-overview-title {
+	text-align: center;
+	font-weight: 600;
+	background-color: rgba(0,0,0,0.5);
+	padding: 3px 0;
+}
+.match-overview-vs {
+	width: 20px;
+	flex: unset;
+	background-color: rgba(0,0,0,0.6);
+	font-size: 30px;
+}

src/HUD/Timers/BombTimer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+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 }> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      height: 0,
+      show: false
+    };
+  }
+  hide = () => {
+    this.setState({ show: false, height: 100 });
+  };
+  componentDidMount() {
+    const bomb = new BombTimer(time => {
+      let height = time > 40 ? 4000 : time * 100;
+      this.setState({ height: height / 40 });
+    });
+    bomb.onReset(this.hide);
+    GSI.on("data", data => {
+      if (data.bomb && data.bomb.countdown) {
+        if (data.bomb.state === "planted") {
+          this.setState({ show: true });
+          return bomb.go(data.bomb.countdown);
+        }
+        if (data.bomb.state !== "defusing") {
+          this.hide();
+        }
+      } else {
+        this.hide();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div id={`bomb_container`}>
+        <div className={`bomb_timer ${this.state.show ? "show" : "hide"}`} style={{ height: `${this.state.height}%` }}></div>
+        <div className={`bomb_icon ${this.state.show ? "show" : "hide"}`}>
+          <C4 fill="white" />
+        </div>
+      </div>
+    );
+  }
+}

src/HUD/Timers/Countdown.ts

@@ -0,0 +1,46 @@
+export default class Countdown {
+    last: number;
+    time: number;
+    step: (time: number) => void;
+    on: boolean;
+    resetFunc?: Function;
+
+    constructor(step: (time: number) => void){
+        this.last = 0;
+        this.time = 0;
+        this.on = false;
+        this.step = step;
+    }
+    onReset(func: Function) {
+        this.resetFunc = func;
+    }
+    stepWrapper = (time: number) =>{
+        if(this.time < 0) return this.reset();
+        if(!this.on) return this.reset();
+        if(!this.last) this.last = time;
+        if(this.time !== Number((this.time - (time - this.last)/1000))){
+            this.time = Number((this.time - (time - this.last)/1000));
+            this.step(this.time);
+        }
+        this.last =time;
+
+
+        if(this.last) requestAnimationFrame(this.stepWrapper)
+    }
+
+    go(duration: string | number){
+        //console.log("STARTED WITH ", duration);
+        if(typeof duration === "string") duration = Number(duration);
+        if(Math.abs(duration - this.time) > 2) this.time = duration;
+        this.on = true;
+        if(!this.last ) requestAnimationFrame(this.stepWrapper);
+
+    }
+
+    reset(){
+        this.last = 0;
+        this.time = 0;
+        this.on = false;
+        if(this.resetFunc) this.resetFunc();
+    }
+}

src/HUD/Timers/PlantDefuse.tsx

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

src/HUD/Tournament/Ladder.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import * as I from './../../api/interfaces';
+
+interface MatchData {
+	left: { name: string; score: string | number; logo: string };
+	right: { name: string; score: string | number; logo: string };
+}
+interface Props {
+    tournament: I.Tournament,
+    matches: I.Match[],
+    teams: I.Team[]
+}
+
+export default class Ladder extends React.Component<Props> {
+	joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
+		const { tournament } = this.props;
+		if (!tournament || !matchup) return matchup;
+
+		if (matchup.parents.length) return matchup;
+
+		const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
+		if (!parents.length) return matchup;
+		matchup.parents.push(...parents.map(parent => this.joinParents(parent, matchups)));
+
+		return matchup;
+	};
+
+	copyMatchups = (): I.DepthTournamentMatchup[] => {
+		if (!this.props.tournament) return [];
+		const matchups = JSON.parse(JSON.stringify(this.props.tournament.matchups)) as I.DepthTournamentMatchup[];
+		return matchups;
+	};
+
+	setDepth = (matchups: I.DepthTournamentMatchup[], matchup: I.DepthTournamentMatchup, depth: number, force = false) => {
+		const getParents = (matchup: I.DepthTournamentMatchup) => {
+			return matchups.filter(parent => parent.loser_to === matchup._id || parent.winner_to === matchup._id);
+		};
+
+		if (!matchup.depth || force) {
+			matchup.depth = depth;
+			getParents(matchup).forEach(matchup => this.setDepth(matchups, matchup, depth + 1));
+		}
+		if (matchup.depth <= depth - 1) {
+			this.setDepth(matchups, matchup, depth - 1, true);
+		}
+		return matchup;
+	};
+
+	getMatch = (matchup: I.TournamentMatchup) => {
+		const { matches } = this.props;
+		const matchData: MatchData = {
+			left: { name: 'TBD', score: '-', logo: '' },
+			right: { name: 'TBD', score: '-', logo: '' }
+		};
+		const match = matches.find(match => match.id === matchup.matchId);
+		if (!match) return matchData;
+		const teams = [
+			this.props.teams.find(team => team._id === match.left.id),
+			this.props.teams.find(team => team._id === match.right.id)
+		];
+		if (teams[0]) {
+			matchData.left.name = teams[0].name;
+			matchData.left.score = match.left.wins;
+			matchData.left.logo = teams[0].logo;
+		}
+		if (teams[1]) {
+			matchData.right.name = teams[1].name;
+			matchData.right.score = match.right.wins;
+			matchData.right.logo = teams[1].logo;
+		}
+		return matchData;
+	};
+
+	renderBracket = (
+		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);
+
+		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)}
+					<div className="connector"></div>
+				</div>
+			);
+        }
+        const currentMatch = matches.find(mtch => mtch.current);
+        const isCurrent = currentMatch && currentMatch.id === matchup.matchId;
+		return (
+			<div className={`bracket depth-${depth}`}>
+				<div className="parent-brackets">
+					{this.renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
+					{this.renderBracket(matchup.parents[1], depth + 1, matchup._id, parentsToRender.length)}
+				</div>
+				<div className="bracket-details">
+					<div
+						className={`match-connector ${
+							!matchup.parents.length || parentsToRender.length === 0 ? 'first-match' : ''
+							} ${isLast ? 'last-match' : ''}`}
+					></div>
+					{parentsToRender.length === 1 ? <div className="loser-parent-indicator"></div> : null}
+					<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}
+							</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}
+							</div>
+							<div className="team-name">{match.right.name}</div>
+							<div className="team-score">{match.right.score}</div>
+						</div>
+					</div>
+				</div>
+
+				{childVisibleParents === 2 ? (
+					<div className={`connector amount-${parentsToRender.length}`}></div>
+				) : null}
+			</div>
+		);
+	};
+
+	render() {
+		const { tournament } = this.props;
+		if (!tournament) return null;
+		const matchups = this.copyMatchups();
+		const gf = matchups.find(matchup => matchup.winner_to === null);
+		if (!gf) return null;
+		const joinedParents = this.joinParents(gf, matchups);
+		const matchupWithDepth = this.setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
+		return this.renderBracket(matchupWithDepth, 0, undefined, 2, true);
+	}
+}

src/HUD/Tournament/Tournament.tsx

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

src/HUD/Tournament/tournament.scss

@@ -0,0 +1,147 @@
+.ladder-container {
+	position: absolute;
+	margin-left: 50%;
+	transform: translateX(-50%);
+	background-color: rgba(0,0,0,0.85);
+	top: 200px;
+	opacity: 0;
+	transition: opacity 1s;
+	color: white;
+	>.bracket {
+		>.connector {
+			display: none;
+		}
+	}
+}
+.ladder-container.show {
+	opacity: 1;
+}
+.bracket {
+	display: flex;
+	justify-content: flex-end;
+	position: relative;
+	&:first-child {
+		>.connector {
+			top: 50%;
+		}
+	}
+	&:nth-child(2) {
+		>.connector {
+			top: 0%;
+		}
+	}
+}
+.parent-brackets {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	position: relative;
+}
+.empty-bracket {
+	position: relative;
+	>.bracket {
+		padding-right: 240px;
+	}
+	>.connector {
+		width: 240px;
+		height: 1px;
+		top: 50%;
+	}
+	&:nth-child(2) {
+		>.bracket {
+			>.connector {
+				top: 0%;
+			}
+		}
+	}
+}
+.loser-parent-indicator {
+	position: absolute;
+	width: 15px;
+	height: 15px;
+	left: 5px;
+	top: calc(50% - 20px);
+	background-size: contain;
+	opacity: 0.2;
+}
+.connector {
+	position: absolute;
+	right: 0;
+	height: 50%;
+	background-color: #ffd700;
+	width: 1px;
+}
+.bracket-details {
+	.match-details {
+		.team-data {
+			&:first-child {
+				border-bottom: 1px solid transparent;
+			}
+			display: flex;
+			.team-name {
+				flex: 1;
+				display: flex;
+				align-items: center;
+			}
+			.team-score {
+				width: 10px;
+				display: flex;
+				align-items: center;
+			}
+			.team-logo {
+				width: 30px;
+				height: 24px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				img {
+					height: 20px;
+				}
+			}
+		}
+		display: flex;
+		flex-direction: column;
+		width: 200px;
+		margin: 10px 20px;
+		background: rgba(0,0,0,0.5);
+		border-radius: 2px;
+		padding: 5px;
+		z-index: 1;
+		cursor: pointer;
+	}
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+.match-connector {
+	width: 100%;
+	position: absolute;
+	height: 1px;
+	background: #ffd700;
+}
+.match-connector.last-match {
+	width: 220px;
+	left: 0;
+}
+.match-connector.first-match {
+	width: 220px;
+	right: 0;
+}
+.tournament-data {
+	img {
+		max-height: 64px;
+	}
+	display: flex;
+	padding: 10px;
+	align-items: center;
+	justify-content: center;
+}
+.tournament-name {
+	text-transform: uppercase;
+	font-size: 45px;
+	padding-left: 22px;
+}
+.match-details.current {
+	border: 1px solid gold;
+}

src/HUD/Trivia/Trivia.tsx

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

src/HUD/Trivia/trivia.scss

@@ -0,0 +1,27 @@
+.trivia_container {
+    position: absolute;
+    left:20px;
+    background-color:black;
+    color: white;
+    width: 450px;
+    top:830px;
+    opacity:1;
+    transition: opacity 1s;
+    
+    font-size: 16pt;
+}
+.trivia_container .title {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding-left:30px;
+    font-weight:bold;
+    padding-top:10px;
+}
+.trivia_container .content {
+    padding-left:30px;
+    padding-bottom:15px;
+}
+.trivia_container.hide {
+    opacity:0;
+}

src/HUD/Weapon/Weapon.tsx

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

src/HUD/countries.ts

@@ -0,0 +1,259 @@
+export const countries: any = {
+    'AF' : 'Afghanistan',
+    'AX' : 'Aland Islands',
+    'AL' : 'Albania',
+    'DZ' : 'Algeria',
+    'AS' : 'American Samoa',
+    'AD' : 'Andorra',
+    'AO' : 'Angola',
+    'AI' : 'Anguilla',
+    'AQ' : 'Antarctica',
+    'AG' : 'Antigua And Barbuda',
+    'AR' : 'Argentina',
+    'AM' : 'Armenia',
+    'AW' : 'Aruba',
+    'AU' : 'Australia',
+    'AT' : 'Austria',
+    'AZ' : 'Azerbaijan',
+    'BS' : 'Bahamas',
+    'BH' : 'Bahrain',
+    'BD' : 'Bangladesh',
+    'BB' : 'Barbados',
+    'BY' : 'Belarus',
+    'BE' : 'Belgium',
+    'BZ' : 'Belize',
+    'BJ' : 'Benin',
+    'BM' : 'Bermuda',
+    'BT' : 'Bhutan',
+    'BO' : 'Bolivia',
+    'BA' : 'Bosnia and Herzegovina',
+    'BW' : 'Botswana',
+    'BV' : 'Bouvet Island',
+    'BR' : 'Brazil',
+    'IO' : 'British Indian Ocean Territory',
+    'BN' : 'Brunei',
+    'BG' : 'Bulgaria',
+    'BF' : 'Burkina Faso',
+    'BI' : 'Burundi',
+    'CIS': 'CIS',
+    'KH' : 'Cambodia',
+    'CM' : 'Cameroon',
+    'CA' : 'Canada',
+    'CV' : 'Cape Verde',
+    'KY' : 'Cayman Islands',
+    'CF' : 'Central African Republic',
+    'TD' : 'Chad',
+    'CL' : 'Chile',
+    'CN' : 'China',
+    'CX' : 'Christmas Island',
+    'CC' : 'Cocos (Keeling) Islands',
+    'CO' : 'Colombia',
+    'KM' : 'Comoros',
+    'CG' : 'Congo',
+    'CD' : 'Congo, Democratic Republic',
+    'CK' : 'Cook Islands',
+    'CR' : 'Costa Rica',
+    'CI' : 'Cote D\'Ivoire',
+    'HR' : 'Croatia',
+    'CU' : 'Cuba',
+    'EU' : 'European Union',
+    'CY' : 'Cyprus',
+    'CZ' : 'Czech Republic',
+    'DK' : 'Denmark',
+    'DJ' : 'Djibouti',
+    'DM' : 'Dominica',
+    'DO' : 'Dominican Republic',
+    'EC' : 'Ecuador',
+    'EG' : 'Egypt',
+    'SV' : 'El Salvador',
+    'GQ' : 'Equatorial Guinea',
+    'ER' : 'Eritrea',
+    'EE' : 'Estonia',
+    'ET' : 'Ethiopia',
+    'FK' : 'Falkland Islands',
+    'FO' : 'Faroes',
+    'FJ' : 'Fiji',
+    'FI' : 'Finland',
+    'FR' : 'France',
+    'GF' : 'French Guiana',
+    'PF' : 'French Polynesia',
+    'TF' : 'French Southern Territories',
+    'GA' : 'Gabon',
+    'GM' : 'Gambia',
+    'GE' : 'Georgia',
+    'DE' : 'Germany',
+    'GH' : 'Ghana',
+    'GI' : 'Gibraltar',
+    'GR' : 'Greece',
+    'GL' : 'Greenland',
+    'GD' : 'Grenada',
+    'GP' : 'Guadeloupe',
+    'GU' : 'Guam',
+    'GT' : 'Guatemala',
+    'GG' : 'Guernsey',
+    'GN' : 'Guinea',
+    'GW' : 'Guinea-Bissau',
+    'GY' : 'Guyana',
+    'HT' : 'Haiti',
+    'HM' : 'Heard Island & Mcdonald Islands',
+    'VA' : 'Holy See (Vatican City State)',
+    'HN' : 'Honduras',
+    'HK' : 'Hong Kong',
+    'HU' : 'Hungary',
+    'IS' : 'Iceland',
+    'IN' : 'India',
+    'ID' : 'Indonesia',
+    'IR' : 'Iran',
+    'IQ' : 'Iraq',
+    'IE' : 'Ireland',
+    'IM' : 'Isle of Man',
+    'IL' : 'Israel',
+    'IT' : 'Italy',
+    'JM' : 'Jamaica',
+    'JP' : 'Japan',
+    'JE' : 'Jersey',
+    'JO' : 'Jordan',
+    'KZ' : 'Kazakhstan',
+    'KE' : 'Kenya',
+    'KI' : 'Kiribati',
+    'KR' : 'South Korea',
+    'KP' : 'North Korea',
+    'KW' : 'Kuwait',
+    'KG' : 'Kyrgyzstan',
+    'LA' : 'Laos',
+    'LV' : 'Latvia',
+    'LB' : 'Lebanon',
+    'LS' : 'Lesotho',
+    'LR' : 'Liberia',
+    'LY' : 'Libya',
+    'LI' : 'Liechtenstein',
+    'LT' : 'Lithuania',
+    'LU' : 'Luxembourg',
+    'MO' : 'Macau',
+    'MK' : 'Macedonia',
+    'MG' : 'Madagascar',
+    'MW' : 'Malawi',
+    'MY' : 'Malaysia',
+    'MV' : 'Maldives',
+    'ML' : 'Mali',
+    'MT' : 'Malta',
+    'MH' : 'Marshall Islands',
+    'MQ' : 'Martinique',
+    'MR' : 'Mauritania',
+    'MU' : 'Mauritius',
+    'YT' : 'Mayotte',
+    'MX' : 'Mexico',
+    'FM' : 'Micronesia',
+    'MD' : 'Moldova',
+    'MC' : 'Monaco',
+    'MN' : 'Mongolia',
+    'ME' : 'Montenegro',
+    'MS' : 'Montserrat',
+    'MA' : 'Morocco',
+    'MZ' : 'Mozambique',
+    'MM' : 'Myanmar',
+    'NA' : 'Namibia',
+    'NR' : 'Nauru',
+    'NP' : 'Nepal',
+    'NL' : 'Netherlands',
+    'AN' : 'Netherlands Antilles',
+    'NC' : 'New Caledonia',
+    'NZ' : 'New Zealand',
+    'NI' : 'Nicaragua',
+    'NE' : 'Niger',
+    'NG' : 'Nigeria',
+    'NU' : 'Niue',
+    'NF' : 'Norfolk Island',
+    'MP' : 'Northern Mariana Islands',
+    'NO' : 'Norway',
+    'OM' : 'Oman',
+    'PK' : 'Pakistan',
+    'PW' : 'Palau',
+    'PS' : 'Palestine',
+    'PA' : 'Panama',
+    'PG' : 'Papua New Guinea',
+    'PY' : 'Paraguay',
+    'PE' : 'Peru',
+    'PH' : 'Philippines',
+    'PN' : 'Pitcairn Islands',
+    'PL' : 'Poland',
+    'PT' : 'Portugal',
+    'PR' : 'Puerto Rico',
+    'QA' : 'Qatar',
+    'RE' : 'Reunion',
+    'RO' : 'Romania',
+    'RU' : 'Russia',
+    'RW' : 'Rwanda',
+    'BL' : 'Saint Barthelemy',
+    'SH' : 'Saint Helena',
+    'KN' : 'Saint Kitts and Nevis',
+    'LC' : 'Saint Lucia',
+    'MF' : 'Saint Martin',
+    'PM' : 'Saint Pierre And Miquelon',
+    'VC' : 'Saint Vincent and the Grenadines',
+    'WS' : 'Samoa',
+    'SM' : 'San Marino',
+    'ST' : 'Sao Tome and Principe',
+    'SA' : 'Saudi Arabia',
+    'SN' : 'Senegal',
+    'RS' : 'Serbia',
+    'SC' : 'Seychelles',
+    'SL' : 'Sierra Leone',
+    'SG' : 'Singapore',
+    'SK' : 'Slovakia',
+    'SI' : 'Slovenia',
+    'SB' : 'Solomon Islands',
+    'SO' : 'Somalia',
+    'ZA' : 'South Africa',
+    'GS' : 'South Georgia and the South Sandwich Islands',
+    'ES' : 'Spain',
+    'LK' : 'Sri Lanka',
+    'SD' : 'Sudan',
+    'SR' : 'Suriname',
+    'SS' : 'South Sudan',
+    'SJ' : 'Svalbard And Jan Mayen',
+    'SZ' : 'Swaziland',
+    'SE' : 'Sweden',
+    'CH' : 'Switzerland',
+    'SY' : 'Syria',
+    'TW' : 'Taiwan',
+    'TJ' : 'Tajikistan',
+    'TZ' : 'Tanzania',
+    'TH' : 'Thailand',
+    'TL' : 'Timor-Leste',
+    'TG' : 'Togo',
+    'TK' : 'Tokelau',
+    'TO' : 'Tonga',
+    'TT' : 'Trinidad and Tobago',
+    'TN' : 'Tunisia',
+    'TR' : 'Turkey',
+    'TM' : 'Turkmenistan',
+    'TC' : 'Turks and Caicos Islands',
+    'TV' : 'Tuvalu',
+    'UG' : 'Uganda',
+    'UA' : 'Ukraine',
+    'AE' : 'United Arab Emirates',
+    'GB' : 'United Kingdom',
+    'GB-ENG': 'England',
+    'GB-SCT': 'Scotland',
+    'GB-WLS': 'Wales',
+    'US' : 'United States',
+    'UM' : 'United States Outlying Islands',
+    'UY' : 'Uruguay',
+    'UZ' : 'Uzbekistan',
+    'VU' : 'Vanuatu',
+    'VE' : 'Venezuela',
+    'VN' : 'Vietnam',
+    'VG' : 'Virgin Islands, British',
+    'VI' : 'Virgin Islands, U.S.',
+    'WF' : 'Wallis And Futuna',
+    'EH' : 'Western Sahara',
+    'YE' : 'Yemen',
+    'ZM' : 'Zambia',
+    'ZW' : 'Zimbabwe',
+    'XK' : 'Kosovo'
+};
+
+export const getCountry = (iso: string) => {
+    return countries[iso.toUpperCase()];
+}

src/HUD/isSvg.ts

@@ -0,0 +1,11 @@
+const regex = /^\s*(?:<\?xml[^>]*>\s*)?(?:<!doctype svg[^>]*\s*(?:\[?(?:\s*<![^>]*>\s*)*\]?)*[^>]*>\s*)?(?:<svg[^>]*>[^]*<\/svg>|<svg[^/>]*\/\s*>)\s*$/i;
+
+const isSvg = (img: Buffer) =>
+    regex.test(
+        img
+            .toString()
+            .replace(/\s*<!Entity\s+\S*\s*(?:"|')[^"]+(?:"|')\s*>/gim, '')
+            .replace(/<!--([\s\S]*?)-->/g, '')
+    );
+
+export default isSvg;

src/api/actionManager.ts

@@ -0,0 +1,65 @@
+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/api.ts

@@ -0,0 +1,56 @@
+import * as I from './interfaces';
+import queryString from 'query-string';
+import { MapConfig } from '../HUD/Radar/LexoRadar/maps';
+
+
+const query = queryString.parseUrl(window.location.href).query;
+export const variant = query?.variant || "default";
+
+export const port = (query && Number(query.port)) || 1349;
+
+export const isDev = !query.isProd;
+
+export const config = {apiAddress:isDev ? `http://localhost:${port}/` : '/'}
+export const apiUrl = config.apiAddress;
+
+export async function apiV2(url: string, method = 'GET', body?: any) {
+    const options: RequestInit = {
+        method,
+        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+    }
+    if (body) {
+        options.body = JSON.stringify(body)
+    }
+    let data: any = null;
+    return fetch(`${apiUrl}api/${url}`, options)
+        .then(res => {
+            data = res;
+            return res.json().catch(_e => data && data.status < 300)
+        });
+}
+
+const api = {
+    match: {
+        get: async (): Promise<I.Match[]> => apiV2(`match`),
+        getCurrent: async (): Promise<I.Match> => apiV2(`match/current`)
+    },
+    camera: {
+        get: (): Promise<{ availablePlayers: ({steamid:string, label: string})[], uuid: string }> => apiV2('camera')
+    },
+    teams: {
+        getOne: async (id: string): Promise<I.Team> => apiV2(`teams/${id}`),
+        get: (): Promise<I.Team[]> => apiV2(`teams`),
+    },
+    players: {
+        get: async (steamids?: string[]): Promise<I.Player[]> => apiV2(steamids ? `players?steamids=${steamids.join(';')}` :`players`),
+        getAvatarURLs: async (steamid: string): Promise<{custom: string, steam: string}> => apiV2(`players/avatar/steamid/${steamid}`)
+    },
+    tournaments: {
+        get: () => apiV2('tournament')
+    },
+    maps: {
+        get: (): Promise<{ [key: string] : MapConfig}> => apiV2('radar/maps')
+    }
+}
+
+export default api;

src/api/avatars.ts

@@ -0,0 +1,24 @@
+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/api/interfaces.ts

@@ -0,0 +1,151 @@
+export interface Player {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  username: string;
+  avatar: string;
+  country: string;
+  steamid: string;
+  team: string;
+  extra: Record<string, string>;
+}
+
+export interface Team {
+  _id: string;
+  name: string;
+  country: string;
+  shortName: string;
+  logo: string;
+  extra: Record<string, string>;
+}
+/*
+export interface HUD {
+    name: string,
+    version: string,
+    author: string,
+    legacy: boolean,
+    dir: string
+}
+
+export interface Config {
+    port: number,
+    steamApiKey: string,
+    token: string,
+}*/
+export interface TournamentMatchup {
+	_id: string;
+	loser_to: string | null; // IDs of Matchups, not Matches
+	winner_to: string | null;
+	label: string;
+	matchId: string | null;
+	parents: TournamentMatchup[];
+}
+
+export interface DepthTournamentMatchup extends TournamentMatchup {
+	depth: number;
+	parents: DepthTournamentMatchup[];
+}
+
+export interface Tournament {
+	_id: string;
+	name: string;
+	logo: string;
+	matchups: TournamentMatchup[];
+	autoCreate: boolean;
+}
+export interface RoundData {
+  round: number,
+  players: {
+      [steamid: string]: PlayerRoundData
+  },
+  winner: 'CT' | 'T' | null,
+  win_type: 'bomb' | 'elimination' | 'defuse' | 'time',
+}
+
+export interface PlayerRoundData {
+  kills: number,
+  killshs: number,
+  damage: number,
+}
+
+export interface Veto {
+  teamId: string;
+  mapName: string;
+  side: "CT" | "T" | "NO";
+  type: "ban" | "pick" | "decider";
+  reverseSide?: boolean;
+  rounds?: (RoundData | null)[],
+  score?: {
+    [key: string]: number;
+  };
+  winner?: string;
+  mapEnd: boolean;
+}
+
+export interface Match {
+  id: string;
+  current: boolean;
+  left: {
+    id: string | null;
+    wins: number;
+  };
+  right: {
+    id: string | null;
+    wins: number;
+  };
+  matchType: "bo1" | "bo2" | "bo3" | "bo5";
+  vetos: Veto[];
+}
+
+export type Weapon =
+  | "ak47"
+  | "aug"
+  | "awp"
+  | "bizon"
+  | "famas"
+  | "g3sg1"
+  | "galilar"
+  | "m4a1"
+  | "m4a1_silencer"
+  | "m249"
+  | "mac10"
+  | "mag7"
+  | "mp5sd"
+  | "mp7"
+  | "mp9"
+  | "negev"
+  | "nova"
+  | "p90"
+  | "sawedoff"
+  | "scar20"
+  | "sg556"
+  | "ssg08"
+  | "ump45"
+  | "xm1014"
+  | Pistol
+  | Knife;
+
+export type Pistol = "c75a" | "deagle" | "elite" | "fiveseven" | "glock" | "hkp2000" | "p250" | "revolver" | "taser" | "tec9" | "usp_silencer";
+
+export type Knife =
+| "knife"//
+| "knife_css"//--
+| "knife_butterfly"//
+| "knife_falchion"//
+| "knife_flip"//
+| "knife_outdoor" // Nomad Knife
+| "knife_gut"//
+| "knife_gypsy_jackknife"//
+| "knife_karambit"// 
+| "knife_bayonet" //
+| "knife_cord" //
+| "knife_m9_bayonet"//
+| "knife_push" // Shadow daggers
+| "knife_stiletto"//
+| "knife_survival_bowie"//
+| "knife_t"//
+| "knife_skeleton" //
+| "knife_tactical"//
+| "knife_ursus"//
+| "knife_widowmaker"//
+| "knife_canis";//

src/assets/Icons.tsx

@@ -0,0 +1,61 @@
+import { ReactComponent as ArmorFull } from './../assets/images/icon_armor_full_default.svg';
+import { ReactComponent as ArmorHalf } from './../assets/images/icon_armor_half_default.svg';
+import { ReactComponent as ArmorHalfHelmet } from './../assets/images/icon_armor_half_helmet_default.svg';
+import { ReactComponent as ArmorHelmet } from './../assets/images/icon_armor_helmet_default.svg';
+import { ReactComponent as ArmorNone } from './../assets/images/icon_armor_none_default.svg';
+import { ReactComponent as Blind } from './../assets/images/icon_blind.svg';
+import { ReactComponent as Bomb } from './../assets/images/icon_bomb_default.svg';
+import { ReactComponent as BombExplosion }  from './../assets/images/icon_bomb_explosion_default.svg';
+import { ReactComponent as Bullets }  from './../assets/images/icon_bullets_default.svg';
+import { ReactComponent as Burning }  from './../assets/images/icon_burning.svg';
+import { ReactComponent as C4 }  from './../assets/images/icon_c4_default.svg';
+import { ReactComponent as Defuse }  from './../assets/images/icon_defuse_default.svg';
+import { ReactComponent as Health }  from './../assets/images/icon_health_default.svg';
+import { ReactComponent as HealthFull }  from './../assets/images/icon_health_full_default.svg';
+import { ReactComponent as Hourglass }  from './../assets/images/icon_hourglass_default.svg';
+import { ReactComponent as Microphone }  from './../assets/images/icon_microphone.svg';
+import { ReactComponent as Pause }  from './../assets/images/icon_pause_default.svg';
+import { ReactComponent as Skull }  from './../assets/images/icon_skull_default.svg';
+import { ReactComponent as Timer }  from './../assets/images/icon_timer_default.svg';
+import { ReactComponent as FlashedKill } from './../assets/images/flashed_kill.svg';
+import { ReactComponent as Headshot } from './../assets/images/headshot.svg';
+import { ReactComponent as NoScope } from './../assets/images/noscope.svg';
+import { ReactComponent as SmokeKill } from './../assets/images/smoke_kill.svg';
+import { ReactComponent as Suicide } from './../assets/images/suicide.svg';
+import { ReactComponent as Wallbang } from './../assets/images/wallbang.svg';
+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";
+
+
+export {
+    SmallBomb,
+    ArmorFull,
+    ArmorHalf,
+    FlashedKill,
+    Headshot,
+    NoScope,
+    SmokeKill,
+    Suicide,
+    Wallbang,
+    ArmorHalfHelmet,
+    ArmorHelmet,
+    ArmorNone,
+    Blind,
+    Bomb,
+    BombExplosion,
+    Bullets,
+    Burning,
+    C4,
+    Defuse,
+    Health,
+    HealthFull,
+    Hourglass,
+    Microphone,
+    Pause,
+    Skull,
+    Timer,
+    LogoCT,
+    LogoT,
+}
+    

src/assets/Weapons.tsx

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

src/assets/images/bomb.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="22" viewBox="0 0 16 22" version="1.1">
+	<path d="M 7.086 3.250 C 6.611 4.488, 5.047 6.761, 3.611 8.302 C -2.996 15.391, 4.886 24.971, 12.777 19.443 C 15.890 17.263, 15.760 11.435, 12.516 7.750 C 11.185 6.237, 9.594 5, 8.981 5 C 8.320 5, 8.124 4.184, 8.500 3 C 9.373 0.251, 8.156 0.466, 7.086 3.250" stroke="none"  fill-rule="evenodd"/>
+</svg>