JSFiddle - React, Tailwind, and code Playground

by Donal Devine

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://s33.postimg.org/dfxv19q5n/all.png"></script>
<script src="https://s33.postimg.org/ai0w7kii3/bottom.png"></script>
<script src="https://s33.postimg.org/ke1z77oa3/bottom_left_right.png"></script>
<script src="https://s33.postimg.org/wih8o7163/bottom_right.png"></script>
<script src="https://s33.postimg.org/4mbjxwskr/left.png"></script>
<script src="https://s33.postimg.org/samgffzqj/left_bottom.png"></script>
<script src="https://s33.postimg.org/pobjc8xwr/none.png"></script>
<script src="https://s33.postimg.org/o6q30ot63/right.png"></script>
<script src="https://s33.postimg.org/5fo5qiyln/right_left.png"></script>
<script src="tps://s33.postimg.org/nes0f8ecr/top.png"></script>
<script src="https://s33.postimg.org/tlyt1nkq3/top_bottom.png"></script>
<script src="https://s33.postimg.org/3rp0bvkq3/top_bottom_right.png"></script>
<script src="https://s33.postimg.org/sfzegllt7/top_left.png"></script>
<script src="https://s33.postimg.org/wnu6pcn8r/top_left_bottom.png"></script>
<script src="https://s33.postimg.org/7yeg4y9pn/top_left_right.png"></script>
<script src="https://s33.postimg.org/ultpb3p9n/top_right.png"></script>
<!DOCTYPE HTML>
<title> Grid Test </title>

<body>
  <div class="container">
    <table>

    </table>
  </div>
</body>

CSS

td {
  padding: 0;
  border: solid black 1px;
  margin: 0;
  height: 50px;
  width: 50px;
}

tr {
  padding: 0;
  border: solid black 1px;
  margin: 0;
  line-height: 0px;
  border-spacing: 0px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  padding: 0;
  margin: 0;
  height: 50px;
  width: 50px;
}

JavaScript

var hz = new Array(10);

$(document).ready(function() {

  for (var x = 0; x < 10; x++) {
    hz[x] = new Array(10);

    for (var y = 0; y < 10; y++) {
      hz[x][y] = new block(0, 0, 0, 0);
    }
  }

  findEdges(); //define the edges of the grid
  assignEdges(); //assign directions to the edges based on limitations
  generatePaths(); //generate the directions for the non-edge blocks
  linkAll(); //link all the blocks together
  displayImages(); //display the images
});


function block(top, bottom, left, right) {
  this.top = top;
  this.bottom = bottom;
  this.left = left;
  this.right = right;
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generatePaths() {
  for (var x = 0; x < 10; x++) {
    for (var y = 0; y < 10; y++) {

      if ((x > 0) && (y > 0) && (x < 9) && (y < 9)) //not edge blocks
      {
        var numberOfPaths = getRandomInt(2, 3);

        for (var t = 0; t < numberOfPaths; t++) {

          var path = getRandomInt(0, 3);
          var direction = getDirection(path);

          if (direction == 'top')
            hz[x][y].top = 1
          else if (direction == 'left')
            hz[x][y].left = 1;
          else if (direction == 'bottom')
            hz[x][y].bottom = 1;
          else if (direction == 'right')
            hz[x][y].right = 1;


        } //end for(numberOfPaths)


      }

    } //end for(y)
  } //end for(x)
} // generatePaths()

function linkAll() {
  for (var x = 0; x < 9; x++) {
    for (y = 0; y < 9; y++) {
      //link up to each other
      var count = 0;

      if ((x > 0) && (y > 0)) {
        if (hz[x - 1][y].right) {
          hz[x][y].left = 1;

        } else count++;

        if (hz[x][y - 1].bottom) {
          hz[x][y].top = 1;

        } else count++;
      }

      if ((x < 9) && (y < 9)) {
        if (hz[x + 1][y].left) {
          hz[x][y].right = 1;

        } else count++;

        if (hz[x][y + 1].top) {
          hz[x][y].bottom = 1;

  ...