From 088d2db48cf5230ea28f9a2299484f7072232b18 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 14 Jun 2023 13:52:38 +0200
Subject: [PATCH] added fps counter which can be enabled in the command line

---
 frontend/src/styles/core.scss           | 18 +++++++++
 frontend/src/ts/commandline/commands.ts | 28 +++++++++++++
 frontend/src/ts/elements/fps-counter.ts | 52 +++++++++++++++++++++++++
 frontend/src/ts/index.ts                |  1 +
 frontend/static/main.html               |  2 +-
 5 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/ts/elements/fps-counter.ts

diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index 0426d10b6..a1313b4dd 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -514,3 +514,21 @@ key {
   box-shadow: 0 0 0 0.5em var(--bg-color);
   transition: 0.125s;
 }
+
+#fpsCounter {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: var(--sub-alt-color);
+  color: rgb(255, 217, 0);
+  padding: 0.25rem;
+  width: 10ch;
+  text-align: center;
+  z-index: 999999999;
+  &.main {
+    color: rgb(30, 255, 0);
+  }
+  &.error {
+    color: red;
+  }
+}
diff --git a/frontend/src/ts/commandline/commands.ts b/frontend/src/ts/commandline/commands.ts
index 835f1ea44..ad0ca7728 100644
--- a/frontend/src/ts/commandline/commands.ts
+++ b/frontend/src/ts/commandline/commands.ts
@@ -100,6 +100,7 @@ import * as VideoAdPopup from "../popups/video-ad-popup";
 import * as ShareTestSettingsPopup from "../popups/share-test-settings-popup";
 import * as TestStats from "../test/test-stats";
 import * as QuoteSearchPopup from "../popups/quote-search-popup";
+import * as FPSCounter from "../elements/fps-counter";
 
 Misc.getLayoutsList()
   .then((layouts) => {
@@ -429,6 +430,33 @@ export const commands: MonkeyTypes.CommandsSubgroup = {
           });
       },
     },
+    {
+      id: "fpsCounter",
+      display: "FPS counter...",
+      icon: "fa-cog",
+      visible: false,
+      subgroup: {
+        title: "FPS counter...",
+        list: [
+          {
+            id: "startFpsCounter",
+            display: "show",
+            icon: "fa-cog",
+            exec: (): void => {
+              FPSCounter.start();
+            },
+          },
+          {
+            id: "stopFpsCounter",
+            display: "hide",
+            icon: "fa-cog",
+            exec: (): void => {
+              FPSCounter.stop();
+            },
+          },
+        ],
+      },
+    },
     {
       id: "joinDiscord",
       display: "Join the Discord server",
diff --git a/frontend/src/ts/elements/fps-counter.ts b/frontend/src/ts/elements/fps-counter.ts
new file mode 100644
index 000000000..6ac3a2103
--- /dev/null
+++ b/frontend/src/ts/elements/fps-counter.ts
@@ -0,0 +1,52 @@
+import { roundTo2 } from "../utils/misc";
+
+let frameCount = 0;
+let fpsInterval: number;
+let startTime: number;
+let stopLoop = true;
+const el = document.querySelector("#fpsCounter") as HTMLElement;
+
+function loop(timestamp: number): void {
+  if (stopLoop) return;
+  const elapsedTime = timestamp - startTime;
+  frameCount++;
+
+  if (elapsedTime > 500) {
+    const fps = roundTo2((frameCount * 1000) / elapsedTime).toFixed(2);
+    frameCount = 0;
+    startTime = timestamp;
+    updateElement(fps);
+  }
+
+  window.requestAnimationFrame(loop);
+}
+
+export function start(): void {
+  stopLoop = false;
+  frameCount = 0;
+  startTime = performance.now();
+  fpsInterval = window.requestAnimationFrame(loop);
+  el.classList.remove("hidden");
+}
+
+export function stop(): void {
+  cancelAnimationFrame(fpsInterval);
+  stopLoop = true;
+  el.classList.add("hidden");
+}
+
+async function updateElement(fps: string): Promise<void> {
+  el.innerHTML = `FPS ${fps}`;
+  const parsed = parseFloat(fps);
+  el.classList.remove("error");
+  el.classList.remove("main");
+  if (parsed < 30) {
+    el.classList.add("error");
+  } else if (parsed > 55) {
+    el.classList.add("main");
+  }
+}
+
+export function getAverageFps(): number {
+  return frameCount / (performance.now() - startTime);
+}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index ba2827ad1..59ed23e84 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -39,6 +39,7 @@ import "./elements/no-css";
 import { egVideoListener } from "./popups/video-ad-popup";
 import "./states/connection";
 import "./test/tts";
+import "./elements/fps-counter";
 
 type ExtendedGlobal = typeof globalThis & MonkeyTypes.Global;
 
diff --git a/frontend/static/main.html b/frontend/static/main.html
index d8f92e285..18d314bbb 100644
--- a/frontend/static/main.html
+++ b/frontend/static/main.html
@@ -4,7 +4,7 @@
 
   <body>
     <%= compilation.assets["html/warnings.html"].source() %>
-
+    <div id="fpsCounter" class="hidden"></div>
     <div class="customBackground"></div>
     <div id="backgroundLoader" style="display: none"></div>
     <div id="bannerCenter" class="focus"></div>