beats-website/index.js

var myName;
var websocket;

var statusbar
var ballscreen;
var svgscreen;

var current_svgline;
var balls_online = new Array();
var svglines_online = new Array();

var speed = 100;
var line_kind = 1;

function init() {
	myName = document.getElementById('loginname').value;
	var login = document.getElementById('login');
	login.parentNode.removeChild(login);

	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);
		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>!';
	}
	return false;
}

function onOpen(evt) {
	updateUser();
	setInterval(poll, speed, true);
}

function onMessage(evt) {
	var ret = JSON.parse(evt.data);
	var balls = ret.balls;
	var lines = ret.lines;

	if(balls){
		updateBalls(balls);
	}
	if(lines){
		updateLines(lines);
	}
}

function updateBalls(balls){
	// Because we use transitions for the balls
	// we really update them, and only delete the ones which are absent

	var updates = 0;
	var news = 0;
	var removed = 0;

	for(i in balls_online){
		balls_online[i].should_remove = true;
	}
	for (var i = balls.length - 1; i >= 0; i--) {
		var ball = document.getElementById(balls[i].information);
		if(ball){
			++updates;
			ball.style.left = balls[i].position.x + "px";
			ball.style.top = balls[i].position.y + "px";
			ball.should_remove = false;
		} else {
			++news;
			var ball = document.createElement('div');
			ball.should_remove = false;
			ball.id = balls[i].information;
			ball.className = 'ball';
			ball.innerHTML = '<div class="bullet"></div>';
			ball.style.left = balls[i].position.x + "px";
			ball.style.top = balls[i].position.y + "px";

			ballscreen.appendChild(ball);
			balls_online.push(ball);
		}
	}
	for (var i = balls_online.length - 1; i >= 0; i--) {
		if(balls_online[i].should_remove){
			++removed
			ballscreen.removeChild(balls_online[i]);
			balls_online.splice(i, 1);
		}
	};

	statusbar.innerHTML = updates + ', ' + news + ', ' + removed;
}

function updateLines(lines){
	// Simply delete and redraw them :)
	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--) {
		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);
	};
}

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){
	updateLine(current_svgline, line);
}

function drawEnd(line){
	drawRemove(line);
	line.line_kind = line_kind;
	var packet = {
		command: 'add line',
		data: line
	};
	websocket.send(JSON.stringify(packet));
}

function drawRemove(line){
	if(current_svgline){
		svgscreen.removeChild(current_svgline);
		current_svgline = null;
	}
}

function updateUser() {
	var myself = {
		name: myName,
		size: {width: window.innerWidth, height: window.innerHeight}
	};
	var packet = {
		command: 'update user',
		data: myself
	};
	websocket.send(JSON.stringify(packet));
}

function poll(){
	var packet = {
		command: 'poll'
	};
	websocket.send(JSON.stringify(packet));
}

function changeKind() {
	line_kind = line_kind + 1;
	line_kind = line_kind % 2;
	var kind_str = "solid";
	if(line_kind == 1) kind_str = "guitar"
	document.getElementById("line_kind").innerHTML = kind_str;
}

setTimeout(function (){
	window.scrollTo(0, 1);
}, 0);