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 ) ;