From 62a761d27002c9a7476e8f34f3b90a0a59001583 Mon Sep 17 00:00:00 2001 From: Robert Bendun Date: Mon, 26 Apr 2021 21:15:22 +0200 Subject: [PATCH] FPS debug mode --- src/index.html | 4 ++++ src/main.js | 27 +++++++++++++++++++++++++-- src/styles.css | 14 +++++++++++--- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 0634fb9..952dfb9 100644 --- a/src/index.html +++ b/src/index.html @@ -34,6 +34,10 @@ +
+ 30 +
+
diff --git a/src/main.js b/src/main.js index b253951..2e33481 100644 --- a/src/main.js +++ b/src/main.js @@ -3,9 +3,32 @@ window.addEventListener('DOMContentLoaded', () => document.fonts.ready.then(() = const gridCanvas = document.getElementById('canvas-grid'); const agentCanvas = document.getElementById('canvas-agent'); const productsCanvas = document.getElementById('canvas-products'); - + const floor = new Floor(floorCanvas); const grid = new Grid(gridCanvas); const agent = new Agent(agentCanvas); const products = new Products(productsCanvas); -})); \ No newline at end of file + + const fpsElement = document.getElementById('fps'); + if (window.location.hash == '#debug') { + displayFPS(fpsElement); + } else { + document.body.removeChild(fpsElement); + } +})); + +function displayFPS(fpsElement) { + let old = new Date(); + let i = 0; + + (function updateFPS() { + const current = new Date(); + if (i++ > 10) { + i = 0; + const fps = 1 / ((current.getTime() - old.getTime()) * 0.001); + fpsElement.innerText = Math.floor(fps); + } + old = current; + requestAnimationFrame(updateFPS); + })(); +} diff --git a/src/styles.css b/src/styles.css index 7d1af0a..15ccfb9 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,6 +2,14 @@ /* # Main styling # */ /* ######################################## */ +#fps { + position: absolute; + right: 10px; + top: 10px; + color: white; + font-size: 30px; +} + html, body { height: 100vh; width: 100%; @@ -61,13 +69,13 @@ main { .logs-content::-webkit-scrollbar { width: 10px; } - + .logs-content::-webkit-scrollbar-track { background: #222; } - + .logs-content::-webkit-scrollbar-thumb { - background: #ddd; + background: #ddd; } /* ######################################## */