JSFiddle - React, Tailwind, and code Playground

by Jakub Lemiszewski

CSS

.person{
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border: 1px solid black;
            color: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            box-shadow: 0px 0px 10px gray;
        }


        .sick{
            background-color: purple;
        }

        .healthy{
            background-color: green;

        }

        .immune{
            background-color: blue;
        }

JavaScript

function getRandomNumber(minNumber, maxNumber){
        randomNumber = Math.round(Math.random() * maxNumber) + minNumber;
        //console.log(randomNumber);
        return randomNumber;
    };

    /**************************************************/
    // Get the distance between 2 elements
    function getDistanceBetweenElements(elementOne, elementTwo){
        var positionElementOneX = $(elementOne).offset().top;
        var positionElementOneY = $(elementOne).offset().left;
        var positionElementTwoX = $(elementTwo).offset().top;
        var positionElementTwoY = $(elementTwo).offset().left;
        var distanceX = Math.abs(positionElementOneX - positionElementTwoX);
        var distanceY = Math.abs(positionElementOneY - positionElementTwoY);
        var finalDistance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
        return finalDistance;
    };

    function checkContamination(){
        $(".person").each(function(){
            // Only check if the selected element is sick
            if($(this).hasClass("sick"))
            {
                var elementOne = $(this);
                $(".person").each(function(){
                    var elementTwo = $(this);
                    //console.log(elementTwo);
                    // Check if the distance between those 2 elements is less than 50px. If so, make them sick
                    var finalDistance = getDistanceBetweenElements(elementOne, elementTwo);
                    if(finalDistance < 20){
                        // console.log("CONTAMINATED");
                        $(elementOne).removeClass("healthy").addClass("sick");
                        $(elementTwo).removeClass("healthy").addClass("sick");
                    }
                });
            }
        });
    };
    setInterval("checkContamination()", 5000);


    /**************************************************/
    function createPeople(){
        for(var i = 0; i < 100; i++){
            var topPosition =...