JSFiddle - React, Tailwind, and code Playground

by falkone

HTML

<div class="wrapper">
	</div>

CSS

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

.wrapper {
	height: 100%;
	width: 100%;
}

.child {
	background: red;
	display: inline-block;
	vertical-align: top;
}

.child:hover {
	background: blue;
}

JavaScript

var itemsRows;
var itemsCols;

var visitedItems = [];

function propagate(item) {
    var id = (itemsCols * item.y + item.x);
    
    if(visitedItems.indexOf(id) !== -1)
        return;
    
    visitedItems.push(id);
    
    var adjacent = getAdjacent(item)
    
    visitedItems.push({x: item.x, y: item.y});
    $('#c' + id).css({"background-color": "#f00"})
    
    for(var i=0; i < adjacent.length; i++) {
        var adjItem = adjacent[i];
        
        (function(innerItem) {
          $('#c' + (itemsCols * innerItem.y + innerItem.x)).css({"background-color": "#00f"})
        window.setTimeout(function() {propagate(innerItem)}, 200);
       })(adjItem);
    }
}

function myFunction() {
    var square = 40;//prompt("Please enter square size in px");
    var squareSize = parseInt(square);
    if (square != null) {
    	var wrapperWidth = $('.wrapper').width();
    	var wrapperHeight = $('.wrapper').height();
        
        itemsRows = wrapperHeight / squareSize |0;
        itemsCols = wrapperWidth / squareSize |0;
    	var itemsTotal = itemsCols * itemsRows;	
        
        for (var i = 0; i < itemsRows; i++) {
            for (var j = 0; j < itemsCols; j++) {
                var item = {id: itemsCols * i + j, x: j, y: i};
                
                $('.wrapper').append('<div id="c' + item.id + '" class="child" data-x="' + item.x + '" data-y="' + item.y + '">' + item.id +'<div>');
            }
         }
        
         $('.child').css({
             width: squareSize,
             height: squareSize
         })
                  
         $(".child").on("click", function(ev) {
             var item = {x: $(ev.target).data("x"), y: $(ev.target).data("y")}; 
             visitedItems = [];
             propagate(item);
         });
        
         return items;
      };
}

function getAdjacent(item) {
    var res = [];
    
    if(item.x !== 0) {
     	res.push({x: item.x - 1, y: item.y});
    } 
    
    if(item.x !== itemsCols-1) {
    ...