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.
 
 
 

86 lines
1.9 KiB

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<style type="text/css">
body {
font-size: 16pt;
}
#screen {
background-color: #fda;
position: absolute;
top: 0px;
left: 0px;
width: 1280px;
height: 800px;
opacity: 0.5;
}
.user {
border: 3px solid #0af;
text-align: right;
position: absolute;
opacity: 0.5;
}
.user .name {
padding: 4px;
background-color: #0af;
}
</style>
<script type="text/javascript" src="connection.js"></script>
<script language="javascript" type="text/javascript">
var websocket;
var the_screen;
function init() {
the_screen = document.getElementById("screen");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsURI, "observer");
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";
// needs to be non-empty
websocket.send("a");
}
function onMessage(evt) {
var people = JSON.parse(evt.data);
the_screen.innerHTML = '';
for (var i = people.length - 1; i >= 0; i--) {
var name = document.createElement('span')
name.className = "name";
name.innerText = people[i].name;
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";
the_screen.appendChild(user);
};
setTimeout(function(){
websocket.send("a");
}, 500);
}
function onError(evt) {
document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
}
function onClose(evt) {
document.getElementById("status").innerHTML = "DISCONNECTED";
}
window.addEventListener("load", init, false);
</script>
<p>Status: <span id="status">unknown</span>
<div id="screen">
</div>
</html>