Making of Anima: UNICO – General structure

In my last post I went through the tools I’m using to develop Anima: UNICO. I have to add another one: SourceTree, a graphical UI for Git very useful and nice, and which makes easier following the GitFlow pattern. Obviously, I don’t need to use GitFlow (and actually I don’t follow it fully), but I like it, as a base over which organize me.

Now, let’s start with the meat. First, how to organice a javaScript application the size of Anima: UNICO? After my initial investigations, I arrived to the following workflow:

  1. I create as many Javascript files as I want/need, usually one per class.
  2. To publish them, I use Grunt to concatenate them and then to minify and uglify them. This way I get only one JavaScript file to publish on the web.

Regarding the organization of the javascript files, I’ve been following (more or less) Model-View-Controller patterns.

  • js/ – General folder for javascript files.
    • controller/ – Controllers.
    • data/ – Data.
    • view/ – Views.
    • model/ – Models.
    • locale/ – Localization.
    • libs/ – Third party libraries
    • vendor/ – Third party libraries
  • sass/ – SASS files.
  • img/ – Image files
  • fonts/ – Fonts
  • css/ –  CSS files.
  • index.html – Main web.
  • indexLocal.html – Main web for local debug.
  • Gruntfile.js – Grunt script.

Controllers

They control the communication between models, prepare data for the user, and receive the user actions and act on them.

Data

The concrete instance data for every class. This is, the data for every Advantage, Spell, Martial Art, etc.

There are several ways of storing data. As I wanted my application to work offline, I could not use a database. In the end, I stored them in their own initialization. This really is a bad idea. I should have stored them in JSON format from the start. In the future I will make the change.

An example:

addVentaja(new Ventaja( VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO, “”, VENT_APRENDIZAJE_INNATO_EN_UN_CAMPO_DESC, REPETIBLE_OPCIONES, [2,3], [], true, [LISTA_TIPOS_SECUNDARIAS], [aprendizajeInnatoCampo], GRUPO_SECUNDARIAS ));

This line of code initialices the advantage “Natural Learner, Field”.

Views

Views generate the UI and interact with the user.

Models

Models are the base classes. Character, Race, MartialArt, etc…

Localization

Localization is everything related to showing the application in several languages. Right now, this means spanish and english, and french is in the works. For this, I have the inestimable help of Andrew “Dynaes” Reich and Vincent “Moklo” Bouscarle.

In another post I’ll detail how I do the localization.