JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<div id="sprinkled" class="sprinkled centered"></div>

CSS

body { background-color: #cdcecd; }
.centered { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
}
.drop {
    position: absolute;
    background-blend-mode: overlay;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    height: auto;
    opacity: .5;
    width: 5%;
}
.airly {
    background-color: #fefefe;
    height: 25px;
    width: 25px;
}
.vapourly {
    background-color: #dcdcdc;
    height: 50px;
    width: 50px;
}
.dense {
    background-color: #c0c0c0;
    height: 100px;
    width: 100px;
}
.drop.loading { visibility: hidden; }
.sprinkled {
    background-color: #eeeeee;
    height: 90%;
    width: 90%;
}

JavaScript

var sprinkler = function(sprinkled) {

    var coordinates = (function() {

        var toNumber = (string) => {
            var digits = Array.from(string || "")
                              .filter( (character) => { return !isNaN(character) || "." == character; } )
                              .join("");
            return ( digits.length == 0 ) ? 0 : parseInt(digits);
        };

        return { of : (htmlElement) => {
                     var element = htmlElement || { style : { top : "", left : "" } };
                     return { x : toNumber(element.style.left)
                            , y : toNumber(element.style.top)
    };}};})();

    var peeker = function(enabler) {
          var peeked = void(0);
          var availabilities = { content : (toPeek) => {
                     if ( enabler(peeked, toPeek) ) {
                         peeked = toPeek;
                     }
                     return availabilities;
                 }
                 , result : () => { return peeked; }
               };

          return availabilities;
    };

    var vainer = (function() {
        return { supply: (purpose) => {
            var vainers = [() => { return false; }];
            if ( purpose ) { vainers.unshift(() => { vainers.shift(); return purpose(); }); }
            return { shift: function() { return vainers[0](); }
                   , schedule: function(schedulee) {
                       vainers.unshift( () => { vainers.shift(); return schedulee(); } );
                       return this;
                   }
            };
        }};
    })();

    var sieve = (function() {

        var mode = (function() {
            var heightOffset = (element) => { return (element || {offsetHeight: 0}).offsetHeight };
            var plainOffset = (element) => { return 0; };
            var offset = heightOffset;

            var column = () => {

                var content = [];

                var abacus = (function() {
                    var...