Add counters

src/index.html

@@ -36,6 +36,8 @@
       <section class="errors-container">
         <noscript>JavaScript is required for this website.</noscript>
       </section>
+
+      <div class="counters"><pre></pre></div>
     </main>
 
     <aside>

src/index.scss

@@ -8,6 +8,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  color: var(--very-light-text-color);
 
   @media (prefers-reduced-motion) {
     transition: none !important;
@@ -51,7 +52,6 @@ html {
       }
 
       > .errors-container {
-        color: red;
         position: absolute;
         top: 0;
         left: 0;
@@ -59,12 +59,26 @@ html {
 
         pre {
           font-size: 20px;
+          color: red;
+        }
+      }
+
+      .counters {
+        @include blurred-background(white);
+        position: absolute;
+        top: var(--normal-margin);
+        right: var(--normal-margin);
+        border-radius: var(--border-radius);
+        padding: var(--small-margin);
+
+        pre {
+          color: black;
         }
       }
     }
 
     > aside {
-      @include blurred-background;
+      @include blurred-background(#777);
 
       position: absolute;
       top: 50%;

src/index.ts

@@ -5,6 +5,7 @@ import { FullScreenHandler } from './page/full-screen-handler';
 import { InfoPageHandler } from './page/info-page-handler';
 import { MenuHider } from './page/menu-hider';
 import { applyArrayPlugins } from './utils/array';
+import { DeltaTimeCalculator } from './utils/delta-time-calculator';
 import { ErrorHandler, Severity } from './utils/error-handler';
 import { initializeGpu } from './utils/graphics/initialize-gpu';
 
@@ -39,6 +40,7 @@ const getElements = () => ({
   canvas: document.querySelector('canvas') as HTMLCanvasElement,
   canvasContainer: document.querySelector('main.canvas-container') as HTMLCanvasElement,
   errorContainer: document.querySelector('.errors-container') as HTMLDivElement,
+  counters: document.querySelector('.counters > pre') as HTMLPreElement,
 });
 
 const main = async () => {
@@ -70,8 +72,18 @@ const main = async () => {
 
     elements.restartButton.addEventListener('click', () => game?.destroy());
 
+    const deltaTimeCalculator = new DeltaTimeCalculator();
+
+    const updateCounters = () => {
+      elements.counters.innerHTML = `FPS: ${deltaTimeCalculator.fps.toFixed(2)}
+Gen1: ${game?.aliveAgentCounts.currentGenerationCount ?? 0}
+Gen2: ${game?.aliveAgentCounts.nextGenerationCount ?? 0}`;
+      window.requestAnimationFrame(updateCounters);
+    };
+    updateCounters();
+
     while (!shouldStop) {
-      game = new GameLoop(elements.canvas, gpu);
+      game = new GameLoop(elements.canvas, gpu, deltaTimeCalculator);
       await game.start();
     }
   } catch (e) {