JSFiddle - React, Tailwind, and code Playground

by thecrypticace

HTML

<!doctype HTML>
<html>
<head>
    <meta charset="utf8" />
    <title>Physics for Game Programmers</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jQuery.js"    defer="defer"></script>
    <script type="text/javascript" src="physics.js"    defer="defer"></script>
    <script type="text/javascript" src="script.js"    defer="defer"></script>
</head>
<body>
    <canvas width="500" height="500" id="simulationCanvas"></canvas>
    <div id="toolbar"></div>
    <div id="infobar">
          <span class="left">Physics</span>
        <span class="center">Gravity Box Test</span>
         <span class="right hidden fps"></span>
    </div>
</body>
</html>

CSS

html {
    background: #323232;
    font-family: "HelveticaNeue-Medium";
    -webkit-font-smoothing: antialiased;
}

html.busy:hover {
    cursor: progress;
}

#toolbar {
    background: #b8b8b8 -webkit-linear-gradient(#d9d9d9, #cecece 1px, #bcbcbc 50%, #b8b8b8 50%, #9f9f9f);
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25),  0 1px 1px rgba(0, 0, 0, 0.25);

    position: absolute;
      bottom: 20px;
        left: 0;
       right: 0;
     z-index: 11;
      height: 60px;
}

#infobar {
    background: #222;

    position: absolute;
      bottom: 0;
        left: 0;
       right: 0;
     z-index: 1;
      height: 20px;

    color: #858585;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    //-webkit-user-select: none;
}

#infobar:hover {
    cursor: default;
}

#infobar .left {
    position: absolute;
    left: 7px;
}

#infobar .right {
    position: absolute;
    right: 7px;
    opacity: 1.0;
    -webkit-transition: all .25s ease-in-out;
}

#infobar .right.hidden {
    opacity: 0;
}

#infobar .right:hover {
    cursor: pointer;
}

JavaScript

(function(window, $) {
    var nativeRequestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback, element) {
        window.setTimeout(function() {
            callback(+new Date, element);
        }, 1000 / 60);
    };

    function requestAnimationFrame(callback, element, fpsUpdateInterval) {
        var paused, fpsDt, lastUpdateTime, framesPerSecond = 0,
            fpsTime = 0,
            updateCount = 0,
            callbackFunction = function(now, element) {
                if (paused) return;
                if (!lastUpdateTime) lastUpdateTime = now;

                ++updateCount;
                if ((fpsDt = now - fpsTime) >= fpsUpdateInterval) {
                    // returns 3 decimal places of frame rate
                    framesPerSecond = Math.round(1e6 * updateCount / fpsDt) / 1e3;

                    fpsTime = now;
                    updateCount = 0;
                }

                callback(now, now - lastUpdateTime, framesPerSecond, element);
                lastUpdateTime = now;

                nativeRequestAnimationFrame(callbackFunction, element);
            };

        this.toggle = function() {
            if (paused = !paused) {
                // restart animation loop if need be
                fpsTime = lastUpdateTime = updateCount = 0;

                nativeRequestAnimationFrame(callbackFunction, element);
            }
        }

        nativeRequestAnimationFrame(callbackFunction, element);
    }

    var extraInfo = $("#infobar .right").removeClass('hidden').text('abcd').data('currentSetID', 0),
        averageFPS = 0,
        fpsSampleCount = 0;

    window.document.querySelectorAll('.right')[0].onclick = function() {
        console.log('test');
    };

    var simulationCanvas = $("#simulationCanvas")[0];
    requestAnimationFrame(function(now, dt, framesPerSecond,...