Update readme

README.md

@@ -1,2 +1,2 @@
 # whiteboard
-Collaborate using HTML5 Canvas and [PeerJS](https://github.com/peers/peerjs/)
+Collaborate in real-time using HTML5 Canvas and [PeerJS](https://github.com/peers/peerjs/)

index.html

@@ -44,6 +44,12 @@ <h3>Hold your mouse down and move to draw</h3>
 	</div>
 
 	<script type="text/javascript" src="https://rawgit.com/peers/peerjs/master/dist/peer.js"></script>
+	<script>
+		// Initialize global object to namespace other global variables
+		var Whiteboard = {};
+	</script>
+	<!-- make drawing.js -->
+	<script type="text/javascript" src="p2p.js"></script>
 	<script type="text/javascript" src="whiteboard.js"></script>
 </body>
 </html>

p2p.js

@@ -0,0 +1,43 @@
+Whiteboard.p2p = (function () {
+	var peer; //cwkTODO should i make a constructor function instead?
+
+	return {
+		createPeer: function (openCallback, connectionCallback) {
+			peer = new Peer({
+				key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key
+				debug: 3
+			});
+
+			if (openCallback) {
+				// Initialization - ready to receive connections
+				peer.on('open', openCallback);
+			}
+
+			if (connectionCallback) {
+				// Receiving a connection from a peer (i.e.: they hit the Connect button)
+				peer.on('connection', connectionCallback);
+			}
+
+			return peer;
+		},
+
+
+		connectToPeer: function (peerId, openCallback, closeCallback) {
+			var conn = peer.connect(peerId);
+
+			// Connection has been established
+			conn.on('open', function () {
+				if (openCallback) {
+					openCallback(conn);
+				}
+			});
+
+			conn.on('close', function () {
+				if (closeCallback) {
+					closeCallback(conn);
+				}
+			});
+		}
+
+	};
+})();

whiteboard.js

@@ -18,6 +18,7 @@
 		document.getElementById("connectLink").innerHTML = window.location;
 		document.getElementById("protocol").innerHTML = window.location.protocol;
 
+		//cwkTODO move to p2p
 		setUpPeer();
 	}
 
@@ -66,30 +67,28 @@
 		};
 
 		drawPoint(point, penColor);
+
+		//cwkTODO move to p2p
 		sendPointToPeers(point, penColor);
 	}
 
 	function onMouseUp(event) {
 		isDrawing = false;
 	}
 
+	//cwkTODO is this still needed?
+	//cwkTODO move to p2p
 	function sendPointToPeers(point, color) {
-		for (var currentPeerId in peer.connections) {
-			if (!peer.connections.hasOwnProperty(currentPeerId)) {
-				return;
-			}
-
-			var connectionsWithCurrentPeer = peer.connections[currentPeerId];
-
-			// It's possible to have multiple connections with the same peer,
-			// so send on all of them
-			for (var i=0; i<connectionsWithCurrentPeer.length; i++) {
-				connectionsWithCurrentPeer[i].send({point: point, color: color});
-			}
-		}	
+		sendDataToPeers({point: point, color: color});
 	}
 
+	//cwkTODO move to p2p?
 	function sendPathToPeers(path, color) {
+		sendDataToPeers({path: path, color: color});
+	}
+
+	//cwkTODO move to p2p
+	function sendDataToPeers(data) {
 		for (var currentPeerId in peer.connections) {
 			if (!peer.connections.hasOwnProperty(currentPeerId)) {
 				return;
@@ -100,7 +99,7 @@
 			// It's possible to have multiple connections with the same peer,
 			// so send on all of them
 			for (var i=0; i<connectionsWithCurrentPeer.length; i++) {
-				connectionsWithCurrentPeer[i].send({path: path, color: color});
+				connectionsWithCurrentPeer[i].send(data);
 			}
 		}
 	}
@@ -126,9 +125,12 @@
 
 	function setUpUI() {
 		createColorRadioButtons();
+
+		//cwkTODO move to p2p
 		setUpPeerConnectUI();
 	}
 
+	//cwkTODO move to p2p
 	function setUpPeerConnectUI() {
 		var peerIdInput = document.getElementById("peerIdInput");
 		var connectBtn = document.getElementById("connectBtn")
@@ -166,40 +168,26 @@
 
 	// Sending a connection to a peer (i.e.: you hit the Connect button)
 	function connectToPeer(peerId) {
-		var conn = peer.connect(peerId);
-
-		// Connection has been established
-		conn.on('open', function () {
+		Whiteboard.p2p.connectToPeer(peerId, function (conn) {
 			setUpCanvasForConnection(conn);
 			updateConnectionsList();
-		});
-
-		conn.on('close', function () {
+		}, function (conn) {
 			addToStatus(conn.peer + " left the whiteboard. Oh well.");
 			updateConnectionsList();
 		});
 	}
 
 	function setUpPeer() {
-		peer = new Peer({
-			key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key
-			debug: 3
-		});
-
-		// Initialization - ready to receive connections
-		peer.on('open', function (id) {
+		peer = Whiteboard.p2p.createPeer(function (id) {
 			addToStatus('My peer ID is: ' + id);
 
 			document.getElementById("mypeerid").value = id;
 
 			createConnectLink();
 
 			connectToPeerInUrl();
-		});
-
-		// Receiving a connection from a peer (i.e.: they hit the Connect button)
-		peer.on('connection', function (conn) {
-
+		}, function (conn) {
+			//cwkTODO want to move these into p2p but not sure how
 			setUpCanvasForConnection(conn);
 
 			conn.on('open', function () {
@@ -225,6 +213,8 @@
 		});
 	}
 
+	//cwkTODO move to p2p
+	//cwkTODO split?
 	function updateConnectionsList() {
 		var connectionList = document.getElementById("connectionList");
 
@@ -247,13 +237,15 @@
 		connectionList.innerHTML = connectionListString.length ? connectionListString : "Nobody ( everyone left :( )";
 	}
 
+	//cwkTODO move to p2p
 	function createConnectLink() {
 		var connectLink = document.getElementById("connectLink");
 		// Ref: http://stackoverflow.com/a/5817548
 		var urlWithoutQueryString = window.location.href.split('?')[0];
 		connectLink.value = urlWithoutQueryString + "?connectTo=" + peer.id;
 	}
 
+	//cwkTODO move to p2p
 	function connectToPeerInUrl() {
 		// There's probably a way to do this with one regex,
 		// but I think this is more readable
@@ -278,6 +270,7 @@
 		}
 	}
 
+	//cwkTODO move to p2p
 	function setUpCanvasForConnection(conn) {
 		conn.on('data', function (data) {
 			if (data.connections) {
@@ -303,4 +296,4 @@
 		statusArea.innerHTML = newStatus.outerHTML + statusArea.innerHTML;
 	}
 
-})();
+})();