JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<div class="container">
<div class="row r1" style="background: red">
    <div class="square o1">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o2">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o3">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
</div>
</div>

JavaScript

var dice1, dice2;
for (var i = 1; i < 7; i++) {
  dice1 = Math.floor((Math.random() * 6) + 1);
  dice2 = Math.floor((Math.random() * 6) + 1);
  var diceroll = dice1 + dice2;

  //checking number of terrains for each main square
  var numOfTerrain;
  switch (diceroll) {
    case 2:
    case 3:
      numOfTerrain = 0;
      break;
    case 4:
    case 5:
    case 9:
    case 10:
      numOfTerrain = 2;
      break;
    case 6:
    case 7:
    case 8:
      numOfTerrain = 1;
      break;
    case 11:
    case 12:
      numOfTerrain = Math.floor((Math.random() * 4));
  }

  //Randomizing the placement of terrains in squares
  var rolls = [];
  for (var j = 0; j < numOfTerrain; j++) {
    rolls[j] = Math.floor((Math.random() * 9) + 1);
    while (rolls[j] == rolls[j - 1]) {
      rolls[j] = Math.floor((Math.random() * 9) + 1);
    }
    document.querySelector('.o' + (i + 1) + ' ' + '.i' + (rolls)).textContent = "text";
  }
}