Prerequisites

Install node.js on your system.

node.js and npm

node.js is a JavaScript application runtime that allows you to run JavaScript in a desktop or server environment. node.js includes a package manager called npm. The npm documentation is a good resource, but here's the cheat sheet for this project.

• You can search for libraries you want to use here (or use our benevolent overlord Google).

• Once you know you want to use a library, say it's lodash, go to the root of the project and run npm install lodash --save. This will download the lodash library from the npm public repository and place it in a folder called node_modules in your project root. It will also update your dependency list in package.json.

• In your code you can load a library module one of two ways

  1. var $ = require('lodash'); This is the ECMAScript 5 notation.
  2. import $ from 'lodash'; This is the ECMAScript 6 notation.

Installing dependencies

In the project root run npm install. This will download and install into a folder called node_modules all the dependencies listed in package.json.

Running using Electron

This project's runtime is Electron. Electron is sort of like Chrome and node.js combined into one runtime. It allows developers to create desktop applications using web technologies.

Method 1

Install electron globally

npm install electron-prebuilt -g

Go to the project root and run electron .

Method 2

Go to the project root and run electron bin/launch.js.

Debugging

Since Electron is built on Chrome, you get to use Chrome's devTools. Dev tools allows you to inspect DOM elements, read console.log output, set breakpoints, and everything else you'd expect from a debugger. To open the dev tools go to View -> Toggle DevTools.

If you make a change and want to reload the application go to View -> Reload.

The Challenge

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. Visualize 1) an algorithm that determines if the checker moves off the edge of the board and 2) an algorithm that determines when the checker enters a cycle.

• Include UI controls to play, stop, and reset the game.
• Include UI controls to change the size of the board and to shuffle the arrows.
• Include UI indicators for the checker 1) moving off the board and 2) entering a cycle
• Include audio to make things more interesting.
• Add some style to make it look good.

The skeleton project is set up to use a front end framework called React. React is pretty easy to learn, so definitely read the documentation. The skeleton project has one example of each important aspect of React. So please be sure to study the comments and the code. The UI is setup using react-bootstrap. React-bootstrap has common UI elements such as buttons, and inputs so should help speed up development.

Using react and react-bootstrap isn't required, but it can really help speed development.

Some important notes

Use the file extension .jsx for all your javascript files. The project is automagically setup to recognize that extension and transpile the JSX (used with React) and ES6 syntax to regular ES5 at runtime.

The entry point to the application is index.html, which in turn points immediately to lib/main.jsx. Do not modify index.html or main.js, which is just a bootstrap to get electron running.

Use whatever libraries you want from the npm public repository. Again you can find them here and install them with npm install cool-lib-i-found --save. However, for the purpose of this challenge, less is more so try to use the minimal set of node modules.

There is an optimal algorithm for determining when the checker is in a cycle. Feel free to google it.

Submitting

Create a github repo for your solution and submit this repo.