├── .gitignore ├── README.md ├── package.json ├── public ├── css │ └── style.css ├── img │ ├── deagle.png │ ├── elite │ ├── fiveseven │ ├── latest │ └── m4a1s.png └── js │ └── main.js ├── server.js └── views └── index.jade /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #CSGO HUD GameState Integration 2 | 3 | https://www.youtube.com/watch?v=FM1-iapbEtc 4 | 5 | # Install 6 | 7 | * If you have GIT, you can use `git clone https://github.com/Double0negative/CSGO-HUD.git` to download the project. Otherwise, Click the Download Zip button above 8 | * Install Node.JS (NPM is included) 9 | * Create a file named `gamestate_integration_hud.cfg` in your csgo cfg folder (`steamapps/common/Counter-Strike Global Offensive/csgo/cfg/`) copy-paste from https://gist.github.com/Double0negative/dd24fae86c48d277de0a 10 | * open CMD, type: cd \where\you\extracted\the\zip\CSGO-HUD-master 11 | * in CMD: `npm install` 12 | * in CMD: `node server.js` 13 | * You should then be able to connect in a web browser by going to `http://localhost:2626`. Start up your game and connect to a match and data should begin streaming 14 | * Linux and Mac setup is basically identical, just switch out CMD for Terminal 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "csgo-hud", 3 | "version": "0.0.1", 4 | "description": "CSGO Web Hud", 5 | "dependencies": { 6 | "express": "^4.13.3", 7 | "jade": "^1.11.0", 8 | "socket.io": "^1.3.7" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | height:100%; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Roboto', sans-serif; 6 | 7 | } 8 | 9 | .score-wrap { 10 | 11 | } 12 | 13 | .score { 14 | font-size: 1.5em; 15 | position: relative; 16 | margin: auto; 17 | text-align: center; 18 | } 19 | 20 | .score td { 21 | width: 50px; 22 | } 23 | 24 | .wrap { 25 | width: 100%; 26 | height: 100%; 27 | } 28 | 29 | .color { 30 | position: fixed; 31 | width: 100%; 32 | height: 100%; 33 | background-color: lightblue; 34 | transition: background .25s ease-in-out; 35 | } 36 | 37 | .container { 38 | position: relative; 39 | margin: auto; 40 | text-align: center; 41 | } 42 | 43 | 44 | 45 | .timelabel { 46 | font-size: 1.3em; 47 | padding-top: 30px; 48 | transition: .25s ease-in-out; 49 | } 50 | 51 | .time { 52 | font-size: 7em; 53 | transition: .25s ease-in-out; 54 | } 55 | 56 | .pistol td.pic img{ 57 | max-width: 150px; 58 | max-height: 70px; 59 | } 60 | 61 | .rifle td.pic img { 62 | width: 400px; 63 | height: auto; 64 | } 65 | 66 | .name { 67 | font-size: 1.2em; 68 | } 69 | 70 | .knife td.pic img{ 71 | max-width: 150px; 72 | max-height: 100px; 73 | } 74 | 75 | .weapon ul { 76 | list-style: none; 77 | padding: 0; 78 | margin: auto; 79 | text-align: center; 80 | margin-top: 30px; 81 | } 82 | 83 | .weapon ul li { 84 | list-stype: none; 85 | padding: 0; 86 | margin: 0; 87 | margin-top: 20px; 88 | } 89 | 90 | .weapon table { 91 | margin: auto; 92 | text-align: center; 93 | } 94 | 95 | .grenade ul { 96 | list-style: none; 97 | padding: 0; 98 | margin: 0; 99 | margin-top: 50px; 100 | } 101 | 102 | .grenade ul li{ 103 | list-style: none; 104 | padding: 0; 105 | margin: 10px; 106 | display: inline-block; 107 | } 108 | 109 | .grenade ul td.pic img{ 110 | width: auto; 111 | height: 150px;; 112 | } -------------------------------------------------------------------------------- /public/img/deagle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Double0negative/CSGO-HUD/a9d5072cf8247c1c7e9e56eb941e2bf003092e8f/public/img/deagle.png -------------------------------------------------------------------------------- /public/img/elite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Double0negative/CSGO-HUD/a9d5072cf8247c1c7e9e56eb941e2bf003092e8f/public/img/elite -------------------------------------------------------------------------------- /public/img/fiveseven: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Double0negative/CSGO-HUD/a9d5072cf8247c1c7e9e56eb941e2bf003092e8f/public/img/fiveseven -------------------------------------------------------------------------------- /public/img/latest: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Double0negative/CSGO-HUD/a9d5072cf8247c1c7e9e56eb941e2bf003092e8f/public/img/latest -------------------------------------------------------------------------------- /public/img/m4a1s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Double0negative/CSGO-HUD/a9d5072cf8247c1c7e9e56eb941e2bf003092e8f/public/img/m4a1s.png -------------------------------------------------------------------------------- /public/js/main.js: -------------------------------------------------------------------------------- 1 | var io = io(); 2 | var json; 3 | 4 | var icons = { 5 | c75za: "http://vignette3.wikia.nocookie.net/cswikia/images/c/cf/C75a_hud_csgo.png/revision/latest/scale-to-width-down/400", 6 | deagle: "http://vignette2.wikia.nocookie.net/cswikia/images/7/7d/Deagle_hud_go.png/revision/latest/scale-to-width-down/400", 7 | elite: "http://vignette2.wikia.nocookie.net/cswikia/images/8/82/Elite_hud_csgo.png/revision/latest/scale-to-width-down/400", 8 | fiveseven: "http://vignette2.wikia.nocookie.net/cswikia/images/9/9c/Fiveseven_hud_csgo.png/revision/latest/scale-to-width-down/400", 9 | glock: "http://vignette2.wikia.nocookie.net/cswikia/images/3/33/Glock18_hud_csgo.png/revision/latest/scale-to-width-down/400", 10 | p250: "http://vignette2.wikia.nocookie.net/cswikia/images/5/57/P250_hud.png/revision/latest/scale-to-width-down/400", 11 | hkp2000: "http://vignette1.wikia.nocookie.net/cswikia/images/6/67/Hkp2000_hud.png/revision/latest/scale-to-width-down/400", 12 | tec9: "http://vignette3.wikia.nocookie.net/cswikia/images/5/55/Tec9_hud_csgo.png/revision/latest/scale-to-width-down/400", 13 | usp_silencer: "http://vignette2.wikia.nocookie.net/cswikia/images/7/73/Usps_hud_csgo.png/revision/latest/scale-to-width-down/400", 14 | mag7: "http://vignette2.wikia.nocookie.net/cswikia/images/2/2e/Mag7_hud_csgo.png/revision/latest/scale-to-width-down/400", 15 | revolver: "http://vignette2.wikia.nocookie.net/cswikia/images/7/7d/Deagle_hud_go.png/revision/latest/scale-to-width-down/400", 16 | nova: "http://vignette4.wikia.nocookie.net/cswikia/images/c/c8/Nova_hud_csgo.png/revision/latest/scale-to-width-down/400", 17 | sawedoff: "http://vignette1.wikia.nocookie.net/cswikia/images/9/94/Sawedoff_hud_csgo.png/revision/latest/scale-to-width-down/400", 18 | xm1014: "http://vignette2.wikia.nocookie.net/cswikia/images/a/ad/Xm1014_hud_csgo.png/revision/latest/scale-to-width-down/400", 19 | mac10: "http://vignette2.wikia.nocookie.net/cswikia/images/f/f7/Mac10_hud_csgo.png/revision/latest/scale-to-width-down/400", 20 | mp7: "http://vignette4.wikia.nocookie.net/cswikia/images/8/8d/Mp7_hud_csgo.png/revision/latest/scale-to-width-down/400", 21 | mp9: "http://vignette2.wikia.nocookie.net/cswikia/images/1/14/Mp9_hud_csgo.png/revision/latest/scale-to-width-down/400", 22 | p90: "http://vignette3.wikia.nocookie.net/cswikia/images/b/bd/P90_hud_csgo.png/revision/latest/scale-to-width-down/400", 23 | bizon: "http://vignette1.wikia.nocookie.net/cswikia/images/d/d5/Bizon_hud_csgo.png/revision/latest/scale-to-width-down/400", 24 | ump45: "http://vignette3.wikia.nocookie.net/cswikia/images/c/c4/Ump45_hud_csgo.png/revision/latest/scale-to-width-down/400", 25 | ak47: "http://vignette1.wikia.nocookie.net/cswikia/images/7/76/Ak47_hud_csgo.png/revision/latest/scale-to-width-down/400", 26 | aug: "http://vignette2.wikia.nocookie.net/cswikia/images/6/6f/Aug_hud_csgo.png/revision/latest/scale-to-width-down/400", 27 | famas: "http://vignette2.wikia.nocookie.net/cswikia/images/8/8f/Famas_hud_csgo.png/revision/latest/scale-to-width-down/400", 28 | galilar: "http://vignette1.wikia.nocookie.net/cswikia/images/4/4a/Galilar_hud.png/revision/latest/scale-to-width-down/400", 29 | m4a1_silencer: "http://vignette3.wikia.nocookie.net/cswikia/images/4/4f/M4a1s_hud_csgo.png/revision/latest/scale-to-width-down/400", 30 | m4a1: "http://vignette2.wikia.nocookie.net/cswikia/images/d/d9/M4a4_hud.png/revision/latest/scale-to-width-down/400", 31 | sg556: "http://vignette1.wikia.nocookie.net/cswikia/images/9/9b/Sg556_hud_csgo.png/revision/latest/scale-to-width-down/400", 32 | awp: "http://vignette3.wikia.nocookie.net/cswikia/images/e/eb/Awp_hud_csgo.png/revision/latest/scale-to-width-down/400", 33 | g3sg1: "http://vignette4.wikia.nocookie.net/cswikia/images/4/4a/G3sg1_hud_csgo.png/revision/latest/scale-to-width-down/400", 34 | ssg08: "http://vignette4.wikia.nocookie.net/cswikia/images/3/3c/Ssg08_hud_csgo.png/revision/latest/scale-to-width-down/400", 35 | scar20: "http://vignette4.wikia.nocookie.net/cswikia/images/c/c9/Scar20_hud_csgo.png/revision/latest/scale-to-width-down/400", 36 | m249: "http://vignette2.wikia.nocookie.net/cswikia/images/e/ea/M249_hud_csgo.png/revision/latest/scale-to-width-down/400", 37 | negev: "http://vignette2.wikia.nocookie.net/cswikia/images/b/be/Negev_hud.png/revision/latest/scale-to-width-down/400", 38 | 39 | c4: "http://vignette1.wikia.nocookie.net/cswikia/images/f/fc/C4_ticking_source.png/revision/latest/scale-to-width-down/400", 40 | hegrenade: "http://vignette1.wikia.nocookie.net/cswikia/images/6/60/Ammo_hegrenade_css.png/revision/latest/scale-to-width-down/400", 41 | molotov: "http://vignette3.wikia.nocookie.net/cswikia/images/f/fc/Molotov_hud_csgo.png/revision/latest/scale-to-width-down/400", 42 | flashbang: "http://vignette2.wikia.nocookie.net/cswikia/images/a/af/Flashbang_hud_csgo.png/revision/latest/scale-to-width-down/400", 43 | decoy: "http://vignette1.wikia.nocookie.net/cswikia/images/7/78/Decoy_hud.png/revision/latest/scale-to-width-down/400", 44 | smokegrenade: "http://vignette3.wikia.nocookie.net/cswikia/images/4/48/Smokegrenade_hud_csgo.png/revision/latest/scale-to-width-down/400", 45 | incgrenade: "http://vignette2.wikia.nocookie.net/cswikia/images/4/45/Incgrenade_hud_csgo.png/revision/latest/scale-to-width-down/400", 46 | 47 | knife: "http://vignette2.wikia.nocookie.net/cswikia/images/4/4b/Knife_ct_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 48 | knife_t: "http://vignette3.wikia.nocookie.net/cswikia/images/2/28/Knife_t_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 49 | knife_bayonet: "http://vignette2.wikia.nocookie.net/cswikia/images/2/28/Csgo_knife_Bayonet.png/revision/latest/scale-to-width-down/400", 50 | knife_butterfly: "http://vignette2.wikia.nocookie.net/cswikia/images/d/df/Knife_butterfly_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 51 | knife_falchion: "http://vignette4.wikia.nocookie.net/cswikia/images/7/7e/Falchion_Knife_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 52 | knife_flip: "http://vignette3.wikia.nocookie.net/cswikia/images/a/a4/Knife_flip_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 53 | knife_gut: "http://vignette2.wikia.nocookie.net/cswikia/images/f/ff/Knife_gut_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 54 | knife_tactical: "http://vignette2.wikia.nocookie.net/cswikia/images/5/53/Knife_hustman_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 55 | knife_karambit: "http://vignette4.wikia.nocookie.net/cswikia/images/5/57/Knife_karambit_hud_outline_csgo.png/revision/latest/scale-to-width-down/400", 56 | knife_m9_bayonet: "http://vignette4.wikia.nocookie.net/cswikia/images/d/d3/Csgo_knife_M9_Bayonet.png/revision/latest/scale-to-width-down/400", 57 | knife_shadow_dagger: "http://vignette4.wikia.nocookie.net/cswikia/images/f/f1/Knife_push_hud_outline_csgo.png/revision/latest/scale-to-width-down/400" 58 | 59 | } 60 | 61 | 62 | var tickinterval; 63 | 64 | var roundtime = 0; 65 | var bombtime = 0; 66 | 67 | io.on("update", function(status) { 68 | json = JSON.parse(status); 69 | if (typeof json.extra == "undefined") return; 70 | 71 | $(".t-score").html(json.map.team_t.score); 72 | $(".ct-score").html(json.map.team_ct.score); 73 | 74 | $(".name").html(json.player.name); 75 | 76 | roundtime = json.extra.round.timestart; 77 | bombtime = json.extra.round.bomb.timestart; 78 | 79 | updateWeapons(); 80 | 81 | if(!tickinterval) { 82 | tickinterval = setInterval(tick, 300); 83 | } 84 | 85 | }); 86 | 87 | 88 | function updateWeapons() { 89 | var html = ""; 90 | var g = 1; 91 | 92 | $("td.pic").html(""); 93 | $("td.ammo").html(""); 94 | 95 | for (var key in json.player.weapons) { 96 | var gren = false; 97 | if (json.player.weapons.hasOwnProperty(key)) { 98 | var weapon = json.player.weapons[key]; 99 | var name = weapon.name.replace("weapon_", ""); 100 | console.log(weapon); 101 | var type = weapon.type.toLowerCase(); 102 | var clazz = ".rifle"; 103 | if(type === "pistol") 104 | clazz = ".pistol"; 105 | else if(type === "c4") 106 | clazz = ".c4"; 107 | else if(type === "knife") 108 | clazz = ".knife"; 109 | else if(type === "grenade") { 110 | clazz = ".g" + g; 111 | gren = true; 112 | g++; 113 | } 114 | else 115 | clazz = ".rifle"; 116 | 117 | $(clazz + " td.pic").html(""); 118 | if(gren) { 119 | if(weapon.ammo_reserve > 1) { 120 | $(clazz + " td.ammo").html("x"+weapon.ammo_reserve); 121 | } 122 | } else { 123 | $(clazz + " td.ammo").html(weapon.ammo_clip+ "/" + weapon.ammo_reserve); 124 | } 125 | $(clazz + " td.reload").html(weapon.ammo_clip < 7 ? "Reload" : ""); 126 | 127 | } 128 | } 129 | } 130 | 131 | 132 | var flashing = false; 133 | 134 | function tick() { 135 | if (typeof json.extra == "undefined") return; 136 | 137 | var btime = json.extra.round.bomb.maxTime - parseInt(new Date().getTime() / 1000 - bombtime); 138 | var rtime = json.extra.round.maxTime - parseInt(new Date().getTime() / 1000 - roundtime); 139 | 140 | if (json.extra.round.bomb.planted) { 141 | $(".time").html(btime); 142 | $(".time").css("font-size", "15em"); 143 | $(".timelabel").html("Bomb Planted"); 144 | 145 | if (btime < 0) { 146 | flashing = false; 147 | } else if (btime <= 5) { 148 | flash(); 149 | } else if (btime <= 10) { 150 | $(".color").css('background-color', "red"); 151 | } else { 152 | $(".color").css('background-color', 'orange'); 153 | } 154 | } else { 155 | var min = 0; 156 | var sec = 0; 157 | 158 | if (rtime > 59) { 159 | min = 1; 160 | sec = rtime - 59; 161 | } else { 162 | sec = rtime; 163 | } 164 | 165 | $(".time").css("font-size", "7em"); 166 | 167 | if (json.round.phase === 'freezetime') { 168 | $(".timelabel").html("Freeze Time"); 169 | } else if (json.round.phase === 'live') { 170 | $(".timelabel").html("Round Time"); 171 | } else if (json.round.phase === 'over') { 172 | $(".timelabel").html("Round Over"); 173 | } 174 | 175 | $(".time").html(min > 0 ? min + ":" + sec : sec); 176 | $(".color").css('background-color', 'lightblue'); 177 | } 178 | } 179 | 180 | function flash() { 181 | $(".color").css('background-color', function() { 182 | this.switch = !this.switch; 183 | return this.switch ? "red" : "orange"; 184 | }); 185 | /*if (json.extra.round.bomb.planted) { 186 | setTimeout(flash, 200); 187 | }*/ 188 | } 189 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | http = require('http'); 2 | fs = require('fs'); 3 | 4 | var version = "1.0.4"; 5 | var csgoport = 3000; 6 | var webport = 2626; 7 | 8 | var app = require('express')(); 9 | var express = require('http').Server(app); 10 | var io = require('socket.io')(express); 11 | 12 | console.log() 13 | console.log("\tStarting CSGO Data Integration HUD "+version+" by Double0negative"); 14 | console.log("\thttps://github.com/Double0negative/CSGO-HUD"); 15 | 16 | app.set('view engine', 'jade'); 17 | 18 | app.get('/', function(req, res) { 19 | res.render('index'); 20 | }); 21 | 22 | app.get('/main.js', function(req, res) { 23 | res.sendFile(__dirname +'/public/js/main.js'); 24 | }); 25 | 26 | app.get('/style.css', function(req, res) { 27 | res.sendFile(__dirname +'/public/css/style.css'); 28 | }); 29 | 30 | io.on('connection', function(socket) { 31 | 32 | }); 33 | 34 | express.listen(webport, function() { 35 | console.log('\n\tOpen http://localhost:'+webport+' in a browser to connect to HUD'); 36 | console.log('\n'); 37 | }); 38 | 39 | server = http.createServer(function(req, res) { 40 | 41 | if (req.method == 'POST') { 42 | res.writeHead(200, { 43 | 'Content-Type': 'text/html' 44 | }); 45 | 46 | var body = ''; 47 | req.on('data', function(data) { 48 | body += data; 49 | }); 50 | req.on('end', function() { 51 | //console.log("POST payload: " + body); 52 | update(JSON.parse(body)); 53 | res.end(''); 54 | }); 55 | 56 | } else { 57 | res.writeHead(200, { 58 | 'Content-Type': 'text/html' 59 | }); 60 | var html = 'yes'; 61 | res.end(html); 62 | } 63 | 64 | }); 65 | 66 | var map; 67 | var player; 68 | 69 | var round = { 70 | phase: "", 71 | timestart: 0, 72 | time: 0, 73 | maxTime: 0, 74 | bomb: { 75 | planted: false, 76 | timestart: 0, 77 | time: 0, 78 | maxTime: 40 79 | } 80 | }; 81 | 82 | function update(json) { 83 | if (json.round) { 84 | if (!(round.phase === json.round.phase)) { 85 | round.timestart = json.provider.timestamp; 86 | round.phase = json.round.phase; 87 | } 88 | 89 | var maxTime = 0; 90 | if (json.round.phase === 'live') { 91 | maxTime = 115; 92 | } else if (round.phase === 'freezetime') { 93 | maxTime = 15; 94 | } else { 95 | maxTime = 7; 96 | } 97 | round.time = maxTime - (new Date().getTime() / 1000 - round.timestart); 98 | round.maxTime = maxTime; 99 | 100 | if (!round.bomb.planted && json.round.bomb === 'planted') { 101 | round.bomb.planted = true; 102 | round.bomb.timestart = json.provider.timestamp; 103 | } else if (round.bomb.planted && json.round.bomb !== 'planted') { 104 | round.bomb.planted = false; 105 | } 106 | 107 | if (round.bomb.planted) { 108 | round.bomb.time = 40 - (new Date().getTime() / 1000 - round.bomb.timestart); 109 | } 110 | 111 | json.extra = {}; 112 | json.extra.round = round; 113 | } 114 | 115 | io.emit("update", JSON.stringify(json)); 116 | } 117 | 118 | server.listen(csgoport); 119 | -------------------------------------------------------------------------------- /views/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | title pageTitle 5 | script(src="https://cdn.socket.io/socket.io-1.3.7.js") 6 | script(src="http://code.jquery.com/jquery-2.1.4.min.js") 7 | script(src="/main.js") 8 | link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet') 9 | link(href='/style.css', rel='stylesheet') 10 | body 11 | div.color 12 | div.wrap 13 | div.score-wrap 14 | table.score 15 | tr 16 | td CT 17 | td T 18 | tr 19 | td.ct-score 0 20 | td.t-score 0 21 | div.container 22 | div.timelabel Round Time 23 | dev.time 1:55 24 | div.container 25 | div.name Waiting for data 26 | div.container 27 | div.weapon 28 | ul 29 | li.rifle 30 | table 31 | tr 32 | td.pic 33 | tr 34 | td.ammo 35 | li.pistol 36 | table 37 | tr 38 | td.pic 39 | tr 40 | td.ammo 41 | 42 | li.knife 43 | table 44 | tr 45 | td.pic 46 | div.grenade 47 | ul 48 | li.g1 49 | table 50 | tr 51 | td.pic 52 | td.ammo 53 | li.g2 54 | table 55 | tr 56 | td.pic 57 | td.ammo 58 | li.g3 59 | table 60 | tr 61 | td.pic 62 | td.ammo 63 | li.g4 64 | table 65 | tr 66 | td.pic 67 | td.ammo --------------------------------------------------------------------------------