JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<div class="stage">
    <div class="ani"></div>
</div>

<button class='record'>Record</button> 
<button class='play' disabled>Play</button>
<div class="status">click to record animation</div>

CSS

* {    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.stage { height: 100%; width: 100%; position: relative; z-index: 2;}
.ani {
    cursor: default;
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    top: 0; left: 0;
    z-index: 1;
}

button {
    margin-top: 30px;
    padding: 5px;
}

JavaScript

//requestAnimationFram polyfill

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());


var div=$('.ani'), color = getColor(),
    record=$('.record'), play=$('.play'),
    status=$('.status'),
    recording = false;
div.css('backgroundColor',color);

record.click(function() {
    if (recording) stopRecording();
    else startRecording();
});


function startRecording() {
    recording = true;
    status.text("recording...click and drag red Square to begin");
    play.attr("disabled","disabled").text('Play');
    div.css({"top":0,"left":0});
    record.text('Stop');
    n=count=0;    
}


function stopRecording() {
    recording = false;
    status.text("click to record animation");
    play.removeAttr("disabled");
    record.text('Record');
    div.css('transform','translate(0px,0px)');
}


var dragging=false, sPos={x:0,y:0},n=0,count=0, divPos=[];


div.mousedown(function(e){
    if (!recording) return;
    dragging=true;
    sPos.x = e.clientX;
    sPos.y = e.clientY;

}).mouseup(function(e) {
    if (!recording) return;
   ...