Thought I'd give you a quick update on the development progress of the updated LFG page I mentioned in my last blog post. I'm currently quite far into the process of implementing the new system and for the sake of clarity I'll pretend that I did the work in the order I'll be presenting it here.

As I mentioned in the quick overview blog, the intent was to make it easier to set up games (primarily in the Ranked division). What I wanted to do was a highly visual match maker while still leaving the control to the coach. To accomplish this, I envisioned a system that worked more or less like this:

1. The coach selects which teams he or she wants to play with.
2. A list of potential opponents is shown, and the coach decides to either accept or decline the games.
3. Once a game has been mutually accepted, the game is offered to both coaches.
4. Once both coaches clicks to start the game, the FFB client is launched into the game.

To make this possible on the server side, I ended up designing a state machine system that keeps track of coaches who are looking for games, and each potential game is tracked with the aid of a state machine. Since pen and paper (which is what I started out with) quickly becomes unwieldy in a design process I ended up buying a license for Omnigraffle, a diagramming tool much like Visio, to figure out the state machine for the matches. This is what I came up with:



What this shows is a set of states in which a potential game can be in. A game starts out in the "DEFDEF" state on the left, which indicates that neither coach has made a decision. You'll notice that there are four different possible actions (Accept, Decline, Timeout and Start). Three of these are directly related to clicks by either coach, while the Timeout action is something done automatically on the server after a designated time has passed without an action from a coach.

Once a game has reached the "STASTA" state, which indicates that both coaches have clicked to start the game, the game is launched. Those of you with a good sense of detail will notice that there's a mistake in the diagram (nothing major), and I'll leave that as an excercise to you to figure out what's wrong :)

Most of the back-end code to handle this is implemented at this point.

When it comes to the front-end, development isn't nearly as complete. I have, however, drawn a couple of mockups indicating what I intend to implement.

First off, a coach selecting teams to play with will look something like this:



The idea is that the coach selects the teams, and clicks the "Look for Games" button. The checkboxes will be "sticky" so that next time the page is loaded, the checkboxes will remain toggled the same way they were last time.

Once the button is clicked, the actual LFG page is shown:



The idea here is to show a list of possible games for the selected teams, and allow the coach to accept or decline each game. Once a game is declined, it will be hidden from the list (only to reappear after the timeout has expired on the server side). Accepting a game will simply show it as accepted until the opponent does the same.

Once both coaches have accepted a game, the game offer page is shown:



This page should be fairly easy to understand. Coaches click to start the game and the client will be launched. Once a game has been offered, any other game offers are simply hidden, and once a game has been started all other game offers are declined automatically and the coach is removed from LFG consideration.

My hope is that this system will make looking for games much quicker for everyone and that it will let people spend more time playing the game rather than spending time trying to fine a suitable opponent.

Let me know what you think!