Browse Source

Split index.html in index.{html,css,js}

master
Joshua Moerman 11 years ago
parent
commit
ed18c043a4
  1. 49
      index.css
  2. 221
      index.html
  3. 164
      index.js

49
index.css

@ -0,0 +1,49 @@
body {
color: #888;
background: #000;
font-size: 16pt;
margin: 0px;
overflow: hidden;
height: 100%;
}
a {
color: #fff;
text-shadow: 0px 1px 1px #f80;
}
#text {
position: relative;
text-align: center;
}
#ballscreen {
position: absolute;
background-color: rgba(0.0, 0.0, 0.0, 0.0);
width: 1000px;
height: 600px;
border: 1px solid black;
}
.ball {
-webkit-transition: left 0.1s linear, top 0.1s linear;
position: absolute;
}
.ball .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
#svgscreen {
position: absolute;
width: 1000px;
height: 600px;
}
#svgscreen line.guitar {
stroke: rgb(255,127,0);
stroke-width: 2;
}
#svgscreen line.solid {
stroke: rgb(0,127,255);
stroke-width: 2;
}

221
index.html

@ -4,228 +4,15 @@
<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 {
color: #888;
background: #000;
font-size: 16pt;
margin: 0px;
overflow: hidden;
height: 100%;
}
a {
color: #fff;
text-shadow: 0px 1px 1px #f80;
}
#text {
position: relative;
text-align: center;
}
#ballscreen {
position: absolute;
background-color: rgba(0.0, 0.0, 0.0, 0.0);
width: 1000px;
height: 600px;
border: 1px solid black;
}
.ball {
-webkit-transition: left 0.1s linear, top 0.1s linear;
position: absolute;
}
.ball .bullet {
width: 10px;
height: 10px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 5px;
background-color: #f00;
}
#svgscreen {
position: absolute;
width: 1000px;
height: 600px;
}
#svgscreen line.guitar {
stroke: rgb(255,127,0);
stroke-width: 2;
}
#svgscreen line.solid {
stroke: rgb(0,127,255);
stroke-width: 2;
}
</style>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="connection.js"></script>
<script type="text/javascript" src="websocket.js"></script>
<script type="text/javascript" src="drawing.js"></script>
<script type="text/javascript" src="rendering.js"></script>
<script language="javascript" type="text/javascript">
var myName;
var websocket;
var ballscreen;
var svgscreen;
var current_svgline;
var balls_online = new Array();
var svglines_online = new Array();
var speed = 100;
var line_kind = 1;
function init() {
myName = document.getElementById('loginname').value;
console.log(myName);
var login = document.getElementById('login');
login.parentNode.removeChild(login);
var statusbar = document.getElementById('status');
ballscreen = document.getElementById("ballscreen");
svgscreen = document.getElementById("svgscreen");
statusbar.innerHTML = "connecting..."
if ("WebSocket" in window){
init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
websocket = init_websocket(statusbar, onOpen, onMessage);
} else {
statusbar.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>!';
}
return false;
}
function onOpen(evt) {
updateUser();
}
function onMessage(evt) {
var ret = JSON.parse(evt.data);
var balls = ret.balls;
var lines = ret.lines;
if(balls){
console.log('updating balls');
updateBalls(balls);
}
if(lines){
console.log('updating lines');
updateLines(lines);
}
setTimeout(function(){
poll();
}, speed);
}
function updateBalls(balls){
// Because we use transitions for the balls
// we really update them, and only delete the ones which are absent
for(i in balls_online){
balls_online[i].should_remove = true;
}
for (var i = balls.length - 1; i >= 0; i--) {
var ball = document.getElementById(balls[i].information);
if(ball){
ball.style.left = balls[i].position.x + "px";
ball.style.top = balls[i].position.y + "px";
ball.should_remove = false;
} else {
var ball = document.createElement('div');
ball.should_remove = false;
ball.id = balls[i].information;
ball.className = 'ball';
ball.innerHTML = '<div class="bullet"></div>';
ball.style.left = balls[i].position.x + "px";
ball.style.top = balls[i].position.y + "px";
<script type="text/javascript" src="index.js"></script>
ballscreen.appendChild(ball);
balls_online.push(ball);
}
}
for (var i = balls_online.length - 1; i >= 0; i--) {
if(balls_online[i].should_remove){
ballscreen.removeChild(balls_online[i]);
balls_online.splice(i, 1);
}
};
}
function updateLines(lines){
// Simply delete and redraw them :)
for (var i = svglines_online.length - 1; i >= 0; i--) {
svgscreen.removeChild(svglines_online[i]);
};
svglines_online = new Array();
for (var i = lines.length - 1; i >= 0; i--) {
var current = addLine(lines[i], svgscreen);
if(lines[i].line_kind == 0){
current.setAttribute('class', "guitar");
} else {
current.setAttribute('class', "solid");
}
svglines_online.push(current);
};
}
function drawStart(line){
current_svgline = addLine(line, svgscreen);
if(line_kind == 0){
current_svgline.setAttribute('class', "guitar");
} else {
current_svgline.setAttribute('class', "solid");
}
}
function drawMove(line){
updateLine(current_svgline, line);
}
function drawEnd(line){
drawRemove(line);
line.line_kind = line_kind;
var packet = {
command: 'add line',
data: line
};
websocket.send(JSON.stringify(packet));
}
function drawRemove(line){
if(current_svgline){
svgscreen.removeChild(current_svgline);
current_svgline = null;
}
}
function updateUser() {
var myself = {
name: myName,
size: {width: window.innerWidth, height: window.innerHeight}
};
var packet = {
command: 'update user',
data: myself
};
websocket.send(JSON.stringify(packet));
}
function poll(){
var packet = {
command: 'poll'
};
websocket.send(JSON.stringify(packet));
}
function changeKind() {
line_kind = line_kind + 1;
line_kind = line_kind % 2;
var kind_str = "solid";
if(line_kind == 1) kind_str = "guitar"
document.getElementById("line_kind").innerHTML = kind_str;
}
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);
</script>
<title>WebSocket Test</title>
</head>
<body ontouchmove="prevent_scrolling(event);">

