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

first time-based app thingy (with transitions)

master
Joshua Moerman 11 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
Split 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>
<meta charset="utf-8" />
<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 language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7);
var websocket;
var myself = {
"name": myName,
"width": 0,
"height": 0
};
function init() {
document.getElementById("myName").innerHTML = myName;
show_size();
testWebSocket();
}
function testWebSocket() {
@ -28,15 +45,54 @@
doSend();
}
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(){
doSend();
}, 1000);
}, 500);
}
function doSend(message) {
myself.name = myName;
myself.width = window.innerWidth;
myself.height = window.innerHeight;
var myself = {
name: myName,
size: {width: window.innerWidth, height: window.innerHeight}
};
websocket.send(JSON.stringify(myself));
}
@ -47,17 +103,12 @@
document.getElementById("status").innerHTML = "DISCONNECTED";
}
function show_size(){
document.getElementById("reso").innerHTML = window.innerWidth + 'x' + window.innerHeight;
}
window.addEventListener("load", init, false);
window.addEventListener("resize", show_size, false);
</script>
<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>
<div id="circle_of_people"></div>
</html>

4
observer.html
View File

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