Facebook Trumps

I need to put the conclusions of the past two posts together- I need to decompose the application structure implied by my flow diagram into a set of HMVC triads as described below.

The top level triad will have responsibility for moving the application from one phase, i.e. the game creation stage or the end game stage, to the next, and also for providing RPC functionality - I don't want that kind of code just spotted round the place. The Root/Container Triad:

• Model: Contains RPC methods and global state.
• View: Practically none - contains "Loading..." view.
• Controller: Co-ordinates transistions from one Triad to another.

After the Root triad has obtained the stack of Trumps for that appropriate player, it creates a child Triad to "setup" the game: The Create Game Triad:

• Model: Instantiate Game, Set players, Shuffle cards, Deal Cards, Toss Coin.
• View: Welcome and display outcome of game initialisation.

Next the Create Game Triad signals it is finished and the Root controller destroys that entire triad, replacing it with the Game Triad, which again is a child of the root controller. Due to the complexities of this view it is decomposed into further HMVC triads which are orchestrated by the Game Triad Controller:

• Player Turn VC Triad
• Opponent Turn VC Triad
• Show Result VC Triad

These are "cut-d0wn" HMVC triads, consisting only a view and a controller. All of the model code however is contained within the higher level Play Game Triad. Messages are passed between components and the Play Game Controller will create and destroy the alternate child Triads as required. Therefore the Play Game Triad looks like this:

• Model: Evaluate winner of turn functionality, Determine if game has been won functionality.
• View- Several View/Controller Triads as above.
• Controller: Manage interactions between all these! Create/Destroy child Triads.

Finally there is a End Game Triad to display the winner of the game and offer the oppotunity to return to the beginning of the game.

• Model: Send result via RPC (I will actually leave this until the next iteration of the game).
• View: Show End Result.
• Controller: Allow to go back to the start.

The structure described above will allow me to decompose my code into disgestible modular chunks and also due to the separation of functionality and standardisation of messaging will allow easy modification and improvement later. It won't be a matt of spaghetti.

Labels: approach, facebook api, gwt, hmvc, java

Again, with the aim of getting things straight in my mind, here is very rough and broad grained flow chart of how the client will work.

Labels: facebook api, gwt, hmvc, java

