Playday Draft Tool prototype

Overview

Playday is a concept fantasy sports platform, entering the market as new competitor for platforms like Fanduel and DraftKing.

Draft Tool Prototype

I worked on the desktop prototype to pitch the idea to the client. It was built as a fully featured Backbone.js app.

Example Backbone’s View

var CONDITIONAL_COLUMNS = {
  "ALL": [null],
  "QB": ["YDS", "TD", "INT", "CMP"],
  "RB": ["YDS", "TD", "ATT", "AVG"],
  "WR": ["YDS", "TD", "REC", "AVG"],
  "TE": ["YDS", "TD", "REC", "AVG"],
  "DST": ["TD", "INT", "PA", "FR"],
  "K": ["FGA", "FGM", "PCT", "LNG"]
};

var HomeView = Backbone.View.extend({
  playersListView: null,
  lineUpBucketsView: null,
  el: ".container",
  events: {
    "click .team-panel__bucket, .team-panel__group": function (event) {
      this.filterPlayersListByRole(event);
      this.toggleActiveState(event);
    }
  },
  initialize: function () {
    this.render();
  },
  render: function () {
    var players = new PlayersCollection();

    players.fetch({
      success: function () {
        lineUpSummaryView = new LineUpSummaryView();

        lineUpBucketsView = new LineUpBucketsView({
          collection: players
        });

        playersListView = new PlayersListView({
          collection: players,
          lineUpBucketsView: lineUpBucketsView
        });

        compareToolView = new CompareToolView({
          collection: players
        });

        var options = {
          valueNames: ["role", "name", "opp", "yds", "td", "int", "cmp", "att", "avg", "rec", "pa", "fr", "fga", "fgm", "pct", "lng", "opprk", "fppg", "salary"]
        };

        var playerList = new List('players-list', options);
      }
    });

  },
  filterPlayersListByRole: function (event) {
    var role = $(event.currentTarget).parent().data("role") || $(event.currentTarget).data("role");
    playersListView.viewOnlyRole(role);

    $(".conditional").hide();

    if (role === "ALL") {
      var $headColumns = $(".players-list__table-head .players-list__column.conditional").hide();
      $(".players-list .players-list__column.conditional").hide();
    } else {
      var $headColumns = $(".players-list__table-head .players-list__column.conditional").show();
      $(".players-list .players-list__column.conditional").show();
    }

    _.each(CONDITIONAL_COLUMNS[role], function (column, index) {

      if (!column) {
        return;
      }

      var columnLabel = column;

      if (column === "CMP") {
        columnLabel = "CMP%";
      }

      $headColumns.eq(index).data("sort", column.toLowerCase()).text(columnLabel.toUpperCase());

      var $columns = $(".players-list__column.conditional." + column.toLowerCase());
      $columns.show();
    });

  },
  toggleActiveState: function (event) {
    $(".team-panel__group").removeClass("active");

    if ($(event.currentTarget).parent(".team-panel__group").length > 0) {
      $(event.currentTarget).parent(".team-panel__group").toggleClass("active");
      return;
    }

    $(event.currentTarget).toggleClass("active");
  }
});