My latest project that I devoped for FanNation / SI.com is the Seth Davis Bracket Challenge for the NCAA Tournament. To date this project has probably been my most complex Ruby on Rails application. I was also really happy with how the interface for picking your bracket turned out. It is all html, css, and javascript based (as opposed to ESPN’s Flash interface for picking teams).
I used a sliding window effect where a div with smaller dimensions set to overflow hidden wrap a div with a greater height and width. After the user saves a region via Ajax, I used the scriptaculous Effect.Move function to animate the screen moving to the next region.
Some of the challenges I was faced in this application included clearing out downstream picks if you changed a team in a earlier round that you had advancing farther down the bracket, and displaying pick percentages for each team at each round as you are making picks.
To solve the first issue I set a javacript array that included all the match ids and match position (top or bottom) that were downstream of every match, and when a user clicks a team to select the pick I checked if the opponent in that match was already selected in a position down the bracket and cleared it out.
To dynamically display the pick percentages as you move a team, I printed out a javascript array (actually a JSON object) that listed every team id, and an hash of each percentage ar each round when the page is loaded. Then when the user clickes on a team to advance it, I cloned the innerHTML of the div they were selecting and replaced the innerHTML of the percentage div with the percentage of that team for the next round.
After all the work I put into this, it’s too bad that the interface is only viewable for four days to the users until the game locks before the tournament begins. Hopefully we will make use of the code for next year’s bracket or some other fantasy games we build in the future.
