joshua
/
beats-website
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

Added balls :D

master
Joshua Moerman 12 years ago
parent
fc74c3d0b1
commit
63dc472372
1 changed files with 50 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 96
      index.html

96
index.html
View File

@ -12,19 +12,18 @@
overflow: hidden;
height: 100%;
}
#circle_of_people {
#ballscreen {
position: absolute;
background-color: #fda;
background-color: rgba(0.0, 0.0, 0.0, 0.0);
width: 320px;
height: 480px;
opacity: 0.1;
border: 1px solid black;
}
.user {
.ball {
-webkit-transition: left 0.5s linear, top 0.5s linear;
position: absolute;
}
.user .bullet {
.ball .bullet {
width: 10px;
height: 10px;
position: absolute;
@ -33,12 +32,6 @@
border-radius: 5px;
background-color: #f00;
}
.user .name {
border-radius: 2px;
font-size: 12px;
padding: 2px;
background-color: #0af;
}
#svgscreen {
background-color: #adf;
position: absolute;
@ -57,18 +50,21 @@
<script language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7);
var websocket;
var circle;
var ballscreen;
var svgscreen;
var current_svgline;
var balls_online = new Array();
var svglines_online = new Array();
var speed = 100;
function init() {
var statusbar = document.getElementById('status');
circle = document.getElementById("circle_of_people");
ballscreen = document.getElementById("ballscreen");
document.getElementById("myName").innerHTML = myName;
svgscreen = document.getElementById("svgscreen");
if ("WebSocket" in window){
init_drawing(circle, drawStart, drawMove, drawEnd, drawRemove);
init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
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>!';
@ -80,46 +76,52 @@
}
function onMessage(evt) {
var people = JSON.parse(evt.data);
for (var i = people.length - 1; i >= 0; i--) {
var user = document.getElementById(people[i].name);
if(user){
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
var ret = JSON.parse(evt.data);
var people = ret.people;
var balls = ret.balls;
var lines = ret.lines;
for(ball in balls_online){
ball.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 name = document.createElement('span')
name.className = "name";
name.innerText = people[i].name;
var user = document.createElement('div');
user.id = people[i].name;
user.className = 'user';
user.innerHTML = '<div class="bullet"></div>';
user.appendChild(name);
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
circle.appendChild(user);
}
}
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";
var nodes = circle.childNodes;
for(var i = nodes.length -1; i >= 0; i--) {
var should_remove = true;
for (var j = people.length - 1; j >= 0; j--){
if(people[j].name == nodes[i].id) {
should_remove = false;
break;
}
ballscreen.appendChild(ball);
balls_online.push(ball);
}
if(should_remove){
circle.removeChild(nodes[i]);
}
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);
}
};
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--) {
svglines_online.push(addLine(lines[i], svgscreen));
};
setTimeout(function(){
doSend();
}, 500);
}, speed);
}
function drawStart(line){
@ -164,7 +166,7 @@
<p>Status: <span id="status">CONNECTING...</span></p>
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<div id="circle_of_people"></div>
<div id="ballscreen"></div>
</body>
</html>