164
index.js

@ -0,0 +1,164 @@
var myName;
var websocket;
var ballscreen;
var svgscreen;
var current_svgline;
var balls_online = new Array();
var svglines_online = new Array();
var speed = 100;
var line_kind = 1;
function init() {
myName = document.getElementById('loginname').value;
console.log(myName);
var login = document.getElementById('login');
login.parentNode.removeChild(login);
var statusbar = document.getElementById('status');
ballscreen = document.getElementById("ballscreen");
svgscreen = document.getElementById("svgscreen");
statusbar.innerHTML = "connecting..."
if ("WebSocket" in window){
init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
websocket = init_websocket(statusbar, onOpen, onMessage);
} else {
statusbar.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>!';
}
return false;
}
function onOpen(evt) {
updateUser();
}
function onMessage(evt) {
var ret = JSON.parse(evt.data);
var balls = ret.balls;
var lines = ret.lines;
if(balls){
console.log('updating balls');
updateBalls(balls);
}
if(lines){
console.log('updating lines');
updateLines(lines);
}
setTimeout(function(){
poll();
}, speed);
}
function updateBalls(balls){
// Because we use transitions for the balls
// we really update them, and only delete the ones which are absent
for(i in balls_online){
balls_online[i].should_remove = true;
}
for (var i = balls.length - 1; i >= 0; i--) {
var ball = document.getElementById(balls[i].information);
if(ball){
ball.style.left = balls[i].position.x + "px";
ball.style.top = balls[i].position.y + "px";
ball.should_remove = false;
} else {
var ball = document.createElement('div');
ball.should_remove = false;
ball.id = balls[i].information;
ball.className = 'ball';
ball.innerHTML = '<div class="bullet"></div>';
ball.style.left = balls[i].position.x + "px";
ball.style.top = balls[i].position.y + "px";
ballscreen.appendChild(ball);
balls_online.push(ball);
}
}
for (var i = balls_online.length - 1; i >= 0; i--) {
if(balls_online[i].should_remove){
ballscreen.removeChild(balls_online[i]);
balls_online.splice(i, 1);
}
};
}
function updateLines(lines){
// Simply delete and redraw them :)
for (var i = svglines_online.length - 1; i >= 0; i--) {
svgscreen.removeChild(svglines_online[i]);
};
svglines_online = new Array();
for (var i = lines.length - 1; i >= 0; i--) {
var current = addLine(lines[i], svgscreen);
if(lines[i].line_kind == 0){
current.setAttribute('class', "guitar");
} else {
current.setAttribute('class', "solid");
}
svglines_online.push(current);
};
}
function drawStart(line){
current_svgline = addLine(line, svgscreen);
if(line_kind == 0){
current_svgline.setAttribute('class', "guitar");
} else {
current_svgline.setAttribute('class', "solid");
}
}
function drawMove(line){
updateLine(current_svgline, line);
}
function drawEnd(line){
drawRemove(line);
line.line_kind = line_kind;
var packet = {
command: 'add line',
data: line
};
websocket.send(JSON.stringify(packet));
}
function drawRemove(line){
if(current_svgline){
svgscreen.removeChild(current_svgline);
current_svgline = null;
}
}
function updateUser() {
var myself = {
name: myName,
size: {width: window.innerWidth, height: window.innerHeight}
};
var packet = {
command: 'update user',
data: myself
};
websocket.send(JSON.stringify(packet));
}
function poll(){
var packet = {
command: 'poll'
};
websocket.send(JSON.stringify(packet));
}
function changeKind() {
line_kind = line_kind + 1;
line_kind = line_kind % 2;
var kind_str = "solid";
if(line_kind == 1) kind_str = "guitar"
document.getElementById("line_kind").innerHTML = kind_str;
}
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);