Icebreaker Match Maker

Mix people from different teams into groups.

HTML

<h2>Icebreaker Match Maker</h2>
<div id="teams"></div>
<button id="generate">Generate Pairs</button>
<ul id="pairs"></ul>

CSS

.build { color: red; }
.content { color: green; }
.video { color: blue; }
.standby { color: purple; }
.arrow { padding: 0 8px; color: #666; }
button#generate { display:block; clear:both; }
div.team { float:left; width: 140px; }

JavaScript

/*
 * TODO:
 * Display teams on load.
 */
var TEAMS = {
  'Build': ['Mirabel', 'Kayla', 'Spencer', 'Wai', 'Mandy'],
  'Content': ['Ross', 'Andy', 'CJ'],
  'Video': ['Heather', 'Gerald', 'Kali', 'Jules', 'Patrick']
};
var STANDBY = ['David'];

var MatchMaker = (function() {

  var $button = $('button#generate');

  var init = function() {
    displayTeams();
    enableButton();
  };

  var displayTeams = function() {
    $teamsBlock = $('div#teams');

    var buildTeamBlock = function(teamName, userNames) {
      $div = $('<div />').addClass('team').addClass(teamName.toLowerCase());
      $h2 = $('<h3 />').text(teamName);
      $ul = $('<ul />');

      userNames.forEach(function(userName) {
        var $li = $('<li />').text(userName);
        $ul.append($li);
      });

      $div.append($h2).append($ul);
      return $div;
    };

    Object.keys(TEAMS).forEach(function(teamName) {
      var teamUsers = TEAMS[teamName];
      var $ul = buildTeamBlock(teamName, teamUsers);
      $teamsBlock.append($ul);
    });
  };

  var enableButton = function() {
    $button.on('click', function() {
      $('div#teams').hide();
      $button.hide();
      $('ul#pairs').append($('<li />').text('Generating now. Please wait...'));

      var pairs = makePairs(TEAMS, STANDBY);
      var listItems = pairsToListItem(pairs);

      setTimeout(function() {
        $('ul#pairs').empty();
        outputPairs(listItems);
       }, 1200);
    });
  };

  var makePairs = function(teams, standby) {
    var users = breakTeamsIntoUsers(teams);
    var pairs = pairUsers(users, standby);
    pairs = swapOutMismatchedPairs(pairs);
    return pairs;
  };

  var swapOutMismatchedPairs = function(pairs) {
    // The pairUsers function will sometimes match up users on same team. This
    // additional step tries to catch any of those.
    pairs.forEach(function(pair, i) {
      if ( pairIsMismatched(pair) ) {
        console.log('swapping out mismatched pair:', pair[0].name, pair[1].name);
       ...