From e05ae221e8b72f9b37fa5ff4f0124f8db87df68b Mon Sep 17 00:00:00 2001 From: sergystepanov Date: Sun, 26 Apr 2020 17:19:00 +0300 Subject: [PATCH] Add generic application statistics overlay (#168) * Add stat module initial example * Add stats module help overlay overlap handling * Add generic graph canvas image builder * Add more generic graphing module * Clean up the code * Some fixes * Change graphing styles * Clean some stats module code * Move to RAF rendering to burn your CPU * Add not standardized memory stats module * Fix initial stats visibility flag handle --- web/css/main.css | 54 ++++++ web/game.html | 8 +- web/js/controller.js | 22 ++- web/js/event/event.js | 5 + web/js/input/keyboard.js | 1 + web/js/input/keys.js | 1 + web/js/network/socket.js | 8 +- web/js/stats/stats.js | 348 +++++++++++++++++++++++++++++++++++++++ 8 files changed, 437 insertions(+), 10 deletions(-) create mode 100644 web/js/stats/stats.js diff --git a/web/css/main.css b/web/css/main.css index 90788603..7b555a96 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -381,6 +381,7 @@ body { } #bottom-screen { + position: absolute; /* popups under the screen fix */ z-index: -1; } @@ -391,6 +392,7 @@ body { height: 100%; display: none; background-color: #222222; + position: absolute; } @@ -598,3 +600,55 @@ body { touch-action: manipulation; } +#stats-overlay { + position: absolute; + z-index: 200; + backface-visibility: hidden; + + display: flex; + flex-direction: column; + justify-content: space-around; + + top: 1.1em; + right: 1.1em; + color: #fff; + background: #000; + opacity: .765; + padding: .5em 1em .1em 1em; + + font-family: monospace; + font-size: 40%; + + width: 70px; + + visibility: hidden; +} + +#stats-overlay > div { + display: flex; + flex-flow: wrap; + justify-content: space-between; + + margin-bottom: 1em; +} + +#stats-overlay>div>div { + display: inline-block; + font-weight: 500; + width: 4em; +} + +#stats-overlay .graph { + width: 100%; + /* artifacts with pixelated option */ + /*image-rendering: pixelated;*/ + image-rendering: optimizeSpeed; +} + +.no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} diff --git a/web/game.html b/web/game.html index 21aef599..f0198376 100644 --- a/web/game.html +++ b/web/game.html @@ -15,7 +15,7 @@ - + @@ -31,6 +31,7 @@
+