CP3101B

Assignment 3 - HTML5, JSON, JQuery, Node.js, WebSockets, Bootstrap, AJAX

Due: Friday April 18, 2013, 11:50 PM
Late penalty: 0% penalty for 48 hours late, not accepted after that.
Hand in:Submit here
Marking: 20 marks for a simple, working Exercise 6 30 marks for a simple, working Exercise 7 20 marks for a simple, working Exercise 8 30 marks for a simple, working Exercise 9 We will mark functionality, performance, ease of use, code (HTML, JQuery, Javascript, ...) quality. We will not address security for this application. Do not attempt to encrypt traffic, etc. for this application. There is no HTTPS involved. We will only mark usability for e7, e8 and e9, we will mark website design and effective use of bootstrap for e9. A trivially minimal interface is acceptable for e6, e7 and e8. That is, for e1-e8, you do not need a Site ID, no menues, no additional web pages etc. These are just development applications, used to explore technologies and application design. e9 is the only 'production website'.
Groups: Work in teams of size 2
Environment:We will run your code under Firefox, in the lab and on the VM. For mobile, we will run on a 'recent' iOS device or 'recent' Android device. See if you can make your application work on tablets as well as phones.
For the following use JQuery, JQueryUI (for draggable), JQuery UI Touch Punch, HTML5, CSS, Bootstrap, Node.js, WebSockets Work in teams of at most size 2. Use only (at most) the libraries in sharedThings/index.html for this assignment. This is a Node.js, WebSockets application. You can start with sharedThings and can find most of what you need in the lectures and tutorials. Exercises 1-5 will not be marked, but are there to help you develop Exercises 6, 7, 8 and 9. See the marking scheme at the top of the page. Exercise 1: modify logDrag in e1.html so that it console.logs the position of all images in the world Hint: create a single world object and put the state into it. An example of a world state is ... { "x1":{"x":8,"y":8}, "x2":{"x":8,"y":8}, "x3":{"x":8,"y":8}, "x4":{"x":8,"y":8}, "x5":{"x":8,"y":8}, "o1":{"x":8,"y":8}, "o2":{"x":8,"y":8}, "o3":{"x":8,"y":8}, "o4":{"x":8,"y":8}, "o5":{"x":246,"y":32},"tttboard":{"x":8,"y":8} } Exercise 2: Create e2.html and e2server.js. When a user drags an image, use a websocket to send the whole world state to a Node.js server. e2server.js simply console.logs the received world state. Note: Since we are all sharing the server, please use this list of port numbers http://www.cs.toronto.edu/~arnold/cp3101b/assignments/03/ports.txt to determine which port your node.js server will be listening to. Put your port in the supplied config.js and config_node.js. Include config.js in e2.html and require config_node.js in e2server.js. If you do not set your port appropriately, someone else may conflict with you, delaying your work. Reference: echoServer.js, echoClient.html Exercise 3: Create e3.html (almost identical to e2.html) and e3server.js (almost identical to e2server.js). e3server.js saves the current state of the world as a Javascript data structure (not a string) to a global variable in the server. Exercise 4: Create e4server.js and e4.html. e4server.js now updates the state of the shared, global variable as well as sends back a copy of the global world to all connected clients. e4.html should console.log the received state of the world from e4server.js. Exercise 5: create e5.html which, when connected to e4server.js, receives the world state and updates the positions of the items on display. Each instance of e5.html shows the positions of the objects in e4.html. Exercise 6: create e6.html which combines both e5.html and e4.html. A collection of browsers running e6.html should be able to play tic-tac-toe together. e6.html connects to e4server.js. It may be a bit glitchy. Write down the glitches you identified in this version in e6.txt. Exercise 7: Create a usable, polished version of the system. Create e7.html, e7server.js. This version should address the issues with e6.html and fix them if possible. There are many issues, some involve performance and scalability, some involve usability. Your goal should be to fix them in as simple a way as possible to make the system more usable, and minimize the load on both the client and the server. Include e7.txt with a description of the problems you addressed and a description of your solutions. Exercise 8: Create e8.html, e8server.js. This version improves on Exercise 7 and allows the participants to choose the world they want to share. So for example, if three individuals want to share world_id='world57', they can. This world is different from world_id='jupiter'. Your user interface should display all world choices, allow individuals to choose the one they want, or create a new one. Use the web socket to keep the current list of all worlds up to date. Exercise 9: Create a sharedThings mobile website. It consists of Bootstrapped web page or pages, starting at index.html and sharedThingsServer.js. Don't panic, I have gotten you started in index.html. SharedThings includes some interesting extra mobile features. It should have more than just the application pages, for example, instructions. You do not need to login to the application. Add one or two additional interesting mobile features, we will rank your submission against your fellow classmates, so a better, simpler, more usable solution gets higher marks than others. Example: Shake to reset the game. Example: Display a google map of the locations of all participants in a world. Example: Display a radar display of the relative locations of all participants in a world. When the user turns the device, it uses the compass to turn the display, so you are actually pointing to the other players.

References

Questions and Answers

Question:
There are some inefficiencies in e1-e6.
Answer:
Yes, this is deliberate. You are to try to fix them, and simplify the approach in e7
Question:
How come you use "x" and "y" for position of the objects, not 'top" and "left"?
Answer:
Add some extra content above the world and see what "top" and "left" say about this. Is this what you want to send to the server for communication back to other clients?
Question:
Do I have to implement game logic?
Answer:
As in detect a win/loss, or where the pieces are being dragged to (is it a valid move)? No. The idea is that the players know the rules of the game. If your system is written well enough, you should be able to swap the images for chess pieces and a chess board and people could now play chess. In fact most strategy board games should work. Checkers, Go, Chess, ...
Question:
How about we solve the problem of contention by allowing turns? Restricting access to pieces based on whose turn it is.
Answer:
Please do not do this. The intention for this assignment is to write a system that allows 'multiple users to share a world simultaneously', whatever this means. Your goal should be to resolve the issues in sharing state as naturally and simply as possible. That is, users should feel comfortable using the system, not frustrated, with as few unexpected things happening as possible. Your goal should be to make this work as well as possible in the real world. Even if tens or hundreds (I don't know if it scales that large?) of clients are sharing state on opposite sides of the planet.
Question:
I can't get echo client and server running on cp3101b-1.
Answer:
Make sure you have updated both config files. Also, if you loaded the application before, the config files may be cached in your browser, try clearing the cache. I have tried the samples in cp3101b-1, connecting outside the lab, they work.
Question:
Are you holding office hours?
Answer:
I will be holding office hours on Sunday from 12-1.
Question:
Can you give other applications of our solution (tic tac toe, chess, ...)
Answer:
How about a bunch of people collaborating to solve a jigsaw puzzle, or a very simple drawing tool where people drag around pixels, and collaborate on creating an image. If you are really interested, give the images javascript behaviour. If you do this, you can create a Monopoly game, with everything defined in the html, now that is really powerful!
Question:
Where do I put the members in my submission?
Answer:
Please place them in MEMBERS.txt, already included in sharedThings.zip