JSFiddle - React, Tailwind, and code Playground

by Andrew

HTML

<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 team = [];
    for (var i = 0; i < playerCollection.length; ++i)
    {
        team.push(playerCollection[i]);
        if (team.length == 5)
        {
            teams.push(team);
            team = [];
        }
        if (teams.length == 2)
        {
            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 = (2.0 * Math.random()) - 1.0;
        rand2 = (2.0 * Math.random()) - 1.0;
        w = (rand1 * rand1) + (rand2 * rand2);
    } while (w >= 1.0);

    w = Math.sqrt((-2.0 * Math.log(w)) / w);
    var mmr = rand1 * w;
    return Math.round(((mmr / 2) + 2) * 500);
}

function Player()
{
    this.mmrQm = getBiasedMmr();
    this.mmrHl = getBiasedMmr();
    this.gamesQm = Math.round(Math.random() * 1000) + 100;
    this.gamesHl = Math.round(Math.random() * 300);
    this.gamesTotal = this.gamesQm + this.gamesHl;
   ...