Added line kinds

index.html

@@ -7,18 +7,26 @@
 <title>WebSocket Test</title>
 <style type="text/css">
 	body {
-		color: #fff;
+		color: #888;
 		background: #000;
 		font-size: 16pt;
 		margin: 0px;
 		overflow: hidden;
 		height: 100%;
 	}
-	#ballscreen {
+	a {
+		color: #fff;
+		text-shadow: 0px 1px 1px #f80;
+	}
+	#text {
 		position: relative;
+		text-align: center;
+	}
+	#ballscreen {
+		position: absolute;
 		background-color: rgba(0.0, 0.0, 0.0, 0.0);
-		width: 320px;
-		height: 480px;
+		width: 1000px;
+		height: 600px;
 		border: 1px solid black;
 	}
 	.ball {
@@ -36,11 +44,15 @@
 	}
 	#svgscreen {
 		position: absolute;
-		width: 320px;
-		height: 480px;
+		width: 1000px;
+		height: 600px;
+	}
+	#svgscreen line.guitar {
+		stroke: rgb(255,127,0);
+		stroke-width: 2;
 	}
-	#svgscreen line {
-		stroke: rgb(255,0,0);
+	#svgscreen line.solid {
+		stroke: rgb(0,127,255);
 		stroke-width: 2;
 	}
 </style>
@@ -57,11 +69,11 @@
 	var balls_online = new Array();
 	var svglines_online = new Array();
 	var speed = 100;
+	var line_kind = 0;
 
 	function init() {
 		var statusbar = document.getElementById('status');
 		ballscreen = document.getElementById("ballscreen");
-		document.getElementById("myName").innerHTML = myName;
 		svgscreen = document.getElementById("svgscreen");
 
 		if ("WebSocket" in window){
@@ -116,7 +128,13 @@
 		};
 		svglines_online = new Array();
 		for (var i = lines.length - 1; i >= 0; i--) {
-			svglines_online.push(addLine(lines[i], svgscreen));
+			var current = addLine(lines[i], svgscreen);
+			if(lines[i].line_kind == 0){
+				current.setAttribute('class', "guitar");
+			} else {
+				current.setAttribute('class', "solid");
+			}
+			svglines_online.push(current);
 		};
 
 
@@ -127,6 +145,11 @@
 
 	function drawStart(line){
 		current_svgline = addLine(line, svgscreen);
+		if(line_kind == 0){
+			current_svgline.setAttribute('class', "guitar");
+		} else {
+			current_svgline.setAttribute('class', "solid");
+		}
 	}
 
 	function drawMove(line){
@@ -135,7 +158,7 @@
 
 	function drawEnd(line){
 		drawRemove(line);
-		line.line_kind = 1;
+		line.line_kind = line_kind;
 		var packet = {
 			command: 'add line',
 			data: line
@@ -162,6 +185,14 @@
 		websocket.send(JSON.stringify(packet));
 	}
 
+	function changeKind() {
+		line_kind = line_kind + 1;
+		line_kind = line_kind % 2;
+		var kind_str = "guitar";
+		if(line_kind == 1) kind_str = "solid"
+		document.getElementById("line_kind").innerHTML = kind_str;
+	}
+
 	window.addEventListener("load", init, false);
 
 	setTimeout(function (){
@@ -174,10 +205,13 @@
 <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>
+
 <div id="ballscreen"></div>
 
-My name is: <span id="myName"></span><br/>
-Status: <span id="status">CONNECTING...</span>
+<div id="text">
+	(<span id="status">connecting...</span>)
+	<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
+</div>
 
 </body>
 </html>

websocket.js

@@ -2,11 +2,11 @@
 function init_websocket(statusbar, open, message){
 	websocket = new WebSocket(wsURI);
 
-	websocket.onclose = function (evt) { statusbar.innerHTML = 'DISCONNECTED'; };
-	websocket.onerror = function (evt) { statusbar.innerHTML = 'ERROR: ' + evt.data; };
+	websocket.onclose = function (evt) { statusbar.innerHTML = 'disconnected'; };
+	websocket.onerror = function (evt) { statusbar.innerHTML = 'error: ' + evt.data; };
 
 	websocket.onopen = function (evt) {
-		statusbar.innerHTML = 'CONNECTED';
+		statusbar.innerHTML = 'connected';
 		open(evt);
 	};
 	websocket.onmessage = function (evt) {