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