Last week was the start of the NCAA men's basketball tournament, aka March Madness. I did the obligatory bracket predictions via the usual sites, but noticed this could be an excellent opportunity to showcase Silverlight. Jeff had been tossing around the idea of creating something like this for awhile, and he convinced me to get cracking. Basically the app is a data-driven bracket layout system that allows me to setup a visual tournament structure. Teams are assigned to a starting "slot" (2 slots per game of course). Once this is in place, the user can create a new predictions for each game by simply clicking or drag/dropping the desired team onto the desired slot.
Demo the app: http://brackets.claritycon.com
Adding drag and drop to a Silverlight application is becoming more and more trivial. I've done this manually in the past, but now use the Silverlight Drag Drop Manager framework found on CodePlex. The individual teams are each assigned to an instance of DragSource, while each game's slots are assigned to a new DropTarget. I created a few user controls, one to bind to the team information I wished to display, and another to act as the "ghost", which appears when a drag is in process. Then it's a matter of dynamically determining which DragSources (teams) are allowed to be placed on which DropTargets. I then made some minor customizations the framework to suit my needs, added some styling and drag and drop was in place. In case you're wondering, my modifications were basically to expand the legal droppable area to slightly outside of the actual DropTarget, as early testers didn't feel the targets were easily hit.The brackets for this tournament setup are too large to cleanly show on one screen, so I added some transition animations to give a panning-like feel as the user navigates between four regions and the Final Four. Right now the effect is decent, but I am looking for a way to avoid the slight delay I'm seeing as the new page dynamically loads the DragSources and DropTargets. I have been told about some WPF workarounds, but nothing as yet for Silverlight. I'll post an update if I find a solution.
In order to make the app a little more fun I've added the ability to create private groups, added per-round scoring, enabled Twitter updates when games results are posted, and a live chat module. It's also utilizing the NCAA March Madness Developer Platform, which links directly to each game's live video feed.
I've created a Sweet 16 version of the app (it spots you the first two rounds we missed)... if you want to try it out:
- http://brackets.claritycon.com
- Create a user under “New Player Registration”
- Click the “2009 Sweet Sixteen” tournament
- Under “Join Existing Group”, enter the following:
- Group Name: TwitterTesters
- Group Password: tweet
- Entry Name: [your entry’s nickname]
- Click your entry name in the Group Home grid
- Single-click or drag/drop your predictions into the open slots (As the tourney has already started you will have the first two rounds auto populated for you)
- Don’t forget to navigate to all four regions, and the Final Four, to complete your picks
- Picks are saved as you go, no need to “Submit”
- If you enabled twitter updates, follow the ClarityBracket user at http://twitter.com/claritybracket - this is in early testing… but should see updates after a game is finalized by admin (me)
- Chat is the newest feature, so feel free to post away… though keep in mind it is global and public!
Good luck, have fun and let me know what you think.