mirror of
https://github.com/lexogrine/cs2-react-hud.git
synced 2025-12-10 02:42:49 +01:00
Updated setup to vite and moved to hooks instead of class
This commit is contained in:
Hubert Walczak
parent
44f173f23c
commit
f88baa5fc9
@ -1 +0,0 @@
|
||||
PUBLIC_URL=/dev/
|
||||
18
.eslintrc.cjs
Normal file
18
.eslintrc.cjs
Normal file
@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
43
.gitignore
vendored
43
.gitignore
vendored
@ -1,24 +1,25 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
build
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
const open = require('open');
|
||||
|
||||
module.exports = class OpenBrowser {
|
||||
constructor(options) {
|
||||
if (typeof options === 'string') {
|
||||
this.options = Object.assign(
|
||||
{
|
||||
hasOpen: false
|
||||
},
|
||||
{
|
||||
url: options
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.options = Object.assign(
|
||||
{
|
||||
port: 8080,
|
||||
host: 'localhost',
|
||||
protocol: 'http:',
|
||||
hasOpen: false
|
||||
},
|
||||
options
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
apply(compiler) {
|
||||
const options = this.options;
|
||||
let url;
|
||||
let hasOpen = options.hasOpen;
|
||||
if (options.protocol && !options.protocol.endsWith(':')) options.protocol += ':';
|
||||
if (options.url) url = options.url;
|
||||
else url = `${options.protocol}//${options.host}:${options.port}`;
|
||||
if (compiler.hooks) {
|
||||
compiler.hooks.afterEmit.tap('openBrowser', () => {
|
||||
if (!hasOpen) open(url);
|
||||
hasOpen = true;
|
||||
this.options.hasOpen = true;
|
||||
});
|
||||
} else {
|
||||
compiler.plugin('after-emit', (c, cb) => {
|
||||
if (!hasOpen) open(url);
|
||||
hasOpen = true;
|
||||
this.options.hasOpen = true;
|
||||
return cb();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
93
README.md
93
README.md
@ -17,20 +17,12 @@ Fullfledged example of the React HUD made for HUD Manager. It has:
|
||||
- Custom Radar
|
||||
|
||||
## Keybinds:
|
||||
### **Left Alt + S**
|
||||
>Makes radar smaller by 20px;
|
||||
### **Left Alt + B**
|
||||
>Makes radar smaller by 20px;
|
||||
### **Left Alt + V**
|
||||
>Makes radar bigger by 20px;
|
||||
### **Left Alt + T**
|
||||
>Shows trivia box
|
||||
### **Left Alt + M**
|
||||
>Toggles upcoming match box
|
||||
### **Left Alt + P**
|
||||
>Toggles player preview
|
||||
### **Left Alt + C**
|
||||
>Toggles camera feed
|
||||
### **Left Ctrl + B**
|
||||
>Make radar invisible
|
||||
|
||||
## **Panel**
|
||||
## Trivia settings
|
||||
@ -83,48 +75,57 @@ To create Signed HUD to prevent at least from modyfing compiled Javascript files
|
||||
|
||||
|
||||
## `panel.json` API
|
||||
To get the incoming data from the HUD Manager, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` `componentDidMount()` method:
|
||||
```javascript
|
||||
import {configs} from './../../App';
|
||||
...
|
||||
configs.onChange((data:any) => {
|
||||
if(!data) return;
|
||||
|
||||
const display = data.display_settings;
|
||||
|
||||
if(!display) return;
|
||||
|
||||
if(display[`${this.props.side}_title`]){
|
||||
this.setState({title:display[`${this.props.side}_title`]})
|
||||
}
|
||||
if(display[`${this.props.side}_subtitle`]){
|
||||
this.setState({subtitle:display[`${this.props.side}_subtitle`]})
|
||||
}
|
||||
if(display[`${this.props.side}_image`]){
|
||||
this.setState({image:display[`${this.props.side}_image`]})
|
||||
}
|
||||
});
|
||||
To get the incoming data from the HUD Manager, let's take a look at the `src/HUD/SideBoxes/SideBox.tsx` component:
|
||||
```typescript
|
||||
const Sidebox = ({side, hide} : { side: 'left' | 'right', hide: boolean}) => {
|
||||
const [ image, setImage ] = useState<string | null>(null);
|
||||
const data = useConfig('display_settings');
|
||||
|
||||
useOnConfigChange('display_settings', data => {
|
||||
if(data && `${side}_image` in data){
|
||||
const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
|
||||
setImage(imageUrl);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if(!data || !data[`${side}_title`]) return null;
|
||||
return (
|
||||
<div className={`sidebox ${side} ${hide ? 'hide':''}`}>
|
||||
<div className="title_container">
|
||||
<div className="title">{data[`${side}_title`]}</div>
|
||||
<div className="subtitle">{data[`${side}_subtitle`]}</div>
|
||||
</div>
|
||||
<div className="image_container">
|
||||
{image ? <img src={image} id={`image_left`} alt={'Left'}/>:null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
To retrieve incoming data, you should just import `configs` object and then listen for the changes with `onChange` method. Usually you want to check for the specific data, as in the callback it will always serve the full form from the Manager.
|
||||
However it looks different in the case of action input. In this case, let's look at the `src/HUD/Trivia/Trivia.tsx`:
|
||||
```javascript
|
||||
import {configs, actions} from './../../App';
|
||||
...
|
||||
actions.on("triviaState", (state: any) => {
|
||||
this.setState({show: state === "show"})
|
||||
|
||||
You can just read data from the HUDs settings by using `useConfig` hook. Everything is now strictly typed. If you make a change to panel or keybinds JSON files, Vite server will automatically generate types for you, so useConfig should always be up to date.
|
||||
|
||||
If you want to listen for a change in settings, you can use `useOnConfigChange`. In this case we are using this to force refresh `src` attribute of the img element.
|
||||
|
||||
If you want to listen for action input, you can just use `useAction` hook, like here in Trivia.tsx:
|
||||
```typescript
|
||||
useAction('triviaState', (state) => {
|
||||
setShow(state === "show");
|
||||
});
|
||||
```
|
||||
For the action input we need to import the `actions` object and create listener with the parameter on it.
|
||||
## `keybinds.json` API
|
||||
Keybinds API works in very similiar to `panel.json` action API. One more time the example will be from `src/HUD/Trivia/Trivia.tsx`:
|
||||
```javascript
|
||||
import {configs, actions} from './../../App';
|
||||
...
|
||||
actions.on("toggleTrivia", () => {
|
||||
this.setState({show: !this.state.show})
|
||||
});
|
||||
Keybinds API works in very similiar to `panel.json` action API. This time the example will be from `RadarMaps.tsx`:
|
||||
```typescript
|
||||
useAction('radarBigger', () => {
|
||||
setRadarSize(p => p+10);
|
||||
}, []);
|
||||
|
||||
useAction('radarSmaller', () => {
|
||||
setRadarSize(p => p-10);
|
||||
}, []);
|
||||
```
|
||||
Keybinds listener works on the same object as action input, in this case however there are no parameter to retrieve.
|
||||
|
||||
|
||||
## Killfeed
|
||||
Because our `csgogsi` has the ability to process input from HLAE's MIRV, listening for kills is very easy. We can see than in `src/HUD/Killfeed/Killfeed.tsx`:
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const homedir = require('os').homedir();
|
||||
const internalIp = require('internal-ip');
|
||||
const OpenBrowserPlugin = require('./OpenBrowserPlugin');
|
||||
|
||||
const pathToConfig = path.join(process.env.APPDATA || path.join(homedir, '.config'), 'hud-manager', 'databases', 'config');
|
||||
let port = 1349;
|
||||
|
||||
const getPort = () => {
|
||||
if(!fs.existsSync(pathToConfig)){
|
||||
console.warn('LHM Config file unavailable');
|
||||
return port;
|
||||
}
|
||||
|
||||
try {
|
||||
const config = JSON.parse(fs.readFileSync(pathToConfig, 'utf-8'));
|
||||
|
||||
if(!config.port){
|
||||
console.warn('LHM Port unavailable');
|
||||
}
|
||||
|
||||
console.warn('LHM Port detected as', config.port);
|
||||
return config.port;
|
||||
|
||||
} catch {
|
||||
console.warn('LHM Config file invalid');
|
||||
return port;
|
||||
}
|
||||
}
|
||||
|
||||
port = getPort();
|
||||
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 3500,
|
||||
open: false
|
||||
},
|
||||
webpack: {
|
||||
configure: (webpackConfig) => {
|
||||
webpackConfig.plugins.push(new OpenBrowserPlugin({ url: `http://${internalIp.v4.sync()}:${port}/development/`}))
|
||||
return webpackConfig;
|
||||
}
|
||||
}
|
||||
};
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4749
package-lock.json
generated
Normal file
4749
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
85
package.json
85
package.json
@ -1,60 +1,47 @@
|
||||
{
|
||||
"name": "lexogrine_cs2_hud",
|
||||
"version": "1.0.1",
|
||||
"homepage": "./",
|
||||
"name": "cs2-react-hud",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^5.7.0",
|
||||
"@types/jest": "24.0.19",
|
||||
"@types/node": "16.11.20",
|
||||
"@types/react": "17.0.38",
|
||||
"@types/react-dom": "17.0.11",
|
||||
"@types/simple-peer": "^9.11.3",
|
||||
"buffer": "^6.0.3",
|
||||
"csgogsi-socket": "^2.7.2",
|
||||
"query-string": "^6.12.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"simple-peer": "^9.11.0",
|
||||
"simple-websockets": "^1.1.0",
|
||||
"typescript": "^4.5.4",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"license": "GPL-3.0",
|
||||
"version": "1.0.2",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"zip": "npm-build-zip",
|
||||
"start": "craco start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"dev": "vite --host",
|
||||
"start": "vite --host",
|
||||
"build": "tsc && vite build",
|
||||
"pack": "npm run build && npm run zip",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview",
|
||||
"sign": "npm run build && node sign.js && npm-build-zip --name=signed"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
"dependencies": {
|
||||
"csgogsi": "^3.0.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"simple-peer": "^9.11.1",
|
||||
"simple-websockets": "^1.2.0",
|
||||
"socket.io-client": "^4.7.2",
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/history": "^4.7.5",
|
||||
"@types/socket.io-client": "^1.4.32",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"internal-ip": "^6.2.0",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"npm-build-zip": "^1.0.2",
|
||||
"open": "^8.0.2",
|
||||
"sass": "^1.32.5",
|
||||
"socket.io-client": "^2.4.0"
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@types/simple-peer": "^9.11.5",
|
||||
"@types/uuid": "^9.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"events": "^3.3.0",
|
||||
"npm-build-zip": "^1.0.4",
|
||||
"process": "^0.11.10",
|
||||
"sass": "^1.68.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5",
|
||||
"vite-compatible-readable-stream": "^3.6.1",
|
||||
"vite-plugin-svgr": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name":"Lexogrine CS2 HUD",
|
||||
"version":"1.0.0",
|
||||
"version":"1.0.2",
|
||||
"author":"Lexogrine",
|
||||
"legacy": false,
|
||||
"radar": true,
|
||||
"killfeed": false,
|
||||
"game":"cs2",
|
||||
"boltobserv":{
|
||||
"css":true,
|
||||
"maps":true
|
||||
"css":false,
|
||||
"maps":false
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@ -2,5 +2,13 @@
|
||||
{
|
||||
"bind":"Alt+C",
|
||||
"action":"toggleCams"
|
||||
},
|
||||
{
|
||||
"bind":"Alt+V",
|
||||
"action":"radarBigger"
|
||||
},
|
||||
{
|
||||
"bind":"Alt+B",
|
||||
"action":"radarSmaller"
|
||||
}
|
||||
]
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
* Use this file to apply custom styles to the radar image
|
||||
*/
|
||||
|
||||
/* Any player dot */
|
||||
div.dot {}
|
||||
|
||||
/* Players that are CT or T */
|
||||
div.dot.CT {}
|
||||
div.dot.T {}
|
||||
|
||||
/* The player with the bomb */
|
||||
div.dot.bomb{}
|
||||
|
||||
/* The player currently being observed */
|
||||
div.dot.active {}
|
||||
|
||||
/* A dead player */
|
||||
div.dot.dead {}
|
||||
|
||||
/* The number on a player dot */
|
||||
div.label {}
|
||||
|
||||
/* The number on the dot being spectated */
|
||||
div.label.active {}
|
||||
|
||||
/* The dropped or planted bomb on the map */
|
||||
#bomb {
|
||||
height: 4vmin;
|
||||
width: 4vmin;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
/* Smoke circles on the map */
|
||||
#smokes {
|
||||
display: none;
|
||||
}
|
||||
#smokes > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Inferno circles on the map */
|
||||
.inferno > div {}
|
||||
|
||||
/* The advisory on screen */
|
||||
#advisory {
|
||||
display: none !important;
|
||||
}
|
||||
13
sign.js
13
sign.js
@ -1,7 +1,10 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const crypto = require('crypto');
|
||||
const jwt = require('jsonwebtoken');
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import crypto from 'crypto';
|
||||
import jwt from 'jsonwebtoken';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __esm_dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
const sign = () => {
|
||||
const getAllFilesToSign = (hudDir) => {
|
||||
@ -17,7 +20,7 @@ const sign = () => {
|
||||
return files;
|
||||
}
|
||||
|
||||
const dir = path.join(__dirname, 'build');
|
||||
const dir = path.join(__esm_dirname, 'build');
|
||||
|
||||
const keyFile = path.join(dir, 'key');
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Instance, SignalData } from 'simple-peer';
|
||||
import api from '../../api/api';
|
||||
import { socket as Socket } from "../../App";
|
||||
const Peer = require('simple-peer');
|
||||
import api from '..';
|
||||
import { socket } from '../socket';
|
||||
import Peer from 'simple-peer';
|
||||
|
||||
const wait = (ms: number) => new Promise(r => setTimeout(r, ms));
|
||||
|
||||
@ -73,7 +73,6 @@ const closeConnection = (steamid: string) => {
|
||||
}
|
||||
|
||||
const initiateConnection = async () => {
|
||||
const socket = Socket as SocketIOClient.Socket;
|
||||
const camera = await api.camera.get();
|
||||
await wait(1000);
|
||||
|
||||
@ -104,7 +103,7 @@ const initiateConnection = async () => {
|
||||
|
||||
if (camera.uuid !== roomId) return;
|
||||
|
||||
const peerConnection: PeerInstance = new Peer({ initiator: false, trickle: false });
|
||||
const peerConnection = new Peer({ initiator: false, trickle: false }) as PeerInstance;
|
||||
|
||||
const mediaStreamPlayer: MediaStreamPlayer = { peerConnection, steamid };
|
||||
|
||||
88
src/API/HUD/index.ts
Normal file
88
src/API/HUD/index.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { CSGOGSI, Player, PlayerExtension } from 'csgogsi';
|
||||
import api, { isDev } from '..';
|
||||
|
||||
export const hudIdentity = {
|
||||
name: '',
|
||||
isDev
|
||||
};
|
||||
|
||||
export const GSI = new CSGOGSI();
|
||||
GSI.regulationMR = 12;
|
||||
|
||||
GSI.on("data", data => {
|
||||
loadPlayers(data.players);
|
||||
});
|
||||
|
||||
const requestedSteamIDs: string[] = [];
|
||||
|
||||
const loadPlayers = async (players: Player[]) => {
|
||||
const leftOvers = players.filter(player => !requestedSteamIDs.includes(player.steamid));
|
||||
const leftOverSteamids = leftOvers.map(player => player.steamid);
|
||||
if(!leftOvers.length) return;
|
||||
|
||||
requestedSteamIDs.push(...leftOverSteamids);
|
||||
|
||||
const extensions = await api.players.get(leftOverSteamids);
|
||||
|
||||
const playersExtensions: PlayerExtension[] = extensions.map(player => (
|
||||
{
|
||||
id: player._id,
|
||||
name: player.username,
|
||||
realName: `${player.firstName} ${player.lastName}`,
|
||||
steamid: player.steamid,
|
||||
country: player.country,
|
||||
avatar: player.avatar,
|
||||
extra: player.extra,
|
||||
})
|
||||
)
|
||||
|
||||
GSI.players.push(...playersExtensions);
|
||||
|
||||
|
||||
leftOvers.forEach(player => {
|
||||
loadAvatarURL(player);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
interface AvatarLoader {
|
||||
loader: Promise<string>,
|
||||
url: string,
|
||||
}
|
||||
|
||||
const avatars: { [key: string]: AvatarLoader } = {};
|
||||
|
||||
const loadAvatarURL = (player: Player) => {
|
||||
if(!player.steamid) return;
|
||||
if(avatars[player.steamid]) return avatars[player.steamid].url;
|
||||
avatars[player.steamid] = {
|
||||
url: player.avatar || '',
|
||||
loader: new Promise((resolve) => {
|
||||
api.players.getAvatarURLs(player.steamid).then(result => {
|
||||
const avatarUrl = result.custom || result.steam;
|
||||
const existing = GSI.players.find(playerEx => playerEx.steamid === player.steamid);
|
||||
const target = existing || {
|
||||
id: player.steamid,
|
||||
name: player.name,
|
||||
realName: player.realName,
|
||||
steamid: player.steamid,
|
||||
country: player.country,
|
||||
avatar: player.avatar,
|
||||
extra: player.extra
|
||||
}
|
||||
if(target) target.avatar = avatarUrl;
|
||||
|
||||
if(!existing){
|
||||
GSI.players.push(target);
|
||||
}
|
||||
|
||||
|
||||
avatars[player.steamid].url = result.custom || result.steam;
|
||||
resolve(result.custom || result.custom);
|
||||
}).catch(() => {
|
||||
delete avatars[player.steamid];
|
||||
resolve('');
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
62
src/API/contexts/actions.tsx
Normal file
62
src/API/contexts/actions.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import ActionManager, { ActionHandler, ConfigManager } from "./managers";
|
||||
import { Events } from "csgogsi";
|
||||
import { GSI } from "../HUD";
|
||||
import type { AllActions, GetInputsFromSection, Sections } from "./settings";
|
||||
|
||||
export const actions = new ActionManager();
|
||||
export const configs = new ConfigManager();
|
||||
|
||||
type EmptyListener = () => void;
|
||||
|
||||
type BaseEvents = keyof Events;
|
||||
type Callback<K> = K extends BaseEvents ? Events[K] | EmptyListener : EmptyListener;
|
||||
|
||||
export function useAction<T extends keyof AllActions>(action: T, callback: ActionHandler<T extends keyof AllActions ? AllActions[T] : never>, deps?: React.DependencyList) {
|
||||
useEffect(() => {
|
||||
|
||||
actions.on(action, callback);
|
||||
return () => {
|
||||
actions.off(action, callback);
|
||||
};
|
||||
}, deps ? [action, ...deps] : [action, callback]);
|
||||
return null;
|
||||
}
|
||||
export function useOnConfigChange<K extends keyof Sections, T = any>(section: K, callback: ActionHandler<{ [L in keyof (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)]?: (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)[L] } | null>, deps?: React.DependencyList){
|
||||
|
||||
useEffect(() => {
|
||||
const onDataChanged = (data: any) => {
|
||||
callback(data?.[section] || null);
|
||||
};
|
||||
|
||||
configs.onChange(onDataChanged);
|
||||
onDataChanged(configs.data);
|
||||
|
||||
return () => {
|
||||
configs.off(onDataChanged);
|
||||
}
|
||||
}, deps ? [section, ...deps] : [section, callback])
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function onGSI<T extends BaseEvents>(event: T, callback: Callback<T>, deps?: React.DependencyList){
|
||||
useEffect(() => {
|
||||
GSI.on(event, callback);
|
||||
|
||||
return () => {
|
||||
GSI.off(event, callback);
|
||||
}
|
||||
}, deps ? [event, ...deps] : [event, callback])
|
||||
}
|
||||
|
||||
export function useConfig<K extends keyof Sections, T extends { [K: string]: any } = {}>(section: K){
|
||||
const [ data, setData ] = useState<{ [L in keyof (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)]?: (K extends keyof Sections ? GetInputsFromSection<Sections[K]> : T)[L] } | null>(configs.data?.[section] || null);
|
||||
|
||||
const onDataChanged = useCallback((sectionData: any) => {
|
||||
setData(sectionData || null);
|
||||
}, [section]);
|
||||
|
||||
useOnConfigChange(section, onDataChanged);
|
||||
return data;
|
||||
}
|
||||
14
src/API/contexts/keybinds.ts
Normal file
14
src/API/contexts/keybinds.ts
Normal file
@ -0,0 +1,14 @@
|
||||
export const keybindDefinition = [
|
||||
{
|
||||
"bind": "Alt+C",
|
||||
"action": "toggleCams"
|
||||
},
|
||||
{
|
||||
"bind": "Alt+V",
|
||||
"action": "radarBigger"
|
||||
},
|
||||
{
|
||||
"bind": "Alt+B",
|
||||
"action": "radarSmaller"
|
||||
}
|
||||
] as const;
|
||||
71
src/API/contexts/managers.ts
Normal file
71
src/API/contexts/managers.ts
Normal file
@ -0,0 +1,71 @@
|
||||
export type ActionHandler<T = any> = (data: T) => void;
|
||||
|
||||
export default class ActionManager {
|
||||
handlers: { [K in string]?: ActionHandler[] };
|
||||
|
||||
constructor(){
|
||||
this.handlers = {}
|
||||
|
||||
/*this.on('data', _data => {
|
||||
});*/
|
||||
}
|
||||
execute = <T = any>(eventName: string, argument?: T) => {
|
||||
const handlers = this.handlers[eventName] || [];
|
||||
for(const handler of handlers){
|
||||
handler(argument);
|
||||
}
|
||||
}
|
||||
|
||||
on = <T = any>(eventName: string, handler: ActionHandler<T>) => {
|
||||
if(!this.handlers[eventName]) this.handlers[eventName] = [];
|
||||
this.handlers[eventName]!.push(handler);
|
||||
}
|
||||
|
||||
off = (eventName: string, handler: ActionHandler) => {
|
||||
if(!this.handlers[eventName]) this.handlers[eventName] = [];
|
||||
this.handlers[eventName] = this.handlers[eventName]!.filter(h => h !== handler);
|
||||
}
|
||||
}
|
||||
export class ConfigManager {
|
||||
listeners: ActionHandler[];
|
||||
data: { [K in string]?: any };
|
||||
|
||||
constructor(){
|
||||
this.listeners = [];
|
||||
this.data = {};
|
||||
}
|
||||
save(data: { [K in string]?: any }){
|
||||
this.data = data;
|
||||
this.execute();
|
||||
|
||||
/*const listeners = this.listeners.get(eventName);
|
||||
if(!listeners) return false;
|
||||
listeners.forEach(callback => {
|
||||
if(argument) callback(argument);
|
||||
else callback();
|
||||
});
|
||||
return true;*/
|
||||
}
|
||||
|
||||
execute(){
|
||||
const listeners = this.listeners;
|
||||
if(!listeners || !listeners.length) return false;
|
||||
listeners.forEach(listener => {
|
||||
listener(this.data);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
onChange = (listener: ActionHandler) => {
|
||||
const listOfListeners = this.listeners || [];
|
||||
listOfListeners.push(listener);
|
||||
this.listeners = listOfListeners;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
off = (listener: ActionHandler) => {
|
||||
this.listeners = this.listeners.filter(l => l !== listener);
|
||||
}
|
||||
|
||||
}
|
||||
162
src/API/contexts/panel.ts
Normal file
162
src/API/contexts/panel.ts
Normal file
@ -0,0 +1,162 @@
|
||||
export const panelDefinition = [
|
||||
{
|
||||
"label": "Trivia",
|
||||
"name": "trivia",
|
||||
"inputs": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "title",
|
||||
"label": "Trivia title"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "content",
|
||||
"label": "Trivia content"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"name": "triviaState",
|
||||
"values": [
|
||||
{
|
||||
"name": "show",
|
||||
"label": "Show trivia"
|
||||
},
|
||||
{
|
||||
"name": "hide",
|
||||
"label": "Hide trivia"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Display settings",
|
||||
"name": "display_settings",
|
||||
"inputs": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "left_title",
|
||||
"label": "Left box's title"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "right_title",
|
||||
"label": "Right box's title"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "left_subtitle",
|
||||
"label": "Left box's subtitle"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "right_subtitle",
|
||||
"label": "Right box's subtitle"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "left_image",
|
||||
"label": "Left box's image logo"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "right_image",
|
||||
"label": "Right box's image logo"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "replace_avatars",
|
||||
"label": "Use team logos as player avatars",
|
||||
"values": [
|
||||
{
|
||||
"label": "Only if player has no avatar",
|
||||
"name": "if_missing"
|
||||
},
|
||||
{
|
||||
"label": "Always",
|
||||
"name": "always"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"name": "boxesState",
|
||||
"values": [
|
||||
{
|
||||
"name": "show",
|
||||
"label": "Show boxes"
|
||||
},
|
||||
{
|
||||
"name": "hide",
|
||||
"label": "Hide boxes"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"name": "toggleRadarView",
|
||||
"values": [
|
||||
{
|
||||
"name": "toggler",
|
||||
"label": "Toggle radar view"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Player & Match overview",
|
||||
"name": "preview_settings",
|
||||
"inputs": [
|
||||
{
|
||||
"type": "match",
|
||||
"name": "match_preview",
|
||||
"label": "Pick an upcoming match"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select_preview",
|
||||
"label": "Mood indicator",
|
||||
"values": [
|
||||
{
|
||||
"name": "show",
|
||||
"label": ":)"
|
||||
},
|
||||
{
|
||||
"name": "hide",
|
||||
"label": ":("
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "player",
|
||||
"name": "player_preview",
|
||||
"label": "Pick a player to preview"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"name": "player_preview_toggle",
|
||||
"label": "Show player preview"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"name": "match_preview_toggle",
|
||||
"label": "Show upcoming match"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"name": "showTournament",
|
||||
"values": [
|
||||
{
|
||||
"name": "show",
|
||||
"label": "Show tournament"
|
||||
},
|
||||
{
|
||||
"name": "hide",
|
||||
"label": "Hide tournament"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
] as const;
|
||||
49
src/API/contexts/settings.ts
Normal file
49
src/API/contexts/settings.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { Match, Player, Team } from "../types"
|
||||
import { keybindDefinition } from "./keybinds";
|
||||
import { panelDefinition } from "./panel";
|
||||
|
||||
type Prettify<T> = {
|
||||
[K in keyof T]: T[K];
|
||||
} & {};
|
||||
|
||||
type Settings = typeof panelDefinition;
|
||||
|
||||
type Keybinds = typeof keybindDefinition;
|
||||
|
||||
|
||||
type InputMapper = {
|
||||
text: string;
|
||||
player: {
|
||||
type: "player",
|
||||
id: string,
|
||||
player: Player | null
|
||||
};
|
||||
match: {
|
||||
type: "match",
|
||||
id: string,
|
||||
match: Match | null
|
||||
};
|
||||
team: {
|
||||
type: "team",
|
||||
id: string,
|
||||
team: Team | null
|
||||
};
|
||||
checkbox: boolean;
|
||||
action: never;
|
||||
image: string;
|
||||
images: string[];
|
||||
select: string;
|
||||
}
|
||||
type NonNeverKeys<T extends { [K: string]: any }> = { [K in keyof T]: T[K] extends never ? never : K }[keyof T];
|
||||
|
||||
|
||||
type ValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K["name"]]: K extends { type: "action" } ? never : (K extends { type: "select" } ? K["values"][number]["name"] | "" : InputMapper[K["type"]]) }
|
||||
|
||||
export type GetInputsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ValueMapper<T>>]: ValueMapper<T>[K]};
|
||||
export type Sections = { [K in Settings[number] as K["name"]]: K["inputs"]}
|
||||
|
||||
type ActionValueMapper<T extends Settings[number]["inputs"]> = { [K in T[number] as K["name"]]: K extends { type: "action" } ? K["values"][number]["name"] : never }
|
||||
|
||||
type GetActionsFromSection<T extends Settings[number]["inputs"]> = { [K in NonNeverKeys<ActionValueMapper<T>>]: ActionValueMapper<T>[K]};
|
||||
|
||||
export type AllActions = Prettify<GetActionsFromSection<Settings[number]["inputs"]> & { [K in Keybinds[number]["action"]]: never }>;
|
||||
@ -1,14 +1,12 @@
|
||||
import * as I from './interfaces';
|
||||
import queryString from 'query-string';
|
||||
import * as I from './types';
|
||||
import { MapConfig } from '../HUD/Radar/LexoRadar/maps';
|
||||
|
||||
|
||||
const query = queryString.parseUrl(window.location.href).query;
|
||||
export const variant = query?.variant || "default";
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
export const port = Number(query.get('port') || 1349);
|
||||
export const variant = query.get("variant") || "default";
|
||||
|
||||
export const port = (query && Number(query.port)) || 1349;
|
||||
|
||||
export const isDev = !query.isProd;
|
||||
export const isDev = !query.get("isProd");
|
||||
|
||||
export const config = {apiAddress:isDev ? `http://localhost:${port}/` : '/'}
|
||||
export const apiUrl = config.apiAddress;
|
||||
@ -35,7 +33,22 @@ const api = {
|
||||
getCurrent: async (): Promise<I.Match> => apiV2(`match/current`)
|
||||
},
|
||||
camera: {
|
||||
get: (): Promise<{ availablePlayers: ({steamid:string, label: string})[], uuid: string }> => apiV2('camera')
|
||||
get: (): Promise<{ availablePlayers: ({steamid:string, label: string})[], uuid: string }> => apiV2('camera'),
|
||||
toggleVmix: (status?: boolean) => new Promise<boolean>(r => {
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
// let finished = false;
|
||||
const timeoutId = setTimeout(() => {
|
||||
controller.abort();
|
||||
r(false);
|
||||
}, 1000)
|
||||
fetch(`http://localhost:2715/visibility${status !== undefined ? `?status=${status}` : ''}`, { method: "POST", signal }).then(() => {
|
||||
clearTimeout(timeoutId);
|
||||
r(true);
|
||||
//finished = true;
|
||||
}).catch(() => { r(false); });
|
||||
|
||||
})
|
||||
},
|
||||
teams: {
|
||||
getOne: async (id: string): Promise<I.Team> => apiV2(`teams/${id}`),
|
||||
69
src/API/socket.ts
Normal file
69
src/API/socket.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { io } from "socket.io-client";
|
||||
import { isDev, port } from ".";
|
||||
import { GSI, hudIdentity } from "./HUD";
|
||||
import { CSGORaw } from "csgogsi";
|
||||
import { actions, configs } from "./contexts/actions";
|
||||
import { initiateConnection } from "./HUD/camera";
|
||||
|
||||
export const socket = io(isDev ? `localhost:${port}` : '/');
|
||||
|
||||
type RoundPlayerDamage = {
|
||||
steamid: string;
|
||||
damage: number;
|
||||
};
|
||||
type RoundDamage = {
|
||||
round: number;
|
||||
players: RoundPlayerDamage[];
|
||||
};
|
||||
|
||||
socket.on("update", (data: any, damage: any) => {
|
||||
if (damage) {
|
||||
GSI.damage = damage;
|
||||
}
|
||||
GSI.digest(data);
|
||||
});
|
||||
|
||||
const isInWindow = !!window.parent.ipcApi;
|
||||
|
||||
if(isInWindow){
|
||||
window.parent.ipcApi.receive('raw', (data: CSGORaw, damage?: RoundDamage[]) => {
|
||||
if(damage){
|
||||
GSI.damage = damage;
|
||||
}
|
||||
GSI.digest(data);
|
||||
});
|
||||
}
|
||||
|
||||
const href = window.location.href;
|
||||
|
||||
socket.emit("started");
|
||||
|
||||
if (isDev) {
|
||||
hudIdentity.name = (Math.random() * 1000 + 1).toString(36).replace(/[^a-z]+/g, '').substr(0, 15);
|
||||
hudIdentity.isDev = true;
|
||||
} else {
|
||||
const segment = href.substr(href.indexOf('/huds/') + 6);
|
||||
hudIdentity.name = segment.substr(0, segment.lastIndexOf('/'));
|
||||
}
|
||||
|
||||
socket.on("readyToRegister", () => {
|
||||
socket.emit("register", hudIdentity.name, isDev, "cs2", isInWindow ? "IPC" : "DEFAULT");
|
||||
initiateConnection();
|
||||
});
|
||||
socket.on(`hud_config`, (data: any) => {
|
||||
configs.save(data);
|
||||
});
|
||||
socket.on(`hud_action`, (data: any) => {
|
||||
actions.execute(data.action, data.data);
|
||||
});
|
||||
socket.on('keybindAction', (action: string) => {
|
||||
actions.execute(action);
|
||||
});
|
||||
|
||||
socket.on("refreshHUD", () => {
|
||||
window.top?.location.reload();
|
||||
});
|
||||
|
||||
socket.on("update_mirv", (data: any) => {
|
||||
GSI.digestMIRV(data);
|
||||
})
|
||||
@ -26,37 +26,47 @@ export interface HUD {
|
||||
legacy: boolean,
|
||||
dir: string
|
||||
}
|
||||
|
||||
|
||||
export interface Config {
|
||||
port: number,
|
||||
steamApiKey: string,
|
||||
token: string,
|
||||
}*/
|
||||
export interface TournamentMatchup {
|
||||
_id: string;
|
||||
loser_to: string | null; // IDs of Matchups, not Matches
|
||||
winner_to: string | null;
|
||||
label: string;
|
||||
matchId: string | null;
|
||||
parents: TournamentMatchup[];
|
||||
_id: string;
|
||||
loser_to: string | null; // IDs of Matchups, not Matches
|
||||
winner_to: string | null;
|
||||
label: string;
|
||||
matchId: string | null;
|
||||
parents: TournamentMatchup[];
|
||||
}
|
||||
|
||||
export interface DepthTournamentMatchup extends TournamentMatchup {
|
||||
depth: number;
|
||||
parents: DepthTournamentMatchup[];
|
||||
depth: number;
|
||||
parents: DepthTournamentMatchup[];
|
||||
}
|
||||
|
||||
export type TournamentTypes = 'swiss' | 'single' | 'double';
|
||||
|
||||
export type TournamentStage = {
|
||||
type: TournamentTypes;
|
||||
matchups: TournamentMatchup[];
|
||||
teams: number;
|
||||
phases: number;
|
||||
participants: string[];
|
||||
};
|
||||
export interface Tournament {
|
||||
_id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
matchups: TournamentMatchup[];
|
||||
autoCreate: boolean;
|
||||
_id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
groups: TournamentStage[];
|
||||
playoffs: TournamentStage;
|
||||
autoCreate: boolean;
|
||||
}
|
||||
export interface RoundData {
|
||||
round: number,
|
||||
players: {
|
||||
[steamid: string]: PlayerRoundData
|
||||
[steamid: string]: PlayerRoundData
|
||||
},
|
||||
winner: 'CT' | 'T' | null,
|
||||
win_type: 'bomb' | 'elimination' | 'defuse' | 'time',
|
||||
@ -128,24 +138,24 @@ export type Weapon =
|
||||
export type Pistol = "c75a" | "deagle" | "elite" | "fiveseven" | "glock" | "hkp2000" | "p250" | "revolver" | "taser" | "tec9" | "usp_silencer";
|
||||
|
||||
export type Knife =
|
||||
| "knife"//
|
||||
| "knife_css"//--
|
||||
| "knife_butterfly"//
|
||||
| "knife_falchion"//
|
||||
| "knife_flip"//
|
||||
| "knife_outdoor" // Nomad Knife
|
||||
| "knife_gut"//
|
||||
| "knife_gypsy_jackknife"//
|
||||
| "knife_karambit"//
|
||||
| "knife_bayonet" //
|
||||
| "knife_cord" //
|
||||
| "knife_m9_bayonet"//
|
||||
| "knife_push" // Shadow daggers
|
||||
| "knife_stiletto"//
|
||||
| "knife_survival_bowie"//
|
||||
| "knife_t"//
|
||||
| "knife_skeleton" //
|
||||
| "knife_tactical"//
|
||||
| "knife_ursus"//
|
||||
| "knife_widowmaker"//
|
||||
| "knife_canis";//
|
||||
| "knife"//
|
||||
| "knife_css"//--
|
||||
| "knife_butterfly"//
|
||||
| "knife_falchion"//
|
||||
| "knife_flip"//
|
||||
| "knife_outdoor" // Nomad Knife
|
||||
| "knife_gut"//
|
||||
| "knife_gypsy_jackknife"//
|
||||
| "knife_karambit"//
|
||||
| "knife_bayonet" //
|
||||
| "knife_cord" //
|
||||
| "knife_m9_bayonet"//
|
||||
| "knife_push" // Shadow daggers
|
||||
| "knife_stiletto"//
|
||||
| "knife_survival_bowie"//
|
||||
| "knife_t"//
|
||||
| "knife_skeleton" //
|
||||
| "knife_tactical"//
|
||||
| "knife_ursus"//
|
||||
| "knife_widowmaker"//
|
||||
| "knife_canis";//
|
||||
57
src/App.css
Normal file
57
src/App.css
Normal file
@ -0,0 +1,57 @@
|
||||
@import "fonts/montserrat.css";
|
||||
@import "fonts/stratum2.css";
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Stratum2', 'Montserrat', 'Roboto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/*background-image: url('./assets/bg.png');/**/
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Louis George Cafe';
|
||||
src: local('Louis George Cafe'), url('./fonts/Louis George Cafe.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Rounded_Elegance';
|
||||
src: local('Rounded_Elegance'), url('./fonts/Rounded_Elegance.ttf') format('truetype');
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-panel-color: rgba(12, 15, 18, 0.85);
|
||||
--sub-panel-color: rgba(0, 0, 0, 0.83);
|
||||
--white-dull: rgba(10, 5, 5, 0.25);
|
||||
--white-full: rgba(250, 250, 250, 1);
|
||||
--white-half: rgba(250, 250, 250, 0.5);
|
||||
--color-gray: rgba(191, 191, 191, 1.0);
|
||||
--color-moneys: #a7d32e;
|
||||
--dev-purple: rgba(200, 0, 255, 1);
|
||||
--color-t: #c19511;
|
||||
--color-ct: #5788a8;
|
||||
--color-new-t: #f0c941;
|
||||
--color-new-ct: #5ab8f4;
|
||||
--color-bomb: #f22222;
|
||||
--color-defuse: #2222f2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
280
src/App.tsx
280
src/App.tsx
@ -1,215 +1,81 @@
|
||||
import React from 'react';
|
||||
import { useEffect, useState } from 'react'
|
||||
import './App.css'
|
||||
import { CSGO } from 'csgogsi'
|
||||
import { onGSI } from './API/contexts/actions'
|
||||
import Layout from './HUD/Layout/Layout';
|
||||
import api, { port, isDev } from './api/api';
|
||||
import { loadAvatarURL } from './api/avatars';
|
||||
import ActionManager, { ConfigManager } from './api/actionManager';
|
||||
import './API/socket';
|
||||
import { Match } from './API/types';
|
||||
import api from './API';
|
||||
import { GSI } from './API/HUD';
|
||||
import { socket } from './API/socket';
|
||||
|
||||
import { CSGO, PlayerExtension, GSISocket, CSGORaw } from "csgogsi-socket";
|
||||
import { Match } from './api/interfaces';
|
||||
import { initiateConnection } from './HUD/Camera/mediaStream';
|
||||
function App() {
|
||||
const [ game, setGame ] = useState<CSGO | null>(null);
|
||||
const [ match, setMatch ] = useState<Match | null>(null);
|
||||
|
||||
let isInWindow = !!window.parent.ipcApi;
|
||||
useEffect(() => {
|
||||
const onMatchPing = () => {
|
||||
api.match.getCurrent().then(match => {
|
||||
if (!match) {
|
||||
GSI.teams.left = null;
|
||||
GSI.teams.right = null;
|
||||
setMatch(null);
|
||||
return;
|
||||
}
|
||||
setMatch(match);
|
||||
|
||||
let isReversed = false;
|
||||
if (GSI.last) {
|
||||
const mapName = GSI.last.map.name.substring(GSI.last.map.name.lastIndexOf('/') + 1);
|
||||
const current = match.vetos.filter(veto => veto.mapName === mapName)[0];
|
||||
if (current && current.reverseSide) {
|
||||
isReversed = true;
|
||||
}
|
||||
}
|
||||
if (match.left.id) {
|
||||
api.teams.getOne(match.left.id).then(left => {
|
||||
const gsiTeamData = { id: left._id, name: left.name, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra };
|
||||
|
||||
if (!isReversed) {
|
||||
GSI.teams.left = gsiTeamData;
|
||||
}
|
||||
else GSI.teams.right = gsiTeamData;
|
||||
});
|
||||
}
|
||||
if (match.right.id) {
|
||||
api.teams.getOne(match.right.id).then(right => {
|
||||
const gsiTeamData = { id: right._id, name: right.name, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
|
||||
|
||||
if (!isReversed) GSI.teams.right = gsiTeamData;
|
||||
else GSI.teams.left = gsiTeamData;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}).catch(() => {
|
||||
GSI.teams.left = null;
|
||||
GSI.teams.right = null;
|
||||
setMatch(null);
|
||||
});
|
||||
}
|
||||
socket.on("match", onMatchPing);
|
||||
onMatchPing();
|
||||
|
||||
export const { GSI, socket } = GSISocket(isDev ? `localhost:${port}` : '/', "update");
|
||||
return () => {
|
||||
socket.off("match", onMatchPing);
|
||||
}
|
||||
}, [])
|
||||
|
||||
GSI.regulationMR = 12;
|
||||
onGSI('data', game => {
|
||||
|
||||
if(isInWindow){
|
||||
window.parent.ipcApi.receive('raw', (data: CSGORaw, damage?: RoundDamage[]) => {
|
||||
if(damage){
|
||||
GSI.damage = damage;
|
||||
}
|
||||
GSI.digest(data);
|
||||
});
|
||||
setGame(game);
|
||||
}, []);
|
||||
|
||||
if (!game) return null;
|
||||
return (
|
||||
<Layout game={game} match={match} />
|
||||
);
|
||||
}
|
||||
|
||||
type RoundPlayerDamage = {
|
||||
steamid: string;
|
||||
damage: number;
|
||||
};
|
||||
type RoundDamage = {
|
||||
round: number;
|
||||
players: RoundPlayerDamage[];
|
||||
};
|
||||
|
||||
socket.on('update', (_csgo: any, damage?: RoundDamage[]) => {
|
||||
if(damage) GSI.damage = damage;
|
||||
});
|
||||
|
||||
export const actions = new ActionManager();
|
||||
export const configs = new ConfigManager();
|
||||
|
||||
export const hudIdentity = {
|
||||
name: '',
|
||||
isDev: false
|
||||
};
|
||||
|
||||
interface DataLoader {
|
||||
match: Promise<void> | null
|
||||
}
|
||||
|
||||
const dataLoader: DataLoader = {
|
||||
match: null
|
||||
}
|
||||
|
||||
class App extends React.Component<any, { match: Match | null, game: CSGO | null, steamids: string[], checked: boolean }> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
game: null,
|
||||
steamids: [],
|
||||
match: null,
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
|
||||
verifyPlayers = async (game: CSGO) => {
|
||||
const steamids = game.players.map(player => player.steamid);
|
||||
steamids.forEach(steamid => {
|
||||
loadAvatarURL(steamid);
|
||||
})
|
||||
|
||||
if (steamids.every(steamid => this.state.steamids.includes(steamid))) {
|
||||
return;
|
||||
}
|
||||
|
||||
const loaded = GSI.players.map(player => player.steamid);
|
||||
|
||||
const notCheckedPlayers = steamids.filter(steamid => !loaded.includes(steamid));
|
||||
|
||||
const extensioned = await api.players.get(notCheckedPlayers);
|
||||
|
||||
const lacking = notCheckedPlayers.filter(steamid => extensioned.map(player => player.steamid).includes(steamid));
|
||||
|
||||
const players: PlayerExtension[] = extensioned
|
||||
.filter(player => lacking.includes(player.steamid))
|
||||
.map(player => (
|
||||
{
|
||||
id: player._id,
|
||||
name: player.username,
|
||||
realName: `${player.firstName} ${player.lastName}`,
|
||||
steamid: player.steamid,
|
||||
country: player.country,
|
||||
avatar: player.avatar,
|
||||
extra: player.extra,
|
||||
})
|
||||
);
|
||||
|
||||
const gsiLoaded = GSI.players;
|
||||
|
||||
gsiLoaded.push(...players);
|
||||
|
||||
GSI.players = gsiLoaded;
|
||||
this.setState({ steamids });
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
this.loadMatch();
|
||||
const href = window.location.href;
|
||||
socket.emit("started");
|
||||
let isDev = false;
|
||||
let name = '';
|
||||
if (href.indexOf('/huds/') === -1) {
|
||||
isDev = true;
|
||||
name = (Math.random() * 1000 + 1).toString(36).replace(/[^a-z]+/g, '').substr(0, 15);
|
||||
hudIdentity.isDev = true;
|
||||
} else {
|
||||
const segment = href.substr(href.indexOf('/huds/') + 6);
|
||||
name = segment.substr(0, segment.lastIndexOf('/'));
|
||||
hudIdentity.name = name;
|
||||
}
|
||||
|
||||
socket.on("readyToRegister", () => {
|
||||
socket.emit("register", name, isDev, "cs2", isInWindow ? "IPC" : "DEFAULT");
|
||||
initiateConnection();
|
||||
});
|
||||
socket.on(`hud_config`, (data: any) => {
|
||||
configs.save(data);
|
||||
});
|
||||
socket.on(`hud_action`, (data: any) => {
|
||||
actions.execute(data.action, data.data);
|
||||
});
|
||||
socket.on('keybindAction', (action: string) => {
|
||||
actions.execute(action);
|
||||
});
|
||||
|
||||
socket.on("refreshHUD", () => {
|
||||
window.top?.location.reload();
|
||||
});
|
||||
|
||||
socket.on("update_mirv", (data: any) => {
|
||||
GSI.digestMIRV(data);
|
||||
})
|
||||
GSI.on('data', game => {
|
||||
if (!this.state.game || this.state.steamids.length) this.verifyPlayers(game);
|
||||
|
||||
const wasLoaded = !!this.state.game;
|
||||
|
||||
this.setState({ game }, () => {
|
||||
if(!wasLoaded) this.loadMatch(true);
|
||||
});
|
||||
});
|
||||
socket.on('match', () => {
|
||||
|
||||
this.loadMatch(true);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
loadMatch = async (force = false) => {
|
||||
if (!dataLoader.match || force) {
|
||||
dataLoader.match = new Promise((resolve) => {
|
||||
api.match.getCurrent().then(match => {
|
||||
if (!match) {
|
||||
GSI.teams.left = null;
|
||||
GSI.teams.right = null;
|
||||
return;
|
||||
}
|
||||
this.setState({ match });
|
||||
|
||||
let isReversed = false;
|
||||
if (GSI.last) {
|
||||
const mapName = GSI.last.map.name.substring(GSI.last.map.name.lastIndexOf('/') + 1);
|
||||
const current = match.vetos.filter(veto => veto.mapName === mapName)[0];
|
||||
if (current && current.reverseSide) {
|
||||
isReversed = true;
|
||||
}
|
||||
this.setState({ checked: true });
|
||||
}
|
||||
if (match.left.id) {
|
||||
api.teams.getOne(match.left.id).then(left => {
|
||||
const gsiTeamData = { id: left._id, name: left.name, country: left.country, logo: left.logo, map_score: match.left.wins, extra: left.extra };
|
||||
|
||||
if (!isReversed) {
|
||||
GSI.teams.left = gsiTeamData;
|
||||
}
|
||||
else GSI.teams.right = gsiTeamData;
|
||||
});
|
||||
}
|
||||
if (match.right.id) {
|
||||
api.teams.getOne(match.right.id).then(right => {
|
||||
const gsiTeamData = { id: right._id, name: right.name, country: right.country, logo: right.logo, map_score: match.right.wins, extra: right.extra };
|
||||
|
||||
if (!isReversed) GSI.teams.right = gsiTeamData;
|
||||
else GSI.teams.left = gsiTeamData;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}).catch(() => {
|
||||
//dataLoader.match = null;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.state.game) return null;
|
||||
return (
|
||||
<Layout game={this.state.game} match={this.state.match} />
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
export default App;
|
||||
export default App
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { mediaStreams } from "./mediaStream";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { mediaStreams } from "../../API/HUD/camera";
|
||||
type Props = {
|
||||
steamid: string,
|
||||
visible: boolean;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import PlayerCamera from "./Camera";
|
||||
import api from "../../api/api";
|
||||
import api from "../../API";
|
||||
import "./index.scss";
|
||||
|
||||
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import {ArmorHelmet, ArmorFull} from './../../assets/Icons';
|
||||
export default class Armor extends React.Component<{ player: Player }> {
|
||||
render() {
|
||||
const { player } = this.props;
|
||||
if(!player.state.health || !player.state.armor) return '';
|
||||
return (
|
||||
<div className={`armor_indicator`}>
|
||||
{player.state.helmet ? <ArmorHelmet /> : <ArmorFull/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import React from "react";
|
||||
import { ArmorFull, ArmorHelmet } from "./../../assets/Icons";
|
||||
|
||||
}
|
||||
const Armor = ({ health, armor, helmet }: { health: number, armor: number, helmet: boolean }) => {
|
||||
if (!health || !armor) return null;
|
||||
return (
|
||||
<div className={`armor_indicator`}>
|
||||
{helmet ? <ArmorHelmet /> : <ArmorFull />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Armor);
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import {Bomb as BombIcon} from './../../assets/Icons';
|
||||
export default class Bomb extends React.Component<{ player: Player }> {
|
||||
render() {
|
||||
const { player } = this.props;
|
||||
if(Object.values(player.weapons).every(weapon => weapon.type !== "C4")) return '';
|
||||
return (
|
||||
<div className={`armor_indicator`}>
|
||||
<BombIcon />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
import { Player } from "csgogsi";
|
||||
import { Bomb as BombIcon } from "./../../assets/Icons";
|
||||
const Bomb = ({ player }: { player: Player }) => {
|
||||
if (Object.values(player.weapons).every((weapon) => weapon.type !== "C4")) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={`armor_indicator`}>
|
||||
<BombIcon />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Bomb;
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import { Player } from 'csgogsi';
|
||||
import {Defuse as DefuseIcon} from './../../assets/Icons';
|
||||
export default class Defuse extends React.Component<{ player: Player }> {
|
||||
render() {
|
||||
const { player } = this.props;
|
||||
const Defuse = ({ player }: { player: Player }) => {
|
||||
if(!player.state.health || !player.state.defusekit) return '';
|
||||
return (
|
||||
<div className={`defuse_indicator`}>
|
||||
<DefuseIcon />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
export default Defuse;
|
||||
@ -1,13 +1,11 @@
|
||||
import React from 'react';
|
||||
import Weapon from './../Weapon/Weapon';
|
||||
import flash_assist from './../../assets/flash_assist.png';
|
||||
|
||||
|
||||
import { C4, Defuse, FlashedKill, Headshot, NoScope, SmokeKill, Suicide, Wallbang } from "./../../assets/Icons"
|
||||
import { ExtendedKillEvent, BombEvent } from "./Killfeed"
|
||||
export default class Kill extends React.Component<{ event: ExtendedKillEvent | BombEvent }> {
|
||||
render() {
|
||||
const { event } = this.props;
|
||||
|
||||
|
||||
const Kill = ({event}: { event: ExtendedKillEvent | BombEvent }) => {
|
||||
if (event.type !== "kill") {
|
||||
return (
|
||||
<div className={`single_kill`}>
|
||||
@ -50,6 +48,6 @@ export default class Kill extends React.Component<{ event: ExtendedKillEvent | B
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
export default Kill;
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { GSI } from './../../App';
|
||||
import { KillEvent, Player } from 'csgogsi-socket';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { KillEvent, Player } from 'csgogsi';
|
||||
import Kill from './Kill';
|
||||
import './killfeed.scss';
|
||||
import { onGSI } from '../../API/contexts/actions';
|
||||
|
||||
|
||||
export interface ExtendedKillEvent extends KillEvent {
|
||||
@ -14,63 +15,24 @@ export interface BombEvent {
|
||||
type: 'plant' | 'defuse'
|
||||
}
|
||||
|
||||
export default class Killfeed extends React.Component<any, { events: (BombEvent | ExtendedKillEvent)[] }> {
|
||||
|
||||
constructor(props: any){
|
||||
super(props);
|
||||
this.state = {
|
||||
events: []
|
||||
}
|
||||
}
|
||||
addKill = (kill: KillEvent) => {
|
||||
this.setState(state => {
|
||||
state.events.push({...kill, type: 'kill'});
|
||||
return state;
|
||||
})
|
||||
}
|
||||
|
||||
addBombEvent = (player: Player, type: 'plant' | 'defuse') => {
|
||||
if(!player) return;
|
||||
const event: BombEvent = {
|
||||
player: player,
|
||||
type: type
|
||||
}
|
||||
this.setState(state => {
|
||||
state.events.push(event);
|
||||
return state;
|
||||
})
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
GSI.on("kill", kill => {
|
||||
this.addKill(kill);
|
||||
});
|
||||
GSI.on("data", data => {
|
||||
|
||||
if(data.round && data.round.phase === "freezetime"){
|
||||
if(Number(data.phase_countdowns.phase_ends_in) < 10 && this.state.events.length > 0){
|
||||
this.setState({events:[]})
|
||||
}
|
||||
const Killfeed = () => {
|
||||
const [ events, setEvents ] = useState<(BombEvent | ExtendedKillEvent)[]>([]);
|
||||
onGSI("kill", kill => {
|
||||
setEvents(ev => [...ev, {...kill, type: 'kill'}]);
|
||||
}, []);
|
||||
onGSI("data", data => {
|
||||
if(data.round && data.round.phase === "freezetime"){
|
||||
if(Number(data.phase_countdowns.phase_ends_in) < 10 && events.length > 0){
|
||||
setEvents([]);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
GSI.on("bombPlant", player => {
|
||||
this.addBombEvent(player, 'plant');
|
||||
})
|
||||
GSI.on("bombDefuse", player => {
|
||||
this.addBombEvent(player, 'defuse');
|
||||
})
|
||||
|
||||
*/
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="killfeed">
|
||||
{this.state.events.map(event => <Kill event={event}/>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div className="killfeed">
|
||||
{events.map(event => <Kill event={event}/>)}
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default React.memo(Killfeed);
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import TeamBox from "./../Players/TeamBox";
|
||||
import MatchBar from "../MatchBar/MatchBar";
|
||||
import SeriesBox from "../MatchBar/SeriesBox";
|
||||
import Observed from "./../Players/Observed";
|
||||
import { CSGO, Team } from "csgogsi-socket";
|
||||
import { Match } from "../../api/interfaces";
|
||||
import RadarMaps from "./../Radar/RadarMaps";
|
||||
import Trivia from "../Trivia/Trivia";
|
||||
import SideBox from '../SideBoxes/SideBox';
|
||||
import { GSI, actions } from "./../../App";
|
||||
import MoneyBox from '../SideBoxes/Money';
|
||||
import UtilityLevel from '../SideBoxes/UtilityLevel';
|
||||
import Killfeed from "../Killfeed/Killfeed";
|
||||
@ -17,119 +14,92 @@ import Overview from "../Overview/Overview";
|
||||
import Tournament from "../Tournament/Tournament";
|
||||
import Pause from "../PauseTimeout/Pause";
|
||||
import Timeout from "../PauseTimeout/Timeout";
|
||||
import PlayerCamera from "../Camera/Camera";
|
||||
import { CSGO } from "csgogsi";
|
||||
import { Match } from "../../API/types";
|
||||
import { useAction } from "../../API/contexts/actions";
|
||||
|
||||
interface Props {
|
||||
game: CSGO,
|
||||
match: Match | null
|
||||
}
|
||||
|
||||
/*
|
||||
interface State {
|
||||
winner: Team | null,
|
||||
showWin: boolean,
|
||||
forceHide: boolean
|
||||
}
|
||||
}*/
|
||||
|
||||
export default class Layout extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
winner: null,
|
||||
showWin: false,
|
||||
forceHide: false
|
||||
const Layout = ({game,match}: Props) => {
|
||||
const [ forceHide, setForceHide ] = useState(false);
|
||||
|
||||
useAction('boxesState', (state) => {
|
||||
console.log("UPDATE STATE UMC", state);
|
||||
if (state === "show") {
|
||||
setForceHide(false);
|
||||
} else if (state === "hide") {
|
||||
setForceHide(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
componentDidMount() {
|
||||
GSI.on('roundEnd', score => {
|
||||
this.setState({ winner: score.winner, showWin: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ showWin: false })
|
||||
}, 4000)
|
||||
});
|
||||
});
|
||||
actions.on("boxesState", (state: string) => {
|
||||
if (state === "show") {
|
||||
this.setState({ forceHide: false });
|
||||
} else if (state === "hide") {
|
||||
this.setState({ forceHide: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
|
||||
const right = game.map.team_ct.orientation === "left" ? game.map.team_t : game.map.team_ct;
|
||||
|
||||
getVeto = () => {
|
||||
const { game, match } = this.props;
|
||||
const { map } = game;
|
||||
if (!match) return null;
|
||||
const mapName = map.name.substring(map.name.lastIndexOf('/') + 1);
|
||||
const veto = match.vetos.find(veto => veto.mapName === mapName);
|
||||
if (!veto) return null;
|
||||
return veto;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { game, match } = this.props;
|
||||
const left = game.map.team_ct.orientation === "left" ? game.map.team_ct : game.map.team_t;
|
||||
const right = game.map.team_ct.orientation === "left" ? game.map.team_t : game.map.team_ct;
|
||||
|
||||
const leftPlayers = game.players.filter(player => player.team.side === left.side);
|
||||
const rightPlayers = game.players.filter(player => player.team.side === right.side);
|
||||
const isFreezetime = (game.round && game.round.phase === "freezetime") || game.phase_countdowns.phase === "freezetime";
|
||||
const { forceHide } = this.state;
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<div className={`players_alive`}>
|
||||
<div className="title_container">Players alive</div>
|
||||
<div className="counter_container">
|
||||
<div className={`team_counter ${left.side}`}>{leftPlayers.filter(player => player.state.health > 0).length}</div>
|
||||
<div className={`vs_counter`}>VS</div>
|
||||
<div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Killfeed />
|
||||
<Overview match={match} map={game.map} players={game.players || []} />
|
||||
<RadarMaps match={match} map={game.map} game={game} />
|
||||
<MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} match={match} />
|
||||
<Pause phase={game.phase_countdowns}/>
|
||||
<Timeout map={game.map} phase={game.phase_countdowns} />
|
||||
<SeriesBox map={game.map} phase={game.phase_countdowns} match={match} />
|
||||
|
||||
<Tournament />
|
||||
|
||||
<Observed player={game.player} veto={this.getVeto()} round={game.map.round+1}/>
|
||||
|
||||
<TeamBox team={left} players={leftPlayers} side="left" current={game.player} />
|
||||
<TeamBox team={right} players={rightPlayers} side="right" current={game.player} />
|
||||
|
||||
<Trivia />
|
||||
|
||||
<MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
|
||||
<div className={"boxes left"}>
|
||||
<UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />
|
||||
<SideBox side="left" hide={forceHide} />
|
||||
<MoneyBox
|
||||
team={left.side}
|
||||
side="left"
|
||||
loss={Math.min(left.consecutive_round_losses * 500 + 1400, 3400)}
|
||||
equipment={leftPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
|
||||
money={leftPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
|
||||
show={isFreezetime && !forceHide}
|
||||
/>
|
||||
</div>
|
||||
<div className={"boxes right"}>
|
||||
<UtilityLevel side={right.side} players={game.players} show={isFreezetime && !forceHide} />
|
||||
<SideBox side="right" hide={forceHide} />
|
||||
<MoneyBox
|
||||
team={right.side}
|
||||
side="right"
|
||||
loss={Math.min(right.consecutive_round_losses * 500 + 1400, 3400)}
|
||||
equipment={rightPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
|
||||
money={rightPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
|
||||
show={isFreezetime && !forceHide}
|
||||
/>
|
||||
const leftPlayers = game.players.filter(player => player.team.side === left.side);
|
||||
const rightPlayers = game.players.filter(player => player.team.side === right.side);
|
||||
const isFreezetime = (game.round && game.round.phase === "freezetime") || game.phase_countdowns.phase === "freezetime";
|
||||
return (
|
||||
<div className="layout">
|
||||
<div className={`players_alive`}>
|
||||
<div className="title_container">Players alive</div>
|
||||
<div className="counter_container">
|
||||
<div className={`team_counter ${left.side}`}>{leftPlayers.filter(player => player.state.health > 0).length}</div>
|
||||
<div className={`vs_counter`}>VS</div>
|
||||
<div className={`team_counter ${right.side}`}>{rightPlayers.filter(player => player.state.health > 0).length}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<Killfeed />
|
||||
<Overview match={match} map={game.map} players={game.players || []} />
|
||||
<RadarMaps match={match} map={game.map} game={game} />
|
||||
<MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} match={match} />
|
||||
<Pause phase={game.phase_countdowns}/>
|
||||
<Timeout map={game.map} phase={game.phase_countdowns} />
|
||||
<SeriesBox map={game.map} match={match} />
|
||||
|
||||
<Tournament />
|
||||
|
||||
<Observed player={game.player} />
|
||||
|
||||
<TeamBox team={left} players={leftPlayers} side="left" current={game.player} />
|
||||
<TeamBox team={right} players={rightPlayers} side="right" current={game.player} />
|
||||
|
||||
<Trivia />
|
||||
|
||||
<MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
|
||||
<div className={"boxes left"}>
|
||||
<UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />
|
||||
<SideBox side="left" hide={forceHide} />
|
||||
<MoneyBox
|
||||
team={left.side}
|
||||
side="left"
|
||||
loss={Math.min(left.consecutive_round_losses * 500 + 1400, 3400)}
|
||||
equipment={leftPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
|
||||
money={leftPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
|
||||
show={isFreezetime && !forceHide}
|
||||
/>
|
||||
</div>
|
||||
<div className={"boxes right"}>
|
||||
<UtilityLevel side={right.side} players={game.players} show={isFreezetime && !forceHide} />
|
||||
<SideBox side="right" hide={forceHide} />
|
||||
<MoneyBox
|
||||
team={right.side}
|
||||
side="right"
|
||||
loss={Math.min(right.consecutive_round_losses * 500 + 1400, 3400)}
|
||||
equipment={rightPlayers.map(player => player.state.equip_value).reduce((pre, now) => pre + now, 0)}
|
||||
money={rightPlayers.map(player => player.state.money).reduce((pre, now) => pre + now, 0)}
|
||||
show={isFreezetime && !forceHide}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Layout;
|
||||
|
||||
@ -1,62 +1,66 @@
|
||||
import React from "react";
|
||||
import * as I from "csgogsi-socket";
|
||||
import { Match, Veto } from '../../api/interfaces';
|
||||
import * as I from "csgogsi";
|
||||
import TeamLogo from "../MatchBar/TeamLogo";
|
||||
import "./mapseries.scss";
|
||||
import { Match, Veto } from "../../API/types";
|
||||
|
||||
interface IProps {
|
||||
match: Match | null;
|
||||
teams: I.Team[];
|
||||
isFreezetime: boolean;
|
||||
map: I.Map
|
||||
match: Match | null;
|
||||
teams: I.Team[];
|
||||
isFreezetime: boolean;
|
||||
map: I.Map;
|
||||
}
|
||||
|
||||
interface IVetoProps {
|
||||
veto: Veto;
|
||||
teams: I.Team[];
|
||||
active: boolean;
|
||||
veto: Veto;
|
||||
teams: I.Team[];
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
class VetoEntry extends React.Component<IVetoProps> {
|
||||
render(){
|
||||
const { veto, teams, active } = this.props;
|
||||
return <div className={`veto_container ${active ? 'active' : ''}`}>
|
||||
<div className="veto_map_name">
|
||||
{veto.mapName}
|
||||
</div>
|
||||
<div className="veto_picker">
|
||||
<TeamLogo team={teams.filter(team => team.id === veto.teamId)[0]} />
|
||||
</div>
|
||||
<div className="veto_winner">
|
||||
<TeamLogo team={teams.filter(team => team.id === veto.winner)[0]} />
|
||||
</div>
|
||||
<div className="veto_score">
|
||||
{Object.values((veto.score || ['-','-'])).sort().join(":")}
|
||||
</div>
|
||||
<div className='active_container'>
|
||||
<div className='active'>Currently playing</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
const VetoEntry = ({ veto, teams, active }: IVetoProps) => {
|
||||
return (
|
||||
<div className={`veto_container ${active ? "active" : ""}`}>
|
||||
<div className="veto_map_name">
|
||||
{veto.mapName}
|
||||
</div>
|
||||
<div className="veto_picker">
|
||||
<TeamLogo team={teams.filter((team) => team.id === veto.teamId)[0]} />
|
||||
</div>
|
||||
<div className="veto_winner">
|
||||
<TeamLogo team={teams.filter((team) => team.id === veto.winner)[0]} />
|
||||
</div>
|
||||
<div className="veto_score">
|
||||
{Object.values(veto.score || ["-", "-"]).sort().join(":")}
|
||||
</div>
|
||||
<div className="active_container">
|
||||
<div className="active">Currently playing</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default class MapSeries extends React.Component<IProps> {
|
||||
|
||||
render() {
|
||||
const { match, teams, isFreezetime, map } = this.props;
|
||||
if (!match || !match.vetos.length) return null;
|
||||
const MapSeries = ({ match, teams, isFreezetime, map }: IProps) => {
|
||||
if (!match || !match.vetos.length) return null;
|
||||
return (
|
||||
<div className={`map_series_container ${isFreezetime ? "show" : "hide"}`}>
|
||||
<div className="title_bar">
|
||||
<div className="picked">Picked</div>
|
||||
<div className="winner">Winner</div>
|
||||
<div className="score">Score</div>
|
||||
</div>
|
||||
{match.vetos.filter((veto) =>
|
||||
veto.type !== "ban"
|
||||
).map((veto) => {
|
||||
if (!veto.mapName) return null;
|
||||
return (
|
||||
<div className={`map_series_container ${isFreezetime ? 'show': 'hide'}`}>
|
||||
<div className="title_bar">
|
||||
<div className="picked">Picked</div>
|
||||
<div className="winner">Winner</div>
|
||||
<div className="score">Score</div>
|
||||
</div>
|
||||
{match.vetos.filter(veto => veto.type !== "ban").map(veto => {
|
||||
if(!veto.mapName) return null;
|
||||
return <VetoEntry key={`${match.id}${veto.mapName}${veto.teamId}${veto.side}`} veto={veto} teams={teams} active={map.name.includes(veto.mapName)}/>
|
||||
})}
|
||||
</div>
|
||||
<VetoEntry
|
||||
key={`${match.id}${veto.mapName}${veto.teamId}${veto.side}`}
|
||||
veto={veto}
|
||||
teams={teams}
|
||||
active={map.name.includes(veto.mapName)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MapSeries;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React from "react";
|
||||
import * as I from "csgogsi-socket";
|
||||
import * as I from "csgogsi";
|
||||
import "./matchbar.scss";
|
||||
import TeamScore from "./TeamScore";
|
||||
import Bomb from "./../Timers/BombTimer";
|
||||
import Countdown from "./../Timers/Countdown";
|
||||
import { GSI } from "../../App";
|
||||
import { Match } from "../../api/interfaces";
|
||||
import { useBombTimer } from "./../Timers/Countdown";
|
||||
import { Match } from './../../API/types';
|
||||
|
||||
|
||||
function stringToClock(time: string | number, pad = true) {
|
||||
if (typeof time === "string") {
|
||||
@ -28,176 +27,49 @@ interface IProps {
|
||||
}
|
||||
|
||||
export interface Timer {
|
||||
width: number;
|
||||
time: number;
|
||||
active: boolean;
|
||||
countdown: number;
|
||||
side: "left"|"right";
|
||||
type: "defusing" | "planting";
|
||||
player: I.Player | null;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
defusing: Timer,
|
||||
planting: Timer,
|
||||
winState: {
|
||||
side: "left"|"right",
|
||||
show: boolean
|
||||
const getRoundLabel = (mapRound: number) => {
|
||||
const round = mapRound + 1;
|
||||
if (round <= 30) {
|
||||
return `Round ${round}/30`;
|
||||
}
|
||||
const additionalRounds = round - 30;
|
||||
const OT = Math.ceil(additionalRounds/6);
|
||||
return `OT ${OT} (${additionalRounds - (OT - 1)*6}/6)`;
|
||||
}
|
||||
|
||||
export default class TeamBox extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps){
|
||||
super(props);
|
||||
this.state = {
|
||||
defusing: {
|
||||
width: 0,
|
||||
active: false,
|
||||
countdown: 10,
|
||||
side: "left",
|
||||
type: "defusing",
|
||||
player: null
|
||||
},
|
||||
planting: {
|
||||
width: 0,
|
||||
active: false,
|
||||
countdown: 10, // Fake
|
||||
side: "right",
|
||||
type: "planting",
|
||||
player: null
|
||||
},
|
||||
winState: {
|
||||
side: 'left',
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
plantStop = () => this.setState(state => {
|
||||
state.planting.active = false;
|
||||
return state;
|
||||
});
|
||||
|
||||
setWidth = (type: 'defusing' | 'planting', width: number) => {
|
||||
this.setState(state => {
|
||||
state[type].width = width;
|
||||
return state;
|
||||
})
|
||||
}
|
||||
|
||||
initPlantTimer = () => {
|
||||
const bomb = new Countdown(time => {
|
||||
let width = time * 100;
|
||||
this.setWidth("planting", width/3);
|
||||
});
|
||||
GSI.on("bombPlantStart", player => {
|
||||
if(!player || !player.team) return;
|
||||
this.setState(state => {
|
||||
state.planting.active = true;
|
||||
state.planting.side = player.team.orientation;
|
||||
state.planting.player = player;
|
||||
})
|
||||
})
|
||||
GSI.on("data", data => {
|
||||
if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "planting") return this.plantStop();
|
||||
this.setState(state => {
|
||||
state.planting.active = true;
|
||||
})
|
||||
return bomb.go(data.bomb.countdown);
|
||||
});
|
||||
}
|
||||
|
||||
defuseStop = () => this.setState(state => {
|
||||
state.defusing.active = false;
|
||||
state.defusing.countdown = 10;
|
||||
return state;
|
||||
});
|
||||
|
||||
initDefuseTimer = () => {
|
||||
const bomb = new Countdown(time => {
|
||||
let width = time > this.state.defusing.countdown ? this.state.defusing.countdown*100 : time * 100;
|
||||
this.setWidth("defusing", width/this.state.defusing.countdown);
|
||||
});
|
||||
GSI.on("defuseStart", player => {
|
||||
if(!player || !player.team) return;
|
||||
this.setState(state => {
|
||||
state.defusing.active = true;
|
||||
state.defusing.countdown = !Boolean(player.state.defusekit) ? 10 : 5;
|
||||
state.defusing.side = player.team.orientation;
|
||||
state.defusing.player = player;
|
||||
return state;
|
||||
})
|
||||
})
|
||||
GSI.on("data", data => {
|
||||
if(!data.bomb || !data.bomb.countdown || data.bomb.state !== "defusing") return this.defuseStop();
|
||||
this.setState(state => {
|
||||
state.defusing.active = true;
|
||||
return state;
|
||||
})
|
||||
return bomb.go(data.bomb.countdown);
|
||||
});
|
||||
}
|
||||
|
||||
resetWin = () => {
|
||||
setTimeout(() => {
|
||||
this.setState(state => {
|
||||
state.winState.show = false;
|
||||
return state;
|
||||
})
|
||||
}, 6000);
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.initDefuseTimer();
|
||||
this.initPlantTimer();
|
||||
GSI.on("roundEnd", score => {
|
||||
this.setState(state => {
|
||||
state.winState.show = true;
|
||||
state.winState.side = score.winner.orientation;
|
||||
return state;
|
||||
}, this.resetWin);
|
||||
});
|
||||
}
|
||||
getRoundLabel = () => {
|
||||
const { map } = this.props;
|
||||
const round = map.round + 1;
|
||||
if (round <= 24) {
|
||||
return `Round ${round}/24`;
|
||||
}
|
||||
const additionalRounds = round - 24;
|
||||
const OT = Math.ceil(additionalRounds/6);
|
||||
return `OT ${OT} (${additionalRounds - (OT - 1)*6}/6)`;
|
||||
}
|
||||
render() {
|
||||
const { defusing, planting, winState } = this.state;
|
||||
const { bomb, match, map, phase } = this.props;
|
||||
const Matchbar = (props: IProps) => {
|
||||
const { bomb, match, map, phase } = props;
|
||||
const time = stringToClock(phase.phase_ends_in);
|
||||
const left = map.team_ct.orientation === "left" ? map.team_ct : map.team_t;
|
||||
const right = map.team_ct.orientation === "left" ? map.team_t : map.team_ct;
|
||||
const isPlanted = bomb && (bomb.state === "defusing" || bomb.state === "planted");
|
||||
const bo = (match && Number(match.matchType.substr(-1))) || 0;
|
||||
let leftTimer: Timer | null = null, rightTimer: Timer | null = null;
|
||||
if(defusing.active || planting.active){
|
||||
if(defusing.active){
|
||||
if(defusing.side === "left") leftTimer = defusing;
|
||||
else rightTimer = defusing;
|
||||
} else {
|
||||
if(planting.side === "left") leftTimer = planting;
|
||||
else rightTimer = planting;
|
||||
}
|
||||
}
|
||||
|
||||
const bombData = useBombTimer();
|
||||
const plantTimer: Timer | null = bombData.state === "planting" ? { time:bombData.plantTime, active: true, side: bombData.player?.team.orientation || "right", player: bombData.player, type: "planting"} : null;
|
||||
const defuseTimer: Timer | null = bombData.state === "defusing" ? { time:bombData.defuseTime, active: true, side: bombData.player?.team.orientation || "left", player: bombData.player, type: "defusing"} : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id={`matchbar`}>
|
||||
<TeamScore team={left} orientation={"left"} timer={leftTimer} showWin={winState.show && winState.side === "left"} />
|
||||
<TeamScore team={left} orientation={"left"} timer={left.side === "CT" ? defuseTimer : plantTimer}/>
|
||||
<div className={`score left ${left.side}`}>{left.score}</div>
|
||||
<div id="timer" className={bo === 0 ? 'no-bo' : ''}>
|
||||
<div id={`round_timer_text`} className={isPlanted ? "hide":""}>{time}</div>
|
||||
<div id="round_now" className={isPlanted ? "hide":""}>{this.getRoundLabel()}</div>
|
||||
<div id="round_now" className={isPlanted ? "hide":""}>{getRoundLabel(map.round)}</div>
|
||||
<Bomb />
|
||||
</div>
|
||||
<div className={`score right ${right.side}`}>{right.score}</div>
|
||||
<TeamScore team={right} orientation={"right"} timer={rightTimer} showWin={winState.show && winState.side === "right"} />
|
||||
<TeamScore team={right} orientation={"right"} timer={right.side === "CT" ? defuseTimer : plantTimer} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Matchbar;
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import React from "react";
|
||||
import * as I from "csgogsi-socket";
|
||||
import { Match } from "../../api/interfaces";
|
||||
import * as I from "csgogsi";
|
||||
import { Match } from "../../API/types";
|
||||
|
||||
interface Props {
|
||||
map: I.Map;
|
||||
phase: I.PhaseRaw;
|
||||
match: Match | null;
|
||||
}
|
||||
|
||||
export default class SeriesBox extends React.Component<Props> {
|
||||
render() {
|
||||
const { match, map } = this.props;
|
||||
const SeriesBox = ({ map, match }: Props) => {
|
||||
const amountOfMaps = (match && Math.floor(Number(match.matchType.substr(-1)) / 2) + 1) || 0;
|
||||
const bo = (match && Number(match.matchType.substr(-1))) || 0;
|
||||
const left = map.team_ct.orientation === "left" ? map.team_ct : map.team_t;
|
||||
@ -40,5 +36,6 @@ export default class SeriesBox extends React.Component<Props> {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SeriesBox;
|
||||
@ -1,11 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Team } from 'csgogsi-socket';
|
||||
import * as I from '../../api/interfaces';
|
||||
import { apiUrl } from './../../api/api';
|
||||
import { Team } from 'csgogsi';
|
||||
import * as I from '../../API/types';
|
||||
import { apiUrl } from './../../API';
|
||||
|
||||
export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> {
|
||||
render(){
|
||||
const { team } = this.props;
|
||||
const TeamLogo = ({team, height, width }: { team?: Team | I.Team | null, height?: number, width?: number}) => {
|
||||
if(!team) return null;
|
||||
let id = '';
|
||||
const { logo } = team;
|
||||
@ -16,9 +13,10 @@ export default class TeamLogo extends React.Component<{ team?: Team | I.Team | n
|
||||
}
|
||||
return (
|
||||
<div className={`logo`}>
|
||||
{ logo && id ? <img src={`${apiUrl}api/teams/logo/${id}`} width={this.props.width} height={this.props.height} alt={'Team logo'} /> : ''}
|
||||
{ logo && id ? <img src={`${apiUrl}api/teams/logo/${id}`} width={width} height={height} alt={'Team logo'} /> : ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default TeamLogo;
|
||||
@ -1,30 +1,40 @@
|
||||
import React from "react";
|
||||
import * as I from "csgogsi-socket";
|
||||
import WinIndicator from "./WinIndicator";
|
||||
import * as I from "csgogsi";
|
||||
import { Timer } from "./MatchBar";
|
||||
import TeamLogo from './TeamLogo';
|
||||
import PlantDefuse from "../Timers/PlantDefuse"
|
||||
import { onGSI } from "../../API/contexts/actions";
|
||||
import WinAnnouncement from "./WinIndicator";
|
||||
import { useState } from "react";
|
||||
|
||||
interface IProps {
|
||||
team: I.Team;
|
||||
orientation: "left" | "right";
|
||||
timer: Timer | null;
|
||||
showWin: boolean;
|
||||
team: I.Team;
|
||||
}
|
||||
|
||||
export default class TeamScore extends React.Component<IProps> {
|
||||
render() {
|
||||
const { orientation, timer, team, showWin } = this.props;
|
||||
const TeamScore = ({orientation, timer, team }: IProps) => {
|
||||
const [ show, setShow ] = useState(false);
|
||||
|
||||
onGSI("roundEnd", result => {
|
||||
if(result.winner.orientation !== orientation) return;
|
||||
setShow(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setShow(false);
|
||||
}, 5000);
|
||||
}, [orientation]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`team ${orientation} ${team.side}`}>
|
||||
<div className="team-name">{team.name}</div>
|
||||
<div className={`team ${orientation} ${team.side || ''}`}>
|
||||
<div className="team-name">{team?.name || null}</div>
|
||||
<TeamLogo team={team} />
|
||||
<div className="round-thingy"><div className="inner"></div></div>
|
||||
</div>
|
||||
<PlantDefuse timer={timer} side={orientation} />
|
||||
<WinIndicator team={team} show={showWin}/>
|
||||
<WinAnnouncement team={team} show={show} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TeamScore;
|
||||
@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Team } from 'csgogsi-socket';
|
||||
import { Team } from 'csgogsi';
|
||||
|
||||
export default class WinAnnouncement extends React.Component<{ team: Team | null, show: boolean }> {
|
||||
render() {
|
||||
const { team, show } = this.props;
|
||||
const WinAnnouncement = ({team, show }: { team: Team | null, show: boolean }) => {
|
||||
if(!team) return null;
|
||||
return <div className={`win_text ${show ? 'show' : ''} ${team.orientation} ${team.side}`}>
|
||||
WINS THE ROUND!
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default WinAnnouncement;
|
||||
@ -1,41 +1,39 @@
|
||||
import React from 'react';
|
||||
import * as I from '../../api/interfaces';
|
||||
import TeamLogo from '../MatchBar/TeamLogo';
|
||||
import * as I from "../../API/types";
|
||||
import "./index.scss";
|
||||
import TeamLogo from "../MatchBar/TeamLogo";
|
||||
|
||||
interface IProps {
|
||||
match: I.Match,
|
||||
show: boolean,
|
||||
teams: I.Team[],
|
||||
veto: I.Veto | null
|
||||
match: I.Match;
|
||||
show: boolean;
|
||||
teams: I.Team[];
|
||||
veto: I.Veto | null;
|
||||
}
|
||||
|
||||
export default class MatchOverview extends React.Component<IProps> {
|
||||
render() {
|
||||
const { match, teams, show } = this.props;
|
||||
const left = teams.find(team => team._id === match.left.id);
|
||||
const right = teams.find(team => team._id === match.right.id);
|
||||
if(!match || !left || !right) return null;
|
||||
return (
|
||||
<div className={`match-overview ${show ? 'show':''}`}>
|
||||
<div className="match-overview-title">
|
||||
Upcoming match
|
||||
</div>
|
||||
<div className="match-overview-teams">
|
||||
<div className="match-overview-team">
|
||||
<div className="match-overview-team-logo">
|
||||
<TeamLogo team={left} height={40} />
|
||||
</div>
|
||||
<div className="match-overview-team-name">{left.name}</div>
|
||||
</div>
|
||||
<div className="match-overview-vs">vs</div>
|
||||
<div className="match-overview-team">
|
||||
<div className="match-overview-team-logo">
|
||||
<TeamLogo team={right} height={40} />
|
||||
</div>
|
||||
<div className="match-overview-team-name">{right.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const MatchOverview = ({ match, teams, show }: IProps) => {
|
||||
const left = teams.find((team) => team._id === match.left.id);
|
||||
const right = teams.find((team) => team._id === match.right.id);
|
||||
if (!match || !left || !right) return null;
|
||||
return (
|
||||
<div className={`match-overview ${show ? "show" : ""}`}>
|
||||
<div className="match-overview-title">
|
||||
Upcoming match
|
||||
</div>
|
||||
<div className="match-overview-teams">
|
||||
<div className="match-overview-team">
|
||||
<div className="match-overview-team-logo">
|
||||
<TeamLogo team={left} height={40} />
|
||||
</div>
|
||||
<div className="match-overview-team-name">{(left.shortName || left.name).substring(0, 4)}</div>
|
||||
</div>
|
||||
<div className="match-overview-vs">vs</div>
|
||||
<div className="match-overview-team">
|
||||
<div className="match-overview-team-logo">
|
||||
<TeamLogo team={right} height={40} />
|
||||
</div>
|
||||
<div className="match-overview-team-name">{(right.shortName || right.name).substring(0, 4)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MatchOverview;
|
||||
|
||||
@ -39,4 +39,4 @@
|
||||
flex: unset;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,10 @@
|
||||
import React from 'react';
|
||||
import { actions, configs } from '../../App';
|
||||
import * as I from '../../api/interfaces';
|
||||
import { useState } from 'react';
|
||||
import PlayerOverview from '../PlayerOverview/PlayerOverview';
|
||||
import MatchOverview from '../MatchOverview/MatchOverview';
|
||||
import TeamOverview from '../TeamOverview/TeamOverview';
|
||||
import { Map, Player } from 'csgogsi-socket';
|
||||
import api from '../../api/api';
|
||||
|
||||
interface IState {
|
||||
player: {
|
||||
data: I.Player | null,
|
||||
show: boolean
|
||||
},
|
||||
match: {
|
||||
data: I.Match | null,
|
||||
show: boolean,
|
||||
teams: I.Team[],
|
||||
},
|
||||
team: {
|
||||
data: I.Team | null,
|
||||
show: boolean
|
||||
}
|
||||
}
|
||||
import { Map, Player } from 'csgogsi';
|
||||
import * as I from './../../API/types';
|
||||
import api from './../../API';
|
||||
import { useConfig, useOnConfigChange } from '../../API/contexts/actions';
|
||||
|
||||
interface IProps {
|
||||
match: I.Match | null,
|
||||
@ -29,97 +12,30 @@ interface IProps {
|
||||
players: Player[]
|
||||
}
|
||||
|
||||
export default class Overview extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps){
|
||||
super(props);
|
||||
this.state = {
|
||||
player: {
|
||||
data: null,
|
||||
show: false
|
||||
},
|
||||
match: {
|
||||
data: null,
|
||||
show: false,
|
||||
teams: []
|
||||
},
|
||||
team: {
|
||||
data: null,
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
loadTeams = async () => {
|
||||
const { match } = this.state;
|
||||
if(!match.data || !match.data.left.id || !match.data.right.id) return;
|
||||
const teams = await Promise.all([api.teams.getOne(match.data.left.id), api.teams.getOne(match.data.right.id)]);
|
||||
const Overview = ({ match, map, players }: IProps) => {
|
||||
const [ teams, setTeams ] = useState<I.Team[]>([]);
|
||||
const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
|
||||
|
||||
const previewData = useConfig("preview_settings");
|
||||
|
||||
useOnConfigChange('preview_settings', async data => {
|
||||
console.log(data);
|
||||
if(!data?.match_preview?.match?.left.id || !data?.match_preview?.match?.right.id) return;
|
||||
|
||||
const teams = await Promise.all([api.teams.getOne(data?.match_preview?.match?.left.id), api.teams.getOne(data?.match_preview?.match?.right.id)]);
|
||||
if(!teams[0] || !teams[1]) return;
|
||||
this.setState(state => {
|
||||
state.match.teams = teams;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
configs.onChange((data: any) => {
|
||||
if(!data || !data.preview_settings) return;
|
||||
this.setState({
|
||||
player: {
|
||||
data: (data.preview_settings.player_preview && data.preview_settings.player_preview.player) || null,
|
||||
show: Boolean(data.preview_settings.player_preview_toggle)
|
||||
},
|
||||
team: {
|
||||
data: (data.preview_settings.team_preview && data.preview_settings.team_preview.team) || null,
|
||||
show: Boolean(data.preview_settings.team_preview_toggle)
|
||||
},
|
||||
match: {
|
||||
data: (data.preview_settings.match_preview && data.preview_settings.match_preview.match) || null,
|
||||
show: Boolean(data.preview_settings.match_preview_toggle),
|
||||
teams: this.state.match.teams
|
||||
}
|
||||
}, this.loadTeams);
|
||||
});
|
||||
actions.on("toggleUpcomingMatch", () => {
|
||||
this.setState(state => {
|
||||
state.match.show = !state.match.show;
|
||||
return state;
|
||||
})
|
||||
})
|
||||
actions.on("togglePlayerPreview", () => {
|
||||
this.setState(state => {
|
||||
state.player.show = !state.player.show;
|
||||
return state;
|
||||
})
|
||||
})
|
||||
}
|
||||
getVeto = () => {
|
||||
const { map, match } = this.props;
|
||||
if(!match) return null;
|
||||
const mapName = map.name.substring(map.name.lastIndexOf('/')+1);
|
||||
const veto = match.vetos.find(veto => veto.mapName === mapName);
|
||||
if(!veto) return null;
|
||||
return veto;
|
||||
}
|
||||
renderPlayer = () => {
|
||||
const { player } = this.state;
|
||||
if(!player.data) return null;
|
||||
return <PlayerOverview round={this.props.map.round + 1} player={player.data} players={this.props.players} show={player.show} veto={this.getVeto()} />
|
||||
}
|
||||
renderMatch = () => {
|
||||
const { match } = this.state;
|
||||
if(!match.data || !match.teams[0] || !match.teams[1]) return null;
|
||||
return <MatchOverview match={match.data} show={match.show} veto={this.getVeto()} teams={match.teams}/>
|
||||
}
|
||||
renderTeam = () => {
|
||||
const { team } = this.state;
|
||||
if(!team.data) return null;
|
||||
return <TeamOverview team={team.data} show={team.show} veto={this.getVeto()} />
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
{this.renderPlayer()}
|
||||
{this.renderMatch()}
|
||||
{this.renderTeam()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
setTeams(teams);
|
||||
}, []);
|
||||
|
||||
const playerData = previewData?.player_preview?.player;
|
||||
const matchData = previewData?.match_preview?.match;
|
||||
|
||||
const veto = match?.vetos.find(veto => veto.mapName === mapName) || null;
|
||||
return (<>
|
||||
{ playerData ? <PlayerOverview round={map.round + 1} player={playerData} players={players} show={!!previewData.player_preview_toggle} veto={veto} /> : null}
|
||||
{ matchData && teams[0] && teams[1] ? <MatchOverview match={matchData} veto={veto} teams={teams} show={!!previewData.match_preview_toggle} /> : null }
|
||||
</>)
|
||||
}
|
||||
|
||||
export default Overview;
|
||||
@ -1,17 +1,17 @@
|
||||
import React from "react";
|
||||
import { PhaseRaw } from "csgogsi-socket";
|
||||
import { PhaseRaw } from "csgogsi";
|
||||
|
||||
interface IProps {
|
||||
phase: PhaseRaw | null
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
const Pause = ({ phase }: IProps) => {
|
||||
return (
|
||||
<div
|
||||
id={`pause`}
|
||||
className={phase && phase.phase === "paused" ? "show" : ""}
|
||||
>
|
||||
PAUSE
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Pause;
|
||||
|
||||
@ -1,22 +1,30 @@
|
||||
import React from "react";
|
||||
import { Map, PhaseRaw } from "csgogsi-socket";
|
||||
|
||||
import { Map, PhaseRaw } from "csgogsi";
|
||||
|
||||
interface IProps {
|
||||
phase: PhaseRaw | null,
|
||||
map: Map
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
const Timeout = ({ phase, map }: IProps) => {
|
||||
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.substring(8)
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{team.name} TIMEOUT
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Timeout;
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import React from 'react';
|
||||
import * as I from '../../api/interfaces';
|
||||
import { avatars } from './../../api/avatars';
|
||||
import { apiUrl } from '../../api/api';
|
||||
import * as I from '../../API/types';
|
||||
import { getCountry } from '../countries';
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import { Player } from 'csgogsi';
|
||||
import "./playeroverview.scss";
|
||||
import { apiUrl } from '../../API';
|
||||
|
||||
interface IProps {
|
||||
player: I.Player,
|
||||
@ -14,21 +12,34 @@ interface IProps {
|
||||
round: number
|
||||
}
|
||||
|
||||
export default class PlayerOverview extends React.Component<IProps> {
|
||||
sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
|
||||
const sum = (data: number[]) => data.reduce((a, b) => a + b, 0);
|
||||
|
||||
getData = () => {
|
||||
const { veto, player, round } = this.props;
|
||||
if(!player || !veto || !veto.rounds) return null;
|
||||
const calcWidth = (val: number | string, max?: number) => {
|
||||
const value = Number(val);
|
||||
if(value === 0) return 0;
|
||||
let maximum = max;
|
||||
if(!maximum) {
|
||||
maximum = Math.ceil(value/100)*100;
|
||||
}
|
||||
if(value > maximum){
|
||||
return 100;
|
||||
}
|
||||
return 100*value/maximum;
|
||||
}
|
||||
|
||||
const PlayerOverview = ({ player, show, veto, players, round }: IProps) => {
|
||||
if(!player || !veto || !veto.rounds) return null;
|
||||
const getData = () => {
|
||||
if(!veto.rounds) return null;
|
||||
const stats = veto.rounds.map(round => round ? round.players[player.steamid] : {
|
||||
kills: 0,
|
||||
killshs: 0,
|
||||
damage: 0
|
||||
}).filter(data => !!data);
|
||||
const overall = {
|
||||
damage: this.sum(stats.map(round => round.damage)),
|
||||
kills: this.sum(stats.map(round => round.kills)),
|
||||
killshs: this.sum(stats.map(round => round.killshs)),
|
||||
damage: sum(stats.map(round => round.damage)),
|
||||
kills: sum(stats.map(round => round.kills)),
|
||||
killshs: sum(stats.map(round => round.killshs)),
|
||||
};
|
||||
const data = {
|
||||
adr: stats.length !== 0 ? (overall.damage/(round-1)).toFixed(0) : '0',
|
||||
@ -39,66 +50,51 @@ export default class PlayerOverview extends React.Component<IProps> {
|
||||
}
|
||||
return data;
|
||||
}
|
||||
calcWidth = (val: number | string, max?: number) => {
|
||||
const value = Number(val);
|
||||
if(value === 0) return 0;
|
||||
let maximum = max;
|
||||
if(!maximum) {
|
||||
maximum = Math.ceil(value/100)*100;
|
||||
}
|
||||
if(value > maximum){
|
||||
return 100;
|
||||
}
|
||||
return 100*value/maximum;
|
||||
}
|
||||
render() {
|
||||
const { player, veto, players } = this.props;
|
||||
const data = this.getData();
|
||||
if(!player || !veto || !veto.rounds || !data) return null;
|
||||
let url = null;
|
||||
// const avatarData = avatars.find(avatar => avatar.steamid === player.steamid);
|
||||
const avatarData = avatars[player.steamid];
|
||||
if(avatarData && avatarData.url){
|
||||
url = avatarData.url;
|
||||
}
|
||||
const countryName = player.country ? getCountry(player.country) : null;
|
||||
let side = '';
|
||||
const inGamePlayer = players.find(inGamePlayer => inGamePlayer.steamid === player.steamid);
|
||||
if(inGamePlayer) side = inGamePlayer.team.side;
|
||||
return (
|
||||
<div className={`player-overview ${this.props.show ? 'show':''} ${side}`}>
|
||||
<div className="player-overview-picture">
|
||||
{url ? <img src={url} alt={`${player.username}'s avatar`}/> : null}
|
||||
</div>
|
||||
<div className="player-overview-username">{url && countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} className="flag" alt={countryName}/> : null }{player.username.toUpperCase()}</div>
|
||||
|
||||
<div className="player-overview-stats">
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">KILLS: {data.kills}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${this.calcWidth(data.kills, data.kills <= 30 ? 30 : 40)}%`}}></div>
|
||||
</div>
|
||||
const data = getData();
|
||||
if(!data) return null;
|
||||
const url = player.avatar;
|
||||
|
||||
const countryName = player.country ? getCountry(player.country) : null;
|
||||
let side = '';
|
||||
const inGamePlayer = players.find(inGamePlayer => inGamePlayer.steamid === player.steamid);
|
||||
if(inGamePlayer) side = inGamePlayer.team.side;
|
||||
return (
|
||||
<div className={`player-overview ${show ? 'show':''} ${side}`}>
|
||||
<div className="player-overview-picture">
|
||||
{url ? <img src={url} alt={`${player.username}'s avatar`}/> : null}
|
||||
</div>
|
||||
<div className="player-overview-username">{url && countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} className="flag" alt={countryName}/> : null }{player.username.toUpperCase()}</div>
|
||||
|
||||
<div className="player-overview-stats">
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">KILLS: {data.kills}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${calcWidth(data.kills, data.kills <= 30 ? 30 : 40)}%`}}></div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">HS: {data.hsp}%</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${this.calcWidth(data.hsp, 100)}%`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">HS: {data.hsp}%</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${calcWidth(data.hsp, 100)}%`}}></div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">ADR: {data.adr}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${this.calcWidth(data.adr)}%`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">ADR: {data.adr}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${calcWidth(data.adr)}%`}}></div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">KPR: {data.kpr}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${this.calcWidth(Number(data.kpr)*100)}%`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="player-overview-stat">
|
||||
<div className="label">KPR: {data.kpr}</div>
|
||||
<div className="panel">
|
||||
<div className="filling" style={{width:`${calcWidth(Number(data.kpr)*100)}%`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default PlayerOverview;
|
||||
@ -1,70 +1,50 @@
|
||||
import React from 'react';
|
||||
import CameraContainer from '../Camera/Container';
|
||||
import CameraContainer from "../Camera/Container";
|
||||
import PlayerCamera from "./../Camera/Camera";
|
||||
|
||||
import { avatars } from './../../api/avatars';
|
||||
|
||||
import { Skull } from './../../assets/Icons';
|
||||
import { configs } from '../../App';
|
||||
import { apiUrl } from '../../api/api';
|
||||
import { Skull } from "./../../assets/Icons";
|
||||
import { useConfig } from "../../API/contexts/actions";
|
||||
import { apiUrl } from "../../API";
|
||||
|
||||
interface IProps {
|
||||
steamid: string,
|
||||
teamId?: string | null,
|
||||
slot?: number,
|
||||
height?: number,
|
||||
width?: number,
|
||||
showSkull?: boolean,
|
||||
showCam?: boolean,
|
||||
sidePlayer?: boolean
|
||||
steamid: string;
|
||||
url: string | null;
|
||||
slot?: number;
|
||||
height?: number;
|
||||
width?: number;
|
||||
showSkull?: boolean;
|
||||
showCam?: boolean;
|
||||
sidePlayer?: boolean;
|
||||
teamId?: string | null
|
||||
}
|
||||
export default class Avatar extends React.Component<IProps, { replaceAvatar: 'never' | 'if_missing' | 'always' }> {
|
||||
constructor(props: IProps){
|
||||
super(props);
|
||||
this.state = {
|
||||
replaceAvatar: 'never'
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
const onDataChange = (data:any) => {
|
||||
if(!data) return;
|
||||
const display = data.display_settings;
|
||||
if(!display) return;
|
||||
this.setState({
|
||||
replaceAvatar: display.replace_avatars || 'never'
|
||||
})
|
||||
};
|
||||
configs.onChange(onDataChange);
|
||||
onDataChange(configs.data);
|
||||
}
|
||||
getAvatarUrl = () => {
|
||||
const avatarData = avatars[this.props.steamid] && avatars[this.props.steamid].url ? avatars[this.props.steamid].url : null;
|
||||
const Avatar = (
|
||||
{ steamid, url, height, width, showCam, showSkull, sidePlayer, teamId }: IProps,
|
||||
) => {
|
||||
const data = useConfig("display_settings");
|
||||
|
||||
if(this.state.replaceAvatar === 'always' || (this.state.replaceAvatar === 'if_missing' && !avatarData)){
|
||||
return this.props.teamId ? `${apiUrl}api/teams/logo/${this.props.teamId}` : avatarData || null;
|
||||
}
|
||||
return avatarData || null;
|
||||
|
||||
}
|
||||
render() {
|
||||
const { showCam, steamid, width, height, showSkull, sidePlayer } = this.props;
|
||||
//const url = avatars.filter(avatar => avatar.steamid === this.props.steamid)[0];
|
||||
const avatarUrl = this.getAvatarUrl();
|
||||
if (!avatarUrl) {
|
||||
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={avatarUrl} height={height} width={width} alt={'Avatar'} />
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
const avatarUrl = teamId && (data?.replace_avatars === "always" || (data?.replace_avatars === "if_missing" && !url)) ? `${apiUrl}api/teams/logo/${teamId}` : url;
|
||||
if(!avatarUrl && !showCam) return null;
|
||||
return (
|
||||
<div className={`avatar`}>
|
||||
{showCam
|
||||
? (sidePlayer
|
||||
? (
|
||||
<div className="videofeed">
|
||||
<PlayerCamera steamid={steamid} visible={true} />
|
||||
</div>
|
||||
)
|
||||
: <CameraContainer observedSteamid={steamid} />)
|
||||
: null}
|
||||
{showSkull
|
||||
? <Skull height={height} width={width} />
|
||||
: (
|
||||
avatarUrl ? <img
|
||||
src={avatarUrl}
|
||||
height={height}
|
||||
width={width}
|
||||
alt={"Avatar"}
|
||||
/> : null
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Avatar;
|
||||
@ -1,106 +1,86 @@
|
||||
import React from "react";
|
||||
import { Player } from "csgogsi-socket";
|
||||
import React, { useState } from "react";
|
||||
import { Player } from "csgogsi";
|
||||
import Weapon from "./../Weapon/Weapon";
|
||||
import Avatar from "./Avatar";
|
||||
import TeamLogo from "./../MatchBar/TeamLogo";
|
||||
import "./observed.scss";
|
||||
import { apiUrl } from './../../api/api';
|
||||
import { getCountry } from "./../countries";
|
||||
import { ArmorHelmet, ArmorFull, HealthFull, Bullets } from './../../assets/Icons';
|
||||
import { Veto } from "../../api/interfaces";
|
||||
import { actions } from "../../App";
|
||||
import { apiUrl } from './../../API';
|
||||
import { useAction } from "../../API/contexts/actions";
|
||||
|
||||
class Statistic extends React.PureComponent<{ label: string; value: string | number, }> {
|
||||
render() {
|
||||
return (
|
||||
<div className="stat">
|
||||
<div className="label">{this.props.label}</div>
|
||||
<div className="value">{this.props.value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class Observed extends React.Component<{ player: Player | null, veto: Veto | null, round: number }, { showCam: boolean }> {
|
||||
constructor(props: any){
|
||||
super(props);
|
||||
this.state = {
|
||||
showCam: true
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
actions.on('toggleCams', () => {
|
||||
console.log(this.state.showCam)
|
||||
this.setState({ showCam: !this.state.showCam });
|
||||
});
|
||||
}
|
||||
getAdr = () => {
|
||||
const { veto, player } = this.props;
|
||||
if (!player || !veto || !veto.rounds) return null;
|
||||
const damageInRounds = veto.rounds.map(round => round ? round.players[player.steamid] : {
|
||||
kills: 0,
|
||||
killshs: 0,
|
||||
damage: 0
|
||||
}).filter(data => !!data).map(roundData => roundData.damage);
|
||||
|
||||
return damageInRounds.reduce((a, b) => a + b, 0) / (this.props.round - 1);
|
||||
}
|
||||
render() {
|
||||
if (!this.props.player) return '';
|
||||
const { player } = this.props;
|
||||
const country = player.country || player.team.country;
|
||||
const weapons = Object.values(player.weapons).map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
|
||||
const currentWeapon = weapons.filter(weapon => weapon.state === "active")[0];
|
||||
const grenades = weapons.filter(weapon => weapon.type === "Grenade");
|
||||
const { stats } = player;
|
||||
const ratio = stats.deaths === 0 ? stats.kills : stats.kills / stats.deaths;
|
||||
const countryName = country ? getCountry(country) : null;
|
||||
return (
|
||||
<div className={`observed ${player.team.side}`}>
|
||||
<div className="main_row">
|
||||
{<Avatar teamId={player.team.id} steamid={player.steamid} height={140} width={140} showCam={this.state.showCam} slot={player.observer_slot} />}
|
||||
<TeamLogo team={player.team} height={35} width={35} />
|
||||
<div className="username_container">
|
||||
<div className="username">{player.name}</div>
|
||||
<div className="real_name">{player.realName}</div>
|
||||
</div>
|
||||
<div className="flag">{countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} alt={countryName} /> : ''}</div>
|
||||
<div className="grenade_container">
|
||||
{grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
|
||||
<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
|
||||
{
|
||||
grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
|
||||
</React.Fragment>)}
|
||||
</div>
|
||||
const Statistic = React.memo(({ label, value }: { label: string; value: string | number, }) => {
|
||||
return (
|
||||
<div className="stat">
|
||||
<div className="label">{label}</div>
|
||||
<div className="value">{value}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const Observed = ({ player }: { player: Player | null }) => {
|
||||
const [ showCam, setShowCam ] = useState(true);
|
||||
|
||||
useAction('toggleCams', () => {
|
||||
setShowCam(p => !p);
|
||||
});
|
||||
|
||||
if (!player) return null;
|
||||
|
||||
const country = player.country || player.team.country;
|
||||
const currentWeapon = player.weapons.filter(weapon => weapon.state === "active")[0];
|
||||
const grenades = player.weapons.filter(weapon => weapon.type === "Grenade");
|
||||
const { stats } = player;
|
||||
const ratio = stats.deaths === 0 ? stats.kills : stats.kills / stats.deaths;
|
||||
const countryName = country ? getCountry(country) : null;
|
||||
return (
|
||||
<div className={`observed ${player.team.side}`}>
|
||||
<div className="main_row">
|
||||
<Avatar teamId={player.team.id} url={player.avatar} steamid={player.steamid} height={140} width={140} showCam={showCam} slot={player.observer_slot} />
|
||||
<TeamLogo team={player.team} height={35} width={35} />
|
||||
<div className="username_container">
|
||||
<div className="username">{player.name}</div>
|
||||
<div className="real_name">{player.realName}</div>
|
||||
</div>
|
||||
<div className="stats_row">
|
||||
<div className="health_armor_container">
|
||||
<div className="health-icon icon">
|
||||
<HealthFull />
|
||||
</div>
|
||||
<div className="health text">{player.state.health}</div>
|
||||
<div className="armor-icon icon">
|
||||
{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
|
||||
</div>
|
||||
<div className="health text">{player.state.armor}</div>
|
||||
<div className="flag">{countryName ? <img src={`${apiUrl}files/img/flags/${countryName.replace(/ /g, "-")}.png`} alt={countryName} /> : ''}</div>
|
||||
<div className="grenade_container">
|
||||
{grenades.map(grenade => <React.Fragment key={`${player.steamid}_${grenade.name}_${grenade.ammo_reserve || 1}`}>
|
||||
<Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade />
|
||||
{
|
||||
grenade.ammo_reserve === 2 ? <Weapon weapon={grenade.name} active={grenade.state === "active"} isGrenade /> : null}
|
||||
</React.Fragment>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="stats_row">
|
||||
<div className="health_armor_container">
|
||||
<div className="health-icon icon">
|
||||
<HealthFull />
|
||||
</div>
|
||||
<div className="statistics">
|
||||
<Statistic label={"K"} value={stats.kills} />
|
||||
<Statistic label={"A"} value={stats.assists} />
|
||||
<Statistic label={"D"} value={stats.deaths} />
|
||||
<Statistic label={"K/D"} value={ratio.toFixed(2)} />
|
||||
<div className="health text">{player.state.health}</div>
|
||||
<div className="armor-icon icon">
|
||||
{player.state.helmet ? <ArmorHelmet /> : <ArmorFull />}
|
||||
</div>
|
||||
<div className="ammo">
|
||||
<div className="ammo_icon_container">
|
||||
<Bullets />
|
||||
</div>
|
||||
<div className="ammo_counter">
|
||||
<div className="ammo_clip">{(currentWeapon && currentWeapon.ammo_clip) || "-"}</div>
|
||||
<div className="ammo_reserve">/{(currentWeapon && currentWeapon.ammo_reserve) || "-"}</div>
|
||||
</div>
|
||||
<div className="health text">{player.state.armor}</div>
|
||||
</div>
|
||||
<div className="statistics">
|
||||
<Statistic label={"K"} value={stats.kills} />
|
||||
<Statistic label={"A"} value={stats.assists} />
|
||||
<Statistic label={"D"} value={stats.deaths} />
|
||||
<Statistic label={"K/D"} value={ratio.toFixed(2)} />
|
||||
</div>
|
||||
<div className="ammo">
|
||||
<div className="ammo_icon_container">
|
||||
<Bullets />
|
||||
</div>
|
||||
<div className="ammo_counter">
|
||||
<div className="ammo_clip">{(currentWeapon && currentWeapon.ammo_clip) || "-"}</div>
|
||||
<div className="ammo_reserve">/{(currentWeapon && currentWeapon.ammo_reserve) || "-"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Observed;
|
||||
@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
import * as I from "csgogsi-socket";
|
||||
import * as I from "csgogsi";
|
||||
import Weapon from "./../Weapon/Weapon";
|
||||
import Avatar from "./Avatar";
|
||||
import Armor from "./../Indicators/Armor";
|
||||
import Bomb from "./../Indicators/Bomb";
|
||||
import Defuse from "./../Indicators/Defuse";
|
||||
import React from "react";
|
||||
|
||||
interface IProps {
|
||||
player: I.Player,
|
||||
@ -24,9 +24,9 @@ const compareWeapon = (weaponOne: I.WeaponRaw, weaponTwo: I.WeaponRaw) => {
|
||||
return false;
|
||||
}
|
||||
|
||||
const compareWeapons = (weaponsObjectOne: { [key: string]: I.WeaponRaw }, weaponsObjectTwo: { [key: string]: I.WeaponRaw }) => {
|
||||
const weaponsOne = Object.values(weaponsObjectOne).sort((a, b) => (a.name as any) - (b.name as any))
|
||||
const weaponsTwo = Object.values(weaponsObjectTwo).sort((a, b) => (a.name as any) - (b.name as any))
|
||||
const compareWeapons = (weaponsObjectOne: I.Weapon[], weaponsObjectTwo: I.Weapon[]) => {
|
||||
const weaponsOne = [...weaponsObjectOne].sort((a, b) => a.name.localeCompare(b.name))
|
||||
const weaponsTwo = [...weaponsObjectTwo].sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
||||
if (weaponsOne.length !== weaponsTwo.length) return false;
|
||||
|
||||
@ -58,6 +58,8 @@ const arePlayersEqual = (playerOne: I.Player, playerTwo: I.Player) => {
|
||||
playerOne.state.equip_value === playerTwo.state.equip_value &&
|
||||
playerOne.state.adr === playerTwo.state.adr &&
|
||||
playerOne.avatar === playerTwo.avatar &&
|
||||
!!playerOne.team.id === !!playerTwo.team.id &&
|
||||
playerOne.team.side === playerTwo.team.side &&
|
||||
playerOne.country === playerTwo.country &&
|
||||
playerOne.realName === playerTwo.realName &&
|
||||
compareWeapons(playerOne.weapons, playerTwo.weapons)
|
||||
@ -65,7 +67,6 @@ const arePlayersEqual = (playerOne: I.Player, playerTwo: I.Player) => {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const Player = ({ player, isObserved }: IProps) => {
|
||||
|
||||
const weapons = Object.values(player.weapons).map(weapon => ({ ...weapon, name: weapon.name.replace("weapon_", "") }));
|
||||
@ -76,7 +77,7 @@ const Player = ({ player, isObserved }: IProps) => {
|
||||
return (
|
||||
<div className={`player ${player.state.health === 0 ? "dead" : ""} ${isObserved ? 'active' : ''}`}>
|
||||
<div className="player_data">
|
||||
<Avatar teamId={player.team.id} steamid={player.steamid} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
|
||||
<Avatar teamId={player.team.id} steamid={player.steamid} url={player.avatar} height={57} width={57} showSkull={false} showCam={false} sidePlayer={true} />
|
||||
<div className="dead-stats">
|
||||
<div className="labels">
|
||||
<div className="stat-label">K</div>
|
||||
@ -104,7 +105,7 @@ const Player = ({ player, isObserved }: IProps) => {
|
||||
<div className="row">
|
||||
<div className="armor_and_utility">
|
||||
<Bomb player={player} />
|
||||
<Armor player={player} />
|
||||
<Armor health={player.state.health} armor={player.state.armor} helmet={player.state.helmet} />
|
||||
<Defuse player={player} />
|
||||
</div>
|
||||
<div className="money">${player.state.money}</div>
|
||||
@ -131,5 +132,5 @@ const arePropsEqual = (prevProps: Readonly<IProps>, nextProps: Readonly<IProps>)
|
||||
return arePlayersEqual(prevProps.player, nextProps.player);
|
||||
}
|
||||
|
||||
//export default React.memo(Player, arePropsEqual);
|
||||
export default Player;
|
||||
export default React.memo(Player, arePropsEqual);
|
||||
//export default Player;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import Player from './Player'
|
||||
import * as I from 'csgogsi-socket';
|
||||
import * as I from 'csgogsi';
|
||||
import './players.scss';
|
||||
|
||||
interface Props {
|
||||
@ -9,17 +8,15 @@ interface Props {
|
||||
side: 'right' | 'left',
|
||||
current: I.Player | null,
|
||||
}
|
||||
|
||||
export default class TeamBox extends React.Component<Props> {
|
||||
render() {
|
||||
return (
|
||||
<div className={`teambox ${this.props.team.side} ${this.props.side}`}>
|
||||
{this.props.players.map(player => <Player
|
||||
key={player.steamid}
|
||||
player={player}
|
||||
isObserved={!!(this.props.current && this.props.current.steamid === player.steamid)}
|
||||
/>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const TeamBox = ({players, team, side, current}: Props) => {
|
||||
return (
|
||||
<div className={`teambox ${team.side} ${side}`}>
|
||||
{players.map(player => <Player
|
||||
key={player.steamid}
|
||||
player={player}
|
||||
isObserved={!!(current && current.steamid === player.steamid)}
|
||||
/>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default TeamBox;
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Bomb } from 'csgogsi-socket';
|
||||
import maps, { ScaleConfig, MapConfig, ZoomAreas } from './maps';
|
||||
import './index.css';
|
||||
import type { Bomb, Side } from 'csgogsi';
|
||||
import maps, { MapConfig, ZoomAreas } from './maps';
|
||||
import './index.scss';
|
||||
import { RadarPlayerObject, RadarGrenadeObject } from './interface';
|
||||
import config from './config';
|
||||
import { parsePosition } from './utils';
|
||||
interface IProps {
|
||||
players: RadarPlayerObject[];
|
||||
grenades: RadarGrenadeObject[];
|
||||
@ -12,99 +12,154 @@ interface IProps {
|
||||
zoom?: ZoomAreas;
|
||||
mapConfig: MapConfig,
|
||||
reverseZoom: string,
|
||||
parsePosition: (position: number[], size: number, config: ScaleConfig) => number[]
|
||||
}
|
||||
const isShooting = (lastShoot: number) => (new Date()).getTime() - lastShoot <= 250;
|
||||
|
||||
type Explosion = {
|
||||
position: number[],
|
||||
grenadeId: string
|
||||
}
|
||||
|
||||
const isShooting = (lastShoot: number) => (new Date()).getTime() - lastShoot <= 250;
|
||||
class App extends React.Component<IProps> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
players: [],
|
||||
grenades: [],
|
||||
bomb: null
|
||||
}
|
||||
/*
|
||||
const SMOKE_PARTICLE_BASE_AMOUNT = 10;
|
||||
//const PARTICLE_MAP_SOURCE = Array(SMOKE_PARTICLE_BASE_AMOUNT**2).fill(0);
|
||||
|
||||
const SMOKE_PARTICLE_SIZE_ABSOLUT = config.smokeSize/SMOKE_PARTICLE_BASE_AMOUNT;
|
||||
|
||||
const PARTICLE_SIDE = `${SMOKE_PARTICLE_SIZE_ABSOLUT}px`;
|
||||
|
||||
|
||||
|
||||
|
||||
const FRAG_RADIUS = 40;
|
||||
//const MAX_DISTANCE_BETWEEN_FRAG_AND_SMOKE = config.smokeSize + FRAG_RADIUS;
|
||||
|
||||
const getDistance = (X: number[], Y: number[]) => {
|
||||
const a = X[0] - Y[0];
|
||||
const b = X[1] - Y[1];
|
||||
|
||||
return Math.sqrt( a*a + b*b );
|
||||
}
|
||||
|
||||
const getPosOfIndex = (index: number, origin: number[]) => {
|
||||
const leftI = index%10;
|
||||
const topI = Math.floor(index/10);
|
||||
return ([origin[0] - config.smokeSize/2 + (leftI + 0.5) * SMOKE_PARTICLE_SIZE_ABSOLUT, origin[1] - config.smokeSize/2 + (topI + 0.5)*SMOKE_PARTICLE_SIZE_ABSOLUT]);
|
||||
}
|
||||
|
||||
const Particle = ({ index, explosions, origin }: { index: number, origin: number[], explosions: Explosion[] }) => {
|
||||
const PARTICLE_POSITION = getPosOfIndex(index, origin);
|
||||
const isHidden = getDistance(PARTICLE_POSITION, origin) > config.smokeSize/2 || explosions.some(expl => getDistance(expl.position, PARTICLE_POSITION) <= FRAG_RADIUS);
|
||||
return (<div className={`particle ${isHidden ? 'hide':''}`} style={{ width: PARTICLE_SIDE, height: PARTICLE_SIDE}}/>);
|
||||
}
|
||||
*/
|
||||
|
||||
const Grenade = ({ reverseZoom, type, state, visible, position, flames, side }: { explosions: Explosion[], reverseZoom: string, side: Side | null, flames: boolean, type: RadarGrenadeObject["type"], state: RadarGrenadeObject["state"], visible: boolean, position: number[] }) => {
|
||||
if (flames) {
|
||||
return null;
|
||||
}
|
||||
|
||||
renderGrenade = (grenade: RadarGrenadeObject) => {
|
||||
if ("flames" in grenade) {
|
||||
return null;
|
||||
}
|
||||
const { reverseZoom } = this.props;
|
||||
if(type === "smoke" && (state === "landed" || state === "exploded")){
|
||||
return (
|
||||
<div key={grenade.id} className={`grenade ${grenade.type} ${grenade.side || ''} ${grenade.state} ${grenade.visible ? 'visible':'hidden'}`}
|
||||
<div className={`grenade ${type} ${state} ${side || ''} ${visible ? 'visible':'hidden'}`}
|
||||
style={{
|
||||
transform: `translateX(${grenade.position[0].toFixed(2)}px) translateY(${grenade.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
|
||||
transform: `translateX(${position[0]}px) translateY(${position[1]}px) translateZ(10px) scale(${reverseZoom})`,
|
||||
}}>
|
||||
<div className="content" style={{ width: config.smokeSize, height: config.smokeSize }}>
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
<div className="background">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
renderDot = (player: RadarPlayerObject) => {
|
||||
const { reverseZoom } = this.props;
|
||||
return (
|
||||
<div className={`grenade ${type} ${state} ${side || ''} ${visible ? 'visible':'hidden'}`}
|
||||
style={{
|
||||
transform: `translateX(${position[0]}px) translateY(${position[1]}px) translateZ(10px) scale(${reverseZoom})`,
|
||||
}}>
|
||||
<div className="content">
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Bomb = ({ bomb, mapConfig, reverseZoom }: { reverseZoom: string, bomb?: Bomb | null, mapConfig: MapConfig }) => {
|
||||
if(!bomb) return null;
|
||||
if(bomb.state === "carried" || bomb.state === "planting") return null;
|
||||
if("config" in mapConfig){
|
||||
const position = parsePosition(bomb.position, mapConfig.config);
|
||||
if(!position) return null;
|
||||
|
||||
return (
|
||||
<div key={player.id}
|
||||
className={`player ${player.shooting? 'shooting':''} ${player.flashed ? 'flashed':''} ${player.side} ${player.hasBomb ? 'hasBomb':''} ${player.isActive ? 'active' : ''} ${!player.isAlive ? 'dead' : ''} ${player.visible ? 'visible':'hidden'}`}
|
||||
<div className={`bomb ${bomb.state} visible`}
|
||||
style={{
|
||||
transform: `translateX(${player.position[0].toFixed(2)}px) translateY(${player.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
|
||||
transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
|
||||
}}>
|
||||
<div className="content">
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return mapConfig.configs.map(config => {
|
||||
const position = parsePosition(bomb.position, config.config);
|
||||
if(!position) return null;
|
||||
return (
|
||||
<div className={`bomb ${bomb.state} ${config.isVisible(bomb.position[2]) ? 'visible':'hidden'}`}
|
||||
style={{
|
||||
transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
|
||||
}}>
|
||||
<div className="content">
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
const PlayerDot = ({ player, reverseZoom }: { reverseZoom: string, player: RadarPlayerObject }) => {
|
||||
const isShootingNow = isShooting(player.lastShoot);
|
||||
//console.log('x',isShooting(player.lastShoot), player.steamid);
|
||||
return (
|
||||
<div
|
||||
className={`player ${player.shooting? 'shooting':''} ${player.flashed ? 'flashed':''} ${player.side} ${player.hasBomb ? 'hasBomb':''} ${player.isActive ? 'active' : ''} ${!player.isAlive ? 'dead' : ''} ${player.visible ? 'visible':'hidden'}`}
|
||||
style={{
|
||||
transform: `translateX(${player.position[0].toFixed(2)}px) translateY(${player.position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`,
|
||||
|
||||
}}>
|
||||
<div className="content" style={{
|
||||
width: config.playerSize * player.scale,
|
||||
height: config.playerSize * player.scale,
|
||||
height: config.playerSize * player.scale
|
||||
}}>
|
||||
<div className="background-fire" style={{ transform: `rotate(${-90 + player.position[2]}deg)`, opacity: isShooting(player.lastShoot) ? 1 : 0 }} ><div className="bg"/></div>
|
||||
<div className="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
|
||||
<div className="label">{player.label}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
renderBomb = () => {
|
||||
const { bomb, mapConfig, reverseZoom } = this.props;
|
||||
if(!bomb) return null;
|
||||
if(bomb.state === "carried" || bomb.state === "planting") return null;
|
||||
if("config" in mapConfig){
|
||||
const position = this.props.parsePosition(bomb.position, 30, mapConfig.config);
|
||||
if(!position) return null;
|
||||
|
||||
return (
|
||||
<div className={`bomb ${bomb.state} visible`}
|
||||
style={{
|
||||
transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px) scale(${reverseZoom})`
|
||||
}}>
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
<div className="background-fire" style={{ transform: `rotate(${-90 + player.position[2]}deg)`, opacity: isShootingNow ? 1 : 0 }} ><div className="bg"/></div>
|
||||
<div className="background" style={{ transform: `rotate(${45 + player.position[2]}deg)` }}></div>
|
||||
<div className="label">{player.label}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return mapConfig.configs.map(config => {
|
||||
const position = this.props.parsePosition(bomb.position, 30, config.config);
|
||||
if(!position) return null;
|
||||
return (
|
||||
<div className={`bomb ${bomb.state} ${config.isVisible(bomb.position[2]) ? 'visible':'hidden'}`}
|
||||
style={{
|
||||
transform: `translateX(${position[0].toFixed(2)}px) translateY(${position[1].toFixed(2)}px) translateZ(10px)`
|
||||
}}>
|
||||
<div className="explode-point"></div>
|
||||
<div className="background"></div>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const { players, grenades, zoom } = this.props;
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const style: React.CSSProperties = { backgroundImage: `url(${maps[this.props.mapName].file})` }
|
||||
|
||||
const Radar = ({ players, grenades, mapConfig, bomb, mapName, zoom, reverseZoom }: IProps) => {
|
||||
//if(players.length === 0) return null;
|
||||
|
||||
const style: React.CSSProperties = { backgroundImage: `url(${maps[mapName].file})` }
|
||||
|
||||
if(zoom){
|
||||
style.transform = `scale(${zoom.zoom})`;
|
||||
style.transformOrigin = `${zoom.origin[0]}px ${zoom.origin[1]}px`;
|
||||
}
|
||||
//if(players.length === 0) return null;
|
||||
const explosions = grenades.filter(grenade => grenade.type === "frag" && grenade.state === "exploded");
|
||||
return <div className="map" style={style}>
|
||||
{players.map(this.renderDot)}
|
||||
{grenades.map(this.renderGrenade)}
|
||||
{this.renderBomb()}
|
||||
{players.map(player => <PlayerDot reverseZoom={reverseZoom} key={player.id} player={player} />)}
|
||||
{grenades.map(grenade => <Grenade explosions={explosions.map(g => ({ position: g.position, grenadeId: g.id }))} reverseZoom={reverseZoom} side={grenade.side} key={grenade.id} type={grenade.type} state={grenade.state} visible={grenade.visible} position={grenade.position} flames={"flames" in grenade} />)}
|
||||
<Bomb reverseZoom={reverseZoom} bomb={bomb} mapConfig={mapConfig} />
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default Radar;
|
||||
|
||||
@ -1,322 +1,79 @@
|
||||
import React from 'react';
|
||||
import { Player, Bomb } from 'csgogsi-socket';
|
||||
import maps, { ScaleConfig } from './maps';
|
||||
import { Player, Bomb, Grenade, FragOrFireBombOrFlashbandGrenade } from 'csgogsi';
|
||||
import maps from './maps';
|
||||
import LexoRadar from './LexoRadar';
|
||||
import { ExtendedGrenade, Grenade, RadarPlayerObject, RadarGrenadeObject } from './interface';
|
||||
import config from './config';
|
||||
import { RadarPlayerObject, RadarGrenadeObject } from './interface';
|
||||
import { EXPLODE_TIME_FRAG, explosionPlaces, extendGrenade, extendPlayer, grenadesStates, playersStates } from './utils';
|
||||
import { GSI } from '../../../API/HUD';
|
||||
|
||||
const DESCALE_ON_ZOOM = true;
|
||||
|
||||
|
||||
let playersStates: Player[][] = [];
|
||||
let grenadesStates: ExtendedGrenade[][] = [];
|
||||
const directions: Record<string, number> = {};
|
||||
type ShootingState = {
|
||||
ammo: number,
|
||||
weapon: string,
|
||||
lastShoot: number
|
||||
}
|
||||
let shootingState: Record<string, ShootingState> = {};
|
||||
|
||||
const calculateDirection = (player: Player) => {
|
||||
if (directions[player.steamid] && !player.state.health) return directions[player.steamid];
|
||||
|
||||
const [forwardV1, forwardV2] = player.forward;
|
||||
let direction = 0;
|
||||
|
||||
const [axisA, axisB] = [Math.asin(forwardV1), Math.acos(forwardV2)].map(axis => axis * 180 / Math.PI);
|
||||
|
||||
if (axisB < 45) {
|
||||
direction = Math.abs(axisA);
|
||||
} else if (axisB > 135) {
|
||||
direction = 180 - Math.abs(axisA);
|
||||
} else {
|
||||
direction = axisB;
|
||||
}
|
||||
|
||||
if (axisA < 0) {
|
||||
direction = -(direction -= 360);
|
||||
}
|
||||
|
||||
if (!directions[player.steamid]) {
|
||||
directions[player.steamid] = direction;
|
||||
}
|
||||
|
||||
const previous = directions[player.steamid];
|
||||
|
||||
let modifier = previous;
|
||||
modifier -= 360 * Math.floor(previous / 360);
|
||||
modifier = -(modifier -= direction);
|
||||
|
||||
if (Math.abs(modifier) > 180) {
|
||||
modifier -= 360 * Math.abs(modifier) / modifier;
|
||||
}
|
||||
directions[player.steamid] += modifier;
|
||||
|
||||
return directions[player.steamid];
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
players: Player[],
|
||||
bomb?: Bomb | null,
|
||||
player: Player | null,
|
||||
grenades?: any
|
||||
grenades: Grenade[]
|
||||
size?: number,
|
||||
mapName: string
|
||||
}
|
||||
|
||||
class App extends React.Component<IProps> {
|
||||
round = (n: number) => {
|
||||
const r = 0.02;
|
||||
return Math.round(n / r) * r;
|
||||
GSI.prependListener("data", () => {
|
||||
|
||||
const currentGrenades = GSI.current?.grenades || []
|
||||
grenadesStates.unshift(currentGrenades);
|
||||
grenadesStates.splice(5);
|
||||
|
||||
playersStates.unshift(GSI.current?.players || []);
|
||||
playersStates.splice(5);
|
||||
});
|
||||
|
||||
GSI.prependListener("data", data => {
|
||||
const { last } = GSI;
|
||||
if(!last) return;
|
||||
|
||||
for(const grenade of data.grenades.filter((grenade): grenade is FragOrFireBombOrFlashbandGrenade => grenade.type === "frag")){
|
||||
const old = last.grenades.find((oldGrenade): oldGrenade is FragOrFireBombOrFlashbandGrenade => oldGrenade.id === grenade.id);
|
||||
if(!old) continue;
|
||||
|
||||
if(grenade.lifetime >= EXPLODE_TIME_FRAG && old.lifetime < EXPLODE_TIME_FRAG){
|
||||
explosionPlaces[grenade.id] = grenade.position;
|
||||
}
|
||||
}
|
||||
|
||||
parsePosition = (position: number[], size: number, config: ScaleConfig) => {
|
||||
if (!(this.props.mapName in maps)) {
|
||||
return [0, 0];
|
||||
for(const grenadeId of Object.keys(explosionPlaces)){
|
||||
const doesExist = data.grenades.some(grenade => grenade.id === grenadeId);
|
||||
if(!doesExist){
|
||||
delete explosionPlaces[grenadeId];
|
||||
}
|
||||
const left = config.origin.x + (position[0] * config.pxPerUX) - (size / 2);
|
||||
const top = config.origin.y + (position[1] * config.pxPerUY) - (size / 2);
|
||||
|
||||
return [this.round(left), this.round(top)];
|
||||
}
|
||||
});
|
||||
|
||||
parseGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
|
||||
if (!("position" in grenade)) {
|
||||
return null;
|
||||
}
|
||||
let size = 30;
|
||||
if (grenade.type === "smoke") {
|
||||
size = 60;
|
||||
}
|
||||
return this.parsePosition(grenade.position.split(", ").map(pos => Number(pos)), size, config);
|
||||
}
|
||||
getGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
|
||||
const grenadeData = grenadesStates.slice(0, 5).map(grenades => grenades.filter(gr => gr.id === grenade.id)[0]).filter(pl => !!pl);
|
||||
if (grenadeData.length === 0) return null;
|
||||
const positions = grenadeData.map(grenadeEntry => this.parseGrenadePosition(grenadeEntry, config)).filter(posData => posData !== null) as number[][];
|
||||
if (positions.length === 0) return null;
|
||||
const entryAmount = positions.length;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
for (const position of positions) {
|
||||
x += position[0];
|
||||
y += position[1];
|
||||
}
|
||||
const LexoRadarContainer = ({ size = 300, mapName, bomb, player, players, grenades }: IProps) => {
|
||||
const offset = (size - (size * size / 1024)) / 2;
|
||||
|
||||
return [x / entryAmount, y / entryAmount];
|
||||
}
|
||||
getPosition = (player: Player, mapConfig: ScaleConfig, scale: number) => {
|
||||
const playerData = playersStates.slice(0, 5).map(players => players.filter(pl => pl.steamid === player.steamid)[0]).filter(pl => !!pl);
|
||||
if (playerData.length === 0) return [0, 0];
|
||||
const positions = playerData.map(playerEntry => this.parsePosition(playerEntry.position, config.playerSize * scale, mapConfig));
|
||||
const entryAmount = positions.length;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
for (const position of positions) {
|
||||
x += position[0];
|
||||
y += position[1];
|
||||
}
|
||||
|
||||
const degree = calculateDirection(player);
|
||||
return [x / entryAmount, y / entryAmount, degree];
|
||||
}
|
||||
mapPlayer = (active: Player | null) => (player: Player): RadarPlayerObject | RadarPlayerObject[] | null => {
|
||||
if (!(this.props.mapName in maps)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const weapons = player.weapons ? Object.values(player.weapons) : [];
|
||||
const weapon = weapons.find(weapon => weapon.state === "active" && weapon.type !== "C4" && weapon.type !== "Knife" && weapon.type !== "Grenade");
|
||||
|
||||
const shooting: ShootingState = { ammo: weapon && weapon.ammo_clip || 0, weapon: weapon && weapon.name || '', lastShoot: 0 };
|
||||
|
||||
const lastShoot = shootingState[player.steamid] || shooting;
|
||||
|
||||
let isShooting = false;
|
||||
|
||||
if (shooting.weapon === lastShoot.weapon && shooting.ammo < lastShoot.ammo) {
|
||||
isShooting = true;
|
||||
}
|
||||
|
||||
shooting.lastShoot = isShooting ? (new Date()).getTime() : lastShoot.lastShoot;
|
||||
|
||||
shootingState[player.steamid] = shooting;
|
||||
|
||||
|
||||
const map = maps[this.props.mapName];
|
||||
const playerObject: RadarPlayerObject = {
|
||||
id: player.steamid,
|
||||
label: player.observer_slot !== undefined ? player.observer_slot : "",
|
||||
side: player.team.side,
|
||||
position: [],
|
||||
visible: true,
|
||||
isActive: !!active && active.steamid === player.steamid,
|
||||
forward: 0,
|
||||
steamid: player.steamid,
|
||||
isAlive: player.state.health > 0,
|
||||
hasBomb: !!Object.values(player.weapons).find(weapon => weapon.type === "C4"),
|
||||
flashed: player.state.flashed > 35,
|
||||
shooting: isShooting,
|
||||
lastShoot: shooting.lastShoot,
|
||||
scale: 1,
|
||||
player
|
||||
}
|
||||
if ("config" in map) {
|
||||
const scale = map.config.originHeight === undefined ? 1 : (1 + (player.position[2] - map.config.originHeight) / 1000);
|
||||
|
||||
playerObject.scale = scale;
|
||||
|
||||
const position = this.getPosition(player, map.config, scale);
|
||||
playerObject.position = position;
|
||||
|
||||
return playerObject;
|
||||
}
|
||||
return map.configs.map(config => {
|
||||
const scale = config.config.originHeight === undefined ? 1 : (1 + (player.position[2] - config.config.originHeight) / 750);
|
||||
|
||||
playerObject.scale = scale;
|
||||
|
||||
return ({
|
||||
...playerObject,
|
||||
position: this.getPosition(player, config.config, scale),
|
||||
id: `${player.steamid}_${config.id}`,
|
||||
visible: config.isVisible(player.position[2])
|
||||
})
|
||||
});
|
||||
}
|
||||
mapGrenade = (extGrenade: ExtendedGrenade) => {
|
||||
if (!(this.props.mapName in maps)) {
|
||||
return null;
|
||||
}
|
||||
const map = maps[this.props.mapName];
|
||||
if (extGrenade.type === "inferno") {
|
||||
const mapFlame = (id: string) => {
|
||||
if ("config" in map) {
|
||||
return ({
|
||||
position: this.parsePosition(extGrenade.flames[id].split(", ").map(pos => Number(pos)), 12, map.config),
|
||||
id: `${id}_${extGrenade.id}`,
|
||||
visible: true
|
||||
});
|
||||
}
|
||||
return map.configs.map(config => ({
|
||||
id: `${id}_${extGrenade.id}_${config.id}`,
|
||||
visible: config.isVisible(extGrenade.flames[id].split(", ").map(Number)[2]),
|
||||
position: this.parsePosition(extGrenade.flames[id].split(", ").map(pos => Number(pos)), 12, config.config)
|
||||
}));
|
||||
}
|
||||
const flames = Object.keys(extGrenade.flames).map(mapFlame).flat();
|
||||
const flameObjects: RadarGrenadeObject[] = flames.map(flame => ({
|
||||
...flame,
|
||||
side: extGrenade.side,
|
||||
type: 'inferno',
|
||||
state: 'landed'
|
||||
}));
|
||||
return flameObjects;
|
||||
}
|
||||
|
||||
if ("config" in map) {
|
||||
const position = this.getGrenadePosition(extGrenade, map.config);
|
||||
if (!position) return null;
|
||||
const grenadeObject: RadarGrenadeObject = {
|
||||
type: extGrenade.type,
|
||||
state: 'inair',
|
||||
side: extGrenade.side,
|
||||
position,
|
||||
id: extGrenade.id,
|
||||
visible: true
|
||||
}
|
||||
if (extGrenade.type === "smoke") {
|
||||
if (extGrenade.effecttime !== "0.0") {
|
||||
grenadeObject.state = "landed";
|
||||
if (Number(extGrenade.effecttime) >= 16.5) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
} else if (extGrenade.type === 'flashbang' || extGrenade.type === 'frag') {
|
||||
if (Number(extGrenade.lifetime) >= 1.25) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
return grenadeObject;
|
||||
}
|
||||
return map.configs.map(config => {
|
||||
const position = this.getGrenadePosition(extGrenade, config.config);
|
||||
if (!position) return null;
|
||||
const grenadeObject: RadarGrenadeObject = {
|
||||
type: extGrenade.type,
|
||||
state: 'inair',
|
||||
side: extGrenade.side,
|
||||
position,
|
||||
id: `${extGrenade.id}_${config.id}`,
|
||||
visible: config.isVisible(extGrenade.position.split(", ").map(Number)[2])
|
||||
}
|
||||
if (extGrenade.type === "smoke") {
|
||||
if (extGrenade.effecttime !== "0.0") {
|
||||
grenadeObject.state = "landed";
|
||||
if (Number(extGrenade.effecttime) >= 16.5) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
} else if (extGrenade.type === 'flashbang' || extGrenade.type === 'frag') {
|
||||
if (Number(extGrenade.lifetime) >= 1.25) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
return grenadeObject;
|
||||
}).filter((grenade): grenade is RadarGrenadeObject => grenade !== null);
|
||||
|
||||
}
|
||||
getSideOfGrenade = (grenade: Grenade) => {
|
||||
const owner = this.props.players.find(player => player.steamid === grenade.owner);
|
||||
if (!owner) return null;
|
||||
return owner.team.side;
|
||||
}
|
||||
render() {
|
||||
const players: RadarPlayerObject[] = this.props.players.map(this.mapPlayer(this.props.player)).filter((player): player is RadarPlayerObject => player !== null).flat();
|
||||
playersStates.unshift(this.props.players);
|
||||
if (playersStates.length > 5) {
|
||||
playersStates = playersStates.slice(0, 5);
|
||||
}
|
||||
let grenades: RadarGrenadeObject[] = [];
|
||||
const currentGrenades = Object.keys(this.props.grenades as { [key: string]: Grenade }).map(grenadeId => ({ ...this.props.grenades[grenadeId], id: grenadeId, side: this.getSideOfGrenade(this.props.grenades[grenadeId]) })) as ExtendedGrenade[];
|
||||
if (currentGrenades) {
|
||||
grenades = currentGrenades.map(this.mapGrenade).filter(entry => entry !== null).flat() as RadarGrenadeObject[];
|
||||
grenadesStates.unshift(currentGrenades);
|
||||
}
|
||||
if (grenadesStates.length > 5) {
|
||||
grenadesStates = grenadesStates.slice(0, 5);
|
||||
}
|
||||
const size = this.props.size || 300;
|
||||
const offset = (size - (size * size / 1024)) / 2;
|
||||
|
||||
const config = maps[this.props.mapName];
|
||||
|
||||
const zooms = config && config.zooms || [];
|
||||
|
||||
const activeZoom = zooms.find(zoom => zoom.threshold(players.map(pl => pl.player)));
|
||||
|
||||
const reverseZoom = 1/(activeZoom && activeZoom.zoom || 1);
|
||||
|
||||
// s*(1024-s)/2048
|
||||
if (!(this.props.mapName in maps)) {
|
||||
return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
|
||||
Unsupported map
|
||||
</div>;
|
||||
}
|
||||
if (!(mapName in maps)) {
|
||||
return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
|
||||
<LexoRadar
|
||||
players={players}
|
||||
grenades={grenades}
|
||||
parsePosition={this.parsePosition}
|
||||
bomb={this.props.bomb}
|
||||
mapName={this.props.mapName}
|
||||
mapConfig={maps[this.props.mapName]}
|
||||
zoom={activeZoom}
|
||||
reverseZoom={DESCALE_ON_ZOOM ? reverseZoom.toFixed(2) : '1'}
|
||||
/>
|
||||
Unsupported map
|
||||
</div>;
|
||||
}
|
||||
const playersExtended: RadarPlayerObject[] = players.map(pl => extendPlayer({ player: pl, steamId: player?.steamid || null, mapName })).filter((player): player is RadarPlayerObject => player !== null).flat();
|
||||
const grenadesExtended = grenades.map(grenade => extendGrenade({ grenade, side: playersExtended.find(player => player.steamid === grenade.owner)?.side || 'CT', mapName })).filter(entry => entry !== null).flat() as RadarGrenadeObject[];
|
||||
const config = maps[mapName];
|
||||
|
||||
const zooms = config && config.zooms || [];
|
||||
|
||||
const activeZoom = zooms.find(zoom => zoom.threshold(playersExtended.map(pl => pl.player)));
|
||||
|
||||
const reverseZoom = 1/(activeZoom && activeZoom.zoom || 1);
|
||||
// s*(1024-s)/2048
|
||||
return <div className="map-container" style={{ width: size, height: size, transform: `scale(${size / 1024})`, top: -offset, left: -offset }}>
|
||||
<LexoRadar
|
||||
players={playersExtended}
|
||||
grenades={grenadesExtended}
|
||||
bomb={bomb}
|
||||
mapName={mapName}
|
||||
mapConfig={config}
|
||||
zoom={activeZoom}
|
||||
reverseZoom={DESCALE_ON_ZOOM ? reverseZoom.toFixed(2) : '1'}
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default LexoRadarContainer;
|
||||
|
||||
Binary file not shown.
@ -1,5 +1,6 @@
|
||||
const config = {
|
||||
playerSize: 60,
|
||||
playerSize: 70,
|
||||
smokeSize: 50
|
||||
}
|
||||
|
||||
export default config;
|
||||
@ -51,12 +51,20 @@ html, body, .map-container {
|
||||
}
|
||||
.map .player, .map .grenade, .map .bomb {
|
||||
position: absolute;
|
||||
height:30px;
|
||||
width:30px;
|
||||
height:0px;
|
||||
width:0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.5s ease;
|
||||
.content {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/*transition: all 0.1s ease;/**/
|
||||
}
|
||||
.map .player .background {
|
||||
@ -66,7 +74,7 @@ html, body, .map-container {
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
transition:transform 0.2s ease;
|
||||
transition:transform 0.2s linear;
|
||||
}
|
||||
.map .player .background-fire {
|
||||
position: absolute;
|
||||
@ -140,10 +148,12 @@ html, body, .map-container {
|
||||
}
|
||||
*/
|
||||
.map .player.active {
|
||||
width:120%;
|
||||
height:120%;
|
||||
z-index: 3;
|
||||
}
|
||||
.map .player.active .content {
|
||||
width:48px;
|
||||
height:48px;
|
||||
}
|
||||
.map .grenade .background {
|
||||
border-radius:50%;
|
||||
background-size: contain;
|
||||
@ -157,9 +167,6 @@ html, body, .map-container {
|
||||
opacity: 1;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.map .grenade.smoke {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.map .grenade.smoke.inair .background {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
@ -167,7 +174,6 @@ html, body, .map-container {
|
||||
filter: invert(1);
|
||||
}
|
||||
.map .grenade.smoke.exploded .background {
|
||||
opacity: 0;
|
||||
}
|
||||
.map .grenade.flashbang, .map .grenade.frag {
|
||||
filter: invert(1);
|
||||
@ -183,6 +189,8 @@ html, body, .map-container {
|
||||
.map .grenade .explode-point, .map .bomb .explode-point {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
top: calc(50% - 1px);
|
||||
left: calc(50% - 1px);
|
||||
height: 2px;
|
||||
border-radius: 0.08px;
|
||||
}
|
||||
@ -194,7 +202,6 @@ html, body, .map-container {
|
||||
opacity: 0;
|
||||
}
|
||||
.map .grenade.smoke .background {
|
||||
border: 5px solid grey;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.map .grenade.smoke.CT .background {
|
||||
@ -214,9 +221,8 @@ html, body, .map-container {
|
||||
width:12px;
|
||||
height:12px;
|
||||
}
|
||||
.map .grenade.smoke {
|
||||
width:60px;
|
||||
height:60px;
|
||||
.map .grenade .content {
|
||||
position: absolute;
|
||||
}
|
||||
.map .grenade.inferno .background {
|
||||
background-color: red;
|
||||
@ -270,16 +276,29 @@ html, body, .map-container {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@keyframes Hidden {
|
||||
from {
|
||||
}
|
||||
to {
|
||||
display: none !important;
|
||||
}
|
||||
.map .player.dead .background {
|
||||
display: none;
|
||||
}
|
||||
.map .player.dead .label {
|
||||
background: transparent;
|
||||
}
|
||||
.map .player.dead.CT .label, .map .player.CT .label div {
|
||||
color: var(--color-new-ct);
|
||||
}
|
||||
.map .player.dead.T .label, .map .player.T .label div {
|
||||
color: var(--color-new-t);
|
||||
}
|
||||
.map .hidden {
|
||||
opacity: 0;
|
||||
animation: Hidden 1s ease 1s 1;
|
||||
animation-fill-mode: forwards;/**/
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
.map .grenade {
|
||||
&.smoke {
|
||||
&.exploded, &.landed {
|
||||
.background {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Player, Side } from "csgogsi";
|
||||
import { Player, Side, Grenade } from "csgogsi";
|
||||
|
||||
export interface RadarPlayerObject {
|
||||
id: string,
|
||||
@ -26,30 +26,5 @@ export interface RadarGrenadeObject {
|
||||
visible: boolean,
|
||||
id: string,
|
||||
}
|
||||
export interface GrenadeBase {
|
||||
owner: string,
|
||||
type: 'decoy' | 'smoke' | 'frag' | 'firebomb' | 'flashbang' | 'inferno'
|
||||
lifetime: string
|
||||
}
|
||||
|
||||
export interface DecoySmokeGrenade extends GrenadeBase {
|
||||
position: string,
|
||||
velocity: string,
|
||||
type: 'decoy' | 'smoke',
|
||||
effecttime: string,
|
||||
}
|
||||
|
||||
export interface DefaultGrenade extends GrenadeBase {
|
||||
position: string,
|
||||
type: 'frag' | 'firebomb' | 'flashbang',
|
||||
velocity: string,
|
||||
}
|
||||
|
||||
export interface InfernoGrenade extends GrenadeBase {
|
||||
type: 'inferno',
|
||||
flames: { [key: string]: string }
|
||||
}
|
||||
|
||||
export type Grenade = DecoySmokeGrenade | DefaultGrenade | InfernoGrenade;
|
||||
|
||||
export type ExtendedGrenade = Grenade & { id: string, side: Side | null, };
|
||||
export type ExtendedGrenade = Grenade & { side: Side | null, };
|
||||
@ -1,15 +0,0 @@
|
||||
import radar from './radar.png'
|
||||
|
||||
const config = {
|
||||
"config": {
|
||||
"origin": {
|
||||
"x": 536.3392873296655,
|
||||
"y": 638.0789844851904
|
||||
},
|
||||
"pxPerUX": 0.1907910426894958,
|
||||
"pxPerUY": -0.18993888105312648
|
||||
},
|
||||
"file":radar
|
||||
}
|
||||
|
||||
export default config;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
@ -7,8 +7,7 @@ const config = {
|
||||
"y": 340.2921393569175
|
||||
},
|
||||
"pxPerUX": 0.20118507589946494,
|
||||
"pxPerUY": -0.20138282875746794,
|
||||
"originHeight": -170,
|
||||
"pxPerUY": -0.20138282875746794
|
||||
},
|
||||
"file": radar
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import radar from './radar.png'
|
||||
|
||||
const high = {
|
||||
@ -32,21 +31,6 @@ const config = {
|
||||
isVisible: (height: number) => height < 11700,
|
||||
},
|
||||
],
|
||||
zooms: [{
|
||||
threshold: (players: Player[]) => {
|
||||
const alivePlayers = players.filter(player => player.state.health);
|
||||
return alivePlayers.length > 0 && alivePlayers.every(player => player.position[2] < 11700)
|
||||
},
|
||||
origin: [472, 1130],
|
||||
zoom: 2
|
||||
}, {
|
||||
threshold: (players: Player[]) => {
|
||||
const alivePlayers = players.filter(player => player.state.health);
|
||||
return alivePlayers.length > 0 && players.filter(player => player.state.health).every(player => player.position[2] >= 11700);
|
||||
},
|
||||
origin: [528, 15],
|
||||
zoom: 1.75
|
||||
}],
|
||||
file: radar
|
||||
}
|
||||
|
||||
|
||||
@ -6,17 +6,15 @@ import de_train from './de_train';
|
||||
import de_overpass from './de_overpass';
|
||||
import de_nuke from './de_nuke';
|
||||
import de_vertigo from './de_vertigo';
|
||||
import de_anubis from './de_anubis';
|
||||
import de_ancient from './de_ancient';
|
||||
import api from '../../../../api/api';
|
||||
import { Player } from 'csgogsi-socket';
|
||||
import api from '../../../../API';
|
||||
import { Player } from 'csgogsi';
|
||||
|
||||
export type ZoomAreas = {
|
||||
threshold: (players: Player[]) => boolean;
|
||||
origin: number[],
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export interface ScaleConfig {
|
||||
origin: {
|
||||
x:number,
|
||||
@ -29,7 +27,7 @@ export interface ScaleConfig {
|
||||
|
||||
interface SingleLayer {
|
||||
config: ScaleConfig,
|
||||
file: string,
|
||||
file: string
|
||||
zooms?: ZoomAreas[]
|
||||
}
|
||||
|
||||
@ -39,7 +37,7 @@ interface DoubleLayer {
|
||||
config: ScaleConfig,
|
||||
isVisible: (height: number) => boolean
|
||||
}[],
|
||||
file: string,
|
||||
file: string
|
||||
zooms?: ZoomAreas[]
|
||||
}
|
||||
|
||||
@ -54,8 +52,7 @@ const maps: { [key: string] : MapConfig} = {
|
||||
de_overpass,
|
||||
de_nuke,
|
||||
de_vertigo,
|
||||
de_ancient,
|
||||
de_anubis
|
||||
de_ancient
|
||||
}
|
||||
|
||||
api.maps.get().then(fallbackMaps => {
|
||||
|
||||
244
src/HUD/Radar/LexoRadar/utils.ts
Normal file
244
src/HUD/Radar/LexoRadar/utils.ts
Normal file
@ -0,0 +1,244 @@
|
||||
import { Player, Side, Grenade } from "csgogsi";
|
||||
import maps, { ScaleConfig } from "./maps";
|
||||
import { ExtendedGrenade, RadarGrenadeObject, RadarPlayerObject } from "./interface";
|
||||
import { InfernoGrenade } from "csgogsi";
|
||||
|
||||
export const playersStates: Player[][] = [];
|
||||
export const grenadesStates: Grenade[][] = [];
|
||||
const directions: { [key: string]: number } = {};
|
||||
|
||||
export const explosionPlaces: Record<string, number[]> = {};
|
||||
|
||||
type ShootingState = {
|
||||
ammo: number,
|
||||
weapon: string,
|
||||
lastShoot: number
|
||||
}
|
||||
let shootingState: Record<string, ShootingState> = {};
|
||||
|
||||
const calculateDirection = (player: Player) => {
|
||||
if (directions[player.steamid] && !player.state.health) return directions[player.steamid];
|
||||
|
||||
const [forwardV1, forwardV2] = player.forward;
|
||||
let direction = 0;
|
||||
|
||||
const [axisA, axisB] = [Math.asin(forwardV1), Math.acos(forwardV2)].map(axis => axis * 180 / Math.PI);
|
||||
|
||||
if (axisB < 45) {
|
||||
direction = Math.abs(axisA);
|
||||
} else if (axisB > 135) {
|
||||
direction = 180 - Math.abs(axisA);
|
||||
} else {
|
||||
direction = axisB;
|
||||
}
|
||||
|
||||
if (axisA < 0) {
|
||||
direction = -(direction -= 360);
|
||||
}
|
||||
|
||||
if (!directions[player.steamid]) {
|
||||
directions[player.steamid] = direction;
|
||||
}
|
||||
|
||||
const previous = directions[player.steamid];
|
||||
|
||||
let modifier = previous;
|
||||
modifier -= 360 * Math.floor(previous / 360);
|
||||
modifier = -(modifier -= direction);
|
||||
|
||||
if (Math.abs(modifier) > 180) {
|
||||
modifier -= 360 * Math.abs(modifier) / modifier;
|
||||
}
|
||||
directions[player.steamid] += modifier;
|
||||
|
||||
return directions[player.steamid];
|
||||
}
|
||||
|
||||
export const round = (n: number) => {
|
||||
const r = 0.02;
|
||||
return Math.round(n / r) * r;
|
||||
}
|
||||
|
||||
export const parsePosition = (position: number[], config: ScaleConfig) => {
|
||||
const left = config.origin.x + (position[0] * config.pxPerUX);
|
||||
const top = config.origin.y + (position[1] * config.pxPerUY);
|
||||
|
||||
return [round(left), round(top)];
|
||||
}
|
||||
|
||||
export const parsePlayerPosition = (player: Player, mapConfig: ScaleConfig) => {
|
||||
const playerData = playersStates.slice(0, 5).map(players => players.filter(pl => pl.steamid === player.steamid)[0]).filter(pl => !!pl);
|
||||
if (playerData.length === 0) return [0, 0];
|
||||
const positions = playerData.map(playerEntry => parsePosition(playerEntry.position, mapConfig));
|
||||
const entryAmount = positions.length;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
for (const position of positions) {
|
||||
x += position[0];
|
||||
y += position[1];
|
||||
}
|
||||
|
||||
const degree = calculateDirection(player);
|
||||
return [x / entryAmount, y / entryAmount, degree];
|
||||
}
|
||||
|
||||
|
||||
const parseGrenadePosition = (grenade: ExtendedGrenade, config: ScaleConfig) => {
|
||||
if(grenade.id in explosionPlaces) return parsePosition(explosionPlaces[grenade.id], config);
|
||||
const grenadeData = grenadesStates.slice(0, 5).map(grenades => grenades.filter(gr => gr.id === grenade.id)[0]).filter(pl => !!pl);
|
||||
if (grenadeData.length === 0) return "position" in grenade ? parsePosition(grenade.position, config) : null;
|
||||
const positions = grenadeData.map(grenadeEntry => ("position" in grenadeEntry ? parsePosition(grenadeEntry.position, config) : null)).filter(posData => posData !== null) as number[][];
|
||||
if (positions.length === 0) return null;
|
||||
const entryAmount = positions.length;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
for (const position of positions) {
|
||||
x += position[0];
|
||||
y += position[1];
|
||||
}
|
||||
|
||||
return [x / entryAmount, y / entryAmount];
|
||||
}
|
||||
|
||||
export const EXPLODE_TIME_FRAG = 1.6;
|
||||
export const EXPLODE_TIME_FLASH = 1.45;
|
||||
|
||||
export const extendGrenade = ({grenade, mapName, side }: { side: Side, grenade: Grenade, mapName: string}) => {
|
||||
// const owner = this.props.players.find(player => player.steamid === grenade.owner);
|
||||
const extGrenade: ExtendedGrenade = {
|
||||
...grenade,
|
||||
side:/* owner?.team.side ||*/ side
|
||||
}
|
||||
const map = maps[mapName];
|
||||
if (extGrenade.type === "inferno") {
|
||||
const mapFlame = (flame: InfernoGrenade["flames"][number]) => {
|
||||
if ("config" in map) {
|
||||
return ({
|
||||
position: parsePosition(flame.position, map.config),
|
||||
id: `${flame.id}_${extGrenade.id}`,
|
||||
visible: true
|
||||
});
|
||||
}
|
||||
return map.configs.map(config => ({
|
||||
id: `${flame}_${extGrenade.id}_${config.id}`,
|
||||
visible: config.isVisible(flame.position[2]),
|
||||
position: parsePosition(flame.position, config.config)
|
||||
}));
|
||||
}
|
||||
const flames = extGrenade.flames.map(mapFlame).flat();
|
||||
const flameObjects: RadarGrenadeObject[] = flames.map(flame => ({
|
||||
...flame,
|
||||
side: extGrenade.side,
|
||||
type: 'inferno',
|
||||
state: 'landed'
|
||||
}));
|
||||
return flameObjects;
|
||||
}
|
||||
|
||||
if ("config" in map) {
|
||||
const position = parseGrenadePosition(extGrenade, map.config);
|
||||
|
||||
if (!position) return null;
|
||||
const grenadeObject: RadarGrenadeObject = {
|
||||
type: extGrenade.type,
|
||||
state: 'inair',
|
||||
side: extGrenade.side,
|
||||
position,
|
||||
id: extGrenade.id,
|
||||
visible: true
|
||||
}
|
||||
if (extGrenade.type === "smoke") {
|
||||
if (extGrenade.effecttime !== 0) {
|
||||
grenadeObject.state = "landed";
|
||||
if (extGrenade.effecttime >= 16.5) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
} else if ((extGrenade.type === 'flashbang' && extGrenade.lifetime >= EXPLODE_TIME_FLASH) || (extGrenade.type === 'frag' && extGrenade.lifetime >= EXPLODE_TIME_FRAG)) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
return grenadeObject;
|
||||
}
|
||||
return map.configs.map(config => {
|
||||
const position = parseGrenadePosition(extGrenade, config.config);
|
||||
if (!position) return null;
|
||||
const grenadeObject: RadarGrenadeObject = {
|
||||
type: extGrenade.type,
|
||||
state: 'inair',
|
||||
side: extGrenade.side,
|
||||
position,
|
||||
id: `${extGrenade.id}_${config.id}`,
|
||||
visible: config.isVisible(extGrenade.position[2])
|
||||
}
|
||||
if (extGrenade.type === "smoke") {
|
||||
if (extGrenade.effecttime !== 0) {
|
||||
grenadeObject.state = "landed";
|
||||
if (extGrenade.effecttime >= 16.5) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
}
|
||||
} else if ((extGrenade.type === 'flashbang' && extGrenade.lifetime >= EXPLODE_TIME_FLASH) || (extGrenade.type === 'frag' && extGrenade.lifetime >= EXPLODE_TIME_FRAG)) {
|
||||
grenadeObject.state = 'exploded';
|
||||
}
|
||||
return grenadeObject;
|
||||
}).filter((grenade): grenade is RadarGrenadeObject => grenade !== null);
|
||||
}
|
||||
|
||||
export const extendPlayer = ({ player, steamId, mapName }: { mapName: string, player: Player, steamId: string | null}): RadarPlayerObject | RadarPlayerObject[] | null => {
|
||||
const weapons = player.weapons ? Object.values(player.weapons) : [];
|
||||
const weapon = weapons.find(weapon => weapon.state === "active" && weapon.type !== "C4" && weapon.type !== "Knife" && weapon.type !== "Grenade");
|
||||
|
||||
const shooting: ShootingState = { ammo: weapon && weapon.ammo_clip || 0, weapon: weapon && weapon.name || '', lastShoot: 0 };
|
||||
|
||||
const lastShoot = shootingState[player.steamid] || shooting;
|
||||
|
||||
let isShooting = false;
|
||||
|
||||
if (shooting.weapon === lastShoot.weapon && shooting.ammo < lastShoot.ammo) {
|
||||
isShooting = true;
|
||||
}
|
||||
|
||||
shooting.lastShoot = isShooting ? (new Date()).getTime() : lastShoot.lastShoot;
|
||||
|
||||
shootingState[player.steamid] = shooting;
|
||||
const map = maps[mapName];
|
||||
const playerObject: RadarPlayerObject = {
|
||||
id: player.steamid,
|
||||
label: player.observer_slot !== undefined ? player.observer_slot : "",
|
||||
side: player.team.side,
|
||||
position: [],
|
||||
visible: true,
|
||||
isActive: steamId === player.steamid,
|
||||
forward: 0,
|
||||
scale: 1,
|
||||
steamid: player.steamid,
|
||||
flashed: player.state.flashed > 35,
|
||||
shooting: isShooting,
|
||||
lastShoot: shooting.lastShoot,
|
||||
isAlive: player.state.health > 0,
|
||||
hasBomb: !!Object.values(player.weapons).find(weapon => weapon.type === "C4"),
|
||||
player
|
||||
}
|
||||
if ("config" in map) {
|
||||
const scale = map.config.originHeight === undefined ? 1 : (1 + (player.position[2] - map.config.originHeight) / 1000);
|
||||
|
||||
playerObject.scale = scale;
|
||||
|
||||
const position = parsePlayerPosition(player, map.config);
|
||||
playerObject.position = position;
|
||||
|
||||
return playerObject;
|
||||
}
|
||||
return map.configs.map(config => {
|
||||
const scale = config.config.originHeight === undefined ? 1 : (1 + (player.position[2] - config.config.originHeight) / 750);
|
||||
|
||||
playerObject.scale = scale;
|
||||
|
||||
return ({
|
||||
...playerObject,
|
||||
position: parsePlayerPosition(player, config.config),
|
||||
id: `${player.steamid}_${config.id}`,
|
||||
visible: config.isVisible(player.position[2])
|
||||
})
|
||||
});
|
||||
}
|
||||
@ -1,50 +1,20 @@
|
||||
import React from "react";
|
||||
import { isDev } from './../../api/api';
|
||||
import { CSGO } from "csgogsi-socket";
|
||||
import { CSGO } from "csgogsi";
|
||||
import LexoRadarContainer from './LexoRadar/LexoRadarContainer';
|
||||
|
||||
|
||||
|
||||
interface Props { radarSize: number, game: CSGO }
|
||||
interface State {
|
||||
showRadar: boolean,
|
||||
loaded: boolean,
|
||||
boltobserv:{
|
||||
css: boolean,
|
||||
maps: boolean
|
||||
}
|
||||
|
||||
const Radar = ({ radarSize, game }: Props) => {
|
||||
const { players, player, bomb, grenades, map } = game;
|
||||
return <LexoRadarContainer
|
||||
players={players}
|
||||
player={player}
|
||||
bomb={bomb}
|
||||
grenades={grenades}
|
||||
size={radarSize}
|
||||
mapName={map.name.substring(map.name.lastIndexOf('/')+1)}
|
||||
/>
|
||||
}
|
||||
|
||||
export default class Radar extends React.Component<Props, State> {
|
||||
state = {
|
||||
showRadar: true,
|
||||
loaded: !isDev,
|
||||
boltobserv: {
|
||||
css: true,
|
||||
maps: true
|
||||
}
|
||||
}
|
||||
async componentDidMount(){
|
||||
/*if(isDev){
|
||||
const response = await fetch('hud.json');
|
||||
const hud = await response.json();
|
||||
const boltobserv = {
|
||||
css: Boolean(hud && hud.boltobserv && hud.boltobserv.css),
|
||||
maps: Boolean(hud && hud.boltobserv && hud.boltobserv.maps)
|
||||
}
|
||||
this.setState({boltobserv, loaded: true});
|
||||
}*/
|
||||
}
|
||||
|
||||
render() {
|
||||
const { players, player, bomb, grenades, map } = this.props.game;
|
||||
return <LexoRadarContainer
|
||||
players={players}
|
||||
player={player}
|
||||
bomb={bomb}
|
||||
grenades={grenades}
|
||||
size={this.props.radarSize}
|
||||
mapName={map.name.substring(map.name.lastIndexOf('/')+1)}
|
||||
/>
|
||||
}
|
||||
}
|
||||
export default Radar;
|
||||
@ -1,70 +1,58 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import "./radar.scss";
|
||||
import { Match, Veto } from "../../api/interfaces";
|
||||
import { Map, CSGO, Team } from 'csgogsi-socket';
|
||||
import { actions } from './../../App';
|
||||
import { Match, Veto } from "../../API/types";
|
||||
import { Map, CSGO, Team } from 'csgogsi';
|
||||
import Radar from './Radar'
|
||||
import TeamLogo from "../MatchBar/TeamLogo";
|
||||
|
||||
import { useAction } from "../../API/contexts/actions";
|
||||
|
||||
interface Props { match: Match | null, map: Map, game: CSGO }
|
||||
interface State { showRadar: boolean, radarSize: number, showBig: boolean }
|
||||
|
||||
export default class RadarMaps extends React.Component<Props, State> {
|
||||
state = {
|
||||
showRadar: true,
|
||||
radarSize: 350,
|
||||
showBig: false
|
||||
}
|
||||
componentDidMount() {
|
||||
actions.on('radarBigger', () => this.radarChangeSize(20));
|
||||
actions.on('radarSmaller', () => this.radarChangeSize(-20));
|
||||
actions.on('toggleRadar', () => { this.setState(state => ({ showRadar: !state.showRadar })) });
|
||||
const RadarMaps = ({ match, map, game }: Props) => {
|
||||
const [ radarSize, setRadarSize ] = useState(366);
|
||||
const [ showBig, setShowBig ] = useState(false);
|
||||
|
||||
actions.on("toggleRadarView", () => {
|
||||
this.setState({showBig:!this.state.showBig});
|
||||
});
|
||||
}
|
||||
radarChangeSize = (delta: number) => {
|
||||
const newSize = this.state.radarSize + delta;
|
||||
this.setState({ radarSize: newSize > 0 ? newSize : this.state.radarSize });
|
||||
}
|
||||
render() {
|
||||
const { match } = this.props;
|
||||
const { radarSize, showBig, showRadar } = this.state;
|
||||
const size = showBig ? 600 : radarSize;
|
||||
return (
|
||||
<div id={`radar_maps_container`} className={`${!showRadar ? 'hide' : ''} ${showBig ? 'preview':''}`}>
|
||||
<div className="radar-component-container" style={{width: `${size}px`, height: `${size}px`}}><Radar radarSize={size} game={this.props.game} /></div>
|
||||
{match ? <MapsBar match={this.props.match} map={this.props.map} game={this.props.game} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
useAction('radarBigger', () => {
|
||||
setRadarSize(p => p+10);
|
||||
}, []);
|
||||
|
||||
useAction('radarSmaller', () => {
|
||||
setRadarSize(p => p-10);
|
||||
}, []);
|
||||
|
||||
useAction('toggleRadarView', () => {
|
||||
setShowBig(p => !p);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id={`radar_maps_container`} className={` ${showBig ? 'preview':''}`}>
|
||||
{match ? <MapsBar match={match} map={map} game={game} /> : null}
|
||||
<Radar radarSize={showBig ? 600: radarSize} game={game} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
class MapsBar extends React.PureComponent<Props> {
|
||||
render() {
|
||||
const { match, map } = this.props;
|
||||
if (!match || !match.vetos.length) return '';
|
||||
const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
|
||||
if (picks.length > 3) {
|
||||
const current = picks.find(veto => map.name.includes(veto.mapName));
|
||||
if (!current) return null;
|
||||
return <div id="maps_container">
|
||||
{<MapEntry veto={current} map={map} team={current.type === "decider" ? null : map.team_ct.id === current.teamId ? map.team_ct : map.team_t} />}
|
||||
</div>
|
||||
}
|
||||
export default RadarMaps;
|
||||
|
||||
const MapsBar = ({ match, map }: Props) => {
|
||||
if (!match || !match.vetos.length) return '';
|
||||
const picks = match.vetos.filter(veto => veto.type !== "ban" && veto.mapName);
|
||||
if (picks.length > 3) {
|
||||
const current = picks.find(veto => map.name.includes(veto.mapName));
|
||||
if (!current) return null;
|
||||
return <div id="maps_container">
|
||||
{match.vetos.filter(veto => veto.type !== "ban").filter(veto => veto.teamId || veto.type === "decider").map(veto => <MapEntry key={veto.mapName} veto={veto} map={this.props.map} team={veto.type === "decider" ? null : map.team_ct.id === veto.teamId ? map.team_ct : map.team_t} />)}
|
||||
<div className="bestof">Best of {match.matchType.replace("bo", "")}</div>
|
||||
{<MapEntry veto={current} map={map} team={current.type === "decider" ? null : map.team_ct.id === current.teamId ? map.team_ct : map.team_t} />}
|
||||
</div>
|
||||
}
|
||||
return <div id="maps_container">
|
||||
<div className="bestof">Best of {match.matchType.replace("bo", "")}</div>
|
||||
{match.vetos.filter(veto => veto.type !== "ban").filter(veto => veto.teamId || veto.type === "decider").map(veto => <MapEntry key={veto.mapName} veto={veto} map={map} team={veto.type === "decider" ? null : map.team_ct.id === veto.teamId ? map.team_ct : map.team_t} />)}
|
||||
</div>
|
||||
}
|
||||
|
||||
class MapEntry extends React.PureComponent<{ veto: Veto, map: Map, team: Team | null }> {
|
||||
render() {
|
||||
const { veto, map, team } = this.props;
|
||||
return <div className="veto_entry">
|
||||
<div className="team_logo">{team ? <TeamLogo team={team} /> : null}</div>
|
||||
<div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName}</div>
|
||||
</div>
|
||||
}
|
||||
const MapEntry = ({ veto, map }: { veto: Veto, map: Map, team: Team | null }) => {
|
||||
return <div className="veto_entry">
|
||||
<div className={`map_name ${map.name.includes(veto.mapName) ? 'active' : ''}`}>{veto.mapName.replace("de_", "")}</div>
|
||||
</div>
|
||||
}
|
||||
@ -3,7 +3,6 @@
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
border: none;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
transition: all 1s;
|
||||
.map-container {
|
||||
transition: all 1s;
|
||||
@ -24,18 +23,24 @@
|
||||
perspective: 500px;
|
||||
}
|
||||
}
|
||||
.radar-component-container {
|
||||
width: 350px;
|
||||
height:350px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#maps_container {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
background-color: var(--sub-panel-color);
|
||||
|
||||
.bestof {
|
||||
width: 121px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.veto_entry {
|
||||
display: flex;
|
||||
@ -59,8 +64,15 @@
|
||||
width: 23px;
|
||||
}
|
||||
}
|
||||
.map_name.active {
|
||||
text-shadow: 0 0 15px white;
|
||||
font-weight: 600;
|
||||
.map_name {
|
||||
font-size:12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,45 +1,47 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
class LossBox extends React.PureComponent<{ active: boolean, side: 'CT' | 'T' }>{
|
||||
render(){
|
||||
return <div className={`loss-box ${this.props.side} ${this.props.active ? 'active':''}`}></div>
|
||||
}
|
||||
}
|
||||
const LossBox = React.memo(({ active, side }: { active: boolean; side: "CT" | "T" }) => {
|
||||
return (
|
||||
<div
|
||||
className={`loss-box ${side} ${
|
||||
active ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
interface Props {
|
||||
side: 'left' | 'right',
|
||||
team: 'CT' | 'T',
|
||||
loss: number,
|
||||
equipment: number,
|
||||
money: number,
|
||||
show: boolean,
|
||||
side: "left" | "right";
|
||||
team: "CT" | "T";
|
||||
loss: number;
|
||||
equipment: number;
|
||||
money: number;
|
||||
show: boolean;
|
||||
}
|
||||
|
||||
export default class Money extends React.PureComponent<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`moneybox ${this.props.side} ${this.props.team} ${this.props.show ? "show" : "hide"}`}>
|
||||
<div className="loss_container">
|
||||
<LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 4} />
|
||||
<LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 3} />
|
||||
<LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 2} />
|
||||
<LossBox side={this.props.team} active={(this.props.loss-1400)/500 >= 1} />
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Loss Bonus</div>
|
||||
<div className="value">${this.props.loss}</div>
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Team Money</div>
|
||||
<div className="value">${this.props.money}</div>
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Equipment Value</div>
|
||||
<div className="value">${this.props.equipment}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
const Money = ({ side, team, loss, equipment, money, show }: Props) => {
|
||||
return (
|
||||
<div className={`moneybox ${side} ${team} ${show ? "show" : "hide"}`}>
|
||||
<div className="loss_container">
|
||||
<LossBox side={team} active={(loss - 1400) / 500 >= 4} />
|
||||
<LossBox side={team} active={(loss - 1400) / 500 >= 3} />
|
||||
<LossBox side={team} active={(loss - 1400) / 500 >= 2} />
|
||||
<LossBox side={team} active={(loss - 1400) / 500 >= 1} />
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Loss Bonus</div>
|
||||
<div className="value">${loss}</div>
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Team Money</div>
|
||||
<div className="value">${money}</div>
|
||||
</div>
|
||||
<div className="money_container">
|
||||
<div className="title">Equipment Value</div>
|
||||
<div className="value">${equipment}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Money;
|
||||
|
||||
@ -1,49 +1,32 @@
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import './sideboxes.scss'
|
||||
import {configs, hudIdentity} from './../../App';
|
||||
import { apiUrl } from '../../api/api';
|
||||
import { apiUrl } from './../../API';
|
||||
import { useConfig, useOnConfigChange } from '../../API/contexts/actions';
|
||||
import { hudIdentity } from '../../API/HUD';
|
||||
|
||||
export default class SideBox extends React.Component<{ side: 'left' | 'right', hide: boolean}, { title: string, subtitle: string, image?: string }> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
title:'Title',
|
||||
subtitle:'Content',
|
||||
}
|
||||
}
|
||||
const Sidebox = ({side, hide} : { side: 'left' | 'right', hide: boolean}) => {
|
||||
const [ image, setImage ] = useState<string | null>(null);
|
||||
const data = useConfig('display_settings');
|
||||
|
||||
componentDidMount() {
|
||||
configs.onChange((data:any) => {
|
||||
if(!data) return;
|
||||
const display = data.display_settings;
|
||||
if(!display) return;
|
||||
if(`${this.props.side}_title` in display){
|
||||
this.setState({title:display[`${this.props.side}_title`]})
|
||||
}
|
||||
if(`${this.props.side}_subtitle` in display){
|
||||
this.setState({subtitle:display[`${this.props.side}_subtitle`]})
|
||||
}
|
||||
if(`${this.props.side}_image` in display){
|
||||
const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${this.props.side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
|
||||
this.setState({image:imageUrl})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { image, title, subtitle} = this.state;
|
||||
if(!title) return '';
|
||||
return (
|
||||
<div className={`sidebox ${this.props.side} ${this.props.hide ? 'hide':''}`}>
|
||||
<div className="title_container">
|
||||
<div className="title">{title}</div>
|
||||
<div className="subtitle">{subtitle}</div>
|
||||
</div>
|
||||
<div className="image_container">
|
||||
{image ? <img src={image} id={`image_left`} alt={'Left'}/>:''}
|
||||
</div>
|
||||
useOnConfigChange('display_settings', data => {
|
||||
if(data && `${side}_image` in data){
|
||||
const imageUrl = `${apiUrl}api/huds/${hudIdentity.name || 'dev'}/display_settings/${side}_image?isDev=${hudIdentity.isDev}&cache=${(new Date()).getTime()}`;
|
||||
setImage(imageUrl);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if(!data || !data[`${side}_title`]) return null;
|
||||
return (
|
||||
<div className={`sidebox ${side} ${hide ? 'hide':''}`}>
|
||||
<div className="title_container">
|
||||
<div className="title">{data[`${side}_title`]}</div>
|
||||
<div className="subtitle">{data[`${side}_subtitle`]}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="image_container">
|
||||
{image ? <img src={image} id={`image_left`} alt={'Left'}/>:null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebox;
|
||||
@ -1,12 +1,11 @@
|
||||
import React from "react";
|
||||
import Weapon from "./../Weapon/Weapon";
|
||||
import { Player, WeaponRaw, Side } from "csgogsi-socket";
|
||||
import { Player, Side, WeaponRaw } from "csgogsi";
|
||||
|
||||
interface Props {
|
||||
sides?: 'reversed',
|
||||
show: boolean;
|
||||
side: 'CT' | 'T',
|
||||
players: Player[]
|
||||
sides?: "reversed";
|
||||
show: boolean;
|
||||
side: "CT" | "T";
|
||||
players: Player[];
|
||||
}
|
||||
|
||||
function utilityState(amount: number) {
|
||||
@ -49,17 +48,30 @@ function utilityColor(amount: number) {
|
||||
|
||||
function sum(grenades: WeaponRaw[], name: string) {
|
||||
return (
|
||||
grenades.filter(grenade => grenade.name === name).reduce((prev, next) => ({ ...next, ammo_reserve: (prev.ammo_reserve || 0) + (next.ammo_reserve || 0) }), { name: "", ammo_reserve: 0 })
|
||||
grenades.filter((grenade) => grenade.name === name).reduce(
|
||||
(prev, next) => ({
|
||||
...next,
|
||||
ammo_reserve: (prev.ammo_reserve || 0) + (next.ammo_reserve || 0),
|
||||
}),
|
||||
{ name: "", ammo_reserve: 0 },
|
||||
)
|
||||
.ammo_reserve || 0
|
||||
);
|
||||
}
|
||||
|
||||
function parseGrenades(players: Player[], side: Side) {
|
||||
const grenades = players
|
||||
.filter(player => player.team.side === side)
|
||||
.map(player => Object.values(player.weapons).filter(weapon => weapon.type === "Grenade"))
|
||||
.filter((player) => player.team.side === side)
|
||||
.map((player) =>
|
||||
Object.values(player.weapons).filter((weapon) =>
|
||||
weapon.type === "Grenade"
|
||||
)
|
||||
)
|
||||
.flat()
|
||||
.map(grenade => ({ ...grenade, name: grenade.name.replace("weapon_", "") }));
|
||||
.map((grenade) => ({
|
||||
...grenade,
|
||||
name: grenade.name.replace("weapon_", ""),
|
||||
}));
|
||||
return grenades;
|
||||
}
|
||||
|
||||
@ -69,40 +81,44 @@ export function summarise(players: Player[], side: Side) {
|
||||
hg: sum(grenades, "hegrenade"),
|
||||
flashes: sum(grenades, "flashbang"),
|
||||
smokes: sum(grenades, "smokegrenade"),
|
||||
inc: sum(grenades, "incgrenade") + sum(grenades, "molotov")
|
||||
inc: sum(grenades, "incgrenade") + sum(grenades, "molotov"),
|
||||
};
|
||||
}
|
||||
|
||||
class GrenadeContainer extends React.PureComponent<{ grenade: string; amount: number }> {
|
||||
render() {
|
||||
return (
|
||||
<div className="grenade_container">
|
||||
<div className="grenade_image">
|
||||
<Weapon weapon={this.props.grenade} active={false} isGrenade />
|
||||
</div>
|
||||
<div className="grenade_amount">x{this.props.amount}</div>
|
||||
const GrenadeContainer = (
|
||||
{ grenade, amount }: { grenade: string; amount: number },
|
||||
) => {
|
||||
return (
|
||||
<div className="grenade_container">
|
||||
<div className="grenade_image">
|
||||
<Weapon weapon={grenade} active={false} isGrenade />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="grenade_amount">x{amount}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default class SideBox extends React.Component<Props> {
|
||||
render() {
|
||||
const grenades = summarise(this.props.players, this.props.side);
|
||||
const total = Object.values(grenades).reduce((a, b) => a+b, 0);
|
||||
return (
|
||||
<div className={`utilitybox ${this.props.side || ''} ${this.props.show ? "show" : "hide"}`}>
|
||||
<div className="title_container">
|
||||
<div className="title">Utility Level - </div>
|
||||
<div className="subtitle" style={{color: utilityColor(total)}}>{utilityState(total)}</div>
|
||||
</div>
|
||||
<div className="grenades_container">
|
||||
<GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
|
||||
<GrenadeContainer grenade={this.props.side === 'CT' ? 'incgrenade' : 'molotov'} amount={grenades.inc} />
|
||||
<GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
|
||||
<GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const SideBox = ({ players, side, show }: Props) => {
|
||||
const grenades = summarise(players, side);
|
||||
const total = Object.values(grenades).reduce((a, b) => a + b, 0);
|
||||
return (
|
||||
<div className={`utilitybox ${side || ""} ${show ? "show" : "hide"}`}>
|
||||
<div className="title_container">
|
||||
<div className="title">Utility Level - </div>
|
||||
<div className="subtitle" style={{ color: utilityColor(total) }}>
|
||||
{utilityState(total)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grenades_container">
|
||||
<GrenadeContainer grenade="smokegrenade" amount={grenades.smokes} />
|
||||
<GrenadeContainer
|
||||
grenade={side === "CT" ? "incgrenade" : "molotov"}
|
||||
amount={grenades.inc}
|
||||
/>
|
||||
<GrenadeContainer grenade="flashbang" amount={grenades.flashes} />
|
||||
<GrenadeContainer grenade="hegrenade" amount={grenades.hg} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default SideBox;
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import * as I from '../../api/interfaces';
|
||||
import "./teamoverview.scss";
|
||||
|
||||
interface IProps {
|
||||
team: I.Team,
|
||||
show: boolean,
|
||||
veto: I.Veto | null
|
||||
}
|
||||
|
||||
export default class TeamOverview extends React.Component<IProps> {
|
||||
render() {
|
||||
if(!this.props.team) return null;
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,49 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
import { GSI } from "./../../App";
|
||||
import BombTimer from "./Countdown";
|
||||
import { MAX_TIMER, useBombTimer } from "./Countdown";
|
||||
import { C4 } from "./../../assets/Icons";
|
||||
|
||||
export default class Bomb extends React.Component<any, { height: number; show: boolean }> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
height: 0,
|
||||
show: false
|
||||
};
|
||||
}
|
||||
hide = () => {
|
||||
this.setState({ show: false, height: 100 });
|
||||
};
|
||||
componentDidMount() {
|
||||
const bomb = new BombTimer(time => {
|
||||
let height = time > 40 ? 4000 : time * 100;
|
||||
this.setState({ height: height / 40 });
|
||||
});
|
||||
bomb.onReset(this.hide);
|
||||
GSI.on("data", data => {
|
||||
if (data.bomb && data.bomb.countdown) {
|
||||
if (data.bomb.state === "planted") {
|
||||
this.setState({ show: true });
|
||||
return bomb.go(data.bomb.countdown);
|
||||
}
|
||||
if (data.bomb.state !== "defusing") {
|
||||
this.hide();
|
||||
}
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id={`bomb_container`}>
|
||||
<div className={`bomb_timer ${this.state.show ? "show" : "hide"}`} style={{ height: `${this.state.height}%` }}></div>
|
||||
<div className={`bomb_icon ${this.state.show ? "show" : "hide"}`}>
|
||||
<C4 fill="white" />
|
||||
</div>
|
||||
const Bomb = () => {
|
||||
const bombData = useBombTimer();
|
||||
const show = bombData.state === "planted" || bombData.state === "defusing";
|
||||
|
||||
return (
|
||||
<div id={`bomb_container`}>
|
||||
<div className={`bomb_timer ${show ? "show" : "hide"}`} style={{ height: `${bombData.bombTime*100/MAX_TIMER.bomb}%` }}></div>
|
||||
<div className={`bomb_icon ${show ? "show" : "hide"}`}>
|
||||
<C4 fill="white" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Bomb;
|
||||
@ -1,46 +1,83 @@
|
||||
export default class Countdown {
|
||||
last: number;
|
||||
time: number;
|
||||
step: (time: number) => void;
|
||||
on: boolean;
|
||||
resetFunc?: Function;
|
||||
import { Bomb, Events, Player } from "csgogsi";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { GSI } from "../../API/HUD";
|
||||
|
||||
constructor(step: (time: number) => void){
|
||||
this.last = 0;
|
||||
this.time = 0;
|
||||
this.on = false;
|
||||
this.step = step;
|
||||
}
|
||||
onReset(func: Function) {
|
||||
this.resetFunc = func;
|
||||
}
|
||||
stepWrapper = (time: number) =>{
|
||||
if(this.time < 0) return this.reset();
|
||||
if(!this.on) return this.reset();
|
||||
if(!this.last) this.last = time;
|
||||
if(this.time !== Number((this.time - (time - this.last)/1000))){
|
||||
this.time = Number((this.time - (time - this.last)/1000));
|
||||
this.step(this.time);
|
||||
export const MAX_TIMER = {
|
||||
planting: 3,
|
||||
defuse_kit: 5,
|
||||
defuse_nokit: 10,
|
||||
bomb: 40
|
||||
}
|
||||
const findNewTime = (current: number, newTime: number) => Math.abs(current - newTime) > 2 ? newTime : current;
|
||||
|
||||
export const useBombTimer = () => {
|
||||
const [ player, setPlayerSteamId ] = useState<Player | null>(null);
|
||||
const [ bombState, setBombState ] = useState<Bomb["state"] | null>(null);
|
||||
const [ site, setBombSite ] = useState<string | null>(null);
|
||||
|
||||
const [ plantTime, setPlantTime ] = useState(0);
|
||||
const [ bombTime, setBombTime ] = useState(0);
|
||||
const [ defuseTime, setDefuseTime ] = useState(0);
|
||||
|
||||
// Inner loop logic
|
||||
const previousTimeRef = useRef(0);
|
||||
const rAFRef = useRef<number>();
|
||||
|
||||
useEffect(() => {
|
||||
const onData: Events["data"] = data => {
|
||||
const { bomb } = data;
|
||||
|
||||
const bombPlayer = bomb?.player || null;
|
||||
const state = bomb?.state || null;
|
||||
const site = bomb?.site || null;
|
||||
|
||||
const countdown = parseFloat(bomb?.countdown || '0');
|
||||
|
||||
setPlayerSteamId(bombPlayer);
|
||||
setBombState(state);
|
||||
setBombSite(site);
|
||||
|
||||
const plantNewTime = state === "planting" ? countdown : 0;
|
||||
const defuseNewTime = state === "defusing" ? countdown : 0;
|
||||
|
||||
|
||||
setPlantTime(curr => findNewTime(curr, plantNewTime));
|
||||
setDefuseTime(curr => findNewTime(curr, defuseNewTime));
|
||||
setBombTime(p => state === "planted" ? findNewTime(p, countdown) : p);
|
||||
}
|
||||
|
||||
GSI.on("data", onData);
|
||||
|
||||
const animationFrame = (time: number) => {
|
||||
if(previousTimeRef.current){
|
||||
const deltaTime = time - previousTimeRef.current;
|
||||
const dTs = deltaTime/1000;
|
||||
|
||||
setPlantTime(p => p <= 0 ? 0 : p - dTs);
|
||||
setDefuseTime(p => p <= 0 ? 0 : p - dTs);
|
||||
setBombTime(p => p <= 0 ? 0 : p - dTs);
|
||||
}
|
||||
previousTimeRef.current = time;
|
||||
rAFRef.current = requestAnimationFrame(animationFrame);
|
||||
}
|
||||
|
||||
rAFRef.current = requestAnimationFrame(animationFrame);
|
||||
|
||||
return () => {
|
||||
GSI.off("data", onData);
|
||||
if(rAFRef.current) cancelAnimationFrame(rAFRef.current);
|
||||
}
|
||||
this.last =time;
|
||||
|
||||
|
||||
if(this.last) requestAnimationFrame(this.stepWrapper)
|
||||
}
|
||||
}, []);
|
||||
|
||||
go(duration: string | number){
|
||||
//console.log("STARTED WITH ", duration);
|
||||
if(typeof duration === "string") duration = Number(duration);
|
||||
if(Math.abs(duration - this.time) > 2) this.time = duration;
|
||||
this.on = true;
|
||||
if(!this.last ) requestAnimationFrame(this.stepWrapper);
|
||||
|
||||
}
|
||||
|
||||
reset(){
|
||||
this.last = 0;
|
||||
this.time = 0;
|
||||
this.on = false;
|
||||
if(this.resetFunc) this.resetFunc();
|
||||
}
|
||||
}
|
||||
return ({
|
||||
state: bombState,
|
||||
player,
|
||||
site,
|
||||
defuseTime,
|
||||
bombTime,
|
||||
plantTime
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,41 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
import { Timer } from "../MatchBar/MatchBar";
|
||||
import { Player } from "csgogsi";
|
||||
import * as I from "./../../assets/Icons";
|
||||
import { MAX_TIMER } from "./Countdown";
|
||||
|
||||
interface IProps {
|
||||
timer: Timer | null;
|
||||
side: "right" | "left"
|
||||
}
|
||||
|
||||
export default class Bomb extends React.Component<IProps> {
|
||||
getCaption = (type: "defusing" | "planting", player: Player | null) => {
|
||||
if(!player) return null;
|
||||
if(type === "defusing"){
|
||||
return <>
|
||||
<I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
|
||||
<div className={'CT'}>{player.name} is defusing the bomb</div>
|
||||
</>;
|
||||
}
|
||||
const getCaption = (type: "defusing" | "planting", player: Player | null) => {
|
||||
if(!player) return null;
|
||||
if(type === "defusing"){
|
||||
return <>
|
||||
<I.SmallBomb height={22} fill="var(--color-new-t)"/>
|
||||
<div className={'T'}>{player.name} is planting the bomb</div>
|
||||
<I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
|
||||
<div className={'CT'}>{player.name} is defusing the bomb</div>
|
||||
</>;
|
||||
}
|
||||
render() {
|
||||
const { side, timer } = this.props;
|
||||
return (
|
||||
<div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
|
||||
{
|
||||
timer ?
|
||||
<div className={`defuse_plant_caption`}>
|
||||
{this.getCaption(timer.type, timer.player)}
|
||||
</div> : null
|
||||
}
|
||||
|
||||
<div className="defuse_plant_bar" style={{ width: `${(timer && timer.width) || 0}%` }}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <>
|
||||
<I.SmallBomb height={22} fill="var(--color-new-t)"/>
|
||||
<div className={'T'}>{player.name} is planting the bomb</div>
|
||||
</>;
|
||||
}
|
||||
const Bomb = ({ timer, side }: IProps) =>{
|
||||
if(!timer) return null;
|
||||
return (
|
||||
<div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
|
||||
{
|
||||
timer ?
|
||||
<div className={`defuse_plant_caption`}>
|
||||
{getCaption(timer.type, timer.player)}
|
||||
</div> : null
|
||||
}
|
||||
|
||||
<div className="defuse_plant_bar" style={{ width: `${(timer.time * 100 / (timer.type === "planting" ? MAX_TIMER.planting : timer.player?.state.defusekit ? MAX_TIMER.defuse_kit : MAX_TIMER.defuse_nokit ))}%` }}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Bomb;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import * as I from './../../api/interfaces';
|
||||
import * as I from './../../API/types';
|
||||
import { apiUrl } from '../../API';
|
||||
|
||||
interface MatchData {
|
||||
left: { name: string; score: string | number; logo: string };
|
||||
@ -11,83 +11,79 @@ interface Props {
|
||||
teams: I.Team[]
|
||||
}
|
||||
|
||||
export default class Ladder extends React.Component<Props> {
|
||||
joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
|
||||
const { tournament } = this.props;
|
||||
if (!tournament || !matchup) return matchup;
|
||||
const joinParents = (matchup: I.TournamentMatchup, matchups: I.TournamentMatchup[]) => {
|
||||
if (!matchup) return matchup;
|
||||
|
||||
if (matchup.parents.length) return matchup;
|
||||
if (matchup.parents.length) return matchup;
|
||||
|
||||
const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
|
||||
if (!parents.length) return matchup;
|
||||
matchup.parents.push(...parents.map(parent => this.joinParents(parent, matchups)));
|
||||
const parents = matchups.filter(m => m.winner_to === matchup._id || m.loser_to === matchup._id);
|
||||
if (!parents.length) return matchup;
|
||||
matchup.parents.push(...parents.map(parent => joinParents(parent, matchups)));
|
||||
|
||||
return matchup;
|
||||
return matchup;
|
||||
};
|
||||
|
||||
const copyMatchups = (currentMatchups: I.TournamentMatchup[]): I.DepthTournamentMatchup[] => {
|
||||
const matchups = JSON.parse(JSON.stringify(currentMatchups)) as I.DepthTournamentMatchup[];
|
||||
return matchups;
|
||||
};
|
||||
|
||||
const setDepth = (matchups: I.DepthTournamentMatchup[], matchup: I.DepthTournamentMatchup, depth: number, force = false) => {
|
||||
const getParents = (matchup: I.DepthTournamentMatchup) => {
|
||||
return matchups.filter(parent => parent.loser_to === matchup._id || parent.winner_to === matchup._id);
|
||||
};
|
||||
|
||||
copyMatchups = (): I.DepthTournamentMatchup[] => {
|
||||
if (!this.props.tournament) return [];
|
||||
const matchups = JSON.parse(JSON.stringify(this.props.tournament.matchups)) as I.DepthTournamentMatchup[];
|
||||
return matchups;
|
||||
if (!matchup.depth || force) {
|
||||
matchup.depth = depth;
|
||||
getParents(matchup).forEach(matchup => setDepth(matchups, matchup, depth + 1));
|
||||
}
|
||||
if (matchup.depth <= depth - 1) {
|
||||
setDepth(matchups, matchup, depth - 1, true);
|
||||
}
|
||||
return matchup;
|
||||
};
|
||||
|
||||
const getMatch = ({ matchup, matches, teams: allTeams}: { matches: I.Match[], teams: I.Team[], matchup: I.TournamentMatchup}) => {
|
||||
const matchData: MatchData = {
|
||||
left: { name: 'TBD', score: '-', logo: '' },
|
||||
right: { name: 'TBD', score: '-', logo: '' }
|
||||
};
|
||||
const match = matches.find(match => match.id === matchup.matchId);
|
||||
if (!match) return matchData;
|
||||
const teams = [
|
||||
allTeams.find(team => team._id === match.left.id),
|
||||
allTeams.find(team => team._id === match.right.id)
|
||||
];
|
||||
if (teams[0]) {
|
||||
matchData.left.name = teams[0].name;
|
||||
matchData.left.score = match.left.wins;
|
||||
matchData.left.logo = teams[0].logo;
|
||||
}
|
||||
if (teams[1]) {
|
||||
matchData.right.name = teams[1].name;
|
||||
matchData.right.score = match.right.wins;
|
||||
matchData.right.logo = teams[1].logo;
|
||||
}
|
||||
return matchData;
|
||||
};
|
||||
|
||||
setDepth = (matchups: I.DepthTournamentMatchup[], matchup: I.DepthTournamentMatchup, depth: number, force = false) => {
|
||||
const getParents = (matchup: I.DepthTournamentMatchup) => {
|
||||
return matchups.filter(parent => parent.loser_to === matchup._id || parent.winner_to === matchup._id);
|
||||
};
|
||||
|
||||
if (!matchup.depth || force) {
|
||||
matchup.depth = depth;
|
||||
getParents(matchup).forEach(matchup => this.setDepth(matchups, matchup, depth + 1));
|
||||
}
|
||||
if (matchup.depth <= depth - 1) {
|
||||
this.setDepth(matchups, matchup, depth - 1, true);
|
||||
}
|
||||
return matchup;
|
||||
};
|
||||
|
||||
getMatch = (matchup: I.TournamentMatchup) => {
|
||||
const { matches } = this.props;
|
||||
const matchData: MatchData = {
|
||||
left: { name: 'TBD', score: '-', logo: '' },
|
||||
right: { name: 'TBD', score: '-', logo: '' }
|
||||
};
|
||||
const match = matches.find(match => match.id === matchup.matchId);
|
||||
if (!match) return matchData;
|
||||
const teams = [
|
||||
this.props.teams.find(team => team._id === match.left.id),
|
||||
this.props.teams.find(team => team._id === match.right.id)
|
||||
];
|
||||
if (teams[0]) {
|
||||
matchData.left.name = teams[0].name;
|
||||
matchData.left.score = match.left.wins;
|
||||
matchData.left.logo = teams[0].logo;
|
||||
}
|
||||
if (teams[1]) {
|
||||
matchData.right.name = teams[1].name;
|
||||
matchData.right.score = match.right.wins;
|
||||
matchData.right.logo = teams[1].logo;
|
||||
}
|
||||
return matchData;
|
||||
};
|
||||
|
||||
renderBracket = (
|
||||
const Ladder = ({ tournament, matches, teams }: Props) => {
|
||||
const renderBracket = (
|
||||
matchup: I.DepthTournamentMatchup | null | undefined,
|
||||
depth: number,
|
||||
fromChildId: string | undefined,
|
||||
childVisibleParents: number,
|
||||
isLast = false
|
||||
) => {
|
||||
const { tournament, matches } = this.props;
|
||||
if (!matchup || !tournament) return null;
|
||||
const match = this.getMatch(matchup);
|
||||
const match = getMatch({ teams: teams, matches: matches, matchup});
|
||||
|
||||
if (fromChildId === matchup.loser_to) return null;
|
||||
const parentsToRender = matchup.parents.filter(matchupParent => matchupParent.loser_to !== matchup._id);
|
||||
if (matchup.depth > depth) {
|
||||
return (
|
||||
<div className="empty-bracket">
|
||||
{this.renderBracket(matchup, depth + 1, fromChildId, parentsToRender.length)}
|
||||
{renderBracket(matchup, depth + 1, fromChildId, parentsToRender.length)}
|
||||
<div className="connector"></div>
|
||||
</div>
|
||||
);
|
||||
@ -97,8 +93,8 @@ export default class Ladder extends React.Component<Props> {
|
||||
return (
|
||||
<div className={`bracket depth-${depth}`}>
|
||||
<div className="parent-brackets">
|
||||
{this.renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
|
||||
{this.renderBracket(matchup.parents[1], depth + 1, matchup._id, parentsToRender.length)}
|
||||
{renderBracket(matchup.parents[0], depth + 1, matchup._id, parentsToRender.length)}
|
||||
{renderBracket(matchup.parents[1], depth + 1, matchup._id, parentsToRender.length)}
|
||||
</div>
|
||||
<div className="bracket-details">
|
||||
<div
|
||||
@ -110,14 +106,14 @@ export default class Ladder extends React.Component<Props> {
|
||||
<div className={`match-details ${isCurrent ? 'current':''}`}>
|
||||
<div className="team-data">
|
||||
<div className="team-logo">
|
||||
{match.left.logo ? <img src={match.left.logo} alt="Logo" /> : null}
|
||||
{match.left.logo ? <img src={`${apiUrl}api/teams/logo/direct/${match.left.logo}`} alt="Logo" /> : null}
|
||||
</div>
|
||||
<div className="team-name">{match.left.name}</div>
|
||||
<div className="team-score">{match.left.score}</div>
|
||||
</div>
|
||||
<div className="team-data">
|
||||
<div className="team-logo">
|
||||
{match.right.logo ? <img src={match.right.logo} alt="Logo" /> : null}
|
||||
{match.right.logo ? <img src={`${apiUrl}api/teams/logo/direct/${match.right.logo}`} alt="Logo" /> : null}
|
||||
</div>
|
||||
<div className="team-name">{match.right.name}</div>
|
||||
<div className="team-score">{match.right.score}</div>
|
||||
@ -132,14 +128,13 @@ export default class Ladder extends React.Component<Props> {
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { tournament } = this.props;
|
||||
if (!tournament) return null;
|
||||
const matchups = this.copyMatchups();
|
||||
const matchups = copyMatchups(tournament.playoffs.matchups);
|
||||
const gf = matchups.find(matchup => matchup.winner_to === null);
|
||||
if (!gf) return null;
|
||||
const joinedParents = this.joinParents(gf, matchups);
|
||||
const matchupWithDepth = this.setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
|
||||
return this.renderBracket(matchupWithDepth, 0, undefined, 2, true);
|
||||
}
|
||||
const joinedParents = joinParents(gf, matchups);
|
||||
const matchupWithDepth = setDepth(matchups, joinedParents as I.DepthTournamentMatchup, 0);
|
||||
return renderBracket(matchupWithDepth, 0, undefined, 2, true);
|
||||
}
|
||||
|
||||
export default Ladder;
|
||||
@ -1,62 +1,51 @@
|
||||
import React from 'react';
|
||||
import './tournament.scss';
|
||||
import { actions } from '../../App';
|
||||
import * as I from './../../api/interfaces';
|
||||
import api from '../../api/api';
|
||||
import * as I from './../../API/types';
|
||||
import api from './../../API';
|
||||
import Ladder from './Ladder';
|
||||
interface State {
|
||||
tournament: I.Tournament | null,
|
||||
teams: I.Team[],
|
||||
matches: I.Match[],
|
||||
show: boolean,
|
||||
}
|
||||
export default class Tournament extends React.Component<{}, State> {
|
||||
constructor(props: {}) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tournament: null,
|
||||
matches: [],
|
||||
teams: [],
|
||||
show: false
|
||||
}
|
||||
}
|
||||
async componentDidMount() {
|
||||
const { tournament } = await api.tournaments.get();
|
||||
if(tournament){
|
||||
actions.on("showTournament", async (show: string) => {
|
||||
if(show !== "show"){
|
||||
return this.setState({show: false});
|
||||
}
|
||||
|
||||
this.setState({tournament}, () => {
|
||||
this.setState({show:true})
|
||||
import { useAction } from '../../API/contexts/actions';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const Tournament = () => {
|
||||
const [ show, setShow ] = useState(false);
|
||||
const [ teams, setTeams ] = useState<I.Team[]>([]);
|
||||
const [ matches, setMatches ] = useState<I.Match[]>([]);
|
||||
const [ tournament, setTournament ] = useState<I.Tournament | null>(null);
|
||||
|
||||
useAction("showTournament", (data) => {
|
||||
setShow(data === "show");
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
api.tournaments.get().then(({ tournament }) => {
|
||||
if(tournament){
|
||||
setTournament(tournament);
|
||||
|
||||
Promise.allSettled([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
|
||||
setTeams(teams.status === "fulfilled" ? teams.value : []);
|
||||
setMatches(matches.status === "fulfilled" ? matches.value : []);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([api.match.get(), api.teams.get()]).then(([matches, teams]) =>{
|
||||
this.setState({matches, teams});
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { tournament, matches, teams, show } = this.state;
|
||||
if(!tournament) return null;
|
||||
return (
|
||||
<div className={`ladder-container ${show ? 'show':''}`}>
|
||||
<div className="tournament-data">
|
||||
{ tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
|
||||
<div className="tournament-name">
|
||||
{tournament.name}
|
||||
</div>
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
if(!tournament) return null;
|
||||
return (
|
||||
<div className={`ladder-container ${show ? 'show':''}`}>
|
||||
<div className="tournament-data">
|
||||
{ tournament.logo ? <img src={`data:image/jpeg;base64,${tournament.logo}`} alt={tournament.name} /> : null }
|
||||
<div className="tournament-name">
|
||||
{tournament.name}
|
||||
</div>
|
||||
<Ladder
|
||||
tournament={tournament}
|
||||
matches={matches}
|
||||
teams={teams}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<Ladder
|
||||
tournament={tournament}
|
||||
matches={matches}
|
||||
teams={teams}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(Tournament);
|
||||
@ -1,43 +1,26 @@
|
||||
import React from 'react';
|
||||
import './trivia.scss';
|
||||
import { useAction, useConfig } from '../../API/contexts/actions';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import {configs, actions} from './../../App';
|
||||
const Trivia = () => {
|
||||
const [ show, setShow ] = useState(false);
|
||||
|
||||
const data = useConfig('trivia');
|
||||
|
||||
export default class Trivia extends React.Component<any, { title: string, content: string, show: boolean }> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
title:'Title',
|
||||
content:'Content',
|
||||
show: false
|
||||
}
|
||||
}
|
||||
useAction('triviaState', (state) => {
|
||||
setShow(state === "show");
|
||||
});
|
||||
|
||||
componentDidMount() {
|
||||
configs.onChange((data:any) => {
|
||||
if(!data) return;
|
||||
const trivia = data.trivia;
|
||||
if(!trivia) return;
|
||||
|
||||
if(trivia.title && trivia.content){
|
||||
this.setState({title:trivia.title, content:trivia.content})
|
||||
}
|
||||
});
|
||||
actions.on("triviaState", (state: any) => {
|
||||
this.setState({show: state === "show"})
|
||||
});
|
||||
actions.on("toggleTrivia", () => {
|
||||
this.setState({show: !this.state.show})
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`trivia_container ${this.state.show ? 'show': 'hide'}`}>
|
||||
<div className="title">{this.state.title}</div>
|
||||
<div className="content">{this.state.content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
useAction('toggleCams', () => {
|
||||
setShow(p => !p);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={`trivia_container ${show ? 'show': 'hide'}`}>
|
||||
<div className="title">{data?.title}</div>
|
||||
<div className="content">{data?.content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(Trivia);
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
import React from 'react';
|
||||
import * as Weapons from './../../assets/Weapons';
|
||||
import React from "react";
|
||||
import * as Weapons from "./../../assets/Weapons";
|
||||
|
||||
interface IProps extends React.SVGProps<SVGSVGElement> {
|
||||
weapon: string,
|
||||
active: boolean,
|
||||
isGrenade?: boolean
|
||||
weapon: string;
|
||||
active: boolean;
|
||||
isGrenade?: boolean;
|
||||
}
|
||||
export default class WeaponImage extends React.Component<IProps> {
|
||||
render() {
|
||||
const { weapon, active, isGrenade, ...rest } = this.props;
|
||||
const Weapon = (Weapons as any)[weapon];
|
||||
const { className, ...svgProps } = rest;
|
||||
if(!Weapon) return null;
|
||||
return (
|
||||
<Weapon fill="white" className={`${active ? 'active':''} weapon ${isGrenade ? 'grenade' : ''} ${className || ''}`} {...svgProps} />
|
||||
);
|
||||
}
|
||||
}
|
||||
const WeaponImage = ({ weapon, active, isGrenade, ...rest }: IProps) => {
|
||||
const weaponId = weapon.replace("weapon_", "");
|
||||
const Weapon = (Weapons as any)[weaponId];
|
||||
const { className, ...svgProps } = rest;
|
||||
if (!Weapon) return null;
|
||||
return (
|
||||
<Weapon
|
||||
fill="white"
|
||||
className={`${active ? "active" : ""} weapon ${
|
||||
isGrenade ? "grenade" : ""
|
||||
} ${className || ""}`}
|
||||
{...svgProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(WeaponImage);
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
export default class ActionManager {
|
||||
listeners: Map<string, Function[]>;
|
||||
|
||||
constructor(){
|
||||
this.listeners = new Map();
|
||||
|
||||
/*this.on('data', _data => {
|
||||
});*/
|
||||
}
|
||||
execute(eventName: string, argument?: any){
|
||||
const listeners = this.listeners.get(eventName);
|
||||
if(!listeners) return false;
|
||||
listeners.forEach(callback => {
|
||||
if(argument) callback(argument);
|
||||
else callback();
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
on(eventName: string, listener: Function){
|
||||
const listOfListeners = this.listeners.get(eventName) || [];
|
||||
listOfListeners.push(listener);
|
||||
this.listeners.set(eventName, listOfListeners);
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
export class ConfigManager {
|
||||
listeners: Function[];
|
||||
data: any;
|
||||
|
||||
constructor(){
|
||||
this.listeners = [];
|
||||
this.data = {};
|
||||
}
|
||||
save(data: any){
|
||||
this.data = data;
|
||||
this.execute();
|
||||
|
||||
/*const listeners = this.listeners.get(eventName);
|
||||
if(!listeners) return false;
|
||||
listeners.forEach(callback => {
|
||||
if(argument) callback(argument);
|
||||
else callback();
|
||||
});
|
||||
return true;*/
|
||||
}
|
||||
|
||||
execute(){
|
||||
const listeners = this.listeners;
|
||||
if(!listeners || !listeners.length) return false;
|
||||
listeners.forEach(listener => {
|
||||
listener(this.data);
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
onChange(listener: Function){
|
||||
const listOfListeners = this.listeners || [];
|
||||
listOfListeners.push(listener);
|
||||
this.listeners = listOfListeners;
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import api from './api';
|
||||
interface AvatarLoader {
|
||||
loader: Promise<string>,
|
||||
url: string,
|
||||
}
|
||||
|
||||
export const avatars: { [key: string]: AvatarLoader } = {};
|
||||
|
||||
export const loadAvatarURL = (steamid: string) => {
|
||||
if(!steamid) return;
|
||||
if(avatars[steamid]) return avatars[steamid].url;
|
||||
avatars[steamid] = {
|
||||
url: '',
|
||||
loader: new Promise((resolve) => {
|
||||
api.players.getAvatarURLs(steamid).then(result => {
|
||||
avatars[steamid].url = result.custom || result.steam;
|
||||
resolve(result.custom || result.custom);
|
||||
}).catch(() => {
|
||||
delete avatars[steamid];
|
||||
resolve('');
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,32 @@
|
||||
import { ReactComponent as ArmorFull } from './../assets/images/icon_armor_full_default.svg';
|
||||
import { ReactComponent as ArmorHalf } from './../assets/images/icon_armor_half_default.svg';
|
||||
import { ReactComponent as ArmorHalfHelmet } from './../assets/images/icon_armor_half_helmet_default.svg';
|
||||
import { ReactComponent as ArmorHelmet } from './../assets/images/icon_armor_helmet_default.svg';
|
||||
import { ReactComponent as ArmorNone } from './../assets/images/icon_armor_none_default.svg';
|
||||
import { ReactComponent as Blind } from './../assets/images/icon_blind.svg';
|
||||
import { ReactComponent as Bomb } from './../assets/images/icon_bomb_default.svg';
|
||||
import { ReactComponent as BombExplosion } from './../assets/images/icon_bomb_explosion_default.svg';
|
||||
import { ReactComponent as Bullets } from './../assets/images/icon_bullets_default.svg';
|
||||
import { ReactComponent as Burning } from './../assets/images/icon_burning.svg';
|
||||
import { ReactComponent as C4 } from './../assets/images/icon_c4_default.svg';
|
||||
import { ReactComponent as Defuse } from './../assets/images/icon_defuse_default.svg';
|
||||
import { ReactComponent as Health } from './../assets/images/icon_health_default.svg';
|
||||
import { ReactComponent as HealthFull } from './../assets/images/icon_health_full_default.svg';
|
||||
import { ReactComponent as Hourglass } from './../assets/images/icon_hourglass_default.svg';
|
||||
import { ReactComponent as Microphone } from './../assets/images/icon_microphone.svg';
|
||||
import { ReactComponent as Pause } from './../assets/images/icon_pause_default.svg';
|
||||
import { ReactComponent as Skull } from './../assets/images/icon_skull_default.svg';
|
||||
import { ReactComponent as Timer } from './../assets/images/icon_timer_default.svg';
|
||||
import { ReactComponent as FlashedKill } from './../assets/images/flashed_kill.svg';
|
||||
import { ReactComponent as Headshot } from './../assets/images/headshot.svg';
|
||||
import { ReactComponent as NoScope } from './../assets/images/noscope.svg';
|
||||
import { ReactComponent as SmokeKill } from './../assets/images/smoke_kill.svg';
|
||||
import { ReactComponent as Suicide } from './../assets/images/suicide.svg';
|
||||
import { ReactComponent as Wallbang } from './../assets/images/wallbang.svg';
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
import ArmorFull from './../assets/images/icon_armor_full_default.svg?react';
|
||||
import ArmorHalf from './../assets/images/icon_armor_half_default.svg?react';
|
||||
import ArmorHalfHelmet from './../assets/images/icon_armor_half_helmet_default.svg?react';
|
||||
import ArmorHelmet from './../assets/images/icon_armor_helmet_default.svg?react';
|
||||
import ArmorNone from './../assets/images/icon_armor_none_default.svg?react';
|
||||
import Blind from './../assets/images/icon_blind.svg?react';
|
||||
import Bomb from './../assets/images/icon_bomb_default.svg?react';
|
||||
import BombExplosion from './../assets/images/icon_bomb_explosion_default.svg?react';
|
||||
import Bullets from './../assets/images/icon_bullets_default.svg?react';
|
||||
import Burning from './../assets/images/icon_burning.svg?react';
|
||||
import C4 from './../assets/images/icon_c4_default.svg?react';
|
||||
import Defuse from './../assets/images/icon_defuse_default.svg?react';
|
||||
import Health from './../assets/images/icon_health_default.svg?react';
|
||||
import HealthFull from './../assets/images/icon_health_full_default.svg?react';
|
||||
import Hourglass from './../assets/images/icon_hourglass_default.svg?react';
|
||||
import Microphone from './../assets/images/icon_microphone.svg?react';
|
||||
import Pause from './../assets/images/icon_pause_default.svg?react';
|
||||
import Skull from './../assets/images/icon_skull_default.svg?react';
|
||||
import Timer from './../assets/images/icon_timer_default.svg?react';
|
||||
import FlashedKill from './../assets/images/flashed_kill.svg?react';
|
||||
import Headshot from './../assets/images/headshot.svg?react';
|
||||
import NoScope from './../assets/images/noscope.svg?react';
|
||||
import SmokeKill from './../assets/images/smoke_kill.svg?react';
|
||||
import Suicide from './../assets/images/suicide.svg?react';
|
||||
import Wallbang from './../assets/images/wallbang.svg?react';
|
||||
import LogoCT from './../assets/images/logo_CT_default.png';
|
||||
import LogoT from './../assets/images/logo_T_default.png';
|
||||
import { ReactComponent as SmallBomb } from "./../assets/images/bomb.svg";
|
||||
|
||||
import SmallBomb from "./../assets/images/bomb.svg?react";
|
||||
|
||||
export {
|
||||
SmallBomb,
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
import { ReactComponent as ak47 } from './weapons/ak47.svg';
|
||||
import { ReactComponent as aug } from './weapons/aug.svg';
|
||||
import { ReactComponent as awp } from './weapons/awp.svg';
|
||||
import { ReactComponent as bayonet } from './weapons/bayonet.svg';
|
||||
import { ReactComponent as bizon } from './weapons/bizon.svg';
|
||||
import { ReactComponent as c4 } from './weapons/c4.svg';
|
||||
import { ReactComponent as cz75a } from './weapons/cz75a.svg';
|
||||
import { ReactComponent as deagle } from './weapons/deagle.svg';
|
||||
import { ReactComponent as decoy } from './weapons/decoy.svg';
|
||||
import { ReactComponent as elite } from './weapons/elite.svg';
|
||||
import { ReactComponent as famas } from './weapons/famas.svg';
|
||||
import { ReactComponent as fiveseven } from './weapons/fiveseven.svg';
|
||||
import { ReactComponent as flashbang } from './weapons/flashbang.svg';
|
||||
import { ReactComponent as g3sg1 } from './weapons/g3sg1.svg';
|
||||
import { ReactComponent as galilar } from './weapons/galilar.svg';
|
||||
import { ReactComponent as glock } from './weapons/glock.svg';
|
||||
import { ReactComponent as hegrenade } from './weapons/hegrenade.svg';
|
||||
import { ReactComponent as hkp2000 } from './weapons/hkp2000.svg';
|
||||
import { ReactComponent as incgrenade } from './weapons/incgrenade.svg';
|
||||
import { ReactComponent as inferno } from './weapons/inferno.svg';
|
||||
import { ReactComponent as knife } from './weapons/knife.svg';
|
||||
import { ReactComponent as knife_bayonet } from './weapons/knife_bayonet.svg';
|
||||
import { ReactComponent as knife_butterfly } from './weapons/knife_butterfly.svg';
|
||||
import { ReactComponent as knife_canis } from './weapons/knife_canis.svg';
|
||||
import { ReactComponent as knife_cord } from './weapons/knife_cord.svg';
|
||||
import { ReactComponent as knife_css } from './weapons/knife_css.svg';
|
||||
import { ReactComponent as knife_falchion } from './weapons/knife_falchion.svg';
|
||||
import { ReactComponent as knife_flip } from './weapons/knife_flip.svg';
|
||||
import { ReactComponent as knife_gut } from './weapons/knife_gut.svg';
|
||||
import { ReactComponent as knife_gypsy_jackknife } from './weapons/knife_gypsy_jackknife.svg';
|
||||
import { ReactComponent as knife_karambit } from './weapons/knife_karambit.svg';
|
||||
import { ReactComponent as knife_m9_bayonet } from './weapons/knife_m9_bayonet.svg';
|
||||
import { ReactComponent as knife_outdoor } from './weapons/knife_outdoor.svg';
|
||||
import { ReactComponent as knife_push } from './weapons/knife_push.svg';
|
||||
import { ReactComponent as knife_skeleton } from './weapons/knife_skeleton.svg';
|
||||
import { ReactComponent as knife_stiletto } from './weapons/knife_stiletto.svg';
|
||||
import { ReactComponent as knife_survival_bowie } from './weapons/knife_survival_bowie.svg';
|
||||
import { ReactComponent as knife_t } from './weapons/knife_t.svg';
|
||||
import { ReactComponent as knife_tactical } from './weapons/knife_tactical.svg';
|
||||
import { ReactComponent as knife_ursus } from './weapons/knife_ursus.svg';
|
||||
import { ReactComponent as knife_widowmaker } from './weapons/knife_widowmaker.svg';
|
||||
import { ReactComponent as m249 } from './weapons/m249.svg';
|
||||
import { ReactComponent as m4a1 } from './weapons/m4a1.svg';
|
||||
import { ReactComponent as m4a1_silencer } from './weapons/m4a1_silencer.svg';
|
||||
import { ReactComponent as m4a1_silencer_off } from './weapons/m4a1_silencer_off.svg';
|
||||
import { ReactComponent as mac10 } from './weapons/mac10.svg';
|
||||
import { ReactComponent as mag7 } from './weapons/mag7.svg';
|
||||
import { ReactComponent as molotov } from './weapons/molotov.svg';
|
||||
import { ReactComponent as mp5sd } from './weapons/mp5sd.svg';
|
||||
import { ReactComponent as mp7 } from './weapons/mp7.svg';
|
||||
import { ReactComponent as mp9 } from './weapons/mp9.svg';
|
||||
import { ReactComponent as negev } from './weapons/negev.svg';
|
||||
import { ReactComponent as nova } from './weapons/nova.svg';
|
||||
import { ReactComponent as out } from './weapons/out.svg';
|
||||
import { ReactComponent as p250 } from './weapons/p250.svg';
|
||||
import { ReactComponent as p90 } from './weapons/p90.svg';
|
||||
import { ReactComponent as revolver } from './weapons/revolver.svg';
|
||||
import { ReactComponent as sawedoff } from './weapons/sawedoff.svg';
|
||||
import { ReactComponent as scar20 } from './weapons/scar20.svg';
|
||||
import { ReactComponent as sg556 } from './weapons/sg556.svg';
|
||||
import { ReactComponent as smokegrenade } from './weapons/smokegrenade.svg';
|
||||
import { ReactComponent as ssg08 } from './weapons/ssg08.svg';
|
||||
import { ReactComponent as taser } from './weapons/taser.svg';
|
||||
import { ReactComponent as tec9 } from './weapons/tec9.svg';
|
||||
import { ReactComponent as trigger_hurt } from './weapons/trigger_hurt.svg';
|
||||
import { ReactComponent as ump45 } from './weapons/ump45.svg';
|
||||
import { ReactComponent as usp_silencer } from './weapons/usp_silencer.svg';
|
||||
import { ReactComponent as usp_silencer_off } from './weapons/usp_silencer_off.svg';
|
||||
import { ReactComponent as world } from './weapons/world.svg';
|
||||
import { ReactComponent as xm1014 } from './weapons/xm1014.svg';
|
||||
import ak47 from './weapons/ak47.svg?react';
|
||||
import aug from './weapons/aug.svg?react';
|
||||
import awp from './weapons/awp.svg?react';
|
||||
import bayonet from './weapons/bayonet.svg?react';
|
||||
import bizon from './weapons/bizon.svg?react';
|
||||
import c4 from './weapons/c4.svg?react';
|
||||
import cz75a from './weapons/cz75a.svg?react';
|
||||
import deagle from './weapons/deagle.svg?react';
|
||||
import decoy from './weapons/decoy.svg?react';
|
||||
import elite from './weapons/elite.svg?react';
|
||||
import famas from './weapons/famas.svg?react';
|
||||
import fiveseven from './weapons/fiveseven.svg?react';
|
||||
import flashbang from './weapons/flashbang.svg?react';
|
||||
import g3sg1 from './weapons/g3sg1.svg?react';
|
||||
import galilar from './weapons/galilar.svg?react';
|
||||
import glock from './weapons/glock.svg?react';
|
||||
import hegrenade from './weapons/hegrenade.svg?react';
|
||||
import hkp2000 from './weapons/hkp2000.svg?react';
|
||||
import incgrenade from './weapons/incgrenade.svg?react';
|
||||
import inferno from './weapons/inferno.svg?react';
|
||||
import knife from './weapons/knife.svg?react';
|
||||
import knife_bayonet from './weapons/knife_bayonet.svg?react';
|
||||
import knife_butterfly from './weapons/knife_butterfly.svg?react';
|
||||
import knife_canis from './weapons/knife_canis.svg?react';
|
||||
import knife_cord from './weapons/knife_cord.svg?react';
|
||||
import knife_css from './weapons/knife_css.svg?react';
|
||||
import knife_falchion from './weapons/knife_falchion.svg?react';
|
||||
import knife_flip from './weapons/knife_flip.svg?react';
|
||||
import knife_gut from './weapons/knife_gut.svg?react';
|
||||
import knife_gypsy_jackknife from './weapons/knife_gypsy_jackknife.svg?react';
|
||||
import knife_karambit from './weapons/knife_karambit.svg?react';
|
||||
import knife_m9_bayonet from './weapons/knife_m9_bayonet.svg?react';
|
||||
import knife_outdoor from './weapons/knife_outdoor.svg?react';
|
||||
import knife_push from './weapons/knife_push.svg?react';
|
||||
import knife_skeleton from './weapons/knife_skeleton.svg?react';
|
||||
import knife_stiletto from './weapons/knife_stiletto.svg?react';
|
||||
import knife_survival_bowie from './weapons/knife_survival_bowie.svg?react';
|
||||
import knife_t from './weapons/knife_t.svg?react';
|
||||
import knife_tactical from './weapons/knife_tactical.svg?react';
|
||||
import knife_ursus from './weapons/knife_ursus.svg?react';
|
||||
import knife_widowmaker from './weapons/knife_widowmaker.svg?react';
|
||||
import m249 from './weapons/m249.svg?react';
|
||||
import m4a1 from './weapons/m4a1.svg?react';
|
||||
import m4a1_silencer from './weapons/m4a1_silencer.svg?react';
|
||||
import m4a1_silencer_off from './weapons/m4a1_silencer_off.svg?react';
|
||||
import mac10 from './weapons/mac10.svg?react';
|
||||
import mag7 from './weapons/mag7.svg?react';
|
||||
import molotov from './weapons/molotov.svg?react';
|
||||
import mp5sd from './weapons/mp5sd.svg?react';
|
||||
import mp7 from './weapons/mp7.svg?react';
|
||||
import mp9 from './weapons/mp9.svg?react';
|
||||
import negev from './weapons/negev.svg?react';
|
||||
import nova from './weapons/nova.svg?react';
|
||||
import out from './weapons/out.svg?react';
|
||||
import p250 from './weapons/p250.svg?react';
|
||||
import p90 from './weapons/p90.svg?react';
|
||||
import revolver from './weapons/revolver.svg?react';
|
||||
import sawedoff from './weapons/sawedoff.svg?react';
|
||||
import scar20 from './weapons/scar20.svg?react';
|
||||
import sg556 from './weapons/sg556.svg?react';
|
||||
import smokegrenade from './weapons/smokegrenade.svg?react';
|
||||
import ssg08 from './weapons/ssg08.svg?react';
|
||||
import taser from './weapons/taser.svg?react';
|
||||
import tec9 from './weapons/tec9.svg?react';
|
||||
import trigger_hurt from './weapons/trigger_hurt.svg?react';
|
||||
import ump45 from './weapons/ump45.svg?react';
|
||||
import usp_silencer from './weapons/usp_silencer.svg?react';
|
||||
import usp_silencer_off from './weapons/usp_silencer_off.svg?react';
|
||||
import world from './weapons/world.svg?react';
|
||||
import xm1014 from './weapons/xm1014.svg?react';
|
||||
export {
|
||||
ak47,
|
||||
aug,
|
||||
|
||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
104
src/index.css
104
src/index.css
@ -1,57 +1,69 @@
|
||||
@import "fonts/montserrat.css";
|
||||
@import "fonts/stratum2.css";
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Stratum2', 'Montserrat', 'Roboto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/*background-image: url('./assets/bg.png');/**/
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Louis George Cafe';
|
||||
src: local('Louis George Cafe'), url('./fonts/Louis George Cafe.ttf') format('truetype');
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Rounded_Elegance';
|
||||
src: local('Rounded_Elegance'), url('./fonts/Rounded_Elegance.ttf') format('truetype');
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-panel-color: rgba(12, 15, 18, 0.85);
|
||||
--sub-panel-color: rgba(0, 0, 0, 0.83);
|
||||
--white-dull: rgba(10, 5, 5, 0.25);
|
||||
--white-full: rgba(250, 250, 250, 1);
|
||||
--white-half: rgba(250, 250, 250, 0.5);
|
||||
--color-gray: rgba(191, 191, 191, 1.0);
|
||||
--color-moneys: #a7d32e;
|
||||
--dev-purple: rgba(200, 0, 255, 1);
|
||||
--color-t: #c19511;
|
||||
--color-ct: #5788a8;
|
||||
--color-new-t: #f0c941;
|
||||
--color-new-ct: #5ab8f4;
|
||||
--color-bomb: #f22222;
|
||||
--color-defuse: #2222f2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import "./fonts/Louis George Cafe.ttf";
|
||||
import "./fonts/Rounded_Elegance.ttf";
|
||||
import App from "./App";
|
||||
declare global {
|
||||
interface Window {
|
||||
ipcApi: {
|
||||
send: (channel: string, ...arg: any) => void;
|
||||
receive: (channel: string, func: (...arg: any) => void) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
19
src/main.tsx
Normal file
19
src/main.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import * as process from "process";
|
||||
globalThis.process = process;
|
||||
declare global {
|
||||
interface Window {
|
||||
ipcApi: {
|
||||
send: (channel: string, ...arg: any) => void;
|
||||
receive: (channel: string, func: (...arg: any) => void) => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
1
src/react-app-env.d.ts
vendored
1
src/react-app-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,26 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
77
vite.config.ts
Normal file
77
vite.config.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import { PluginOption, defineConfig, loadEnv } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import svgr from 'vite-plugin-svgr'
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
|
||||
const getDefinitionTemplate = (variable: string, content: string) => {
|
||||
return `export const ${variable} = ${content} as const;`;
|
||||
}
|
||||
|
||||
const updateDefinitonFile = async ({ filePath, content }: { filePath: string, content?: string }) => {
|
||||
const fileContent = content || await fs.promises.readFile(filePath, 'utf-8');
|
||||
const fileName = filePath.endsWith("panel.json") ? "panel.ts" : "keybinds.ts";
|
||||
|
||||
try {
|
||||
const json = JSON.parse(fileContent);
|
||||
const variableName = filePath.endsWith("panel.json") ? "panelDefinition" : "keybindDefinition";
|
||||
fs.writeFileSync(path.join(".", "src", "API", "contexts", fileName), getDefinitionTemplate(variableName, JSON.stringify(json, null, 2)));
|
||||
} catch (e) {
|
||||
console.error(`Updating ${fileName} failed:`);
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
const settingsAndKeybindsPlugin = () => {
|
||||
return {
|
||||
name: 'settingsAndKeybinds',
|
||||
enforce: 'post',
|
||||
// HMR
|
||||
async handleHotUpdate({ file, read }) {
|
||||
if (file.endsWith('panel.json') || file.endsWith("keybinds.json")) {
|
||||
console.debug(`[vite][${path.basename(file)}] Rebuilding type definitions...`);
|
||||
const content = await read();
|
||||
|
||||
await updateDefinitonFile({ filePath: file, content });
|
||||
}
|
||||
},
|
||||
} satisfies PluginOption
|
||||
}
|
||||
// https://vitejs.dev/config/
|
||||
|
||||
export default defineConfig(async ({ command, mode }) => {
|
||||
|
||||
await updateDefinitonFile({ filePath: path.join(".", "public", "panel.json") });
|
||||
await updateDefinitonFile({ filePath: path.join(".", "public", "keybinds.json") });
|
||||
return (
|
||||
{
|
||||
plugins: [
|
||||
react(),
|
||||
svgr(),
|
||||
settingsAndKeybindsPlugin()
|
||||
],
|
||||
build: {
|
||||
outDir: 'build'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"readable-stream": "vite-compatible-readable-stream"
|
||||
}
|
||||
},
|
||||
base: mode === "development" ? '/dev/' : './',
|
||||
server: {
|
||||
open: "http://localhost:1349/development/",
|
||||
host: 'localhost',
|
||||
port: 3500,
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
// Node.js global to browser globalThis
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user