petergault/quill-writer

Stories with Friends - Learn vocabulary by writing stories.

Quill Writer

Quill Writer - Learn by Writing Together

View the work in progress site here

Check out the wiki for more information about the project and how to contribute.

##Compass Activity Specification

###Module URL

The module_url for this application is /#/.

For example,

https://quill-writer.firebaseapp.com/#/?uid=asdf1234&sid=5678aoeu

will be the complete url Compass loads for Stories with Friends.

###Form URL

The form_url for this application is /#/form

For example,

https://quill-writer.firebaseapp.com/#/form?uid=1234klasdf

The form url is served up when an administrator wants to add another activity. Compass provides a small form to input the name, description, flag and topic. Stories with Friends must provide a form for vendor data.

A Stories with Friends Activity will need the prompt, list of word + definition pairs, and the number of words used to finish the story.

Installation

• Clone this repo to your local machine
• Install development dependencies npm install
• Install gulp globally npm install gulp -g
• Run gulp
• Open a browser window to http://localhost:4000/

Developing

Stories with Friends is an Angular front end application that uses firebase for socket communication and game state persistence between students.

We utilize Gulp for a build tool and development server. Bower for most front end dependencies. NPM for installing development dependencies and versioning.

We write modular front end code with Browserify. While we still use Angular dependency injection, we must "require" in and "export" the application modules to be walked and injected into the Browserify bundle.

###Browserifying Conventions to Follow

Most modules will be required in a their directory. For the Profanity Filter, we require it in like this (from app/game/index.js):

var ProfanityFilter =
require('./../../common/services/profanity-filter/');

Note the trailing slash. By default, browserify will search for the index.js file in the profanity-filter/ directory.

If we were to require a file directly, the trailing slash can be omitted. For example, requiring constants would look like this (from app/app.js)

var constants = require('./../common/constants')

###Examples of Browserifying the app

####Adding a helper function to src/app/game

• Make a new "module" game-helper.js in src/app/game/

function gameHelper(game) {
  //do something cool
}

module.exports = gameHelper;

• Require in the gameHelper in src/app/game/index.js

var gameHelper = require('./game-helper');

Notice the relative module include

• Use the function as you wish

...
var result = gameHelper(game);
...

####Creating a New Service

We need to create a spell check service for our game view.

• mdkir src/common/services/spell-check
• $EDITOR src/common/services/spell-check/index.js
• Write your awesome spell check service
• Make sure to export out the angular service name you register with.

module.exports = 'sf.services.spellcheck'

• Require in the spell check module, so Browserify knows to bundle it.

var SpellCheck = require('./../../common/services/spell-check/');

angular.module('example-consumer', [
  SpellCheck
])
...

Because SpellCheck is equal to 'sf.services.spellcheck', Angular knows which Service 'example-consumer' needs as a dependency.

To reiterate,

1. requireing the module file tells Browserify to include it in the source bundle.
2. Passing the string object to 'example-consumer' tells Angular to look for the 'sf.services.spellcheck' module.

If you've used browserify and node for that matter, you will already know you can export any JavaScript out of a module you'd like! But for this project we are only exporting string module ids.

As an added bonus all modules are wrapped in a function closure, so feel free to add "private" functions if desired as they will not pollute the global name space.

Contributing

Additional information can be found in the wiki.

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request