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 Internet Explorer or Android. In both cases, I suggest that you use Chrome or Firefox!'; } 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 = '
'; 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);