A boilerplate repo for building responsive and accessible Open Web Games using the DOM.

The DOM's boxmodel lends itself to responsive 2d-casual game board layouts, and the high tuned HTML render flows of our browsers are more battery safe, while providing ooportunities for graphics acceleration and performance. With boxart-boiler games, the idea is to build DOM-first. If you want to drop down into lower level drawing APIs, you can always temporarily rasterize and enhance an element outside of boxart.

Moreover, HTML gives us a way to represent whatever information we mean to convey visually, no matter how complex, in a way that assistive technologies can tap into. This is how we can make truly open Open Web Games.

In order to use or contribute to this repo you'll need the following things installed on your system:

• NodeJS/NPM
• GruntCLI npm install -g grunt-cli
• Git

To start working with this repo and build your own responsive, accessible game we recommend you either download the code for the latest release from the releases page, or fork this repo and use git to clone your fork.

Once the code is on your machine open a terminal in its directory and run npm install; this will install all our dependencies and you'll be able to run the project's grunt tasks. To see the site hosted locally run grunt and visit: http://localhost:8080 in your browser of choice.

The following tasks are provided by this boilerplate for use during development.

grunt

The default grunt task runs webpack-dev-server; a task which hosts your site on a local http server and watches your code for changes. When changes are detected webpack will automatically cut a new build and the code (where possible) will be automatically swapped into the browser, meaning you don't have to refresh the page to see updates. If the code cannot be hotswapped the page will be refreshed so the latest changes are visible. The webpack-dev-server task is configured in the grunt-webpack.js file in the tasks directory, and is setup to read the webpack.config.js file to configure webpack's behavior.

grunt docs

TK

grunt lint

This repo uses eslint to enforce code quality and a consistent style across the project. Running grunt lint will notify you of any possible JS errors or style variations. This task is configured with numerous .eslintrc files that are scattered throughout the repo. Note that none of those files actually define linting rules, instead they reference predefined rule sets which live in the eslint directory.

An .editorconfig file is also provided to help reduce frustrating style errors that could bog down this linting task. If your text editor or IDE supports it, install an editor config plugin.

grunt test

The test task first lints the code the runs our tests using the karma test runner. Testing in JS typically involves lots of moving parts and this project is no exception: tests leverage the Mocha Testing Framework, and the Chai Assertion Library.

This task also sets up a watcher that will re-run tests when changes are detected. To run the tests only once the task karma:ci can be used instead, but note it will only run the tests and skip linting.

grunt build:dev

The build task uses Webpack to bundle our code for release for a dev environment. Before building this task runs both the lint and karma:ci tasks, to ensure code quality. The webpack.config.build.js file is used to configure webpack's behavior during this task.

This project makes liberal use of the following technologies:

• ES2015
• SoundJS
• React
• Webpack
• Stylus
• Autoprefixer