Added balls :D

index.html

@@ -12,19 +12,18 @@
 		overflow: hidden;
 		height: 100%;
 	}
-	#circle_of_people {
+	#ballscreen {
 		position: absolute;
-		background-color: #fda;
+		background-color: rgba(0.0, 0.0, 0.0, 0.0);
 		width: 320px;
 		height: 480px;
-		opacity: 0.1;
 		border: 1px solid black;
 	}
-	.user {
+	.ball {
 		-webkit-transition: left 0.5s linear, top 0.5s linear;
 		position: absolute;
 	}
-	.user .bullet {
+	.ball .bullet {
 		width: 10px;
 		height: 10px;
 		position: absolute;
@@ -33,12 +32,6 @@
 		border-radius: 5px;
 		background-color: #f00;
 	}
-	.user .name {
-		border-radius: 2px;
-		font-size: 12px;
-		padding: 2px;
-		background-color: #0af;
-	}
 	#svgscreen {
 		background-color: #adf;
 		position: absolute;
@@ -57,18 +50,21 @@
 <script language="javascript" type="text/javascript">
 	var myName = Math.random().toString(36).substring(7);
 	var websocket;
-	var circle;
+	var ballscreen;
 	var svgscreen;
 	var current_svgline;
+	var balls_online = new Array();
+	var svglines_online = new Array();
+	var speed = 100;
 
 	function init() {
 		var statusbar = document.getElementById('status');
-		circle = document.getElementById("circle_of_people");
+		ballscreen = document.getElementById("ballscreen");
 		document.getElementById("myName").innerHTML = myName;
 		svgscreen = document.getElementById("svgscreen");
 
 		if ("WebSocket" in window){
-			init_drawing(circle, drawStart, drawMove, drawEnd, drawRemove);
+			init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
 			init_websocket(statusbar, onOpen, onMessage);
 		} else {
 			statusbar.innerHTML = 'No websockets :(. This means that you either use <em>Internet Explorer</em> or <em>Android</em>. In both cases, I suggest that you use <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.getfirefox.net/">Firefox</a>!';
@@ -80,46 +76,52 @@
 	}
 
 	function onMessage(evt) {
-		var people = JSON.parse(evt.data);
+		var ret = JSON.parse(evt.data);
-		for (var i = people.length - 1; i >= 0; i--) {
+		var people = ret.people;
-			var user = document.getElementById(people[i].name);
+		var balls = ret.balls;
-			if(user){
+		var lines = ret.lines;
-				user.style.left = people[i].position.x + "px";
+
-				user.style.top = people[i].position.y + "px";
+		for(ball in balls_online){
+			ball.should_remove = true;
+		}
+		for (var i = balls.length - 1; i >= 0; i--) {
+			var ball = document.getElementById(balls[i].information);
+			if(ball){
+				ball.style.left = balls[i].position.x + "px";
+				ball.style.top = balls[i].position.y + "px";
+				ball.should_remove = false;
 			} else {
-				var name = document.createElement('span')
+				var ball = document.createElement('div');
-				name.className = "name";
+				ball.should_remove = false;
-				name.innerText = people[i].name;
+				ball.id = balls[i].information;
-
+				ball.className = 'ball';
-				var user = document.createElement('div');
+				ball.innerHTML = '<div class="bullet"></div>';
-				user.id = people[i].name;
+				ball.style.left = balls[i].position.x + "px";
-				user.className = 'user';
+				ball.style.top = balls[i].position.y + "px";
-				user.innerHTML = '<div class="bullet"></div>';
-				user.appendChild(name);
-				user.style.left = people[i].position.x + "px";
-				user.style.top = people[i].position.y + "px";
-
-				circle.appendChild(user);
-			}
-		}
 
-		var nodes = circle.childNodes;
+				ballscreen.appendChild(ball);
-		for(var i = nodes.length -1; i >= 0; i--) {
+				balls_online.push(ball);
-			var should_remove = true;
-			for (var j = people.length - 1; j >= 0; j--){
-				if(people[j].name == nodes[i].id) {
-					should_remove = false;
-					break;
-				}
 			}
-			if(should_remove){
-				circle.removeChild(nodes[i]);
 		}
+		for (var i = balls_online.length - 1; i >= 0; i--) {
+			if(balls_online[i].should_remove){
+				ballscreen.removeChild(balls_online[i]);
+				balls_online.splice(i, 1);
 			}
+		};
+
+		for (var i = svglines_online.length - 1; i >= 0; i--) {
+			svgscreen.removeChild(svglines_online[i]);
+		};
+		svglines_online = new Array();
+		for (var i = lines.length - 1; i >= 0; i--) {
+			svglines_online.push(addLine(lines[i], svgscreen));
+		};
+
 
 		setTimeout(function(){
 			doSend();
-		}, 500);
+		}, speed);
 	}
 
 	function drawStart(line){
@@ -164,7 +166,7 @@
 <p>Status: <span id="status">CONNECTING...</span></p>
 
 <svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
-<div id="circle_of_people"></div>
+<div id="ballscreen"></div>
 
 </body>
 </html>