creating a game module

use the script !

I've written a python script (newModule.py) which should handle creation of a new module. Just run it, enter your module name and it should do all this silly legwork.

The last two steps (6. require() your module from app.js and 7. include your directive in game page html) remain manual because there are additional, less tedious steps needed to fully integrate the module into the game. You should develop the module using your test html page first and then request integration on gitter; @7yl4r will help handle that kludgery. This script should get your test page set up with boilerplate code in <1s.

Manual

I'm leaving these instructions here for reference and also because they give some insight on what the script is doing.

The way this all fits together is a bit odd, so I'm going to walk through the steps of creating a new game "module". Our example module will be the "youWin" module, which shows the "you win" screen. I'll include code snippets here, but for a prettier diff of the changes view this commit.

1. copy a simple existing module into new dir

Create a new directory in ng-modules for your module. To get started It's easiest to copy an existing module as a boilerplate. (TODO: add a real boilerplate module) For now, let's copy the contents of "./ng-modules/mainMenu" into our new directory "./ng-modules/youWin".

Here's a quick breakdown of a module's contents:

• mainMenu.html - the angular template for this module
• index.html - a page which loads the full application's javascript, but only shows this module in the dom. This is for testing & speedy development.
• mainMenu.less - a less (basically fancy css) file to define styles needed for your module
• mainMenu.js (OR mainMenu.coffee*) - defines an angular directive for your module and the relevant controller code.

*NOTE: you can use a javascript or coffeescript file for your controller. Don't worry about compiling the coffeescript, that's all handled at build-time.

2. rename files

we want to rename all mainMenu.* files in this new directory to be youWin.* The camel-case spelling is just a convention, but it's best we stick with it in case we get more clever about generating modules later.

3. mainMenu.js

Firstly, we want to replace instances of 'main-menu' with 'you-win' (note the use of html-friendly dashes in place of camel-case sometimes, this is another non-required convention to follow), and 'mainMenu'->'youWin'

// previously:
var app = angular.module('main-menu', []);
...
templateUrl: "/ng-modules/mainMenu/mainMenu.html"
...
module.exports = angular.module('main-menu').name;

// now:
var app = angular.module('you-win', []);
...
templateUrl: "/ng-modules/youWin/youWin.html"
...
module.exports = angular.module('you-win').name;

This sets up a new angular module, and connects your new template to the directive.

4. modify /youWin/index.html to test your directive

Setting up the new test file shouldn't be too hard. At it's simplest you just change the directive included:

<!-- before -->
  main menu is the game's starting menu.
  <main-menu></main-menu>
<!-- after -->
  you win is what shows when you win.
  <you-win></you-win>

5. declare module in package.json for require

To tell the build script where the new module is, we need to add the name of the module & the location of the script to the "browser" object in /package.json.

   "browser":{
        ...
        "main-menu": "./ng-modules/mainMenu/mainMenu.js",  // added this comma and the next line
        "you-win": "./ng-modules/youWin/youWin.js"  // (or .coffee)
    }

6. add module require() to app.js

To include your module in the application we add a require statement to the "main" script, /app.js:

var app = angular.module('ng-boot-boiler-demo',
    [
        ...
        require('main-menu'),  // added this comma and next line
        require('you-win')
    ], 

This connects your javascript in to the main application.

7. add your directive to /index.js

To add your module's html to the main application, we add your new directive to the main game page, /index.html.

    <splash-header></splash-header>

    <div class="container">
        the sections below are toggled hide/show as needed

        main menu
        <main-menu></main-menu>
        
        <!-- added new directive: -->
        you win
        <you-win></you-win>

    </div><!-- /.container -->

add your less to the main app

To have your .less styles be included, you must add an import at the top of /app.less

@import "ng-modules/youWin/youWin";

8. Build your module

Now you're finally ready to flesh out the module. Change the html in the template (ng-modules/youWin/youWin.html) and add controller code to go along with it in ng-modules/youWin/youWin.js. You can quickly develop and test by using localhost:8000/ng-modules/youWin to navigate to your module directly.