CSC309 Programming on the Web Assignment 3 - Node, CSS, Responsive Design, React, Web Sockets.

MMMOG version of Warehouse Wars

• The basic warehouse wars game, with some advanced monsters (to make it interesting) plus mobile features is all that is required for A3. You do not have to port your extras from A2 to A3. If you do port more than the minimum, make sure that it results in clean, simple, clear, concise code. It might cost you marks, if the A2 code is not well written and you use it as is in A3.
• Since each node.js server will occupy a port, you have each be given your own port number range. See the earlier email. I have confirmed that ports are open on cslinux, nodejs is installed. Try it out, to get things working, do the following:
  1. Download the web sockets lecture
  2. Let PORT = the smallest port sent you in the email
  3. Set nodeTutorial/webSockets/express-static.js to use PORT
  4. Set nodeTutorial/webSockets/echoServerBroadcast.js to use PORT+1
  5. Set nodeTutorial/webSockets/static/scribble.html to use socket = new WebSocket("ws://cslinux.utm.utoronto.ca:PORT+1");
  6. nodejs express-static.js & nodejs echoServerBroadcast.js &
  7. Now go to http://cslinux.utm.utoronto.ca:PORT/scribble.html
  8. Have your friends go to http://cslinux.utm.utoronto.ca:PORT/scribble.html
  9. Share the scribble and have fun
• Your final submission should involve two node.js servers
  • one serves the static content and runs a RESTful api (using express) for user managment, and allows users to advertise and pick worlds to join. This happens on PORT, your lowest assigned port number.
  • one running websockets on PORT + 1 maintaining a collection of game worlds
• When a user first visits the page, they are asked to login. This is just like your A2. That is, they will use a restful API to interact with the back end. This time, the backend will be a node.js server running express and serving static content. Please implement a minimal user managment system, at least requiring a user provide a user name as well as password. For now, you can store the users database in a global javascript dictionary. For example: var users = {}; users['arnold']={ 'password': '350df1e49804608d65ef7769b0430cb6', 'scores':[200,150,100,20] } users['sadia']={ 'password': 'fc75a13951d4e45de796a679cae5167a', 'scores':[3500,2150,2000,1500] }
• Once authenticated, they are presented with a list of the players on the shared single world. var world = {}; world={ 'users': ['arnold', 'sid', 'sadia'] 'state': SOMETHING TO CAPTURE THE WORLD STATE };
• Then play begins: Try to make it easy for a user to identify their avatar.
• The worlds backend communicates with Javascript/JQuery frontend via JSON over websockets.
• Your application should run in the lab under FireFox (so not all mobile features may work) as well as on a mobile device. We will test on an iPad mini (or Nexus 7) or newer. If you want to borrow one of our tablets, please ask Andrew Wang.
• Use two mobile sensors effectively, for example, the accelerometer and gyroscope. Example: Gyroscope to move your player, accelerometer to add a shake input (shake to transport or leave the world).
• Your front end user interface should be written in react. This is for login, profile, game lobby etc. The actual game can remain in Javascript/JQuery etc.
• Have a great front end, including effective use of CSS.
• As always, your code should be simple, clear and obvious. Use good naming, provide some minimal documentation as necessary. See the marking scheme below.
• Make some effort to make the application scalable, that is, responsive to many simultaneous users. For example, eventually, figure out how to not send the complete game state to all users each time a message arrives at the server.
• Make sure that your worlds server can survive client disconnects.

Extras (worth 10%)

• Interesting application of other sensors, touch, GPS, etc.
• Use a canvas for something
• Store user information in a Mongo DB
• Use a React component library like Material-UI, but in this case you will need to setup a full React development environment.
• Multiple Worlds: When users authenticate, they are presented with a list of existing game worlds as well as how many players are on each world. They are also given the option of creating a new world. When a player chooses a world, they are immediately taken to the world and play continues with them included. Hint: var worlds = {}; world['terrible']={ 'users': ['arnold', 'sid', 'sadia'] 'state': SOMETHING TO CAPTURE THE WORLDS STATE }; world['challenger']={ 'users': ['joe', 'jane'] 'state': SOMETHING TO CAPTURE THE WORLDS STATE };
• Responsive design: Something that automatically adapts to the form of the device, for example, see Bootstrap, or CSS media queries.
• Use the microphone, speaker or camera. I have not tried this with HTML5 and the devices we have, so you will have to explore.
• Mobile devices have storage in HTML5, think about an interesting way to use this.
• Other features!!! But this time, it is about Mobile, node.js, Mongo DB, Express, Responsive design etc.

References

• See the lecture notes.

Questions and Answers