Mean Stack

Module 7 builds upon the JavaScript skills you learned in Module 6.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

• Node.JS
• Socket.IO

Individual Assignments

Install Node.JS and Socket.IO

Install Node.JS from Apt or Yum according to the instructions in the Node.JS guide.

Also install Socket.IO globally (using the -g option).

Static File Server in Node.JS

The individual portion of Module 7 is short in order to give you enough time to complete the group portion.

1. Copy the example code from the Node.JS guide into a file called static_server.js or something of that nature. Save it on your EC2 instance (but not in a place that Apache can serve!).

   Ensure that you understand what the static file server script is doing… this might show up on a quiz!

2. Make a directory parallel to static_server.js named static.
3. Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
4. Save the following files in your static directory:
   • hello.txt, a text file containing "Hello World"
   • brookings.jpg, an image file you can download from here: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
   • college.html, an HTML document based on the Quick and Easy HTML Layout containing an image tag pointing to brookings.jpg
   • phpinfo.php, a PHP file containing the phpinfo command that generates a diagnostic page of the server:

   <?php   phpinfo();   ?>
   

5. Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.

   Which ones work and which ones don't? Why might this be the case?

Group Project

In the group portion of Module 7, you will be building a multiplayer Pong game using Node.JS and Socket.IO.

If you want to reminisce and play some Pong on the command line before building it in Node.JS, here is the command, assuming you have emacs installed:

$ emacs -q --no-splash -f pong

Press C-x C-c to exit emacs.

Setting Up for the Pong Game

First thing first: set up a static file server running Node.JS. We will need it in order to serve up our HTML and JavaScript content.

Your First File: pong-game.js

The first file you can save in your static directory will be pong-game.js, which you can download from here: http://classes.engineering.wustl.edu/cse330/content/pong-game.js

We created the pong-game.js file for you to save you time and so that you can focus on the Node.JS and Socket.IO aspects of this module. This file contains the core Pong engine, but it does not establish communication between users of any kind. Note that the file does depend on Ext JS.

If you are curious, we used the LimeJS framework as the backbone of pong-game.js. You can find the pre-compiled source code for the Pong game here:

• http://classes.engineering.wustl.edu/cse330/content/pong.js
• http://classes.engineering.wustl.edu/cse330/content/ball.js

We then used the Google Closure Compiler to compile all of the libraries you need into the one modular JavaScript file.

Just to be clear, for the purposes of Module 7, you do not need to bother with either LimeJS or Google Closure.

Your Second File: client.html

The second file you can save in your static directory should be an HTML file created from your favorite Quick and Easy Page Layout. You need to add the following CSS rules:

#gameContainer{
	margin: 0 auto;
	width: 960px;
	height: 500px;
}
#controls{
	height: 20px;
	text-align: center;
}
#game{
	width: 960px;
	height: 480px;
	border: 1px solid black;
}

Add the following HTML inside your main div; this is what will contain the Pong game canvas:

<div id="gameContainer">
	<div id="controls">
		<button id="pauseBtn">
			Pause/Resume
		</button>
	</div>
	<div id="game"></div>
</div>

Finally, don't forget to include Ext JS as well as pong-game.js. Ext JS should be loaded first since pong-game.js depends on Ext.

We also highly recommend that you create an additional file, client.js, which you include into client.html and which contains the client-side logic for your Pong game. It should load after pong-game.js. Start with the following code in your client.js:

Ext.onReady(function(){
	Ext.fly("gameContainer").enableDisplayMode().hide(); // hide the game canvas by default
	Ext.fly("controls").hide(); // hide the play/pause button; we will not be using this feature for the purposes of Module 7
});

Connecting to Socket.IO

Now that you have your static fileserver running that serves up your three files (pong-game.js, client.html, and client.js), we need to connect everything with Socket.IO.

Follow the instructions in the Socket.IO guide for installing Socket.IO. In your app.js, add the following lines:

io.listen(app).sockets.on("connection", function(socket){
	// This closure runs when a new Socket.IO connection is established.
	
	// Listen for client messaging server:
	socket.on("message", function(content){
		// do stuff
	});
	
	// Send a message from the server to the client:
	socket.emit("message", {some:"data"});
});

Don't forget to require socket.io at the top of your file!

io = require("socket.io")

Inside of the io.listen callback function is where most of your server-side code will go.

On the client side, you need to include the Socket.IO library (put this below Ext JS but above pong-game.js and client.js):

<script src="/socket.io/socket.io.js"></script>

And finally, you need to connect your client to the Socket.IO server (put this in client.js):

var socket = io.connect(window.location.origin);

But enough of us giving you all the code! It's time for you to start being creative.

The Pong Game Interface

For the remainder of this module, your work will be in three files:

• app.js (or whatever you called your Node.JS file)
• client.html
• client.js

What you need to do is to build a system that enables two players who are both viewing client.html to choose each other (e.g., from a lobby) and play a game of Pong.

You should be wondering, "how do I interact with the Pong game?" The public interface is as follows:

