Info, line click

index.css

@@ -18,7 +18,12 @@ a {
 }
 
 /* Login */
+h1 {
+	text-shadow: 0px 1px 1px #f80;
+}
 .modalDialog {
+	color: #000;
+	font-size: 12pt;
 	position: fixed;
 	top: 0;
 	right: 0;
@@ -38,8 +43,14 @@ a {
 	background: #fff;
 }
 
+.modalDialog a {
+	color: #03f;
+	text-shadow: 0px 1px 1px #05f;
+}
+
 /* App */
 #app {
+	background: #000;
 	position: absolute;
 	width: 1000px;
 	height: 600px;
@@ -82,9 +93,9 @@ a {
 }
 #svgscreen line.guitar {
 	stroke: rgb(255,127,0);
-	stroke-width: 2;
+	stroke-width: 3;
 }
 #svgscreen line.solid {
 	stroke: rgb(0,127,255);
-	stroke-width: 2;
+	stroke-width: 3;
 }

index.html

@@ -19,21 +19,24 @@
 
 <div id="login" class="modalDialog">
 	<div>
+	<h1>Gravity Beats</h1>
 	<form onSubmit="return init()">
-		Name:<br/>
+		Naam:<br/>
 		<input type="text" id="loginname"><br/>
 		<input type="submit" value="Play!">
 	</form>
+	<p>Je kan een lijn tekenen door te slepen. Een lijn weghalen kan door er een keer op te klikken/tappen. Je kiest waarmee je tekent door te klikken/tappen op "Change line kind".
+	<p>Orginele app: <a href="https://vimeo.com/60401549">vimeo</a>
+	<p>Source: <a href="https://github.com/Jaxan/beats-sim">github/Jaxan/beats-sim</a>
+	<p>Copyright 2013, Joshua Moerman (<a href="http://vadovas-studios.com">Vadovas</a>)
 	</div>
 </div>
 
 <div id="app">
-	<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
-	<rect width="100%" height="100%" style="fill:rgb(0, 0, 0);"/>
-	</svg>
-
 	<div id="ballscreen"></div>
 
+	<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
+
 	<div id="text">
 		<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a><br/>
 		<span id="status"></span>

index.js

@@ -24,7 +24,7 @@ function init() {
 	statusbar.innerHTML = "connecting..."
 
 	if ("WebSocket" in window){
-		init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
+		init_drawing(svgscreen, drawStart, drawMove, drawEnd, drawRemove);
 		websocket = 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>!';
@@ -101,6 +101,9 @@ function updateLines(lines){
 	svglines_online = new Array();
 	for (var i = lines.length - 1; i >= 0; i--) {
 		var current = addLine(lines[i], svgscreen);
+		current.addEventListener('click', function () {
+			console.log('CLICKED');
+		});
 		if(lines[i].line_kind == 0){
 			current.setAttribute('class', "guitar");
 		} else {
@@ -125,6 +128,10 @@ function drawMove(line){
 
 function drawEnd(line){
 	drawRemove(line);
+	var dx = line.end_point.x - line.starting_point.x;
+	var dy = line.end_point.y - line.starting_point.y;
+	if(dx*dx + dy*dy < 100) return;
+	
 	line.line_kind = line_kind;
 	var packet = {
 		command: 'add line',