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 ;
var maxwidth = 1280 ;
var maxheight = 1024 ;
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 ( 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>!' ;
}
return false ;
}
function resize ( ) {
var app = document . getElementById ( 'app' ) ;
app . style . width = Math . min ( window . innerWidth - 8 , maxwidth ) + 'px' ;
app . style . height = Math . min ( window . innerHeight - 4 , maxheight ) + 'px' ;
updateUser ( ) ;
}
function onOpen ( evt ) {
resize ( ) ;
window . addEventListener ( 'resize' , resize , false ) ;
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 ) ;
}
} ;
}
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 id = lines [ i ] . ID ;
console . log ( 'adding: ' + id ) ;
var current = addLine ( lines [ i ] , svgscreen ) ;
current . addEventListener ( 'click' , function ( ) {
console . log ( 'removing: ' + id ) ;
removeLine ( id ) ;
} ) ;
current . addEventListener ( 'touchend' , function ( ) {
console . log ( 'removing: ' + id ) ;
removeLine ( id ) ;
} ) ;
if ( lines [ i ] . line_kind == 0 ) {
current . setAttribute ( 'class' , "guitar" ) ;
} else {
current . setAttribute ( 'class' , "solid" ) ;
}
svglines_online . push ( current ) ;
} ;
}
function removeLine ( id ) {
var packet = {
command : 'remove line' ,
data : id
} ;
websocket . send ( JSON . stringify ( packet ) ) ;
}
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 ) ;
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 ;
line . ID = 0 ;
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 - 8 , height : window . innerHeight - 4 }
} ;
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 ) ;