FPS debug mode

This commit is contained in:
Robert Bendun 2021-04-26 21:15:22 +02:00
parent 8cd815418f
commit 62a761d270
3 changed files with 40 additions and 5 deletions

View File

@ -34,6 +34,10 @@
</head> </head>
<body> <body>
<div id="fps">
30
</div>
<main> <main>
<div class="header"> <div class="header">

View File

@ -3,9 +3,32 @@ window.addEventListener('DOMContentLoaded', () => document.fonts.ready.then(() =
const gridCanvas = document.getElementById('canvas-grid'); const gridCanvas = document.getElementById('canvas-grid');
const agentCanvas = document.getElementById('canvas-agent'); const agentCanvas = document.getElementById('canvas-agent');
const productsCanvas = document.getElementById('canvas-products'); const productsCanvas = document.getElementById('canvas-products');
const floor = new Floor(floorCanvas); const floor = new Floor(floorCanvas);
const grid = new Grid(gridCanvas); const grid = new Grid(gridCanvas);
const agent = new Agent(agentCanvas); const agent = new Agent(agentCanvas);
const products = new Products(productsCanvas); const products = new Products(productsCanvas);
}));
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);
})();
}

View File

@ -2,6 +2,14 @@
/* # Main styling # */ /* # Main styling # */
/* ######################################## */ /* ######################################## */
#fps {
position: absolute;
right: 10px;
top: 10px;
color: white;
font-size: 30px;
}
html, body { html, body {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
@ -61,13 +69,13 @@ main {
.logs-content::-webkit-scrollbar { .logs-content::-webkit-scrollbar {
width: 10px; width: 10px;
} }
.logs-content::-webkit-scrollbar-track { .logs-content::-webkit-scrollbar-track {
background: #222; background: #222;
} }
.logs-content::-webkit-scrollbar-thumb { .logs-content::-webkit-scrollbar-thumb {
background: #ddd; background: #ddd;
} }
/* ######################################## */ /* ######################################## */