Skip to content

Commit

Permalink
Reformat README
Browse files Browse the repository at this point in the history
  • Loading branch information
mcmire committed Apr 1, 2012
1 parent ab60ef7 commit 9e67d44
Showing 1 changed file with 48 additions and 14 deletions.
62 changes: 48 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,76 @@

## What is this?

It's a clone of one of the Zelda games, specifically *Link to the Past*, written entirely in JavaScript.
It's a clone of one of the Zelda games, specifically *Link to the Past*, written
entirely in JavaScript.

Current progress on Heroku here: <http://zelda-lttp.herokuapp.com>

## Before you do anything

Bundler is being used to load the few dependencies this app has at runtime, so you'll want to make sure you have that installed. Then run:
Bundler is being used to load the few dependencies this app has at runtime, so
you'll want to make sure you have that installed. Then run:

bundle install --binstubs

## Running

The game runs inside a Sinatra app, because it just ends up being easier. To boot the app all you have to say is:
The game runs inside a Sinatra app, because it just ends up being easier. To
boot the app all you have to say is:

bin/rackup -p PORT

Now visit <http://localhost:PORT>, and you're off to the races.

## Developing

Sass is being used for stylesheets, and CoffeeScript is being used for the JavaScript. To play nice with Sinatra (and also make it so the app is deployable to Herkou), CSS and JavaScript files are generated and stored in the repo. It would be a pain to do this manually, so [Guard](http://github.com/guard/guard) monitors the `app/stylesheets` and `app/javascripts` directory, and when you update a source file, it is compiled and placed in the appropriate directory (`public/stylesheets` and `public/javascripts`, respectively). So, before you start writing code, simply run:
Sass is being used for stylesheets, and CoffeeScript is being used for the
JavaScript. To play nice with Sinatra (and also make it so the app is deployable
to Heroku), CSS and JavaScript files are generated and stored in the repo. It
would be a pain to do this manually, so [Guard](http://github.com/guard/guard)
monitors the `app/stylesheets` and `app/javascripts` directory, and when you
update a source file, it is compiled and placed in the appropriate directory
(`public/stylesheets` and `public/javascripts`, respectively). So, before you
start writing code, simply run:

bin/guard

## Architecture

Except for a few images, the game is built entirely using Javascript, CSS, and the HTML5 Canvas API.

One thing you need to know is that instead of using jQuery, I've opted to use a collection of microframeworks, packaged together using [Ender](http://ender.no.de). I think the idea Ender brings to the table is pretty neat, so I'm trying it out. While working with several modules is a bit more cumbersome, the reduced size of these microframeworks compared to jQuery is very encouraging (as an example, our package measures 70kb compared to jQuery 1.5.2, which is 221kb!).

The concatened version of the package we are using is located at `vendor/javascripts/ender.js` for you to inspect. It's important to note that these modules approximate, but don't exactly match, the jQuery API. You'll want to read up on each one. Here's the full list of modules in our package:

* [domReady](http://github.com/ded/domready) - A cross-browser domReady. With Ender, this is available as `$.domReady(function() { ... })`.
* [Bonzo](http://github.com/ded/bonzo) + [Qwery](http://github.com/ded/qwery) - A DOM utility library and DOM selector engine. With Ender, you can say e.g. `$('div > p).hide()`, `$('<div />).attr("id", "foo")`, etc.
* [Bean](http://github.com/ded/bean) - DOM event library. With Ender, you can say e.g. `$('div').bind('click', function() { ... })`, `$(window).trigger('customevent')`, etc.
* [Valentine](http://github.com/ded/valentine) - General purpose utility library. This is basically along the same lines as Underscore, so you can say e.g. `$.v.each(function() { ... })`, `$.v.map(function() { ... })`, etc. There are a few methods in Underscore that Valentine doesn't have, and the type checking methods that Valentine has are a different API than Underscore. Most importantly, the callback passed to `each()` is called with different arguments in Valentine than Underscore. It's a bit confusing actually: for an array, it uses the native `forEach()`, so it's `callback(elem, idx, ary)`, but for an object, it's `callback(key, val, obj)`. Perhaps a later update will correct this.
Except for a few images, the game is built entirely using Javascript, CSS, and
the HTML5 Canvas API.

One thing you need to know is that instead of using jQuery, I've opted to use a
collection of microframeworks, packaged together using
[Ender](http://ender.no.de). I think the idea Ender brings to the table is
pretty neat, so I'm trying it out. While working with several modules is a bit
more cumbersome, the reduced size of these microframeworks compared to jQuery is
very encouraging (as an example, our package measures 70kb compared to jQuery
1.5.2, which is 221kb!).

The concatened version of the package we are using is located at
`vendor/javascripts/ender.js` for you to inspect. It's important to note that
these modules approximate, but don't exactly match, the jQuery API. You'll want
to read up on each one. Here's the full list of modules in our package:

* [domReady](http://github.com/ded/domready) - A cross-browser domReady. With
Ender, this is available as `$.domReady(function() { ... })`.
* [Bonzo](http://github.com/ded/bonzo) + [Qwery](http://github.com/ded/qwery) -
A DOM utility library and DOM selector engine. With Ender, you can say e.g.
`$('div > p).hide()`, `$('<div />).attr("id", "foo")`, etc.
* [Bean](http://github.com/ded/bean) - DOM event library. With Ender, you can
say e.g. `$('div').bind('click', function() { ... })`,
`$(window).trigger('customevent')`, etc.
* [Valentine](http://github.com/ded/valentine) - General purpose utility
library. This is basically along the same lines as Underscore, so you can say
e.g. `$.v.each(function() { ... })`, `$.v.map(function() { ... })`, etc. There
are a few methods in Underscore that Valentine doesn't have, and the type
checking methods that Valentine has are a different API than Underscore. Most
importantly, the callback passed to `each()` is called with different
arguments in Valentine than Underscore. It's a bit confusing actually: for an
array, it uses the native `forEach()`, so it's `callback(elem, idx, ary)`, but
for an object, it's `callback(key, val, obj)`. Perhaps a later update will
correct this.

## Roadmap

Expand Down

0 comments on commit 9e67d44

Please sign in to comment.