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

first time-based app thingy (with transitions)

master
Joshua Moerman 12 years ago
parent
b1bf2f8088
commit
5f8e54afb8
2 changed files with 71 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      index.html
  2. 4
      observer.html

87
index.html
View File

@ -1,19 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WebSocket Test</title> <title>WebSocket Test</title>
<style type="text/css">
body {
font-size: 16pt;
}
#circle_of_people {
position: absolute;
background-color: #fda;
width: 400px;
height: 400px;
opacity: 0.5;
}
.user {
-webkit-transition: left 0.5s, top 0.5s;
font-size: 20px;
position: absolute;
}
.user .name {
border-radius: 2px;
font-size: 12px;
padding: 2px;
background-color: #0af;
}
</style>
<script type="text/javascript" src="connection.js"></script> <script type="text/javascript" src="connection.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7); var myName = Math.random().toString(36).substring(7);
var websocket; var websocket;
var myself = {
"name": myName,
"width": 0,
"height": 0
};
function init() { function init() {
document.getElementById("myName").innerHTML = myName; document.getElementById("myName").innerHTML = myName;
show_size();
testWebSocket(); testWebSocket();
} }
function testWebSocket() { function testWebSocket() {
@ -28,15 +45,54 @@
doSend(); doSend();
} }
function onMessage(evt) { function onMessage(evt) {
document.getElementById("people").innerHTML = evt.data; var circle = document.getElementById("circle_of_people");
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";
} 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 = '&bull; ';
user.appendChild(name);
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
circle.appendChild(user);
}
}
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;
}
}
if(should_remove){
circle.removeChild(nodes[i]);
}
}
setTimeout(function(){ setTimeout(function(){
doSend(); doSend();
}, 1000); }, 500);
} }
function doSend(message) { function doSend(message) {
myself.name = myName; var myself = {
myself.width = window.innerWidth; name: myName,
myself.height = window.innerHeight; size: {width: window.innerWidth, height: window.innerHeight}
};
websocket.send(JSON.stringify(myself)); websocket.send(JSON.stringify(myself));
} }
@ -47,17 +103,12 @@
document.getElementById("status").innerHTML = "DISCONNECTED"; document.getElementById("status").innerHTML = "DISCONNECTED";
} }
function show_size(){
document.getElementById("reso").innerHTML = window.innerWidth + 'x' + window.innerHeight;
}
window.addEventListener("load", init, false); window.addEventListener("load", init, false);
window.addEventListener("resize", show_size, false);
</script> </script>
<p>My name is: <span id="myName"></span> <p>My name is: <span id="myName"></span>
<p>My resoltion is: <span id="reso"></span>
<p>Response of server: <span id="people"></span>
<p>Status: <span id="status">unknown</span> <p>Status: <span id="status">unknown</span>
<div id="circle_of_people"></div>
</html> </html>

4
observer.html
View File

@ -58,8 +58,8 @@
var user = document.createElement('div'); var user = document.createElement('div');
user.className = 'user'; user.className = 'user';
user.appendChild(name); user.appendChild(name);
user.style.width = people[i].width + "px"; user.style.width = people[i].size.width + "px";
user.style.height = people[i].height + "px"; user.style.height = people[i].size.height + "px";
the_screen.appendChild(user); the_screen.appendChild(user);
}; };