CSC309 Programming on the Web
Assignment 2 - Javascript, AJAX, JSON, JQuery, Node Rest API, Sqlite3

Due:	March 6, 2018, 11:50 PM
Late penalty:	20% penalty for 48 hours late, not excepted after that.
Hand in:	Electronic submit here
Preliminary Marking Scheme:	here
Groups:	Work in teams of size 2 (group app to appear shortly)
Environment:	We will run your code under Firefox and the lab systems.

Warehouse Wars

Your job will be to implement the WareHouse Wars game as outlined in the CSC148 Assignment 1. This video is of a partial implementation.

Technologies

You will write your application using

HTML5
a bit of CSS
Javascript
JQuery
Ajax (JSON transport)
Node+express
Restful api
sqlite3

Groups

Work in groups of size 2 (app to appear shortly)

Ports

Your web application should live at http://localhost:PORT/ You can find the ports you have been assigned here.

Starter Code

You can start with this starter code as well as the code in this lab (written just for you, for this assignment)

Installation Script

To install your application we will (on the lab machines): unzip ww.zip cd ww/db rm database.db # this is the database file!! sqlite3 database.db < schema.sql cd .. npm install mv OUR_PORT.js port.js nodejs ww_node.js

User Managment

Implement a user managment system with a RESTful api. Your api should support Account creation, update, delete and read via the appropriate http verbs POST, GET, PUT, DELETE. You should record users scores.

Your API should also support user authentication.
You should authorize each request, that is, simply authenticating does not give users access to all stored data, each user can access their own only.
User records are stored in your sqlite3 database
You should be able to store and retrieve users scores from the database
The response from your API should be JSON, with appropriately labelled fields. Of course, you might also include other information, or implement other routes

index.html

There is a single index.html which includes Javascript, JQuery, CSS etc. It has many different views. I have already placed starter code for this in static-content. To keep your code clean, you should probably separate the Javascript for this page into separate files. index.html has a few different parts, Homepage/Login, Account Creation/Modification, Game. All of these appear as a result of the single page load. The particular part of the page that the user sees depends in showing or hiding the appropriate div in Javascript/JQuery. Node should simply serve the static-content, and then the users interaction with the server is through the restful api only. The front end uses JQuery to make ajax requests to the backend. You will have to figure out what a AJAX JSON request looks like as well as what an AJAX JSON response looks like.

Homepage/Login

The home page contains a login form as well as a list of the top 10 high scores and a button/link etc. to the registration page. When the user selects registration, they are switched to that view of the same index.html. That is, no further request for html happens. Appropriate html inputs for login should be present. Validation should happen both on the front end and on the backend.

It should be noted that a RESTful api uses authentication slightly differently. That is, the simple case has the client store the credentials and repeatedly send them on each request. In this way, the server does not maintain session information. As an extra feature, you can implement rest api login pattern instead of simply sending the credentials on each request.

Account Creation/Modification

Accounts are validated both in the front end and the backend (in your node code). For backend validation, on invalid data, modify the css for form fields to let the user know where the issues are. A username can only appear in the database at most one time. Once a user is registered, they are placed on the game play page.

Game

Users can not see the game page without authentication. Yes, I know, in reality, since they have the javascript, they can hack it, but they still can't modify the backend information.

Monsters can kill the player by touching them (occupying the same square) as well as the player can kill monsters (when a monster is completely surrounded, and not by a player).
Create a notion of score based on the elapsed time since the start of the game. Have this time displayed continuously.
You can control the game either by pressing the arrow image buttons or by using the keyboard. See the keypress event.
A player can move into any empty, adjacent square, if the square has a box in it, the box is moved by the player. The player can move a long line of boxes (use object recursion).
The game should know when it is over (player wins or looses).
Create at least one new type of Monster, one that moves a bit more intelligently. For example, when it runs into an obstacle, it should choose another, available direction. You can use containment to imitate inheritance. See inheritance notes at in the references section. You will need another class.

Some more details are below...

Control: In addition to being able to play via the keyboard, your UI should allow the user to play via clicking on a collection of images. You should setup a small table of images which are clickable. When the user clicks on an image it causes the player to move. For example (click the arrows below):

This will make your game 'almost' playable on a tablet. Unfortunately, double clicking on an icon will cause the browser to respond by enlarging that section of the webpage. This can be fixed.
The Stage: The stage contains all of the actors in the game. There are two approaches to the interaction of the stage with the actors, one is to have the stage understand and move the actors, the other is to have each actor understand how it moves and simply move itself. To do this, the actors will have to look back at the stage to understand which actors are where. The first is the more procedural approach, the second, the more object oriented approach. You can see the more object oriented approach in flys. You can make each actor responsible for drawing itself to the correct spot on the table (the correct element). For a non-oo example, on this page I have a central loop which moves the icons on the page. In your case, you have a step loop in the stage which asks each actor to take a step. The actors themselves will update their appearance in the table.
The Game loop: We will use the event driven paradigm for the game loop. To do this, you should set a Javascript timer (=interval) which will repeatedly fire. Each time it fires, it will ask the stage to take a step, which in turn asks all of the actors on the stage to take a step. Remember, in your case, each of the actors can contact the table through the stage and update the appropriate images. For example:
- (see JavaScript Timing Events)
Note that in your case, there is a single thread managing the game.
I have included a Legend, and I use the Legend images for their source in the Stage.
Debugging Javascript: This is very difficult. You may want to use the developer console. Also, take small steps. Make sure something works and then add to it. Check the Firefox error console for errors. Remember, this time code is executing on the browser, even though it is loaded from the server.