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;
}
/* ######################################## */