/pro-grid-client

Angular front-end for progrid.io, a live multiplayer pixel art game http://progrid.io

Primary LanguageJavaScript

progrid.io client

progrid.io is a live multiplayer pixel art game.

progrid.io

progrid.io is made up of two modules. pro-grid, a node/socket.io server which handles many clients, and pro-grid-client, the user interface built as a client-side javascript app using angularjs.

quickstart

If you know what you are doing:

# make sure deps are installed
gem install sass
npm i -g bower gulp
bower install && npm install

Then start up a server following the instructions here: pro-grid

Once you have a pro-grid server up you launch your client server:

# configure your client
gulp config

# launch a client server at http://localhost:9000
gulp watch

If you need some help see below.

getting started tutorial

install dependencies

We assume you have up-to-date versions of both ruby and node installed on your machine. We recommend rvm and nvm for managing your node and ruby installations.

global

you need sass, bower, and gulp installed globally

gem install sass
npm i -g bower gulp

project

install the project dependencies

bower install && npm install

start up a pro-grid server

This project interfaces with a pro-grid server. Your client needs a copy of it running.

Instructions for building and running a pro-grid server live over at: pro-grid

The hostname for development and production is configured in config/development.json and config/production.json respectively. By default this should be http://localhost:9001 for your local development environment.

configure your environment

You must generate a config.js file specific to your environment (development, production, etc.).

gulp config

Will generate a config.js reading values from config/default.json and config/development.json.

By default your environment will be set to development. The target build environment is set via the environment variable GULP_ENV. You can generate a config.js to read values from config/production.json by running:

GULP_ENV=production gulp config

launch a client server

The client app essentially compiles down a bunch of static files. So this project comes with a static file server to aid development. The development server reloads and recompiles files when it has detected they have changed.

gulp watch

This will launch a server at http://localhost:9000

The server serves files within the app/ directory and the .tmp/ directory. It also fires up a livereload server so the browser is refreshed every time a file is changed and compiled.

done!

Happy coding! You should be all good to go now

Want to get involved?

We could always use some help!

We primarily need help with:

  • Writing tests
  • Coming up with siq new features

Fun Stuff

If you are a fan of the grid (and have had the resolve to read this far) you would probably enjoy pro-grid-utils, a collection of fun hacks you can run in your console.