Split index.html in index.{html,css,js}
This commit is contained in:
Joshua Moerman
parent
ef09dd82cd
commit
ed18c043a4
3 changed files with 217 additions and 217 deletions
49
index.css
Normal file
49
index.css
Normal file
|
|
@ -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
221
index.html
|
|
@ -4,228 +4,15 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<meta name="viewport" content="user-scalable=no, width=device-width" />
|
<meta name="viewport" content="user-scalable=no, width=device-width" />
|
||||||
|
|
||||||
<title>WebSocket Test</title>
|
<link href="index.css" rel="stylesheet" type="text/css">
|
||||||
<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>
|
|
||||||
<script type="text/javascript" src="connection.js"></script>
|
<script type="text/javascript" src="connection.js"></script>
|
||||||
<script type="text/javascript" src="websocket.js"></script>
|
<script type="text/javascript" src="websocket.js"></script>
|
||||||
<script type="text/javascript" src="drawing.js"></script>
|
<script type="text/javascript" src="drawing.js"></script>
|
||||||
<script type="text/javascript" src="rendering.js"></script>
|
<script type="text/javascript" src="rendering.js"></script>
|
||||||
<script language="javascript" type="text/javascript">
|
<script type="text/javascript" src="index.js"></script>
|
||||||
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() {
|
<title>WebSocket Test</title>
|
||||||
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);
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body ontouchmove="prevent_scrolling(event);">
|
<body ontouchmove="prevent_scrolling(event);">
|
||||||
|
|
||||||
|
|
|
||||||
164
index.js
Normal file
164
index.js
Normal file
|
|
@ -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);
|
||||||
Reference in a new issue