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 scoreP2 p12"><span id="p12"></span></div>
<div class="middleWare">
<ul class="cage">
<li id="c1"></li>
<li id="c2"></li>
<li id="c3"></li>
</ul>
<table>
   
</table>
<ul class="cage">
<li id="c4"></li>
<li id="c5"></li>
<li id="c6"></li>
</ul>
</div>

<div class="spacer scoreP1 p11"><span id="p11"></span></div>

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

CSS

#playGround {
  border: 1px solid green;
  overflow: auto;
  height: 800px;
}

.cage,
table {
  float: left;
  padding: 0;
}

.cage {
  float: left;
}

.cage li {
  border: 1px solid #ccc;
  height: 2rem;
  width: 2rem;
  background: #b4b58f;
  display: block;
  margin-bottom: 47px;
  list-style: none;

}

.key {
  background: #ecd0a2;
  border-radius: 50%;
  padding: 3px;
}

.middleWare {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  width: 58%;
}

#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;
    text-align: center;
    font-weight: 600;
    font-size: 40px;
}

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){
$('.move').removeAttr('disabled').css('opacity','1');
$(this).attr('disabled','disabled').css('opacity','0.5');
/* console.log($(this).attr('tt')) */
animate($(this).attr('tt'));
});
var yy = 6;
var y = 1;
var directions;
var countCage=0;
var p11=0;
var p12=0;
var trashBin = [];
var arr = [];
while(arr.length < 6){
    var r = Math.floor(Math.random() * 36) + 1;
    if(arr.indexOf(r) === -1) arr.push(r);
}
for (var t = 1; t <= 6; t++) {
  var eachRow = "";
  if (yy <= 36) {
    for (var y = y; y <= yy; y++) {
      eachRow += (arr.indexOf(y)===-1 ? '<td id="pos' + y + '"><span class="numberTile">' + y + '</span></td>' : '<td id="pos' + y + '"><span class="numberTile key">' + 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);
  }
  if(trashBin.length==0){
  alert('game over')
  }
}


function moveAnimate(element, count, randNum) {
  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++;
    
 ...