monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-17 19:15:59 +08:00
Code Issues Projects Releases Packages Wiki Activity

added fps counter which can be enabled in the command line

Browse source
This commit is contained in:
Miodec 2023-06-14 13:52:38 +02:00
parent 8b7080a4cd
commit 088d2db48c
5 changed files with 100 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/styles/core.scss
View file

@ -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;
}
}

28
frontend/src/ts/commandline/commands.ts
View file

@ -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",

52
frontend/src/ts/elements/fps-counter.ts Normal file
View file

@ -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);
}

1
frontend/src/ts/index.ts
View file

@ -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;

2
frontend/static/main.html
View file

@ -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>