JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="https://rawgit.com/agamemnus/helperjs.js/gh-pages/helperjs.js"></script>

CSS

html, body {
    width : 100%;
    height : 100%;
}
.puzzle {
    position:50%;
    trandsform margin:5px;
    padding:5px;
    overflow:hidden;
}
* {
    margin : 0px;
    padding : 0px;
    transition:.25s all linear;
}
li {
    width : auto;
    height : auto;
}
.block {
    text-align : center;
    text-justify : middle;
    position : absolute;
    width : 40px;
    height : 40px;
    border : inset 3px #ccc;
    cursor : pointer;
}

JavaScript

var width = 8;
var height = 8;
var savedWidth = width;
var savedHeight = height;
var columns = [];

var colors = ['red', 'blue', 'orange', 'green', 'black'];
var selected;
var moved = [];
var clicker = function (e) {
    if (!selected) {
        e.block.style.border = 'outset 3px #ccc';
        selected = e;
        return;
    }
    if (e !== selected && selected) {
        var dx = e.x - selected.x,
            dy = e.y - selected.y;

        if ((dx === 0 && Math.abs(dy) === 1) || (dy === 0 && Math.abs(dx) === 1)) {
            moved.push(e, selected);

            //e.block.style.border = 'outset 3px #ccc';
            var temp = [e.x, e.y];
            //console.log(temp,e,selected);
            e.x = selected.x;
            e.y = selected.y;
            selected.x = temp[0];
            selected.y = temp[1];

            align();

            selected.block.style.border = 'inset 3px #CCC';
            selected = undefined;

        }
    }
};
var checkFor3 = function (e) {
    var match = function(position, direction, value) {
        if (columns[position[0] + direction[0]] && columns[position[0] + direction[0]][position[1] + direction[1]] && columns[position[0] + direction[0]][position[1] + direction[1]].value === value) {


            return match([position[0] + direction[0], position[1] + direction[1]], direction, value).concat(columns[position[0] + direction[0]][position[1] + direction[1]]);
        }
        return [];
    };
    var horizontalMatches = match([e.x, e.y], [1, 0], e.value).concat(match( [e.x, e.y] , [-1, 0], e.value)).concat(columns[e.x][e.y]);
    var verticalMatches = match([e.x, e.y], [0, 1], e.value).concat(match([e.x, e.y], [0, -1], e.value)).concat(columns[e.x][e.y]);

    if (horizontalMatches.length >= 3) {
        horizontalMatches.forEach(function(e){e.block.parentElement.removeChild(e.block);
                                            columns[e.x][e.y] = ''; });
        
    }
    if (verticalMatches.length >= 3) {       ...