JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<div id="board"></div>
<div>
    <input type="text" id="imgTxt">
    <button id="goButton">Go</button>
</div>
<div id="console1" class="console"></div>
<div id="console2" class="console"></div>
<div id="console3" class="console"></div>

CSS

.console {
    background-color: #ccc;
    border: 1px solid Black;
    width: 40%;
    padding: 4px;
    margin-top: 10px;
    margin-right: 4px;
    font-size: 12px;
    font-family:"arial";
    display: inline-block;
}

JavaScript

(function ($) {

    $.fn.shuffle = function () {
        return this.each(function () {
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    };

    $.shuffle = function (arr) {
        for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    };
}(jQuery));

(function ($) {
    var gridSize = 3;
    var numPieces = gridSize * gridSize;
    var board = $("#board");
    var boardSize = 300;
    var boardOffset = 9;
    var boardBackgroundColor = "Black";
    var boardBorder = "1px solid Black";
    var pieceSize = (boardSize / gridSize);
    var pieceTxtColor = "White";
    var imgSrc = "http://i.imgur.com/McItYjr.gif";
    var piecePositions = [];
    var randomPositions = [];
    var finalPositions = [];
    var fpThreshold = (pieceSize / 4);
    var c = $("#console1");
    var c2 = $("#console2");
    var c3 = $("#console3");
    var row = 1;
    var col = 1;
    var imgOffsetY = 0;
    var imgOffsetX = 0;
    var pieceOffsetY = 0;
    var pieceOffsetX = 0;
    board.css({
        "width": boardSize + "px",
        "height": boardSize + "px",
        "background-color": boardBackgroundColor,
        "border": boardBorder,
        "font-size": 0
    });

    function makeBoard(img) {
        board.empty();
        for (i = 1; i < (numPieces + 1); i++) {
            c.append(i);
            var piece = $("<div>");
            piece.addClass("piece");
            piece.css({
                "background-image": "url('" + img + "')",
                "background-repeat": "no-repeat",
                "width": pieceSize + "px",
                "height": pieceSize + "px",
                "position": "absolute",
                "color": pieceTxtColor,
                "font-size": "10px"
            });
            piece.attr("id", "piece" + i);
            piece.append(i);
            imgOffsetX = "-"...