first time-based app thingy (with transitions)
This commit is contained in:
Joshua Moerman
parent
b1bf2f8088
commit
5f8e54afb8
2 changed files with 71 additions and 20 deletions
87
index.html
87
index.html
|
|
@ -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 = '• ';
|
||||||
|
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>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Reference in a new issue