3 | Giving CS observers a powerful new radar.
4 | Easy to read, infinitely resizeable, and with tons of features the default Counter-Strike radar does not have.
5 |
6 |
6 | 
33 |
34 | When only a few players are alive most of the radar is just empty and only a very small part contains all the action. Boltobserv has an autozoom feature that fixes this. The radar image can automatically pan and zoom according to where the players are located, and smoothly follows the action.
35 |
36 | Autozoom tries to keep the action in the middle, with a safe padding around any players so they can never accidentally run off the radar image. it also has a minimal zoom level, so that the radar only zooms in when the action is concentrated in a small part of the map.
37 |
38 | ### Advisories
39 |
40 | Advisories are automatically detected events that the observer might want to switch to.
41 | To make switching to this event easier, the observer slot number is displayed next to an icon noting the type of advisory.
42 | The observer should still make his own judgment of the situation.
43 |
44 | All possible advisories are (with increasing priority):
45 |
46 | | Advisory | Type | Description |
47 | |----------------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------|
48 | |  | Default | This is displayed when no other notable events are happening. |
49 | |  | Bomb plant | A terrorist is planting the bomb on a bombsite. |
50 | |  | Defusing | A CT is defusing the bomb. |
51 | |  | Sole survivor | Only one member of a team is left standing. It's a good idea to observe this player, as all action will involve him. |
52 |
53 | ### Infinitely scalable
54 |
55 | Because Boltobserv runs as an external application, it can be resized to be whatever size you want, and be moved to any display you want.
56 | Running without window borders enables it to dedicate as much space as possible to the radar.
57 |
58 | It can even [run in a browser](https://github.com/boltgolt/boltobserv/wiki/Opening-radar-in-browser), allowing you to view the radar over the network. This also means that the radar can be added as a browser source in applications like OBS with a transparent background.
59 |
60 | ### And much more
61 |
62 | - Smokes, molotovs and flashbangs shown on the map
63 | - Split maps for upper and lower on Nuke and Vertigo
64 | - Any radar background color, including full transparency
65 | - Always-on-top and fixed on-screen positioning
66 | - Player dot z-height indicators, either by color dot or scale
67 | - [Custom configurable OS-level keybinds](https://github.com/boltgolt/boltobserv/wiki/How-to-use-keybinds)
68 | - Automatic .cfg file installation
69 | - Show radar as an application window, in [the browser](https://github.com/boltgolt/boltobserv/wiki/Opening-radar-in-browser) or [capture it directly in OBS](https://github.com/boltgolt/boltobserv/wiki/How-to-capture-Boltobserv-in-OBS)
70 |
71 |
72 | ## Installation
73 |
74 | 1. Download the latest .zip form the [releases](https://github.com/boltgolt/boltobserv/releases) page and unzip it.
75 | 2. Launch `Boltobserv.exe`, it should ask you to automatically install the .cfg file. If it doesn't, copy the `gamestate_integration_boltobserv.cfg` file from the .zip to your CS config folder (the same folder you'd put an `autoexec.cfg`).
76 | 3. You're done! (Re)start CS2 and Boltobserv should automatically connect.
77 |
78 | Please report any bugs or feature requests here on Github.
79 |
80 | ## Configuration
81 |
82 | Most functions of Boltobserv are configurable. To make your own config, go to `/resources/app/config` and either edit the `config.json5` file directly or duplicate it and rename the copy to `config.override.json5`. Using a override file will allow you to move your settings to a different machine or version without breaking the base config file.
83 |
84 | ## Special thanks
85 |
86 | Thanks to [PGL](https://www.pglesports.com/) and [Inygon](https://inygon.com/) for supporting open source development on Boltobserv
87 |
88 | [](https://www.pglesports.com/)
89 | [](https://inygon.com/)
90 |
91 | If you want to support development on specific functionality, don't hesitate to contact me. Supporting me by [sending a small donation](https://ko-fi.com/boltgolt) is also very appreciated.
92 |
93 | ## License
94 |
95 | This project is licensed under GPL-3. In short, this means that all changes you make to this project need to be made open source (among other things). Commercial use is encouraged, as is distribution.
96 |
97 | The paragraph above is not legal advice and is not legally binding. See the LICENSE file for the full license.
98 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "boltobserv",
3 | "version": "1.5.2",
4 | "_whatisthis": "Older versions of Boltobserv used this file to check for updates, so it can't be deleted. The real package.json is in /src"
5 | }
6 |
--------------------------------------------------------------------------------
/src/config/config.json5:
--------------------------------------------------------------------------------
1 | // ============================= MAIN CONFIG FILE =============================
2 | // It's possible to change values directly in this file, but by creating a file
3 | // called "config.override.json5" in the same directory you can override values
4 | // without making changes here. This makes your config a lot more portable.
5 |
6 | {
7 | "_version": "1.5.2",
8 |
9 | // Settings related to the Boltobserv window
10 | "window": {
11 | // Don't show radar in a window, only a small status window will open
12 | "disable": false,
13 |
14 | // Always show the window as the top application
15 | "alwaysOnTop": false,
16 |
17 | // Make the background of the window transparent
18 | "transparent": false,
19 |
20 | // Change the background color of the window with optional transparency
21 | // The color should be in hexadecimal color code
22 | // like #FFF or #FFFFFF to normal color and #80FFFFFF to color with transparency
23 | "backgroundColor": "#000000",
24 |
25 | // Start window as a full screen application
26 | // Use ALT + F4 to quit
27 | "fullscreen": false,
28 |
29 | // Will disable GPU rendering, helps capture the window in programs like OBS
30 | "disableGpu": false,
31 |
32 | // Do not capture mouse events, allowing interaction with the window underneath
33 | // Dragging or resizing the window will be disabled if this option is true
34 | "mousePassthrough": false,
35 |
36 | // The default shape and position of the window
37 | "defaultSize": {
38 | // The height and width in pixels
39 | "height": 600,
40 | "width": 600,
41 |
42 | // The default distance from the top left of the screen
43 | // Set to -1 to let the OS pick the best place
44 | "top": -1,
45 | "left": -1
46 | }
47 | },
48 |
49 | // Settings related to remote browser access to the radar
50 | "browser": {
51 | // Prevents a background from being set in the browser, for OBS capture
52 | "transparent": false,
53 |
54 | "ports": {
55 | // Serves static files, such as HTML. Use this one in your browser
56 | "static": 36364,
57 | // Dynamic websocket port, used for live data transport
58 | "socket": 36365
59 | }
60 | },
61 |
62 | // Settings that will change the way the radar is displayed
63 | "radar": {
64 | // Hide advisories on the radar
65 | "hideAdvisories": false,
66 | // When true, players higher on the map will show over lower ones
67 | // If false, the player slot number determines the stacking order
68 | // The spectated player is always visible on top of everything
69 | "highestPlayerOnTop": true,
70 | // Show the buyzones on the map, or only when players can buy
71 | // Only works on SimpleRadar maps, can either be "never", "buytime" or "always"
72 | "showBuyzones": "buytime",
73 | // Show Boltobserv, Simple Radar and Lexogrine logos
74 | "showLogos": true,
75 |
76 | // Show the player name on the dot, options are:
77 | // "never" only show the spec number (observer slot)
78 | // "both" show the name of the player under the dot
79 | // "always" replace the spec number by the player name
80 | "showName": "never",
81 | // Truncate the name of the player after this many characters
82 | "maxNameLength": 8,
83 |
84 | // Show muzzle flashes for players shooting
85 | "shooting": true,
86 | // Show red indicators on player dots when their health gets lower
87 | "damage": true,
88 | // Show flashed players in a lighter color
89 | "flashes": true,
90 | // Show flying projectiles on the map
91 | "projectiles": true,
92 |
93 | // Give active smokes the color of the team that threw it
94 | "smokeColors": true,
95 | // Show projectiles as very plain and clear letter combinations
96 | "plainProjectiles": false,
97 |
98 | // Frames to smooth out player movement
99 | "playerSmoothing": 13,
100 | // Frames to smooth out flying projectile movement
101 | "projectileSmoothing": 5,
102 | // Opacity between 0 and 1 of the dead player crosses, set to 0 to fully hide
103 | "tombstoneOpacity": 0.4,
104 |
105 | // Amount of scaling to apply to player dots on the radar
106 | // Values above 1 might be blurry
107 | "playerDotScale": 0.7,
108 | // Same as the above, but for the bomb
109 | "bombDotScale": 0.7
110 | },
111 |
112 | // Show a vertical indicator on every player dot, indicating how high the player is on the map
113 | "vertIndicator": {
114 | // Indicator type, can either be "none", "color" or "scale"
115 | "type": "scale",
116 |
117 | // RGB values for the color indicator, from lowest to highest
118 | "colorRange": [[13, 255, 0], [255, 255, 255], [255, 0, 199]],
119 | // Controls by how much dots should scale depending on height, works in combination with playerDotScale
120 | // 0.5 halves the amount of scaling, 1 keeps it the default, 1.5 makes player dots scale more
121 | "scaleDelta": 1
122 | },
123 |
124 | // Settings for automatically zooming in on alive players on the map
125 | "autozoom": {
126 | // Enable or disable autozoom
127 | "enable": true,
128 |
129 | // Frames to smooth out zoom movement
130 | "smoothing": 32,
131 |
132 | // Percentage of radar space to try to keep as padding between the outermost players and the edge of the radar
133 | "padding": 0.3,
134 |
135 | // Only apply autozoom if calculated zoom level would be at least this much
136 | // In decimals, where 1.2 would mean 20% more zoomed in than the default radar
137 | "minZoom": 1.3
138 | },
139 |
140 | // Settings related to the CSGO game
141 | "game": {
142 | // Seconds of inactivity before considering a connection to the game client as lost
143 | // Set to -1 to never timeout
144 | "connectionTimout": 90,
145 |
146 | // The port GSI will try to connect to
147 | "networkPort": 36363,
148 |
149 | // Tries to detect the CSGO game on the machine and prompts to install the CFG file if it hasn't already
150 | "installCfg": true,
151 |
152 | // The hostname for the GSI server to listen on
153 | "host": "0.0.0.0"
154 | },
155 |
156 | // Settings that should not be used in normal operation, but help to find issues
157 | "debug": {
158 | // Print the loaded config into the console
159 | "printConfig": false,
160 |
161 | // Don't open any electron window, just start the server
162 | // Do NOT execute Boltobserv outside a terminal with this enabled, could become a zombie process
163 | "terminalOnly": false
164 | }
165 | }
166 |
--------------------------------------------------------------------------------
/src/config/keybinds.json5:
--------------------------------------------------------------------------------
1 | {
2 | "Control+Alt+R": "functions.reload()"
3 | }
4 |
--------------------------------------------------------------------------------
/src/css/custom.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Use this file to apply custom styles to the radar image
3 | */
4 |
5 | /* Any player dot */
6 | div.dot {}
7 |
8 | /* Players that are CT or T */
9 | div.dot.CT {}
10 | div.dot.T {}
11 |
12 | /* The player with the bomb */
13 | div.dot.bomb{}
14 |
15 | /* The player currently being observed */
16 | div.dot.active {}
17 |
18 | /* A dead player */
19 | div.dot.dead {}
20 |
21 | /* The number on a player dot */
22 | div.label {}
23 |
24 | /* The number on the dot being spectated */
25 | div.label.active {}
26 |
27 | /* Damage indecator behind the player dot */
28 | div.dot::before {}
29 |
30 | /* Muzzle flash in fromt of the the player dot */
31 | div.dot::after {}
32 |
33 | /* The dropped or planted bomb on the map */
34 | #bomb {}
35 |
36 | /* Smoke circles on the map */
37 | #smokes > div {}
38 |
39 | /* Inferno circles on the map */
40 | .inferno > div {}
41 |
42 | /* The advisory on screen */
43 | #advisory {}
44 |
--------------------------------------------------------------------------------
/src/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | font-family: Arial, Helvetica, sans-serif;
7 | -moz-user-select: none;
8 | user-select: none;
9 | cursor: not-allowed;
10 | }
11 |
12 | body > div {
13 | color: white;
14 | height: 100vh;
15 | width: 100vh;
16 | max-width: 100vh;
17 | max-height: 100vw;
18 | position: relative;
19 | overflow: hidden;
20 | }
21 |
22 | #dragarea {
23 | -webkit-app-region: drag;
24 | height: calc(96vh - 20px);
25 | width: calc(96vw - 20px);
26 | top: 20px;
27 | left: 20px;
28 | position: fixed;
29 | z-index: 1000;
30 | }
31 |
--------------------------------------------------------------------------------
/src/css/map.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --config-tombstone-opacity: .4;
3 | --config-bomb-dot-scale: .7;
4 | }
5 |
6 | body {
7 | overflow: hidden;
8 | }
9 |
10 | #container {
11 | -webkit-backface-visibility: hidden;
12 | transition: transform .025;
13 | }
14 |
15 | #radar {
16 | position: absolute;
17 | height: 100%;
18 | width: 100%;
19 | bottom: 0;
20 | left: 0;
21 | z-index: 1;
22 | transform: scale(1) translate(0%, 0%);
23 |
24 | will-change: transform;
25 | outline: .1vmin solid transparent;
26 | -webkit-backface-visibility: hidden;
27 | }
28 |
29 | #radar img {
30 | position: absolute;
31 | top: 0;
32 | left: 0;
33 | height: 100%;
34 | width: 100%;
35 | opacity: 1;
36 | transition: opacity .4s;
37 | }
38 |
39 | #smokes, #entities, #flashbangs, #projectiles, #trails {
40 | position: absolute;
41 | height: 100%;
42 | width: 100%;
43 | bottom: 0;
44 | left: 0;
45 | z-index: 2;
46 | }
47 |
48 | div.dot, div.label {
49 | position: absolute;
50 | height: 5.6vmin;
51 | width: 5.6vmin;
52 | left: -100vw;
53 | bottom: -100vh;
54 | display: block;
55 | background: #f00;
56 | transform: translate(-50%, 50%);
57 | transform-origin: 0% 100%;
58 | border-radius: 100% .2vmin 100% 100%;
59 | box-shadow: 0 0 1.6vmin .8vmin rgba(0, 0, 0, .2);
60 | opacity: 1;
61 | z-index: 15;
62 |
63 | will-change: bottom, left, transform;
64 | outline: .1vmin solid transparent;
65 | -webkit-backface-visibility: hidden;
66 | backface-visibility: initial;
67 | }
68 |
69 | div.dot::before, div.dot::after {
70 | content: '';
71 | position: absolute;
72 | z-index: 14;
73 | opacity: 0;
74 | transition: opacity .02s;
75 | }
76 |
77 | div.dot::before {
78 | height: 4vmin;
79 | width: 4vmin;
80 | background: radial-gradient(circle at right top, #0000 0 45%, #BE2C2C 0 70%, #0000 0);
81 | left: -1.3vmin;
82 | bottom: -1.3vmin;
83 | }
84 |
85 | div.dot::after {
86 | height: 6.6vmin;
87 | width: 6.6vmin;
88 | background: linear-gradient(180deg, #888 1vmin, #0000 0), linear-gradient(270deg, #888 1vmin, #0000 0), linear-gradient(180deg, #bbb 2vmin, #0000 0), linear-gradient(270deg, #bbb 2vmin, #0000 0), linear-gradient(180deg, #fff 3vmin, #0000 0), linear-gradient(270deg, #fff 3vmin, #0000 0);
89 | left: 2vmin;
90 | bottom: 2vmin;
91 | }
92 |
93 | div.dot.CT {
94 | background: #5ab8f4;
95 | }
96 |
97 | div.dot.T {
98 | background: #f0c941;
99 | }
100 |
101 | div.dot.bomb {
102 | border-radius: 2vmin .4vmin 2vmin 2.4vmin;
103 | background: #FF8200;
104 | }
105 |
106 | div.dot.active {
107 | z-index: 7000 !important;
108 | box-shadow: 0 0 0 .2vmin rgba(0, 0, 0, .9), 0 0 0 1vmin rgba(255, 255, 255, .9), 0 0 2.4vmin 1.2vmin rgba(255, 255, 255, .2);
109 | }
110 |
111 | div.dot.hurting::before {
112 | opacity: .8;
113 | }
114 |
115 | div.dot.shooting::after {
116 | opacity: .75;
117 | }
118 |
119 | div.dot.flashed {
120 | box-shadow: 0 0 1.6vmin .8vmin rgba(0, 0, 0, .2), inset 0 0 2vmin 1vmin rgba(255, 255, 255, .8);
121 | }
122 |
123 | div.dot.flashed.active {
124 | box-shadow: 0 0 0 .2vmin rgba(0, 0, 0, .9), 0 0 0 1vmin rgba(255, 255, 255, .9), 0 0 2.4vmin 1.2vmin rgba(255, 255, 255, .2), inset 0 0 2vmin 1vmin rgba(255, 255, 255, .8);
125 | }
126 |
127 | div.dot.dead {
128 | color: transparent;
129 | text-shadow: none;
130 | border-radius: 0;
131 | clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
132 | opacity: var(--config-tombstone-opacity);
133 | z-index: 13 !important;
134 | filter: none;
135 | }
136 |
137 | div.dot > div {
138 | position: absolute;
139 | bottom: 1.3vmin;
140 | left: 1.3vmin;
141 | width: 3vmin;
142 | height: 3vmin;
143 | background: #0000;
144 | box-shadow: inset 0 0 0 1.5vmin rgba(255,255,255,0);
145 | box-sizing: border-box;
146 | border-radius: 60vmin;
147 | }
148 |
149 | div.dot.dead > div {
150 | display: none;
151 | }
152 |
153 | div.label {
154 | background: none;
155 | display: flex;
156 | justify-content: center;
157 | color: black;
158 | font-weight: bold;
159 | text-shadow: 0 0 1.2vmin rgba(255, 255, 255, .2);
160 | box-shadow: none;
161 | line-height: 5.6vmin;
162 | font-size: 4.8vmin;
163 | }
164 |
165 | div.label.active {
166 | z-index: 7000 !important;
167 | font-size: 5vmin;
168 | }
169 |
170 | div.label.dead {
171 | display: none;
172 | }
173 |
174 | div.label span {
175 | display: block;
176 | position: absolute;
177 | left: 50%;
178 | top: 100%;
179 | transform: translateX(-50%);
180 | font-size: .7em;
181 | color: #FFF;
182 | text-shadow: 0 0 .3em #000;
183 | opacity: .85;
184 | }
185 |
186 | #bomb {
187 | position: absolute;
188 | background-image: url("../img/bomb-dropped.webp");
189 | background-size: contain;
190 | height: 2.2vmin;
191 | width: 2.2vmin;
192 | bottom: -30%;
193 | left: -30%;
194 | transform: scale(var(--config-bomb-dot-scale)) translate(-50%, 50%);
195 | transform-origin: bottom left;
196 | }
197 |
198 | #bomb.defused {
199 | background-image: url("../img/bomb-defused.webp");
200 | filter: drop-shadow(0 0 .4vmin rgba(0, 255, 0, .3));
201 | }
202 |
203 | #bomb.planted {
204 | background-image: url("../img/bomb-planted.webp");
205 | animation: beep 1s infinite;
206 | }
207 |
208 | @keyframes beep {
209 | 0% {
210 | filter: drop-shadow(0 0 0 rgba(255, 0, 0, 1));
211 | background-color: rgba(255, 0, 0, 0);
212 | }
213 | 10% {
214 | filter: drop-shadow(0 0 1vmin rgba(255, 0, 0, 1));
215 | background-color: rgba(255, 0, 0, 0.2);
216 | }
217 | 20% {
218 | filter: drop-shadow(0 0 1.8vmin rgba(255, 0, 0, 0));
219 | background-color: rgba(255, 0, 0, 0);
220 | }
221 | }
222 |
223 | #smokes > div {
224 | position: absolute;
225 | border-radius: 100%;
226 | opacity: .8;
227 | transform-origin: center;
228 | background: #9F9D9D;
229 | overflow: hidden;
230 | border-color: #D7D7D7;
231 | transform: translate(-50%, 50%);
232 | transition: opacity .3s;
233 | }
234 |
235 | #smokes > div::before {
236 | content: '';
237 | display: block;
238 | height: 100%;
239 | width: 100%;
240 | border: transparent solid .6vmin;
241 | border-color: inherit;
242 | border-radius: 100%;
243 | box-sizing: border-box;
244 | }
245 |
246 | #smokes > div.CT {
247 | background: #678FAA;
248 | border-color: #77C5F6;
249 | }
250 |
251 | #smokes > div.T {
252 | background: #CCBA7D;
253 | border-color: #F1D369;
254 | }
255 |
256 | #smokes > div.hide {
257 | opacity: 0;
258 | }
259 |
260 | #smokes > div.fading {
261 | transition: opacity 1.8s;
262 | }
263 |
264 | #smokes > div > div {
265 | height: 100%;
266 | width: 100%;
267 | border: transparent solid .6vmin;
268 | border-color: inherit;
269 | border-radius: 100%;
270 | background-color: #364254;
271 | transform: translate(-0.6vmin, 0.6vmin);
272 | position: absolute;
273 | opacity: 1;
274 | transition: background-color .15s, opacity .8s;
275 | }
276 |
277 | #smokes > div > div.flash {
278 | background-color: #fff;
279 | }
280 |
281 | #smokes > div > div.fade {
282 | opacity: 0;
283 | }
284 |
285 | #infernos {
286 | position: absolute;
287 | height: 100%;
288 | width: 100%;
289 | bottom: 0;
290 | left: 0;
291 | z-index: 2;
292 | }
293 |
294 | .inferno {
295 | position: absolute;
296 | height: 100%;
297 | width: 100%;
298 | bottom: 0;
299 | left: 0;
300 | z-index: 2;
301 | transition: opacity .3s;
302 | }
303 |
304 | .inferno > div {
305 | position: absolute;
306 | border-radius: 100%;
307 | opacity: .75;
308 | background: #ff4848;
309 | box-sizing: border-box;
310 | border: #ce3f00 solid .2vmin;
311 | transform: translate(-50%, 50%);
312 | transition: opacity .3s;
313 | }
314 |
315 | #flashbangs > div {
316 | position: absolute;
317 | opacity: .8;
318 | background: #FFF;
319 | box-sizing: border-box;
320 | transform-origin: center;
321 | border-radius: 100%;
322 | transform: translate(-50%, 50%);
323 | clip-path: polygon(15% 8%, 40% 25%, 50% 0%, 60% 25%, 85% 8%, 74% 35%, 100% 36%, 78% 50%, 100% 70%, 72.5% 67%, 77.5% 92.5%, 60% 75%, 50% 100%, 40% 75%, 22.5% 92.5%, 27.5% 67%, 0% 70%, 22% 50%, 0% 36%, 26% 35%);
324 | box-shadow: inset 0 0 0vmin 1.7vmin #FC9F2D, inset 0 0 5vmin 0 #FEA130;
325 | transition: opacity .3s;
326 | }
327 |
328 | #flashbangs > div.full {
329 | opacity: .8;
330 | }
331 |
332 | #flashbangs > div.hide {
333 | opacity: 0;
334 | }
335 |
336 | #trails path {
337 | stroke-linejoin: round;
338 | fill: none;
339 | }
340 |
341 | #projectiles > div {
342 | position: absolute;
343 | box-sizing: border-box;
344 | transform-origin: center;
345 | transform: translate(-50%, 50%);
346 | background-repeat: no-repeat;
347 | background-size: contain;
348 | background-position: center;
349 | height: 4vmin;
350 | width: 4vmin;
351 | }
352 |
353 | #advisory {
354 | position: absolute;
355 | width: 14%;
356 | height: 7%;
357 | background: #f00;
358 | border-radius: 3vmin 8vmin 8vmin 3vmin;
359 | background: linear-gradient(to right, #222, #292929);
360 | color: #000;
361 | box-shadow: 0 0 .4vmin .3vmin rgba(255, 255, 255, .05);
362 | display: none;
363 | }
364 |
365 | #advisory::before {
366 | content: "";
367 | position: absolute;
368 | top: 10%;
369 | left: 7%;
370 | height: 80%;
371 | width: 40%;
372 | background-position: center;
373 | background-repeat: no-repeat;
374 | background-size: contain;
375 | }
376 |
377 | #advisory span {
378 | position: absolute;
379 | top: 10%;
380 | right: 5%;
381 | height: 80%;
382 | width: 40%;
383 | border-radius: 100%;
384 | box-sizing: border-box;
385 | box-shadow: 0 0 .4vmin .3v rgba(255, 255, 255, .2) inset;
386 | background: #000;
387 | text-align: center;
388 | color: #000;
389 | line-height: 5.9vmin;
390 | font-size: 5vmin;
391 | font-weight: bold;
392 | }
393 |
394 | #advisory.planting::before {
395 | background-image: url("../img/adv-plant.webp");
396 | }
397 |
398 | #advisory.planting {
399 | background: linear-gradient(to right, #AD9A3C, #ECCD37);
400 | box-shadow: 0 0 .4vmin .3vmin rgba(255,252,0,.2);
401 | }
402 |
403 | #advisory.defuse::before {
404 | background-image: url("../img/adv-defuse.webp");
405 | }
406 |
407 | #advisory.defuse {
408 | background: linear-gradient(to right, #39536d, #3a7eb1);
409 | box-shadow: 0 0 .4vmin .3vmin rgba(0,41,255,.2);
410 | }
411 |
412 | #advisory.solesurvivor::before {
413 | background-image: url("../img/adv-solesurvivor.webp");
414 | }
415 |
416 | #advisory.solesurvivor {
417 | background: linear-gradient(to right, #436C39, #40B13A);
418 | box-shadow: 0 0 .4vmin .3vmin rgba(13,255,0,.2);
419 | }
420 |
421 | #advisory.planting span, #advisory.defuse span, #advisory.solesurvivor span {
422 | color: #fff;
423 | }
424 |
425 | #unknownMap {
426 | position: absolute;
427 | bottom: 0;
428 | left: 0;
429 | height: 100%;
430 | width: 100%;
431 | background: #000;
432 | display: none;
433 | justify-content: center;
434 | align-items: center;
435 | }
436 |
--------------------------------------------------------------------------------
/src/css/status.css:
--------------------------------------------------------------------------------
1 | body {
2 | overflow: hidden;
3 | cursor: inherit;
4 | }
5 |
6 | #game {
7 | width: 100vw;
8 | max-width: 100vw;
9 | }
10 |
11 | img {
12 | height: 30px;
13 | margin-right: 10px;
14 | animation: none;
15 | }
16 |
17 | #text {
18 | position: absolute;
19 | top: 72px;
20 | width: 100vw;
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 |
26 | #text > div {
27 | display: inline;
28 | opacity: .8;
29 | }
30 |
31 | #text span {
32 | text-decoration: underline;
33 | cursor: pointer;
34 | position: relative;
35 | z-index: 2000;
36 | -webkit-app-region: no-drag;
37 | }
38 |
39 | #text span:hover {
40 | cursor: pointer;
41 | -webkit-app-region: no-drag;
42 | }
43 |
44 | #dragarea {
45 | -webkit-app-region: drag;
46 | height: 100vh;
47 | width: 100vw;
48 | top: 0;
49 | left: 0;
50 | }
51 |
52 | #version {
53 | bottom: 14px;
54 | }
55 |
--------------------------------------------------------------------------------
/src/css/waiting.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: rgba(0, 0, 0, .24);
3 | }
4 |
5 | #container {
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | justify-content: space-between;
10 | width: 100vw;
11 | max-width: 100vw;
12 | height: 100vh;
13 | max-height: 100vh;
14 | overflow: visible;
15 | }
16 |
17 | #container > div:first-child {
18 | background: #222;
19 | width: 100%;
20 | padding: .8rem 1rem;
21 | font-size: .9rem;
22 | color: #fff;
23 | box-sizing: border-box;
24 | display: flex;
25 | justify-content: space-between;
26 | }
27 |
28 | #container > div:first-child img {
29 | height: 1.6rem;
30 | margin-right: .7rem;
31 | vertical-align: middle;
32 | animation: beat 3s infinite ease-in-out;
33 | }
34 |
35 | @keyframes beat {
36 | 40% {
37 | transform: scale(1) rotate(0deg);
38 | }
39 |
40 | 60% {
41 | transform: scale(1.1) rotate(190deg);
42 | }
43 |
44 | 70% {
45 | transform: scale(1) rotate(180deg);
46 | }
47 |
48 | 100% {
49 | transform: scale(1) rotate(180deg);
50 | }
51 | }
52 |
53 | #container > div:first-child a {
54 | color: #a647c7;
55 | margin-left: .7rem;
56 | text-decoration: underline;
57 | cursor: pointer;
58 | position: relative;
59 | z-index: 2000;
60 | -webkit-app-region: no-drag;
61 | }
62 |
63 | #container > div:first-child button {
64 | color: #000;
65 | background: #a647c7;
66 | }
67 |
68 | #container > div:first-child section {
69 | position: absolute;
70 | width: 90%;
71 | left: 5%;
72 | top: 4.4rem;
73 | text-align: center;
74 | font-size: .8rem;
75 | cursor: pointer;
76 | z-index: 2000;
77 | -webkit-app-region: no-drag;
78 | color: #555;
79 | }
80 |
81 | #container > div:first-child section a {
82 | display: block;
83 | color: inherit;
84 | }
85 |
86 | #openconfig {
87 | display: none;
88 | }
89 |
90 | #container > div:nth-child(2) {
91 | display: flex;
92 | align-items: center;
93 | }
94 |
95 | .statusbox {
96 | background: #333;
97 | color: #AAA;
98 | border-radius: .8vmin;
99 | text-align: center;
100 | font-size: 2.4vmin;
101 | width: 20vmin;
102 | overflow: hidden;
103 | }
104 |
105 | .statusbox strong {
106 | display: block;
107 | padding: 2vmin 0 .2vmin;
108 | }
109 |
110 | .statusbox > span {
111 | display: block;
112 | font-size: 1.8vmin;
113 | text-transform: uppercase;
114 | padding-bottom: 2vmin;
115 | }
116 |
117 | .statusbox div {
118 | font-size: 2vmin;
119 | padding: 2vmin;
120 | background: #222;
121 | }
122 |
123 | .statusbox div span {
124 | display: block;
125 | max-width: 100%;
126 | text-overflow: ellipsis;
127 | overflow: hidden;
128 | }
129 |
130 | .statusbox.connected {
131 | color: #fff;
132 | background: #a647c7;
133 | }
134 |
135 | .statusbox.connected div {
136 | color: #fff;
137 | background: #7E3498;
138 | }
139 |
140 | .statusline {
141 | color: #333;
142 | width: 6vmin;
143 | padding-bottom: .4vmin;
144 | text-align: center;
145 | font-size: 6vmin;
146 | font-weight: bold;
147 | }
148 |
149 | .statusline.connected {
150 | color: #a647c7;
151 | }
152 |
153 | #cfgs {
154 | width: 100vw;
155 | box-sizing: border-box;
156 | padding: 1rem;
157 | cursor: default;
158 | font-size: .8rem;
159 | }
160 |
161 | #cfgs > div {
162 | display: flex;
163 | flex-direction: row;
164 | background: #a647c7;
165 | padding: .6rem .8rem;
166 | margin-bottom: .2rem;
167 | line-height: 1.2rem;
168 | width: 100%;
169 | box-sizing: border-box;
170 | max-width: 65rem;
171 | margin: auto;
172 | border-radius: .1rem;
173 | }
174 |
175 | #cfgs span {
176 | font-weight: bold;
177 | }
178 |
179 | #cfgs small {
180 | font-size: inherit;
181 | flex: 1;
182 | overflow: hidden;
183 | white-space: nowrap;
184 | text-overflow: ellipsis;
185 | min-width: 0;
186 | padding: 0 .4rem 0 .3rem;
187 | }
188 |
189 | button {
190 | background: #FFF;
191 | border: 0;
192 | color: #a647c7;
193 | padding: .2rem 1rem;
194 | font-weight: bold;
195 | cursor: pointer;
196 | position: relative;
197 | z-index: 2000;
198 | -webkit-app-region: no-drag;
199 | text-align: center;
200 | text-transform: uppercase;
201 | border-radius: .1rem;
202 | transform: scale(1);
203 | transition: transform .15s;
204 | }
205 |
206 | button:hover {
207 | transform: scale(1.05);
208 | }
209 |
210 | button:active {
211 | transform: scale(0.98);
212 | }
213 |
214 | button:focus {
215 | outline: none;
216 | }
217 |
218 | #noconnection {
219 | font-size: 4vmin;
220 | text-align: center;
221 | box-sizing: border-box;
222 | padding: 5vmin 10vmin 5vmin 10vmin;
223 | }
224 |
225 | #dragarea {
226 | max-width: initial;
227 | max-height: initial;
228 | }
229 |
230 | @media (max-width: 500px) {
231 | #container > div:first-child a,
232 | #container > div:first-child button,
233 | #container > div:first-child section {
234 | display: none !important;
235 | }
236 |
237 | #cfgs {
238 | visibility: hidden;
239 | }
240 | }
241 |
242 | @media (max-height: 350px) {
243 | #container > div:first-child section {
244 | display: none;
245 | }
246 | }
247 |
--------------------------------------------------------------------------------
/src/detectcfg.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 | const path = require("path")
3 | const steamPath = require("steam-game-path")
4 |
5 | module.exports = {
6 | found: [],
7 | search: () => {
8 | let result = steamPath.getGamePath(730)
9 | if (result && result.game && fs.existsSync(result.game.path)) {
10 | console.info("Found installation in", result.game.path)
11 |
12 | let configPath = path.join(result.game.path, "game", "core", "cfg", "gamestate_integration_boltobserv.cfg")
13 |
14 | if (fs.existsSync(configPath)) {
15 | let foundHeader = fs.readFileSync(configPath, "utf8").split("\n")[0]
16 | let ownHeader = fs.readFileSync(path.join(__dirname, "gamestate_integration_boltobserv.cfg"), "utf8").split("\n")[0]
17 |
18 | if (foundHeader != ownHeader) {
19 | module.exports.found.push({
20 | type: "update",
21 | path: result.game.path
22 | })
23 | }
24 | }
25 | else {
26 | module.exports.found.push({
27 | type: "install",
28 | path: result.game.path
29 | })
30 | }
31 | }
32 | },
33 |
34 | install: (target) => {
35 | let template = path.join(__dirname, "gamestate_integration_boltobserv.cfg")
36 | let dest = path.join(target, "game", "core", "cfg", "gamestate_integration_boltobserv.cfg")
37 | fs.copyFileSync(template, dest)
38 |
39 | console.info("Installed config file as", dest)
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/gamestate_integration_boltobserv.cfg:
--------------------------------------------------------------------------------
1 | "Boltobserv integration v3 | https://github.com/boltgolt/boltobserv"
2 | {
3 | "uri" "http://localhost:36363"
4 | "timeout" "0.1"
5 | "buffer" "0.0"
6 | "throttle" "0.0"
7 | "heartbeat" "2.0"
8 | "data"
9 | {
10 | "provider" "1"
11 | "map" "1"
12 | "bomb" "1"
13 | "round" "1"
14 | "player_id" "1"
15 | "allplayers_id" "1"
16 | "allplayers_state" "1"
17 | "allplayers_weapons" "1"
18 | "allplayers_position" "1"
19 | "phase_countdowns" "1"
20 | "allgrenades" "1"
21 | }
22 | "output"
23 | {
24 | "precision_time" "3"
25 | "precision_position" "3"
26 | "precision_vector" "3"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/gsi.js:
--------------------------------------------------------------------------------
1 | const http = require("http")
2 | const config = require("./loadconfig")
3 |
4 | let server = http.createServer(handleRequest)
5 |
6 | server.on("error", err => {
7 | console.error("GSI server error:", err)
8 | })
9 |
10 | server.listen(config.game.networkPort, config.game.host, () => {
11 | console.info(`GSI input expected at http://${config.game.host}:${config.game.networkPort}`)
12 | })
13 |
14 | function handleRequest(req, res) {
15 | if (req.method != "POST") {
16 | res.writeHead(405)
17 | return res.end("Boltobserv running\nPlease POST GSI data here")
18 | }
19 |
20 | // Start with an enpty body
21 | let body = ""
22 | // Append incomming data to body
23 | req.on("data", data => body += data)
24 |
25 |
26 | // On end if packet data
27 | req.on("end", () => {
28 | // Send back empty response immediatly
29 | res.end("")
30 |
31 | // Patch incomming JSON to convert large integers to strings
32 | body = body.replace(/"owner": ([0-9]{10,})/g, '"owner": "$1"')
33 | // Parse JSON packet
34 | let game = JSON.parse(body)
35 |
36 | if (game.provider) {
37 | let connObject = {
38 | status: "up"
39 | }
40 |
41 | if (game.player) {
42 | if (game.player.activity != "playing") {
43 | connObject.player = game.player.name
44 | }
45 | }
46 |
47 | process.send({
48 | type: "connection",
49 | data: connObject
50 | })
51 | }
52 |
53 | if (game.map) {
54 | process.send({
55 | type: "map",
56 | data: game.map.name
57 | })
58 | }
59 |
60 | if (game.allplayers) {
61 | let playerArr = []
62 |
63 | for (let id in game.allplayers) {
64 | if (!Number.isInteger(game.allplayers[id].observer_slot)) continue
65 |
66 | let player = game.allplayers[id]
67 | let pos = player.position.split(", ")
68 | let angle = 0
69 | let hasBomb = false
70 | let bombActive = false
71 | let isActive = false
72 | let rawAngle = player.forward.split(", ")
73 | let ammo = {}
74 |
75 | if (parseFloat(rawAngle[0]) > 0) {
76 | angle = 90 + parseFloat(rawAngle[1]) * -1 * 90
77 | }
78 | else {
79 | angle = 270 + parseFloat(rawAngle[1]) * 90
80 | }
81 |
82 | if (game.player) {
83 | if (game.player.observer_slot == player.observer_slot) {
84 | isActive = true
85 | }
86 | }
87 |
88 | for (let id in player.weapons) {
89 | // The player has the bomb in their inventory
90 | if (player.weapons[id].name == "weapon_c4") {
91 | hasBomb = true
92 | // The player has the bomb in their hands
93 | bombActive = player.weapons[id].state == "active"
94 | }
95 |
96 | // Save the amma in each gun to know when the player is shooting
97 | else if (player.weapons[id].ammo_clip) {
98 | ammo[player.weapons[id].name] = player.weapons[id].ammo_clip
99 | }
100 | }
101 |
102 | playerArr.push({
103 | id: id,
104 | num: player.observer_slot,
105 | name: player.name,
106 | team: player.team,
107 | health: player.state.health,
108 | active: isActive,
109 | flashed: player.state.flashed,
110 | bomb: hasBomb,
111 | bombActive: bombActive,
112 | angle: angle,
113 | ammo: ammo,
114 | position: {
115 | x: parseFloat(pos[0]),
116 | y: parseFloat(pos[1]),
117 | z: parseFloat(pos[2])
118 | }
119 | })
120 | }
121 |
122 | process.send({
123 | type: "players",
124 | data: {
125 | players: playerArr
126 | }
127 | })
128 | }
129 |
130 | if (game.grenades) {
131 | let grenades = {
132 | smokes: [],
133 | infernos: [],
134 | flashbangs: [],
135 | projectiles: []
136 | }
137 |
138 | for (let nadeID in game.grenades) {
139 | let nade = game.grenades[nadeID]
140 |
141 | if (nade.type == "smoke" && nade.effecttime != '0.000') {
142 | let pos = nade.position.split(", ")
143 | let owner = game.allplayers[nade.owner]
144 |
145 | if (!owner) continue
146 | let team = owner.team ? owner.team : ""
147 |
148 | grenades.smokes.push({
149 | id: nadeID,
150 | time: parseFloat(nade.effecttime),
151 | team: team,
152 | position: {
153 | x: parseFloat(pos[0]),
154 | y: parseFloat(pos[1]),
155 | z: parseFloat(pos[2])
156 | }
157 | })
158 | }
159 |
160 | if (nade.type == "flashbang" && parseFloat(nade.lifetime) >= 1.4) {
161 | let pos = nade.position.split(", ")
162 | grenades.flashbangs.push({
163 | id: nadeID,
164 | position: {
165 | x: parseFloat(pos[0]),
166 | y: parseFloat(pos[1]),
167 | z: parseFloat(pos[2])
168 | }
169 | })
170 | }
171 |
172 | else if (nade.type == "inferno") {
173 | if (nade.flames) {
174 | let flamesPos = []
175 | let flamesNum = Object.values(nade.flames).length
176 |
177 | for (var i = 0; i < flamesNum; i++) {
178 | let pos = Object.values(nade.flames)[i].split(", ")
179 | flamesPos.push({
180 | x: parseFloat(pos[0]),
181 | y: parseFloat(pos[1]),
182 | z: parseFloat(pos[2])
183 | })
184 | }
185 |
186 | grenades.infernos.push({
187 | id: nadeID,
188 | flamesNum: flamesNum,
189 | flamesPosition: flamesPos
190 | })
191 | }
192 | }
193 |
194 | else if (nade.type != "decoy" && nade.velocity != "0.000, 0.000, 0.000" && (nade.type != "smoke" || nade.effecttime == '0.000')) {
195 | let pos = nade.position.split(", ")
196 | let owner = game.allplayers[nade.owner]
197 |
198 | if (!owner) continue
199 | let team = owner.team ? owner.team : ""
200 |
201 | grenades.projectiles.push({
202 | id: nade.type + nadeID,
203 | type: nade.type,
204 | team: team,
205 | position: {
206 | x: parseFloat(pos[0]),
207 | y: parseFloat(pos[1]),
208 | z: parseFloat(pos[2])
209 | }
210 | })
211 | }
212 | }
213 |
214 | // Emit an event for every type of grenade
215 | for (let type in grenades) {
216 | process.send({
217 | type: type,
218 | data: grenades[type]
219 | })
220 | }
221 | }
222 |
223 | if (game.round) {
224 | process.send({
225 | type: "round",
226 | data: game.round.phase
227 | })
228 | }
229 |
230 | if (game.phase_countdowns) {
231 | process.send({
232 | type: "canbuy",
233 | data: !((['live', 'bomb', 'defuse', 'over'].includes(game.phase_countdowns.phase)) && parseFloat(game.phase_countdowns.phase_ends_in) < 95)
234 | })
235 | }
236 |
237 | if (game.bomb) {
238 | let pos = game.bomb.position.split(", ")
239 |
240 | process.send({
241 | type: "bomb",
242 | data: {
243 | state: game.bomb.state,
244 | player: game.bomb.player,
245 | position: {
246 | x: parseFloat(pos[0]),
247 | y: parseFloat(pos[1]),
248 | z: parseFloat(pos[2])
249 | }
250 | }
251 | })
252 | }
253 | })
254 | }
255 |
--------------------------------------------------------------------------------
/src/html/map.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
16 |
17 |
18 | 
22 |
22 | Boltobserv
23 |
24 |
25 |
26 |
27 |