The model view controller pattern is the classic pattern adopted for GUI and client applications (http://en.wikipedia.org/wiki/Model-view-controller). MVC however, is quite a broad pattern, and so I went in search of further detailed recommendations and architectural guidance. Luckily, Java seems to be a language which is adopted by people with an interest in software engineering principles, therefore a great many resources are available.

The client component needs to obtain a stack of trumps via RPC, compute the various outcomes in the game, communicate rich perspective on the game state to the user and accept interactions from the user. The most appropriate framework I could find is the HMVC (Hierarchical MVC) which is treated at length here: http://www.javaworld.com/javaworld/jw-07-2000/jw-0721-hmvc.html.

Following MVC principles the view (GWT Widgets) are delineated from the controller (flow logic) and the model (rpc, game logic). HMVC however fills in some of the gaps with respect to how these elements are composed and structured, and how these elements can communicate amongst one another. The heirarchical aspect allows a root controller encapsulating global concerns (such as the game and the trump stack) to control various children, such as turn screens, scoreboards or outcome views.

A concrete and usable example of HMVC is availible here, tp://www.thecentric.com/wiki/index.php/HMVC_Tutorial, which can easily be adapted to work with GWT.

Labels: approach, facebook api, gwt, java

So far I have:

1. Created a foundation capable of authenticating to the Facebook API, and making extracted data availible to a GWT application.
2. Written a routine to, given a set of Facebook friend profiles, return a set of Trump cards - which is to say a set of statistics determined by the underlying profiles for each friend.
3. Developed/Stolen/Borrowed a UI framework sufficient for the Facebook Trumps game.
4. Created a module which displays a user's Facebook friends, the representation approximating a real playing card.
5. Deployed the above to a "live" host rather than a "developmental" one (i.e. webhost rather than my laptop).

All of the above is pretty solid, and was so before I started this site. In addition I also have the following:

• Working but buggy and incomplete Game component.

Progress on this component has been stalled by a lack of clarity on my own behalf with respect to the two subjects taken up in previous posts. The rules of Trumps and my desire to allow you to play "against" someone, right away.

Having thought that through, the further steps are as follows:

1. Develop module to allow players to play a game of Trumps with a set of cards representing their own friends, vs. a CPU opponent.
2. Allow game to post back win/lose to server when done (and persist).
3. Deploy to webhost and ensure compatiblity with major browsers.
4. Invite people to use and deal with inevitable issues.

At this point I can start to entertain some of the diversionary thoughts about the future:

1. Multiplayer (who's set of cards?)
2. Scoreboard.
3. Integrate into profile (challenge me! button).

Labels: approach

At first the idea of challenging your friends to a game of Trumps appealed to me. A "My friends are better than yours", "no they're not", "let's prove it!" scenario. This would clearly have some humourous appeal and capture the imagination, however there is tension between this goal, the actual game "Trumps", technical possibilities and the requirements of internet privacy.

Playing Trumps "head to head", so far as I can reason, would require the following:

1. Player 1 and Player 2 each have a different set of card representing respective friends.
2. The game would need to be remotely multiplayer.

Just these two things are massively problematic. If Player 1 trumps Player 2, then does Player 1 "gain" that friend from Player 2? Player 1 could then cycle through their entire stack and trump Player 2 with one of Player 2's own cards! Completely undermines the "my friends better" principle.

What about privacy! Where Player 1 is playing a card who Player 2 is not friends with, or worse has blocked, you are revealing statistics derived from the private part of that friends profile. While the statistics are not going to be greatly revealing this goes against an important principle and most likely breaches the terms of the Facebook API.

If you were going to challenge someone to a game of "My friends are better than yours" you would want to play live. I will have more to say on this in the future, but the kind of asychoronous messaging system involved in this are beyond what my webhost can provide at present (I would probably need to use Jetty http://www.mortbay.org/ rather than Tomcat, otherwise I would need 1 thread per connection and likely the limited resources provided by my webhost would crash under load). At least for the first iteration of the game I want to play vs. a CPU.

Labels: facebook api, multiplayer, privacy, scalability, Trumps

On the face of it Facebook Trumps is a straightforward idea. You play Trumps with cards representing Facebook friends, with statistics derived from thier Facebook profile. When you get into the detail of it, however, to implement it as a computer game, you have to flesh out a bit of the detail.

Trumps is a traditional game which has been played for centuries (http://www.phrases.org.uk/meanings/come-up-trumps.html). It is suggested that "Trump" is a 17th Century abbreviation of "Triumph", plausably- and that reference is made to the game in Shakespeare. The game was played with a traditional set of cards (http://en.wikipedia.org/wiki/Playing_card) with one suit being arbitarily declared as the "trump" suit. If two players hold cards of the trump suit the highest card is taken as winner. The game is more familiar when played with a set of statistics. There is more on some of the familiar modern interpretations of Trumps here: http://www.ultimate-top-trumps.co.uk/, the website of a modern commercial variant of the game, "Top Trumps" is availible here : http://www.toptrumps.com/.

Broadly, the game is played with a stack of cards where each card displays a set of unique statistical values representing an individual entity- the statistics shown are uniform and comparable between cards. The game begins where the cards are shuffled and dealt between two or more players. A player then takes a turn, selecting the most fortuitous looking statistic on the top card of their own deck. Each other player declares their own value for that statistic, the player with the highest value winning the round. The winner of the round takes the losing cards of all the other players and places them on the bottom of their deck. The next player will then take their turn. You then lose by running out of cards. You win by collecting the entire pack.

Labels: Gameplay, Opponent, Trumps, Winner

Java can be used on the server side via a servlet container- I chose http://tomcat.apache.org/ for the time being, as it is well documented, free and widely used.

Facebook is keen to allow developers to build application on top of Facebook and integrate with their site (http://developers.facebook.com/). They have a ready made Java client library my application can use as an interface to obtain data and getting a developer key is free of charge. There is an easy web interface on Facebook for managing your application.

Facebook applications can operate according to a number of models. Desktop or external web applications can make API calls - given a session has been authenticated via the Facebook site. This is the one extreme of "separateness" from the Facebook site.

There is also the option of having you application generate "FBML" (http://developers.facebook.com/documentation.php?v=1.0&doc=fbml) which is passed to a Facebook server. Facebook then in turn renders this as part of the user's profile screen. This option is perhaps the other extreme, least "separate" from the Facebook site.

The third option, which I have adopted, has the application run inside of a "canvas" page (http://wiki.developers.facebook.com/index.php/Your_callback_page_and_you). A user who is "on" Facebook follows a link to a specific page within of Facebook. This page appears as a normal Facebook page with menus etc, but contains an IFRAME which dominates the major content area. It is here I shall have the Facebook Trumps application run.

Labels: facebook api, java

Facebook Trumps is a game, which would imply quite a great deal of interaction between the user and the web application. For scalability reasons I wanted the client part of the web application, running in the browser, to do a lot of the work. If a HTTP roundtrip is required everytime an action occurs or decision needs to be made my server is going to get very busy.

This implies quite a "fat" client, however the option I was anxious to avoid was applets (http://java.sun.com/applets/). I've seen some applets which work well - but their major pitfall is that they are basically desktop applications- albeit running in a sandbox spawned "through" a browser. Also you that "clunk" delay as the JVM initialises and the applet loads (that is if the user has a JVM installed!).

Much better to my mind is the Google Web Toolkit (http://code.google.com/webtoolkit/). GWT allows GUI and other code written in the Java language to be compiled down to Javascript and then run through a browser. This seems an ideal approach for this problem, given that I have decided on Java. Any standards based browser can display the interface created, and yet I can work in the Java language.

Labels: applets, gwt, scalability

Plain HTML would not cut it for an interactive Trumps game. Many alternate web technologies exist however, many choices. For the client the instant favorite is Flash (http://en.wikipedia.org/wiki/Macromedia_Flash) and for the server most straightforward would be PHP (http://en.wikipedia.org/wiki/Php).

I chose Java. Java is a "proper" programming language - it is object oriented, typesafe and it is backed by two massive corporations (http://java.sun.com/ and http://www.ibm.com/developerworks/java). As I see in my day to day job massive corporations use Java to create complex business systems.

Skills gained in this language I believe will have more value than more lightweight languages such as PHP or "designer" oriented packages like Flash. Java is also free, unlike .Net, but very similar both in syntax and architecture (http://www.google.com/search?q=java+c%23).

The real alternate which offered itself was Ruby, or its web component, Rails (http://www.rubyonrails.org/). So many comments about this language rave about it and say how productive it is, and how it encourages you not to reinvent wheels. Both of these arguments are tempting, however for now I feel Java is more established, and for now, a better skill to learn.

Labels: .net, flash, gwt, java, php

The cart here comes slightly before the horse. Strictly, I believe a desktop application would be a more suitable form for a game. The Facebook API, which is required to access the friends this game is predicated upon, supports desktop applications so this certainly would have been an option.

The web, however, is the future- that is plainly how it seems to me. The web primarily is where I should like to gather skills and so I have chosen that this game will be browser based.

Other advantages exist, of course. The game becomes more accessible as the user does not have to download installation packages and run installers. The web has a far greater propensity to allow code to be platform neutral. The game must use the web as its platform.

Labels: application, desktop, web

I'm not a professional programmer, I did some programming at university and am exposed to the consequences of other people's code at work. Making a Trumps game from Facebook friends is not the most complex or difficult thing to do - however I want to do it right; as simple and as sensible as I can.

This is for two purposes - First in order that I can finish it, that it does not become lumpen and unmanageable and lead me just to give up - Second to learn, to spend sometime absorbing other people's experiences and hopefully improve my own skills. I want to become a professional programmer, and perhaps this can help.

My sources of wisdom, in other words what I have studied, are books blogs and articles from the Internet. O'Reilly have a service called Safari (http://safari.oreilly.com/) which I have been able to join. There are masses of software engineering and coding books on there. I have alse been able to follow discussions on usenet (via http://groups.google.com/) and application programming discussion websites (such as http://www.theserverside.com/). Other sources of information include developer blogs and API documents.

Labels: approach, developerworks, o'reilly, safari, serverside

Facebook Trumps is a game which makes use of the Facebook platform. The client part of the game is written in GWT and the backend which queries Facebook is written in Java.

I am Jim Gumbley (http://www.jgumbley.com/) and have been creating this game for over a month now. This page is intended to support some of the decisions I have made. To actually play the game you need to log into Facebook and add it as an application.