Home >
A few weeks ago a reader sent in an interesting question. He wanted to create an application that let you pick winners from a sports tournament. (Apparently people bet on these things?) The idea being you have a first round of teams, all playing each other. You pick the winners from round 1 and then pick the winners from those matches. You continue this until there is one ultimate winner. I finally had some time to do some thinking on this and I thought I'd share what I've built so far. This is going to take a few blog posts as I plan on building this up in parts. In today's entry I'm going to talk about the data and the UI I'm using, as well as begin the initial rendering.
The first thing we need for our brackets is data. This would probably come from a database and be loaded via Ajax, but for now I've hard coded the values in. Another consideration is the number of teams. In order to keep things simple I'm going to begin with 8 teams. This will let us go from 8 teams, to 4, to 2, to 1. We could add logic to handle scenarios where we have extra teams, but again, I wanted to keep it simple. I created a simple set of arrays of objects, where each object represented a team with an id and name value.
Next I wanted to create a data structure for my rounds. Each round should consist of games, where each game consists of two teams. (You will notice some basic support for a game with one team, but that isn't fully realized yet.)
I began with the array:
And then within my $(document).ready I had:
I begin by creating the first round. I loop over all the teams, incrementing by 2. This lets me add the teams in pairs to a game object that gets appended to my rounds array. So what about drawGames?
I was a bit unsure about how to handle the actual UI of the bracket picker. I could use groups of radio buttons, but that didn't seem like it had the right amount of CowBell. jQuery UI came to the rescue with the Selectable interaction. To me, it seemed like a perfect way to handle the team selections. (Well, it seemed, be sure to read on to see what problems I had.) I decided to create a Selectable interaction for each game in the round. The drawGames function handled this logic.
As you can see, it loops over the items in the round. For each game it creates a new ordered list. (I'm using CSS similar to the demos for selectable. I will fully admit to not being able to CSS my way out of a rice paper bag.) Note the name on the OL item: selectable_i. Once I've created the block of HTML for the games, I inject it into a div. Then I repeat my loops, this time turning each OL into a selectable interaction.
So how does it look? Take a gander at the demo here: http://www.coldfusionjedi.com/demos/tourny/test.html. As you can tell, right now you can pick a team in each game, but that's it. We obviously need to write some code that will let us move to the next round, but before we do that, we have a bigger problem. The Selectable interaction was built to allow for multiple selections. Go ahead and try it - you can pick two winners for each game. We need a way to work around that. I'd be willing to bet the same code used to ensure that could also be used to see if we are ready to go the next round. My next blog entry will focus specifically on those issues.
The first thing we need for our brackets is data. This would probably come from a database and be loaded via Ajax, but for now I've hard coded the values in. Another consideration is the number of teams. In order to keep things simple I'm going to begin with 8 teams. This will let us go from 8 teams, to 4, to 2, to 1. We could add logic to handle scenarios where we have extra teams, but again, I wanted to keep it simple. I created a simple set of arrays of objects, where each object represented a team with an id and name value.
var teams = [
{id:1, name:"Alphas"},
{id:2, name:"Betas"},
{id:3, name:"Cetas"},
{id:4, name:"Deltas"},
{id:5, name:"Epsilons"},
{id:6, name:"Foos"},
{id:7, name:"Goos"},
{id:8, name:"Heroes"}
]
Next I wanted to create a data structure for my rounds. Each round should consist of games, where each game consists of two teams. (You will notice some basic support for a game with one team, but that isn't fully realized yet.)
I began with the array:
//will store the games in each round
var rounds = []
And then within my $(document).ready I had:
$(document).ready(function() {
//first round
rounds[0] = []
//assign initial games
for(i=0;i < teams.length; i=i+2) {
var game = {}
game.team1 = teams[i]
if(teams[i+1] != null) game.team2 = teams[i+1]
rounds[0][rounds[0].length] = game
}
//draw the games
drawGames(rounds[0])
})
I begin by creating the first round. I loop over all the teams, incrementing by 2. This lets me add the teams in pairs to a game object that gets appended to my rounds array. So what about drawGames?
I was a bit unsure about how to handle the actual UI of the bracket picker. I could use groups of radio buttons, but that didn't seem like it had the right amount of CowBell. jQuery UI came to the rescue with the Selectable interaction. To me, it seemed like a perfect way to handle the team selections. (Well, it seemed, be sure to read on to see what problems I had.) I decided to create a Selectable interaction for each game in the round. The drawGames function handled this logic.
function drawGames(round) {
var str = ''
for(var i=0;i<round.length;i++) {
str+='<b>Game '+(i+1)+'</b><br/>'
str+= '<ol class="selectable" id="selectable_'+i+'">'
str+='<li>'+round[i].team1.name+'</li>'
str+='<li>'+round[i].team2.name+'</li>'
str+='</ol>'
}
$("#gamedisplay").html(str)
//Enable selectable for the teams
for(var i=0;i<round.length;i++) {
$("#selectable_"+i).selectable()
}
}
As you can see, it loops over the items in the round. For each game it creates a new ordered list. (I'm using CSS similar to the demos for selectable. I will fully admit to not being able to CSS my way out of a rice paper bag.) Note the name on the OL item: selectable_i. Once I've created the block of HTML for the games, I inject it into a div. Then I repeat my loops, this time turning each OL into a selectable interaction.
So how does it look? Take a gander at the demo here: http://www.coldfusionjedi.com/demos/tourny/test.html. As you can tell, right now you can pick a team in each game, but that's it. We obviously need to write some code that will let us move to the next round, but before we do that, we have a bigger problem. The Selectable interaction was built to allow for multiple selections. Go ahead and try it - you can pick two winners for each game. We need a way to work around that. I'd be willing to bet the same code used to ensure that could also be used to see if we are ready to go the next round. My next blog entry will focus specifically on those issues.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
When I saw the title, the first thing I thought of was how the online March Madness (the ESPN one, anyway) where the UI involves dragging the team you think will win to the next round. But I think your plan to have the user simply select/highlight the winning team will be easier to code and just as effective so long as you can disable the multi-select option somehow.
This is a very similar problem to what I've been tackling recently over at Tournology. However, for your design, I think the bracket would be better served (to tie into a backend) if each match was represented as two radio options (the radio elements could be hidden using CSS, and then activated using jQuery when the list item is clicked.)
Radio elements would be easier - but I've got another way of handling it. My second rev is about 90% done and I hope to blog it tonight or tomorrow. Please be sure to check out what I did and comment again.