• Methods:
  • pong.init() - initialize the game client.
  • pong.resetBall(x, y) - arbitrarily set the position of the ball. Defaults to the center. Cancels all animations currently acting on the ball.
  • pong.launch(angle, direction) - launch the ball from its current position in the specified angle (-89 to +89) and direction (-1 for left or 1 for right).
  • pong.updateOpponentPaddle(position) - set the position of the opponent paddle to position. (Hint: the position value should have been generated by the opponent's paddlemove event)
  • pong.ready() - returns true if the game is not in a "paused" state.
  • pong.setScore(score) - display score on the game canvas. score is an object literal containing two fields: left and right.
• Events (all fired on window):
  • paddlemove - the player's paddle has moved.

    This event will fire only after the paddle has moved 15 pixels or more.

    • event.detail.position - the new y coordinate of the paddle.
  • paddlehit-left - the ball has hit the left side of the screen.
    • event.detail.hit - true if the ball hit the player's paddle; false otherwise.
    • event.detail.angle - if the ball was reflected, the new angle of the ball's rightward movement.
    • event.detail.position - the position at which the ball hit the left side

Enabling a Player to Pause

You do not need to implement the pausing part of your Pong game for the purposes of Module 7; it is here for reference.

Implementing a game pause is more difficult for a network game than it is for a game that runs on just one computer. There is one situation during a Pong game when it makes sense to enable a user to pause the game, though: after a user has lost a round, but before they have fired the next ball at the opponent. At this time, you may display the play/pause button like so:

Ext.fly("controls").show();

When your timeout for firing the new ball is executed, test whether or not the canvas is ready. If it is, fire the ball and hide the play/pause button; otherwise, continue waiting:

var launchNewBall = function(angle, direction){
	if (pong.ready()) {
		// Hide the pause/resume button
		Ext.fly("controls").hide();
		
		// Launch the ball on our local canvas
		pong.resetBall();
		pong.launch(angle, direction);
		
		// Tell our opponent the angle and direction of the new launch (this probably won't be exactly the same with your implementation)
		socket.emit("launch", {
			angle: angle,
			direction: direction
		});
	}else{
		// Game is paused; keep waiting
		setTimeout(launchNewBall, 500, angle, direction);
	}
};

Example: Starting a Pong Game

Once two players have formed a pair, one of them needs to initialize the game with a certain angle and direction for the ball. Here is how you might go about doing this:

// generate an initial angle between -60 degrees and +60 degrees:
var initAngle = -60 + 120*Math.random();

// randomly choose the initial direction of the ball:
var initDirection = Math.random() < 0.5 ? -1 : 1;

// show the game canvas:
Ext.fly("gameContainer").enableDisplayMode().show();

// initialize the game canvas:
pong.init();

// move the ball to the center:
pong.resetBall();

// set the ball into motion:
pong.launch(initAngle, initDirection);

// tell the opponent about the ball's initial angle and direction.  For example:
socket.emit("launch", {
	angle: initAngle,
	direction: initDirection
});

Example: When a Player Reflects the Ball

When the ball hits a player's side, the paddlehit-left event fires on the window. Here is how you might listen for this event in your client.js and transmit this information over your socket:

window.addEventListener("paddlehit-left", function(e){
	// e.detail.hit will be true if the client hit the ball with his/her paddle.
	if (e.detail.hit) {
		console.log("HIT PADDLE.  New angle: %f", e.detail.angle); // log a message to the console
		
		// Tell our opponent via Socket.IO about the ball's new angle and position:
		socket.emit("reflect", {
			angle: e.detail.angle,
			position: e.detail.position
		});
		
		// Note: The game automatically launches the ball and determines the angle based on the ball's position relative to the paddle position.  We therefore do not need to call pong.launch() in here (but our opponent will, as shown below).
	}else{
		console.log("MISSED PADDLE");
		
		// in here, we will update the score, check for victory condition, launch a new ball (perhaps after a timeout), etc.
	}
});

Here is what you might have in app.js inside of your Socket.IO callback function:

// Listen for the "reflect" message from the client
socket.on("reflect", function(data){
	// Tell our opponent about the reflection.
	// Note: In this sample implementation, we store the opponent in `socket.opponent`.
	// You might use a different mechanism for storing the opponent's socket.
	socket.opponent.emit("reflect", data);
});

Finally, here is what you might have on the opponent's end (hint: this is also in client.js):

// Listen for the "reflect" message from the server
socket.on("reflect", function(data){
	// In order to make up for any network lag, immediately move the ball to its correct position:
	pong.resetBall(960, data.position);
	
	// Finally, launch the ball on our local game client:
	pong.launch(data.angle, -1);
});

Grading

We will be grading the following aspects of your work. There are 100 points total.

1. Individual Portion (20 Points):
   • Node.JS and Socket.IO are installed on your EC2 instance (5 points)
   • The hello.txt, brookings.jpg, and city.html files all load successfully (3 points each)
   • Visiting a file that does not exist inside the static directory results in a 404 (3 points)
   • You can explain to the TA why phpinfo.php behaves the way it does when loaded through Node.JS (3 points)

1. File Sharing Site (40 Points):
   • File Management (15 Points):
     • Users can upload and delete files (4 points)
     • If a file is "deleted", it should actually be removed from the filesystem (3 points)
     • Existing files can be viewed (5 points)
     • The directory structure is hidden (3 points)
   • Image Groups (10 Points):
     • An image may be associated with a group (5 points)
     • All groups are listed on the home page (5 points)
   • Best Practices (10 Points):
     • Code is well formatted and easy to read (3 points)
     • All pages pass the W3C validator (3 points)
     • CSRF tokens are passed when uploading, re-categorizing, and deleting images (4 points)
   • Usability (5 Points):
     • Site is intuitive to use and navigate (4 points)
     • Site is visually appealing (1 point)
2. Creative Portion (15 Points) (see below)

Creative Portion

This module, and all future modules, will require that you invest some time into creating additional features for your group project. Plan to invest at least 60 minutes of your time into the creative portion.

• The creative portion is an opportunity for you to learn material of your own interest.
• You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.

If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.