From 59b33559e67742ed4bb6117ba54c3aeb79c61f8d Mon Sep 17 00:00:00 2001
From: Joshua Moerman <lakseru@gmail.com>
Date: Tue, 2 Apr 2013 20:51:22 +0200
Subject: [PATCH] Made a login-thingy

---
 index.html | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index 46ec66f..6a83c7a 100644
--- a/index.html
+++ b/index.html
@@ -61,8 +61,7 @@
 <script type="text/javascript" src="drawing.js"></script>
 <script type="text/javascript" src="rendering.js"></script>
 <script language="javascript" type="text/javascript">
-	var myName = Math.random().toString(36).substring(7);
-	var websocket;
+	var myName;
 	var ballscreen;
 	var svgscreen;
 	var current_svgline;
@@ -72,16 +71,24 @@
 	var line_kind = 0;
 
 	function init() {
+		myName = document.getElementById('loginname').value;
+		console.log(myName);
+		var login = document.getElementById('login');
+		login.parentNode.removeChild(login);
+
 		var statusbar = document.getElementById('status');
 		ballscreen = document.getElementById("ballscreen");
 		svgscreen = document.getElementById("svgscreen");
 
+		statusbar.innerHTML = "connecting..."
+
 		if ("WebSocket" in window){
 			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>!';
 		}
+		return false;
 	}
 
 	function onOpen(evt) {
@@ -90,10 +97,20 @@
 
 	function onMessage(evt) {
 		var ret = JSON.parse(evt.data);
-		var people = ret.people;
 		var balls = ret.balls;
 		var lines = ret.lines;
 
+		updateBalls(balls);
+		updateLines(lines);
+
+		setTimeout(function(){
+			doSend();
+		}, speed);
+	}
+
+	function updateBalls(balls){
+		// Because we use transitions for the balls
+		// we really update them, and only delete the ones which are absent
 		for(i in balls_online){
 			balls_online[i].should_remove = true;
 		}
@@ -122,7 +139,10 @@
 				balls_online.splice(i, 1);
 			}
 		};
+	}
 
+	function updateLines(lines){
+		// Simply delete and redraw them :)
 		for (var i = svglines_online.length - 1; i >= 0; i--) {
 			svgscreen.removeChild(svglines_online[i]);
 		};
@@ -136,11 +156,6 @@
 			}
 			svglines_online.push(current);
 		};
-
-
-		setTimeout(function(){
-			doSend();
-		}, speed);
 	}
 
 	function drawStart(line){
@@ -193,8 +208,6 @@
 		document.getElementById("line_kind").innerHTML = kind_str;
 	}
 
-	window.addEventListener("load", init, false);
-
 	setTimeout(function (){
 		window.scrollTo(0, 1);
 	}, 0);
@@ -202,6 +215,13 @@
 </head>
 <body ontouchmove="prevent_scrolling(event);">
 
+<div id="login">
+	<form onSubmit="return init()">
+		Name: <input type="text" id="loginname"><br/>
+		<input type="submit" value="login">
+	</form>
+</div>
+
 <svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
 </svg>
@@ -209,7 +229,7 @@
 <div id="ballscreen"></div>
 
 <div id="text">
-	(<span id="status">connecting...</span>)
+	(<span id="status">provide your name</span>)
 	<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
 </div>
 
