JSFiddle - React, Tailwind, and code Playground

by anatooly

HTML

<div id="board1" class="board"></div>
<div id="board2" class="board"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

.board {
  width: 320px;
  height: 320px;
  margin: 50px auto;
  position: relative;
}

.cell {
  position: relative;
  top: 0;
  left: 0;
  float: left;
  border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(128, 128, 255, 1);
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 30px;
  text-align: center;
  transition: all .1s ease-in;
}

.cell-0 {
  background: #333;
  border-radius: 0;
  z-index: 10;
}

JavaScript

(function ($) {
    var DIRECTION_TOP = 1;
    var DIRECTION_BOTTOM = 2;
    var DIRECTION_LEFT = 3;
    var DIRECTION_RIGHT = 4;
    var WIDTH_CELL = 80;
    
		var generateNumbers = function () {
      var f15 = {
          order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function () {
              return Math.random() - .5;
          }),
          swap: function (i1, i2) {
              var t = this.order[i1];
              this.order[i1] = this.order[i2];
              this.order[i2] = t;
          },
          solvable: function (a) {
              for (var kDisorder = 0, i = 1, len = a.length - 1; i < len; i++) {
                  for (var j = i - 1; j >= 0; j--) {
                      if (a[j] > a[i]) {
                          kDisorder++;
                      }
                  }
              }
              return !(kDisorder % 2);
          }
      };

      if (!f15.solvable(f15.order)) {
          f15.swap(0, 1);
      }

      return f15.order;
    }

    var generateBoardHtml = function (numbers) {
      var html = '';
      for (var i = 0; i < numbers.length; i++) {
        html += '<div class="cell cell-' + numbers[i] + '">' + (numbers[i] ? numbers[i] : '') + '</div>';
      }
      return html;
    }

    var callbackCellClick = function (event) {
      var numbers = event.data.numbers || [];
      var text = parseInt($(this).text());
      var index = numbers.indexOf(text);

      if (index < 0) {
        return;
      }

console.log('!', index, numbers[index - 1]);

      if (numbers[index - 1] === 0) {
          myChange(index, index - 1, DIRECTION_RIGHT, numbers, $(this));
      } else if (numbers[index + 1] === 0) {
          myChange(index, index + 1, DIRECTION_LEFT, numbers, $(this));
      } else if (numbers[index - 4] === 0) {
          myChange(index, index - 4, DIRECTION_BOTTOM, numbers, $(this));
      } else if (numbers[index + 4] === 0) {
          myChange(index, index + 4, DIRECTION_TOP, numbers,...