JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="teste" class="root"></div>

CSS

.root {
  position: relative;
  top: 20px;
  left: 20px;
  width: 300px;
  height: 250px;
  border: 1px solid;
}

JavaScript

/* =========================================================== */
/* ===================== ANIMATION LOOP ====================== */
/* =========================================================== */

function AnimationLoop(fps, update) {

   let _Fps = fps;
   let _Update = update;

   let _RequestId;
   let _LastFrameTimeMs = 0;    
   let _LastUpdate = Date.now();
   
   
   let frames = 0;
   let missFrames = 0;
   
   
   let _Loop = function(timestamp) {

     if (timestamp < _LastFrameTimeMs + (1000 / _Fps)) {
     		missFrames ++;
       _RequestId = window.requestAnimationFrame(_Loop);
       return;
     }
     
     let _Now = Date.now();
     let _Delta = _Now - _LastUpdate;
     _LastUpdate = _Now
     
     _LastFrameTimeMs = timestamp;
     
     frames ++;

     _Update(_Delta);
     _RequestId = window.requestAnimationFrame(_Loop);
   }  
  
   this.start = () => {
     if (!_RequestId) {
       _Loop(1);
     }
     
     setInterval(()=> {
     		console.log(frames, missFrames);
        frames = 0;
        missFrames = 0;
     }, 1000);
     
   }
   this.stop = () => {
     if (_RequestId) {
       window.cancelAnimationFrame(_RequestId);
       _RequestId = undefined;
     }
   }
 }

 //let animationLoop = new AnimationLoop(30, (dt) => {});
 //animationLoop.start();
 
/* =========================================================== */
/* ======================= ELEMENTS ========================== */
/* =========================================================== */

function Element (config) {
		
    let _Config = config;
    
    
    
    
    
}

let BOX = new Element({

})

console.log(document.getElementById("teste"))