Joshua Moerman
12 years ago
3 changed files with 217 additions and 217 deletions
@ -0,0 +1,49 @@ |
|||||
|
body { |
||||
|
color: #888; |
||||
|
background: #000; |
||||
|
font-size: 16pt; |
||||
|
margin: 0px; |
||||
|
overflow: hidden; |
||||
|
height: 100%; |
||||
|
} |
||||
|
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: 1000px; |
||||
|
height: 600px; |
||||
|
border: 1px solid black; |
||||
|
} |
||||
|
.ball { |
||||
|
-webkit-transition: left 0.1s linear, top 0.1s linear; |
||||
|
position: absolute; |
||||
|
} |
||||
|
.ball .bullet { |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
position: absolute; |
||||
|
left: -5px; |
||||
|
top: -5px; |
||||
|
border-radius: 5px; |
||||
|
background-color: #f00; |
||||
|
} |
||||
|
#svgscreen { |
||||
|
position: absolute; |
||||
|
width: 1000px; |
||||
|
height: 600px; |
||||
|
} |
||||
|
#svgscreen line.guitar { |
||||
|
stroke: rgb(255,127,0); |
||||
|
stroke-width: 2; |
||||
|
} |
||||
|
#svgscreen line.solid { |
||||
|
stroke: rgb(0,127,255); |
||||
|
stroke-width: 2; |
||||
|
} |
||||
@ -0,0 +1,164 @@ |
|||||
|
var myName; |
||||
|
var websocket; |
||||
|
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; |
||||
|
console.log(myName); |
||||
|
var login = document.getElementById('login'); |
||||
|
login.parentNode.removeChild(login); |
||||
|
|
||||
|
var 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(); |
||||
|
} |
||||
|
|
||||
|
function onMessage(evt) { |
||||
|
var ret = JSON.parse(evt.data); |
||||
|
var balls = ret.balls; |
||||
|
var lines = ret.lines; |
||||
|
|
||||
|
if(balls){ |
||||
|
console.log('updating balls'); |
||||
|
updateBalls(balls); |
||||
|
} |
||||
|
if(lines){ |
||||
|
console.log('updating lines'); |
||||
|
updateLines(lines); |
||||
|
} |
||||
|
|
||||
|
setTimeout(function(){ |
||||
|
poll(); |
||||
|
}, speed); |
||||
|
} |
||||
|
|
||||
|
function updateBalls(balls){ |
||||
|
// Because we use transitions for the balls
|
||||
|
// we really update them, and only delete the ones which are absent
|
||||
|
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){ |
||||
|
ball.style.left = balls[i].position.x + "px"; |
||||
|
ball.style.top = balls[i].position.y + "px"; |
||||
|
ball.should_remove = false; |
||||
|
} else { |
||||
|
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){ |
||||
|
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 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); |
||||
Reference in new issue