Demo

https://georgybu.github.io/15-puzzle/

Local server

Start

npm i
npm start

http://localhost:8080/

Build

npm run build

Used docs folder instead of dist for easy github deployment

Webpack configuration

https://github.com/gokulkrishh/how-to-setup-webpack-2

In use

• "angular": "^1.6.4"
• "angular-foundation": "^0.8.0"
• "angular-route": "^1.6.4"
• "angular-hammer": "^2.2.0"
• "ngstorage": "^0.3.11"
• "font-awesome": "^4.7.0"
• "foundation": "^4.2.1-1"

Requirements

We would like you to create a small JavaScript app.

The app presents an image divided into 16 equal pieces enumerated from left to right, top to bottom. The last 16th piece is missing. When the user hits “Start” the pieces are scrambled and the time counter starts counting until the user (using the arrow buttons) correctly rearranges the puzzle back to the initial state. Check Wiki for more detailed game info https://en.wikipedia.org/wiki/15_puzzle

Additionally the user can go to another page which presents the leader board (that is 10 shortest games), the leader board also has a button to go back to the game page. Note! Using canvas for the scrambled image beats the purpose of this exercise.

Bonus:

• Use of one of the popular frameworks – React/Angular/Backbone/etc..
• Use of swipe gestures, responsive design and in general the app should work on mobile devices
• Use of Bower or any other package manager
• Use of the local storage for the results
• Use key strokes (up down left right)
• Use CSS animation
• Make it possible to set the game board dimensions
• Present your solution as a git project

You are allowed to use any frameworks, libraries or modules.