Merge branch 'master' of github.com:lexogrine/csgo-react-hud

.env

@@ -1,2 +1,2 @@
-PORT=3500
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false
+BROWSER=none

craco.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+const fs = require('fs');
+const pathToConfig = path.join(process.env.APPDATA, 'hud-manager','databases', 'config');
+let query = '';
+if(fs.existsSync(pathToConfig)){
+    try {
+        const config = JSON.parse(fs.readFileSync(pathToConfig, 'utf-8'));
+        if(config.port) {
+            query = `?port=${config.port}`
+            console.log('LHM Port detected as', config.port);
+        } else {
+            console.log('LHM Port unavailable');
+        }
+    } catch {
+        console.log('LHM Config file invalid');
+    }
+} else {
+    console.log('LHM Config file unavailable');
+}
+
+module.exports = {
+    devServer: {
+        port: 3500,
+        open: true,
+        host: 'localhost',
+        openPage: query
+      },
+};

package.json

@@ -4,6 +4,7 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^5.7.0",
     "@types/jest": "24.0.19",
     "@types/node": "12.11.1",
     "@types/react": "16.9.9",
@@ -20,7 +21,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "zip": "npm-build-zip",
-    "start": "react-scripts start",
+    "start": "craco start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/HUD/MatchBar/MatchBar.tsx

@@ -156,6 +156,16 @@ export default class TeamBox extends React.Component<IProps, IState> {
       }, 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;
@@ -182,7 +192,7 @@ export default class TeamBox extends React.Component<IProps, IState> {
           <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":""}>Round {map.round + 1}/30</div>
+            <div id="round_now" className={isPlanted ? "hide":""}>{this.getRoundLabel()}</div>
             <Bomb />
           </div>
           <div className={`score right ${right.side}`}>{right.score}</div>

src/HUD/Radar/RadarMaps.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import "./../Styles/maps.css";
 import { Match, Veto } from "../../api/interfaces";
-import { Map, CSGO } from 'csgogsi';
+import { Map, CSGO, Team } from 'csgogsi';
 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 }
@@ -42,20 +43,20 @@ class MapsBar extends React.PureComponent<Props> {
             const current = picks.find(veto => map.name.includes(veto.mapName));
             if(!current) return null;
             return <div id="maps_container">
-                {<MapEntry veto={current} map={map} logo={current.type === "decider" ? null : map.team_ct.id === current.teamId ? map.team_ct.logo : map.team_t.logo}/>}
+                {<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} logo={veto.type === "decider" ? null : map.team_ct.id === veto.teamId ? map.team_ct.logo : map.team_t.logo}/>)}
+            {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, logo: string | null}> {
+class MapEntry extends React.PureComponent<{veto: Veto, map: Map, team: Team | null}> {
     render() {
-        const { veto, map } = this.props;
+        const { veto, map, team } = this.props;
         return <div className="veto_entry">
-            <div className="team_logo">{this.props.logo ? <img src={`data:image/jpeg;base64,${this.props.logo}`} alt={map.name} /> : null}</div>
+            <div className="team_logo">{team ? <TeamLogo team={team} />: null}</div>
             <div className={`map_name ${map.name.includes(veto.mapName) ? 'active':''}`}>{veto.mapName}</div>
         </div>
     }

src/HUD/SideBoxes/SideBox.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import './../Styles/sideboxes.css'
 
 import {configs} from './../../App';
+import isSvg from '../isSvg';
 
 export default class SideBox extends React.Component<{ side: 'left' | 'right', hide: boolean}, { title: string, subtitle: string, image?: string }> {
 	constructor(props: any) {
@@ -30,15 +31,17 @@ export default class SideBox extends React.Component<{ side: 'left' | 'right', h
 	}
 
 	render() {
-        if(!this.state.title) return '';
+        const { image, title, subtitle} = this.state;
+        if(!title) return '';
+        const encoding = image && isSvg(Buffer.from(image, 'base64')) ? 'svg+xml':'png';
 		return (
 			<div className={`sidebox ${this.props.side} ${this.props.hide ? 'hide':''}`}>
                 <div className="title_container">
-                    <div className="title">{this.state.title}</div>
-                    <div className="subtitle">{this.state.subtitle}</div>
+                    <div className="title">{title}</div>
+                    <div className="subtitle">{subtitle}</div>
                 </div>
                 <div className="image_container">
-                    {this.state.image ? <img src={`data:image/jpeg;base64,${this.state.image}`} id={`image_left`} alt={'Left'}/>:''}
+                    {this.state.image ? <img src={`data:image/${encoding};base64,${image}`} id={`image_left`} alt={'Left'}/>:''}
                 </div>
             </div>
 		);

src/HUD/Styles/maps.css

@@ -37,6 +37,11 @@
     padding-right: 3px;
     max-width: 23px;
 }
+.veto_entry .team_logo .logo {
+    height: 23px;
+    width: 23px;
+
+}
 .veto_entry .map_name.active {
     text-shadow: 0 0 15px white;
     font-weight: 600;

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;