JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<div id='mover'>x</div>
<button id='record'>
R
</button>

<button id='stop'>
S
</button>

<button id='play'>
P
</button>

<button id='store'>
Str
</button>

<button id='clear'>
Clear
</button>

CSS

*{
   user-select: none;           
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  -webkit-touch-callout: none; /* iOS Safari */
}

JavaScript

$(function(){
   var leftButtonDown = false;
   var loc = [];
   var started = false;
   var play_init = 0;
   
    $(document).mousedown(function(e){
        // Left mouse button was pressed, set flag
        if(e.which === 1) leftButtonDown = true;
    });
    
    $(document).mouseup(function(e){
        // Left mouse button was released, clear flag
        if(e.which === 1) leftButtonDown = false;
    }); 
    
  
   
   function play(){

      	var obj = loc[play_init];
        var x1 = obj.xc;
        var y1 = obj.yc;
        console.log(x1);
				//$("#mover").css({position:'fixed',top: y1, left: x1});
        
        $("body").append("<span class='displayItem'  style='position:fixed;top:"+y1+"px;left:"+x1+"px;'>.</span>");
        play_init++;
        if(play_init<(loc.length))
      	setTimeout(play,10);
   }
   
   $("#record").click(function(){
    $(".displayItem").remove();
    loc = [];
    play_init = 0;
   	started = true;
   });
   
   $("#play").click(function(){
   $(".displayItem").remove();
   	started = false;
      play_init = 0;
      play();
   });
         
   $("#stop").click(function(){
   	started = false;
   });
   
   $("#store").click(function(){
   		$(".displayItem").remove();
   });
   
      $("#clear").click(function(){
   	$(".displayItem").remove();
    loc = [];
    play_init = 0;
    started =false;
    
   });
   
   $(document).mousemove(function(e){
   
   		if(!started) return;		
      if(!leftButtonDown) return;
      var x = e.clientX;
      var y = e.clientY;
      loc.push({xc:x,yc:y})
       $("body").append("<span class='displayItem'  style='position:fixed;top:"+y+"px;left:"+x+"px;'>.</span>");
   });
   
})