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>
<div class="wrapper">
  <div class="dice-wrapper">
    <div class="dice" id="dice">
      <div class="dice-face" id="dice-face"></div>
    </div>
  </div>
  <button class='move p1 button' tt="p11" onclick='rollDice()'>roll.</button>
</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;
}
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

html, body{
  font-size:16px;
}

.wrapper{
  height:100vh;
  width:100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-flow:column;
          flex-flow:column;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  background-color: #b9ccc4;
}

.dice-wrapper...

JavaScript

/*
I would like to move the #p11 from pos1 to pos11 in direction 4,7,8,11
*/
const addDots = (element, number) => {
  for(let i=0; i<number; i++){
    const dot = document.createElement('div');
    dot.setAttribute('class', 'dot');
    element.appendChild(dot);
  }
}

const addColumns = (array, element) => {
  array.forEach(item => {
    const column = document.createElement('div');
    column.setAttribute('class', 'dot-column');
    addDots(column, item);
    element.appendChild(column);
  });
}

const generateDice = (number) => {
  const face = document.getElementById('dice-face');
  const dotWrapper = document.createElement('div');
  dotWrapper.setAttribute('class', 'dot-wrapper');
  
  switch(number){
    case 1: 
      addDots(face, 1);
    break;
    case 2:
       addDots(dotWrapper, 2);
       dotWrapper.childNodes[1].setAttribute("style", "align-self:flex-end;");
      break;
    case 3:
       addDots(dotWrapper, 3);
       dotWrapper.childNodes[0].setAttribute("style", "align-self:flex-end;");
      dotWrapper.childNodes[1].setAttribute("style", "align-self:center;");  
      break;
    case 4:
       addColumns([2,2], dotWrapper);
      break;
      case 6:
      addColumns([3,3], dotWrapper);
      break;
    case 5: 
      addColumns([2,1,2], dotWrapper);
      dotWrapper.childNodes[1].setAttribute("style", "justify-content:center;");
      break;
  }
  if(number!==1)
    face.appendChild(dotWrapper);
}

const rollDice = () => {
  const dice = document.getElementById('dice-face');
  dice.className = 'dice-face rolling';
  let value = Math.floor(Math.random() * 6) + 1;
  
   setTimeout(() => {
       dice.className = 'dice-face';
       if(dice.childNodes && dice.childNodes[0])
          dice.childNodes[0].remove();
       generateDice(value);
      }, 500);
}

rollDice();
 
$(".move").click(function(e){
$('.move').removeAttr('disabled').css('opacity','1');
$(this).attr('disabled','disabled').css('opacity','0.5');
/* console.log($(this).attr('tt'))...