Multi-user gravity beats for Sound of Science 2013 (website)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

146 lines
3.7 KiB

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<title>WebSocket Test</title>
<style type="text/css">
body {
font-size: 16pt;
margin: 0px;
overflow: hidden;
height: 100%;
}
#circle_of_people {
position: absolute;
background-color: #fda;
width: 320px;
height: 480px;
opacity: 0.5;
border: 2px solid black;
}
.user {
-webkit-transition: left 0.5s linear, top 0.5s linear;
position: absolute;
}
.user .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
.user .name {
border-radius: 2px;
font-size: 12px;
padding: 2px;
background-color: #0af;
}
</style>
<script type="text/javascript" src="drawing.js"></script>
<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 circle;
function init() {
circle = document.getElementById("circle_of_people");
init_drawing();
if ("WebSocket" in window){
document.getElementById("myName").innerHTML = myName;
testWebSocket();
} else {
document.getElementById("status").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>!';
}
}
function testWebSocket() {
websocket = new WebSocket(wsURI);
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
}
function onOpen(evt) {
document.getElementById("status").innerHTML = "CONNECTED";
doSend();
}
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";
} 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 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();
}, 500);
}
function doSend(message) {
var myself = {
name: myName,
size: {width: window.innerWidth, height: window.innerHeight}
};
websocket.send(JSON.stringify(myself));
}
function onError(evt) {
document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
}
function onClose(evt) {
document.getElementById("status").innerHTML = "DISCONNECTED";
}
window.addEventListener("load", init, false);
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);
</script>
</head>
<body ontouchmove="prevent_scrolling(event);">
<p>My name is: <span id="myName"></span>
<p>Status: <span id="status">unknown</span>
<div id="circle_of_people"></div>
</body>
</html>