CSC309 Programming on the Web
Assignment 2 - Javascript, AJAX, JSON, JQuery, PHP Rest API, Postgresql

Due:	March 5, 2017, 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
Environment:	We will run your code under Firefox and cs.utm.utoronto.ca.

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.

Your web application should live at http://cs.utm.utoronto.ca/~UTORID/ww/ You can start with this starter code

Installation Script

Please include install.php or install.bash to help us install your application in our webspace, using our database.

User Managment

Implement a user managment system with a RESTful api. Your PHP scripts should support Account creation, update, delete and read via the http verbs POST, GET, PUT, DELETE.

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 postgresql 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 URLs
As an extra feature, you might want to look into apache's Mod Rewrite so that the URLs for your restful API look nice, for example

index.html

There is a single index.html which includes Javascript, JQuery, CSS etc. It has many different views. 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. PHP is not allowed to serve html for this assignment, it only served the REST api. 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 PHP 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 or install firebug inside Firefox. This may already be there in the lab. 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.

htaccess and htpasswd

The ww directory I have given you contains two files, .htaccess and htpasswd. In general, you would not put the htpasswd file in such a 'convenient' place. In any case, I have set this up so that self can access the directory with password changeThis. Your job is to fix .htaccess so that it points to your htpasswd and also change the password using the htpasswd command. Otherwise, curious students can simply browse into your directory, download your game and play with it, and then look at your code. See Authentication and Authorization. By the way, this is not great security, at least cs uses https though, so the whole conversation is encrypted.

References

Javascript Inheritance References (to understand what the issue is)
- Inheritance via prototype chain
- Inheritance via prototype chain
- Javascript Inheritance
- Javascript Inheritance
- klass and selfish.js try to solve the inheritance problem.

Questions and Answers

Question:: I cant seem to find the program htaccess in the lab?
Answer:: It is installed on cs.utm.utoronto.ca
Question:: cs.utm.utoronto.ca is using an old version of php, so I can't find http_response_code.
Answer:: See this and this

CSC309 Programming on the Web Assignment 2 - Javascript, AJAX, JSON, JQuery, PHP Rest API, Postgresql