@ -13,10 +13,18 @@
opacity: 0.5;
opacity: 0.5;
}
}
.user {
.user {
-webkit-transition: left 0.5s, top 0.5s;
-webkit-transition: left 0.5s linear, top 0.5s linear;
font-size: 20px;
position: absolute;
position: absolute;
}
}
.user .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
.user .name {
.user .name {
border-radius: 2px;
border-radius: 2px;
font-size: 12px;
font-size: 12px;
@ -30,11 +38,11 @@
var websocket;
var websocket;
function init() {
function init() {
document.getElementById("myName").innerHTML = myName;
if ("WebSocket" in window){
if ("WebSocket" in window){
document.getElementById("myName").innerHTML = myName;
testWebSocket();
testWebSocket();
} else {
} else {
document.getElementById("status").innerHTML = 'No websockets :(';
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() {
function testWebSocket() {
@ -65,7 +73,7 @@
var user = document.createElement('div');
var user = document.createElement('div');
user.id = people[i].name;
user.id = people[i].name;
user.className = 'user';
user.className = 'user';
user.innerHTML = '• ';
user.innerHTML = '< div class = "bullet" > < / div > ';
user.appendChild(name);
user.appendChild(name);
user.style.left = people[i].position.x + "px";
user.style.left = people[i].position.x + "px";
user.style.top = people[i].position.y + "px";
user.style.top = people[i].position.y + "px";