import fps from "fps";

const origlog = console.log;
let count = Date.now();
console.log = function (obj, ...placeholders) {
  const now = Date.now();
  if (typeof obj === "string") placeholders.unshift("%c " + (now - count) + "ms " + "%c " + obj);
  else {
    // This handles console.log( object )
    placeholders.unshift(obj);
    placeholders.unshift(now - count + "ms %j");
  }
  count = now;
  placeholders.push("background:blue;color:#fff;display:block;width:80px;");
  placeholders.push("background:white;color:#666;");
  origlog.apply(this, placeholders);
};

const ticker = fps({
  every: 10, // update every 10 frames
});

setInterval(function () {
  ticker.tick();
}, 1000 / 60);

const element = document.createElement("div");
document.body.appendChild(element);
Object.assign(element.style, {
  background: "#fff",
  padding: "3px 10px",
  fontSize: "12px",
  color: "#333",
  position: "absolute",
  right: "10px",
  top: "10px",
  zIndex: 10000000,
});
ticker.on("data", function (framerate: any) {
  element.innerHTML = "FPS:" + String(framerate.toFixed(2));
});