Pawns and Tiles: Client Workflow

sapper_p2In 2011 when I started designing the game/experiment (here the introduction to pawns and tiles) I defined a simple architecture able to manage the minimum requirements. I used jQuery to manipulate and bind DOM and BackboneJs only to manage Models and inheritance.

At that time I preferred not to depend on a JavaScript framework for the infrastructure because I wasn’t sure about the result I would have had to achieve and I wasn’t confident to obtain it with the existing frameworks, because of my lack of knowledge. So I preferred to write more code but to be in full control of this.

 clientSchema

jQuery was used only in the EventBinder and RenderService layers, so in case I could be able to remove it completely only substituting the implementation of those layers.

It can seem a little bit paranoid, but in 2008 a team leader asked me to migrate a project from PrototypeJs to jQuery.
At that time it was very common to put javascript code everywhere, directly in page and so on.

Solve that request wasn’t been hard, it was been a living hell.
I swore to myself that I would never repeated  that error twice.

I created dedicated services and controllers for every aspect of the game, but today I think that some objects have too many responsibilities.

Controllers List
Name Description
ActionsController It is bound on the click on a skill button of a pawn or a specific area on the map used by specific skills (ie: move). It has the RenderService and the ActionsService as a dependencies.
AddPawnController It is bound on click of a pawn on the side of the board, but only when the game is in the expected status (ie: the begin of a game). It has renderService, addPawnService as a dependencies
AnimationController It is bound on click of the pawns of your roster to manage highlights and all the animations in the board. It has renderService, turnService, turnController as a dependencies
GameController It is bound on click of the buttons “save” and “end turn”. It has the game Model as a dependency
InfoController It is bound on click on pawns to show additional informations. It has the renderService as a dependency
TurnController It is responsible of the turn, to verify the status of a pawn and the board.
Services List
Name Description
ActionsService It is responsible of the usage of a skill by a pawn and apply the game rules for this specific domain. It has the mapService as a dependency
AddPawnService It is responsible only in the adding of new pawns at the begin of a match or in the other cases the game expects it. It has the gameRepository as a dependency
AnimationService It is responsible for the animations of the UI
EventService It is responsible in the binding of the UI, allowing click and interactions all along the board.
GameService It is responsible of the current game. It allows/denies to end a turn, load a specific game or save a move. It has the gameRepository as a dependency
MapService It is responsible of the map: every move, every position, line of sight between pawns, are validated through this service. It has a Map Model as a dependency
RenderMapService
It is responsible to draw and update every object in the map and the map itself. It has the game Model and the RenderContract as a dependencies
RenderService It is the main service to draw or update everything and through the application it is the only render used as a dependency. It has the renderMapService and the renderSideService as a dependencies.
RenderSideService It is responsible to draw and update only the side of the game. It has the game Model and the RenderContract as a dependencies
TurnService It is responsible of the status of the turn, if the player has one or more actions to perform, the kind of actions, etc.

In javascript is a pain manage dependencies, commonly you inject explicitly your object or sometimes you define some objects as global at your application level.

The last option makes very hard to test your application and you need more integration test or E2E test.
So if you notice something strange, a missing logic in my dependencies, you feel the right way.
Looking at my current workflow few month ago I thought that if I had used AngularJs I could simplify the workflow removing the layers render and eventBinder and at the same time I would solve the problem of the dependency injection and I would do more consistent all the application.

 I know that AngularJs is not the correct framework to develop games (look at Angular Sweet Spot section), but for this specific game, by its nature, I’m sure it won’t have side effects using it.

So in the next future I want to have thisclientSchema-angular

Obviously I will have to do a few works because my concept of Controller is not exactly the same of Angular, but I’m quite confident that it won’t take too much time.
Speaking of Models, here the list

Models List
Name Description
Pawn It is a base class, it defines the common behaviours and properties of every pawn.
Knight It extends the Pawn object adding specific skills and values for the common properties
Paladin It extends the Pawn object adding specific skills and values for the common properties
Pretorian It extends the Pawn object adding specific skills and values for the common properties
Sapper It extends the Pawn object adding specific skills and values for the common properties
Scout It extends the Pawn object adding specific skills and values for the common properties
Sniper It extends the Pawn object adding specific skills and values for the common properties
Game It represents the game itself. The current status of the match and of the turn. Using this object you can retrieve all information you need about the map, pawn’s rosters and so on.
Map It represents the map of the game. You can use it to get information about the content of the coordinates and it is responsible of the changes in the map
Roster It is responsible of every pawn a player owns on the map. You can use it to get a specific pawn of a player, remove it or add it following the game rules.
Side It is responsible of the side of every player. You can use it to know how many pawns a player has in his stock and to get a new pawn of a specific kind and to add it in the roster.
Skill It is a base class, it defines the common properties of every skill. The game rules of every skill right now are applied using every skill through the actionsService
Skills There are a few of skills right now, everyone with specific properties: Combat, Slash, Parry, HolySlash, Heal, Assault, Block, FireBomb, Stab, Rush, Strike, Dodge. Even if the move is treated as a skill in the game, it is a property of every pawn and not a formal skill.

Aside all these models, services and controllers there are a few of factories, contracts and a very light repository layer to communicate with the server side of the game.
I’ll go deeper in the analysis of every single part of the client and I will try to describe as best as I can all the refactor to implement AngularJs in the current workflow.

I want to remember to you that I’m not in the game industry so this is not a “how to …” tutorial, but more a diary of “How I did it”.
Then any feedback/suggestions are more than welcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s