Home page https://github.com/ferguson/check
Version 0.1.0 - 2015.03.30 - initial release
Use your favorite in-browser, plugin-free* approach to visualize a solution for the following problem:
Consider a checkerboard of unknown size. On each square is an arrow that randomly points either up, down, left, or right. A checker is placed on a random square. Each turn the checker moves one square in the direction of the arrow. Create an algorithm that determines if the checker moves off the edge of the board.
The solution should
- Use HTML5/CSS3/Javascript
- Only needs to work in Chrome
- Visualize the solution in-browser
- Include simple UI to start/stop/advance/reset the visualization
- Use a package manager to manage dependencies
- Use a scriptable build system (if there are build/run steps)
- Use gitHub to deliver the solution
- Bonus: Use WebAudio to enhance the visualization
Our favorite solutions have used very current Javascript techniques. We like to see good modularity using requireJS - to organize code into "classes". We also like to see good MVC. Visual design isn't as important, but doesn't hurt. We love npm, gulp, bower. Super extra bonus points for browserify, minify, uglify, watch, and local Web server (via gulp).
-
Does "plugin-free" mean not using any external library? If so, why is a package manager needed to manage dependencies if there isn't any? Or does it refer to development dependencies, e.g. CSS preprocessor?
This just means no Flash, Unity, or Applets. Use whatever libraries and package management you want.
-
Regarding the unknown size of the checker board: is it supposed to be a random number? Or is it in a parameter that the user can specify in the UI?
It would be great if you could initialize the board's size through the UI
-
Would you mind if I write it in ES6? I'll include a compiled, runnable version.
That would be great! Double bonus points!
Requirements: git and the standard system dev tools
This package uses node, but it will download and install a local copy directly in the package itself. No need to have node preinstalled.
Clone a copy of Check:
$ cd ~
$ git clone git@github.com:ferguson/check.git
Run the setup script:
$ cd check
$ ./setup
This will download and install a local copy of node and npm. Then the needed npm modules will be installed. Finally, gulp will be used to build the package.
To run Check:
$ cd ~/check
$ . activate
$ gulp webserver
This should launch a browser window on your machine pointing to the webserver. If the browser window fails to open automatically, just open a browser page and point it at http://localhost:8000/.
Hopefully the UI is self explanatory (assuming you have read The Challenge above).
Press Contrl-C to quit the webserver.
Just delete the directory that Check was cloned into. Everything it depends upon, including it's local node installation, is contained in that directory.
You can see my abandoned first visualization by appending #2d to the end of the URL: http://localhost:8000/#2d.
You might need to edit the URL twice to get it to load (that's the special nature of # parameters in URLs).
The play field does not resize when the browser window is resized.
Not very mobile friendly. If you want to try it, uncomment the host: '0.0.0.0' line in the gulpfile before running the webserver.
There are a number of other bugs and issues noted in the TODO file.