JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="playGround">
<button class="move p2" tt="p12">p12</button>
<div class="spacer"><span id="p12"></span></div>
<table>
   
</table>
<div class="spacer"><span id="p11"></span></div>

<button class="move p1" tt="p11">p11</button>
</div>

CSS

#playGround{
    border: 1px solid green;
    overflow: auto;
    height: 800px;
}
table{
  margin:0 auto;
}
#p11{
    height: 2rem;
    width: 2rem;
    background: #6f98f9de;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    /* overflow: auto; */
    text-align: center;

}
#p12{
     height: 2rem;
    width: 2rem;
    background: #90ee90;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    /* overflow: auto; */
    text-align: center;
}
.spacer{
    height: 2rem;
    margin: 1rem auto;
}
td{
      height: 2rem;
    width: 2rem;
    position:relative;
   
        text-align: center;
    border:1px solid #ccc;
}
.numberTile{
    position: absolute;
    height: 1rem;
    width: 1rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.move{
     height: 3rem;
    width: 3rem;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    border: 2px solid #000;

    color: #fff;
        outline: none;
}
.p1{
      background: #6f98f9de;
}
.p2{
      background: #90ee90;
}

JavaScript

/*
I would like to move the #p11 from pos1 to pos11 in direction 4,7,8,11
*/

$(".move").click(function(e){
/* console.log($(this).attr('tt')) */
animate($(this).attr('tt'));
});
var yy = 6;
var y = 1;
var directions;
var trashBin = [];
for (var t = 1; t <= 6; t++) {
  var eachRow = "";
  if (yy <= 36) {
    for (var y = y; y <= yy; y++) {
      eachRow += '<td id="pos' + y + '"><span class="numberTile">' + y + '</span></td>';
      trashBin.push(y);
    }
    $('table').append('<tr>' + eachRow + '</tr>');
    y = yy + 1;
    yy = yy + 6;

  }
}



function animate(player) {
//console.log(e);
  direction = trashBin[Math.floor(Math.random() * trashBin.length)];
  moveAnimate("#"+player, 0, direction);
  var indexId = trashBin.indexOf(direction);
  if (indexId > -1) {
  trashBin.splice(indexId,1);
  }
  console.log(trashBin);
  if(trashBin.length==0){
  alert('game over')
  }
}


function moveAnimate(element, count, randNum) {
console.log('rrr'+element)
  if (count >= randNum) {
  
    return;
  }

  newParent = '#pos' + randNum;
  
  element = $(element); //Allow passing in either a JQuery object or selector
  newParent = $(newParent); //Allow passing in either a JQuery object or selector
  var oldOffset = element.offset();
  element.appendTo(newParent);
  var newOffset = element.offset();

  var temp = element.clone().appendTo('body');
  temp.css('position', 'absolute')
    .css('left', oldOffset.left)
    .css('top', oldOffset.top)
    .css('zIndex', 1000);
  element.hide();
  temp.animate({
    'top': newOffset.top,
    'left': newOffset.left
  }, 'slow', function() {
    element.show();
    temp.remove();
    count++;
  document.getElementById("'"+element+"'").parentNode.style.border=0;
 document.getElementById("'"+element+"'").parentNode.style.color='transparent';
 //   moveAnimate(element, count);
  });
   /*   if(count==0){
       console.log('done');
       document.getElementById('p11').parentNode.style.border=0;
     ...