JSFiddle - React, Tailwind, and code Playground

HTML

<p id="log"> Log </p>
<ul id="unmatched">
</ul>
<ul id="matches">
</ul>

CSS

.team0 {
    background-color: #FF9999;
}

.team1 {
    background-color: #9999FF;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    margin-top: 10px;
}

table {
    border-collapse: collapse;
}

th {
    font-weight: normal;
    background-color: #CCCCCC;
    padding: 3px;
    padding-right: 5px;
}

td {
    padding: 3px;
}

JavaScript

var totalPlayers = 1000;
function getMatches(playerCollection)
{
    /*
    playerCollection consists of Player objects with the properties:
    	.mmrQm (Quick Match MMR)
        .mmrHl (Hero League MMR)
        .gamesQm (Number of Quick Match Games)
        .gamesHl (Number of Hero League Games)
        .role (Random string out of [Assassin, Support, Specialist, Warrior]
        .ranged (Boolean value, true = ranged hero, false = melee hero)
    */
    var matches = [];
    /* expected output:
        array containing any amount of matches
            containing array of 2 teams
                containing array of 5 players
        matches[matchIndex(0,n)][teamIndex(0,1)][playerIndex(0,4)]
    */
    
    
    // TODO: IMPLEMENT PROPER MATCH MAKING
    var teams = [];
    var teamA = [];
    var teamB = [];
    
    var sortedPlayers = playerCollection.slice();
   	// Sort the players by their hero league MMR, so similarly skilled players
    // are close in the array.
    sortedPlayers.sort(function(p1, p2) {return p1.mmrHl - p2.mmrHl});
	
    // Player 'draft' to keep the teams close in MMR
    var teamAPlayers = [true, false, false, true, true, false, false, true, true];
    
    for (var i = 0; i < sortedPlayers.length; ++i)
    {
        if(teamAPlayers[i%10]){
            teamA.push(sortedPlayers[i]);
        } else {
        	teamB.push(sortedPlayers[i]);
        }
        if (teamA.length == 5 && teamB.length == 5 )
        {
            teams.push(teamA);
            teams.push(teamB);
            teamA = [];
            teamB = [];
            matches.push(teams);
            teams = [];
        }
    }
    // END TODO
    
    return matches;
}


var collection = [];
var roles = [
    "Warrior",
    "Assassin",
    "Specialist",
    "Support"
];
var ranges = [
    "Melee",
    "Ranged"
];

function getBiasedMmr()
{
    var rand1 = 0.0;
    var rand2 = 0.0;

    // Copy-pasted from google result, appears to work
    var w = 0.0;
    do {
        rand1...