Integrating It All
[ 348 ]All that remains is for us to declare the GameSession document class, which becomes
the data access object for the GameSession collection. GameSession has a database
ID, which will be generated by Mongo, a sessionId which we generate on the fly as
a stringified UUID, and it has a map in which the game session state will be stored:
@Document
class GameSession {
@Id BigInteger id
String sessionId
Map cache
}Surprisingly, that's all the code it takes to build our game server. All that remains is
to build a simple UI that can use it.
The Game UI
The nature of the game engine we have built is similar to a state machine. Pages
represent the different states so, as we move from state to state, we move from page
to page in the UI. We started out with the ambition of building a mobile app to work
with this DSL and it turns out that the jQuery mobile framework actually works very
well with this notional page model.
With jQuery mobile, we build a single page app, which contains individual "pages".
The pages are declared as div element's with a data-role attribute of "page". Here
is the play round page of our TicTacToe game. You will notice that the content div
element is empty. This will be filled in dynamically from a template as the game is
being played:
<div data-role="page" id="roundX" class="engine-page grid-page">
<div data-role="header" id="header">
<h1>Play Round</h1>
</div><!-- /header --><div role="main" class="ui-content" id="content">
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="#" onclick="playRound('X');">Play X</a>
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->http://www.ebook3000.com