- Quill Community: Our community HQ
- Real Time Chat: Join us in the public chat room.
- Documentation: Docs + Install Guide
View the work in progress site here
###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.
- 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:3000/
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,
requireing the module file tells Browserify to include it in the source bundle.- 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.
Additional information can be found in the wiki.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request