diff --git a/.gitignore b/.gitignore index 206937a..e8004a1 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,5 @@ **/Release **/Debug app/yarn.lock + +app/test/ diff --git a/app/assets/scss/.ignore/_components.scss b/app/assets/scss/.ignore/_components.scss index bd358ac..842c8ca 100644 --- a/app/assets/scss/.ignore/_components.scss +++ b/app/assets/scss/.ignore/_components.scss @@ -1,3 +1,5 @@ @import './components/button'; @import './components/checkbox'; @import './components/sidebar'; +@import './components/radar'; +@import './components/map'; diff --git a/app/assets/scss/.ignore/components/_map.scss b/app/assets/scss/.ignore/components/_map.scss new file mode 100644 index 0000000..fc4ac02 --- /dev/null +++ b/app/assets/scss/.ignore/components/_map.scss @@ -0,0 +1,25 @@ +.map { + position: relative; + width: 100vh; + + &_image { + display: none; + } + + &_no { + align-items: center; + display: flex; + height: 100vh; + justify-content: center; + left: 0; + position: absolute; + top: 0; + width: 100vh; + z-index: 200; + + & > div { + font-size: 4rem; + letter-spacing: 1.5; + } + } +} diff --git a/app/assets/scss/.ignore/components/_radar.scss b/app/assets/scss/.ignore/components/_radar.scss new file mode 100644 index 0000000..c4a182e --- /dev/null +++ b/app/assets/scss/.ignore/components/_radar.scss @@ -0,0 +1,59 @@ +.entity { + color: #ffffff; + font-family: 'Staatliches', sans-serif !important; + letter-spacing: 1px; + position: absolute; + text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, + -1px -1px 1px black; + + & .dot { + border: 1px solid black; + border-radius: 50%; + display: none; + height: 10px; + width: 10px; + + &.enemy { + background-color: red; + } + + &.local { + background-color: green; + } + + &.team { + background-color: blue; + } + } + + & .health { + display: none; + position: absolute; + } + + & .name { + display: none; + position: absolute; + } + + & .weapon { + display: none; + position: absolute; + } +} + +#players { + left: 0; + width: 100vh; + position: absolute; + top: 0; + z-index: 100; +} + +#radar { + position: relative; +} + +.resize { + height: 100vh; +} diff --git a/app/assets/scss/.ignore/components/_sidebar.scss b/app/assets/scss/.ignore/components/_sidebar.scss index dbe9fed..4359134 100644 --- a/app/assets/scss/.ignore/components/_sidebar.scss +++ b/app/assets/scss/.ignore/components/_sidebar.scss @@ -1,29 +1,142 @@ .sidebar { - width: 100%; height: 100%; + width: 100%; - &_title { - font-size: 2rem; - padding-bottom: 3rem; + &_close { + display: none; + font-size: 20px; + padding: 0 5px 0 5px; + transition: ease-in-out 0.3s; + + &:hover { + color: white; + } } &_tab { padding: 1rem 0; + &_content { + padding: 0.5rem 0; + } + &_title { + border-bottom: 1px solid $sBorder; font-size: 1.5rem; padding-bottom: 0.5rem; - border-bottom: 1px solid $sBorder; } + } - &_content { - padding: 0.5rem 0; + &_title { + align-items: center; + display: flex; + flex-direction: row; + font-size: 2rem; + justify-content: space-between; + padding-bottom: 3rem; + } +} + +.left { + left: 0; + padding-right: 1rem; + top: 0; +} + +.right { + padding-left: 1rem; + right: 0; + top: 0; +} + +.sidebar_toggle { + align-items: center; + background-color: $pBG; + cursor: pointer; + display: none; + height: 100%; + justify-content: center; + position: absolute; + width: 50px; + z-index: 500; + + &.left { + border-right: 1px solid $sBorder; + padding: 0; + + &::after { + content: '⫸'; + font-size: 36px; } } + + &.right { + border-left: 1px solid $sBorder; + padding: 0; + + &::after { + content: '⫷'; + font-size: 36px; + } + } +} + +.animate_left { + animation: fade_in_left 1s; + animation-fill-mode: forwards; + z-index: 500; +} + +.animate_right { + animation: fade_in_right 1s; + animation-fill-mode: forwards; + z-index: 500; +} + +@keyframes fade_in_left { + 0% { + left: -50%; + } + + 100% { + left: 0%; + } +} + +@keyframes fade_in_right { + 0% { + right: -50%; + } + + 100% { + right: 0%; + } } @media only screen and (max-width: 1399.98px) { .sidebar { - //width: 0; + background-color: rgba(0, 0, 0, 0.5); + margin-right: auto; + margin-left: auto; + padding-right: 1rem; + padding-left: 1rem; + position: absolute; + width: 50%; + + &_close { + display: block; + } + + &.left { + left: -50%; + } + + &.right { + right: -50%; + } + } + + .sidebar_toggle { + display: flex; } } diff --git a/app/assets/scss/.ignore/layouts/_body.scss b/app/assets/scss/.ignore/layouts/_body.scss index 70b0736..cc4ff50 100644 --- a/app/assets/scss/.ignore/layouts/_body.scss +++ b/app/assets/scss/.ignore/layouts/_body.scss @@ -4,6 +4,13 @@ body { color: darken($pColor, 30%); font-family: 'Quicksand', sans-serif !important; height: 100%; + overflow-x: hidden; + position: relative; + text-decoration: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + -ms-user-select: none; width: 100%; } diff --git a/app/assets/scss/main.scss b/app/assets/scss/main.scss index b46a6e4..18b3bc0 100644 --- a/app/assets/scss/main.scss +++ b/app/assets/scss/main.scss @@ -5,89 +5,3 @@ @import './.ignore/layouts'; @import './.ignore/components'; - -#radar { - position: relative; - height: 100vh; -} - -#players { - left: 0; - height: 100vh; - width: 100vh; - position: absolute; - top: 0; - z-index: 100; -} - -.entity { - color: #ffffff; - font-family: 'Staatliches', sans-serif !important; - letter-spacing: 1px; - position: absolute; - text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, - -1px -1px 1px black; - - & .dot { - border: 1px solid black; - border-radius: 50%; - display: none; - height: 10px; - width: 10px; - - &.enemy { - background-color: red; - } - - &.local { - background-color: green; - } - - &.team { - background-color: blue; - } - } - - & .health { - display: none; - position: absolute; - } - - & .name { - display: none; - position: absolute; - } - - & .weapon { - display: none; - position: absolute; - } -} - -.map { - height: 100vh; - position: relative; - width: 100vh; - - &_image { - display: none; - height: 100vh; - } - - &_no { - align-items: center; - display: flex; - height: 100vh; - justify-content: center; - left: 0; - position: absolute; - top: 0; - width: 100vh; - z-index: 200; - - & > div { - font-size: 4rem; - letter-spacing: 1.5; - } - } -} diff --git a/app/package.json b/app/package.json index 6102720..6cc693d 100644 --- a/app/package.json +++ b/app/package.json @@ -14,6 +14,7 @@ "@node-steam/vdf": "^2.1.0", "axios": "^0.20.0", "express": "^4.17.1", + "image-to-base64": "^2.1.1", "socket.io": "^2.3.0" }, "devDependencies": { diff --git a/app/public/css/main.min.css b/app/public/css/main.min.css index b2366d4..333656c 100644 --- a/app/public/css/main.min.css +++ b/app/public/css/main.min.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");html,body{background-color:#191919;color:#b3b3b3;font-family:'Quicksand', sans-serif !important;height:100%;width:100%}a{color:#b3b3b3;padding-bottom:2px;position:relative;text-decoration:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}a:hover{color:#fff}a:hover:after{width:100%}a:after{background-color:#4285f4;bottom:0;content:'';height:2px;left:0;position:absolute;width:0;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.a-none{-webkit-transition:none;transition:none}.a-none:hover:after{display:none}.a-none:after{display:none}._button-default{border:none;border-bottom:2px solid #4285f4;border-radius:0;background-color:transparent;color:#b3b3b3}._button-default:hover{background-color:#4285f4;color:#fff}._button-default:disabled{border-bottom:2px solid #c00;color:#b3b3b3}._button-default:disabled:hover{background-color:transparent;cursor:default}@media (max-width: 575.98px){.btn-xs-block{width:100% !important;display:block !important}}@media (max-width: 767.98px){.btn-sm-block{width:100% !important;display:block !important}}@media (max-width: 991.98px){.btn-md-block{width:100% !important;display:block !important}}@media (max-width: 1199.98px){.btn-lg-block{width:100% !important;display:block !important}}._checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 5px 5px 0}._checkbox ._box{position:relative;width:24px;height:24px;border:1px solid #000;background-color:#292929}._checkbox ._box:hover{cursor:pointer}._checkbox ._box:hover ~ ._label{color:#fff}._checkbox ._box:hover:after{opacity:0.4}._checkbox ._box:after{-webkit-transition:0.3s ease;transition:0.3s ease;position:absolute;content:'';width:14px;height:14px;top:0;left:0;margin:4px;background-color:#4285f4;border:1px solid #000;opacity:0}._checkbox ._box._checkbox_active:after{opacity:1}._checkbox ._label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-left:5px;color:#b3b3b3;-webkit-transition:0.3s ease;transition:0.3s ease}._checkbox ._label:hover{cursor:default;color:#fff}.sidebar{width:100%;height:100%}.sidebar_title{font-size:2rem;padding-bottom:3rem}.sidebar_tab{padding:1rem 0}.sidebar_tab_title{font-size:1.5rem;padding-bottom:0.5rem;border-bottom:1px solid #666}.sidebar_tab_content{padding:0.5rem 0}#radar{position:relative;height:100vh}#players{left:0;height:100vh;width:100vh;position:absolute;top:0;z-index:100}.entity{color:#ffffff;font-family:'Staatliches', sans-serif !important;letter-spacing:1px;position:absolute;text-shadow:1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black}.entity .dot{border:1px solid black;border-radius:50%;display:none;height:10px;width:10px}.entity .dot.enemy{background-color:red}.entity .dot.local{background-color:green}.entity .dot.team{background-color:blue}.entity .health{display:none;position:absolute}.entity .name{display:none;position:absolute}.entity .weapon{display:none;position:absolute}.map{height:100vh;position:relative;width:100vh}.map_image{display:none;height:100vh}.map_no{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;position:absolute;top:0;width:100vh;z-index:200}.map_no>div{font-size:4rem;letter-spacing:1.5} +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");html,body{background-color:#191919;color:#b3b3b3;font-family:'Quicksand', sans-serif !important;height:100%;overflow-x:hidden;position:relative;text-decoration:none;-moz-user-select:none;-webkit-user-select:none;user-select:none;-ms-user-select:none;width:100%}a{color:#b3b3b3;padding-bottom:2px;position:relative;text-decoration:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}a:hover{color:#fff}a:hover:after{width:100%}a:after{background-color:#4285f4;bottom:0;content:'';height:2px;left:0;position:absolute;width:0;-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.a-none{-webkit-transition:none;transition:none}.a-none:hover:after{display:none}.a-none:after{display:none}._button-default{border:none;border-bottom:2px solid #4285f4;border-radius:0;background-color:transparent;color:#b3b3b3}._button-default:hover{background-color:#4285f4;color:#fff}._button-default:disabled{border-bottom:2px solid #c00;color:#b3b3b3}._button-default:disabled:hover{background-color:transparent;cursor:default}@media (max-width: 575.98px){.btn-xs-block{width:100% !important;display:block !important}}@media (max-width: 767.98px){.btn-sm-block{width:100% !important;display:block !important}}@media (max-width: 991.98px){.btn-md-block{width:100% !important;display:block !important}}@media (max-width: 1199.98px){.btn-lg-block{width:100% !important;display:block !important}}._checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:5px 5px 5px 0}._checkbox ._box{position:relative;width:24px;height:24px;border:1px solid #000;background-color:#292929}._checkbox ._box:hover{cursor:pointer}._checkbox ._box:hover ~ ._label{color:#fff}._checkbox ._box:hover:after{opacity:0.4}._checkbox ._box:after{-webkit-transition:0.3s ease;transition:0.3s ease;position:absolute;content:'';width:14px;height:14px;top:0;left:0;margin:4px;background-color:#4285f4;border:1px solid #000;opacity:0}._checkbox ._box._checkbox_active:after{opacity:1}._checkbox ._label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-left:5px;color:#b3b3b3;-webkit-transition:0.3s ease;transition:0.3s ease}._checkbox ._label:hover{cursor:default;color:#fff}.sidebar{height:100%;width:100%}.sidebar_close{display:none;font-size:20px;padding:0 5px 0 5px;-webkit-transition:ease-in-out 0.3s;transition:ease-in-out 0.3s}.sidebar_close:hover{color:white}.sidebar_tab{padding:1rem 0}.sidebar_tab_content{padding:0.5rem 0}.sidebar_tab_title{border-bottom:1px solid #666;font-size:1.5rem;padding-bottom:0.5rem}.sidebar_title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:2rem;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:3rem}.left{left:0;padding-right:1rem;top:0}.right{padding-left:1rem;right:0;top:0}.sidebar_toggle{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#191919;cursor:pointer;display:none;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:50px;z-index:500}.sidebar_toggle.left{border-right:1px solid #666;padding:0}.sidebar_toggle.left::after{content:'⫸';font-size:36px}.sidebar_toggle.right{border-left:1px solid #666;padding:0}.sidebar_toggle.right::after{content:'⫷';font-size:36px}.animate_left{-webkit-animation:fade_in_left 1s;animation:fade_in_left 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;z-index:500}.animate_right{-webkit-animation:fade_in_right 1s;animation:fade_in_right 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;z-index:500}@-webkit-keyframes fade_in_left{0%{left:-50%}100%{left:0%}}@keyframes fade_in_left{0%{left:-50%}100%{left:0%}}@-webkit-keyframes fade_in_right{0%{right:-50%}100%{right:0%}}@keyframes fade_in_right{0%{right:-50%}100%{right:0%}}@media only screen and (max-width: 1399.98px){.sidebar{background-color:rgba(0,0,0,0.5);margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;position:absolute;width:50%}.sidebar_close{display:block}.sidebar.left{left:-50%}.sidebar.right{right:-50%}.sidebar_toggle{display:-webkit-box;display:-ms-flexbox;display:flex}}.entity{color:#ffffff;font-family:'Staatliches', sans-serif !important;letter-spacing:1px;position:absolute;text-shadow:1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black}.entity .dot{border:1px solid black;border-radius:50%;display:none;height:10px;width:10px}.entity .dot.enemy{background-color:red}.entity .dot.local{background-color:green}.entity .dot.team{background-color:blue}.entity .health{display:none;position:absolute}.entity .name{display:none;position:absolute}.entity .weapon{display:none;position:absolute}#players{left:0;width:100vh;position:absolute;top:0;z-index:100}#radar{position:relative}.resize{height:100vh}.map{position:relative;width:100vh}.map_image{display:none}.map_no{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;position:absolute;top:0;width:100vh;z-index:200}.map_no>div{font-size:4rem;letter-spacing:1.5} diff --git a/app/public/images/images are getting dynamically created here b/app/public/images/images are getting dynamically created here deleted file mode 100644 index e69de29..0000000 diff --git a/app/public/index.html b/app/public/index.html index a77abe4..b5f4fab 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -15,24 +15,32 @@
-
-
FACEIT_EXTERNAL
+
+
+
+
+
Radar
+
✖
+
something
-
-
-
+
+
+
NO MAP LOADED
- +
-
-
SETTINGS
+
+
+
SETTINGS
+
✖
+
Enemy
@@ -134,6 +142,7 @@ + diff --git a/app/public/js/components/sidebar.js b/app/public/js/components/sidebar.js new file mode 100644 index 0000000..9f18447 --- /dev/null +++ b/app/public/js/components/sidebar.js @@ -0,0 +1,31 @@ +let sidebar = { + animate: function (element) { + if (element.classList.contains('left')) { + let _sidebar = document.querySelectorAll('.sidebar.left')[0]; + _sidebar.classList.add('animate_left'); + } else if (element.classList.contains('right')) { + let _sidebar = document.querySelectorAll('.sidebar.right')[0]; + _sidebar.classList.add('animate_right'); + } + }, + + close: function (element) { + let _sidebar = element.offsetParent; + if (_sidebar.classList.contains('left')) { + _sidebar.classList.remove('animate_left'); + } else if (_sidebar.classList.contains('right')) { + _sidebar.classList.remove('animate_right'); + } + }, +}; + +let closers = document.getElementsByClassName('sidebar_close'); +let togglers = document.getElementsByClassName('sidebar_toggle'); +for (var i = 0; i < togglers.length; i++) { + togglers[i].addEventListener('click', function () { + sidebar.animate(this); + }); + closers[i].addEventListener('click', function () { + sidebar.close(this); + }); +} diff --git a/app/public/js/drawing.js b/app/public/js/drawing.js index 949bd4d..cfac60f 100644 --- a/app/public/js/drawing.js +++ b/app/public/js/drawing.js @@ -412,8 +412,13 @@ let drawing = { y *= -1.0; // the map is a square so don't even bother with dynamic width and shit (not working on mobile atm) - x *= window.innerHeight; - y *= window.innerHeight; + if (window.innerWidth < window.innerHeight) { + x *= window.innerWidth; + y *= window.innerWidth; + } else { + x *= window.innerHeight; + y *= window.innerHeight; + } return { x: x, y: y }; }, diff --git a/app/public/js/globals.js b/app/public/js/globals.js index 5e38c0f..c8e3c69 100644 --- a/app/public/js/globals.js +++ b/app/public/js/globals.js @@ -3,12 +3,12 @@ let globals = { directory: undefined, map: { name: undefined, + scale: undefined, x: undefined, y: undefined, - scale: undefined, }, - team: undefined, lastmap: undefined, + team: undefined, }, update: function (data) { diff --git a/app/public/js/main.js b/app/public/js/main.js index d58e1de..4946e1e 100644 --- a/app/public/js/main.js +++ b/app/public/js/main.js @@ -23,7 +23,39 @@ socket.on('update', (_globals, _entity) => { map.state('show', _globals.map.name); } - map.state('change', _globals.map.name); - drawing.draw(); }); + +if (this.innerWidth < this.innerHeight) { + let resize = document.getElementsByClassName('resize'); + let n = resize.length; + for (let i = 0; i < n; i++) { + resize[i].style.height = this.innerWidth + 'px'; + resize[i].style.width = this.innerWidth + 'px'; + } +} else { + let resize = document.getElementsByClassName('resize'); + let n = resize.length; + for (let i = 0; i < n; i++) { + resize[i].style.height = this.innerHeight + 'px'; + resize[i].style.width = this.innerHeight + 'px'; + } +} + +window.addEventListener('resize', function () { + if (this.innerWidth < this.innerHeight) { + let resize = document.getElementsByClassName('resize'); + let n = resize.length; + for (let i = 0; i < n; i++) { + resize[i].style.height = this.innerWidth + 'px'; + resize[i].style.width = this.innerWidth + 'px'; + } + } else { + let resize = document.getElementsByClassName('resize'); + let n = resize.length; + for (let i = 0; i < n; i++) { + resize[i].style.height = this.innerHeight + 'px'; + resize[i].style.width = this.innerHeight + 'px'; + } + } +}); diff --git a/app/server/globals.js b/app/server/globals.js index a760d3c..4b0065b 100644 --- a/app/server/globals.js +++ b/app/server/globals.js @@ -2,12 +2,12 @@ let obj = { directory: undefined, map: { name: undefined, + scale: undefined, x: undefined, y: undefined, - scale: undefined, }, - team: undefined, last_map: undefined, + team: undefined, }; module.exports = { diff --git a/app/server/server.js b/app/server/server.js index cb58689..ed25243 100644 --- a/app/server/server.js +++ b/app/server/server.js @@ -9,13 +9,16 @@ const globals = require('./globals'); const vdf = require('@node-steam/vdf'); const net = require('net'); const { execSync } = require('child_process'); - const app = express(); const server = http.createServer(app); const io = socketio(server); app.use(express.static(path.join(__dirname, '..', 'public'))); +fs.mkdir('public', () => { + fs.mkdir('public/images', () => {}); +}); + const files = { settings: 'settings.json', }; @@ -24,6 +27,7 @@ let PIPE_PATH = '\\\\.\\pipe\\23d339ddef636cb0a5b9d0be60a289bc4ae87cc62cfd12b8f322e6310c1eea66'; var process = net.connect(PIPE_PATH, (pipe) => { + console.log(); console.log('connected to pipe'); process.on('data', (pipe) => { @@ -63,11 +67,10 @@ var process = net.connect(PIPE_PATH, (pipe) => { if (globals.obj.lastmap !== data[key].map) { execSync( - `cd dependencies & texconv.exe -ft JPG -y -o ../public/images "${data[key].directory}\\resource\\overviews\\${data[key].map}_radar.dds"`, + `cd dependencies & texconv.exe -ft JPG -l -nologo -y -o ../public/images "${data[key].directory}\\resource\\overviews\\${data[key].map}_radar.dds"`, { windowsHide: true, timeout: 30000 } ); globals.obj.lastmap = data[key].map; - console.log('triggered lastmap'); } } else { // update entities @@ -75,6 +78,10 @@ var process = net.connect(PIPE_PATH, (pipe) => { } } }); + + process.on('error', (pipe) => { + console.log(error); + }); }); io.on('connection', (socket) => {