Getting Started Developing

This project doesn't use a game engine and is coded largely in the programming language many of us love to hate - javascript. As such we are building up a lot of code. You don't need to understand all of it! In fact you shouldn't have to even look at most of it. In order to help break things up we've separated "scenes" of the game into "game modules" using angular, browserify, and less.js.

What you need to know

Game modules are organized into folders in the /ng-modules/ directory. Each has an angular.js .html template, a .less style file, and a javascript or coffeescript file. The html & less define the "view" for the scene, and the js/coffee defines the "controller". The module can include other files such as a index.html for setting up a test or additional classes/helpers for the controller.

Let's look at an example module and break it down.

the view (.html & css)

<!-- exampleModule.html -->
<div class="container" ng-controller="exampleController as exmplCtrl">
    <h3> Welcome to The Example!</h3>
    exampleProperty = {{exmplCtrl.exampleProperty}}<br>
    You may:
    <ul>
        <li><button class="btn btn-inverse" ng-click="exmplCtrl.buttonClick()">click!</button></li>
    </ul>
</div>

/* exampleModule.less */
.sample-btn{
  .btn .btn-inverse
}

Notice how we're injecting a variable into the view using {{double brackets}}, and calling a function on the controller using ng-click.

Alright, hold on to your butts, here comes the controller:

require('angular');
Nodule = require('nodule');  // for nodule helpers

// init the angular app
var app = angular.module('example-module', []);

// set up the "directive" to connect html view to this
app.directive("exampleModule", function() {
    return {
        restrict: 'E',
        templateUrl: "/ng-modules/exampleModule/exampleModule.html"
    };
});

// set up the actual controller
app.controller("exampleController", ['data', '$scope', '$rootScope', function(data, $scope, $rootScope) {
    // use vm (short for "virtual model") to keep a reference
    var vm = this;
    vm.exampleProperty = "before entry";

    vm.onEnter = function(){
        // runs when the module is brought into player view
        vm.exampleProperty = "after entry";
    }

    // nodule helps attach init. and teardown functions to events (and a few other things)
    vm.nodule = new Nodule($rootScope, 'example-module', vm.onEntry);

    vm.buttonClick = function(){
        // this function is triggered by the button
        vm.exampleProperty = "after click"
    }
}]);

// this is needed to connect with the main app.
module.exports = angular.module('example-module').name;

First thing to notice is the use of require node.js-style. Yes, you can do that (thank browserify). Next up we have the & directive setup: in most cases, you won't have to change any of this. The only part we really care about here is app.controller. Take note of angular's odd array syntax here, the strings define dependencies on angular services, which are then injected to the controller function (the last array element). Inside the controller you can do whatever you want, but this is my favorite syntax. You also don't have to use the Nodule class, it is just there to help you do things modules typically do.

trying it out

To build the app locally should be pretty quick and painless, check the INSTALL.md for detailed instructions.

To test out our example, navigate to localhost:8000/ng-modules/exampleModule - you might get some errors in the js console as the game tries to init under the assumption you're at the root directory (we're working on this), but thing should work, nonetheless.

working on a real module

Now that you're ready, take a look at the list of modules, pick out one that you think needs work, and get crackin! To read more about game modules and how to use them checkout the game module overview