How to: Display tournaments

The Operator REST API contains methods for accessing tournament information using standard web calls. This page shows you one way to access this documentation using jQuery and momentjs.

If on the other hand you’re using the official WordPress plugin, this is already done for you.

Accessing

Access the data using jQuery, like so:

$.get("http://csps1.cubeia.com/operator-api/rest/lobby/tournament", function(data) { }, "json");

If you want to see what this data looks like when it is returned, you can simply click this link: current tournaments.

Ordering

The data returned contains a list of tournament objects, but not ordered. Here’s how to order the list using momentjs:

// sort tournament according to start time
var list = data.tournamentList;
list.sort(function(a, b) {
    var aDate = moment.utc(a.params["START_TIME"]);
    var bDate = moment.utc(b.params["START_TIME"]);
    return aDate.millisecond() - bDate.millisecond();
});

Displaying

The “data” object above is what you get in the callback from jQuery. Now you can iterate through the list, for example, to create an HTML table row for each tournament in the list with name, status, registered players and starting time:

for (var i = 0; i < list.length; i++) { 
    var tourn = list[i];
    // from UTC to local time
    var dateLocal = moment.utc(tourn.params["START_TIME"]).local().format('dddd hh:mm');
    // current status
    var stat = tourn.params["STATUS"];
    var statLabel = (stat == 'REGISTERING' ? 'Registration Open' : 'Announced'); 
    html = '<tr><td>' + tourn.params["NAME"] + '</td><td>' + statLabel + '</td><td>' + tourn.params["REGISTERED"] + '</td><td>' + dateLocal + '</td></tr>';
}

Note that we’re using momentjs here to parse the time in UTC but display it using the local time zone for the client. The server send its time in an ordinary ISO time format which momentjs will be able to parse immediately.

Full Example

If you want an entire example in PHP and JavaScript you can have a look at the WordPress plugin sources, in particular the JS source file used for rendering the table: cs-tournaments.js.