JSFiddle - React, Tailwind, and code Playground

by adil_invideo

JavaScript

class Stats {
  constructor() {
    this.mode = 0;
    this.container = document.createElement('div');
    this.container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
    this.container.addEventListener('click', (event) => {
      event.preventDefault();
      this.showPanel(++this.mode % this.container.children.length);
    }, false);


    this.beginTime = (performance || Date).now();
    this.prevTime = this.beginTime;
    this.frames = 0;

    this.fpsPanel = this.addPanel(new Panel('FPS', '#0ff', '#002'));
    this.msPanel = this.addPanel(new Panel('MS', '#0f0', '#020'));

    if (self.performance && self.performance.memory) {
      var memPanel = this.addPanel(new Panel('MB', '#f08', '#201'));
    }
    this.showPanel(0);
  }

  view() {
    return this.container;
  }


  addPanel(panel) {
    this.container.appendChild(panel.dom());
    return panel;

  }

  showPanel(id) {
    for (var i = 0; i < this.container.children.length; i++) {
      this.container.children[i].style.display = i === id ? 'block' : 'none';
    }
    this.mode = id;
  }

  begin() {
    this.beginTime = (performance || Date).now();
  }

  end() {

    this.frames++;

    var time = (performance || Date).now();

    this.msPanel.update(time - this.beginTime, 200);

    if (time >= this.prevTime + 1000) {

      this.fpsPanel.update((this.frames * 1000) / (time - this.prevTime), 100);

      this.prevTime = time;
      this.frames = 0;

      if (this.memPanel) {

        var memory = performance.memory;
        this.memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);

      }

    }

    return time;

  }

  update() {
    this.beginTime = this.end();
  }

}

var PR = Math.round(window.devicePixelRatio || 1);
var WIDTH = 80 * PR,
  HEIGHT = 48 * PR,
  TEXT_X = 3 * PR,
  TEXT_Y = 2 * PR,
  GRAPH_X = 3 * PR,
  GRAPH_Y = 15 * PR,
  GRAPH_WIDTH = 74 * PR,
  GRAPH_HEIGHT = 30 * PR;

class Panel {
  constructor(name,...