joshua/beats-website
Archived
1
Fork 0
Code Activity

Made a login-thingy

Browse source
This commit is contained in:
Joshua Moerman 2013-04-02 20:51:22 +02:00
parent 233623b872
commit 59b33559e6
1 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -61,8 +61,7 @@
<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 language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7); var myName;
var websocket;
var ballscreen; var ballscreen;
var svgscreen; var svgscreen;
var current_svgline; var current_svgline;
@ -72,16 +71,24 @@
var line_kind = 0; var line_kind = 0;
function init() { function init() {
myName = document.getElementById('loginname').value;
console.log(myName);
var login = document.getElementById('login');
login.parentNode.removeChild(login);
var statusbar = document.getElementById('status'); var statusbar = document.getElementById('status');
ballscreen = document.getElementById("ballscreen"); ballscreen = document.getElementById("ballscreen");
svgscreen = document.getElementById("svgscreen"); svgscreen = document.getElementById("svgscreen");
statusbar.innerHTML = "connecting..."
if ("WebSocket" in window){ if ("WebSocket" in window){
init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove); init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove);
init_websocket(statusbar, onOpen, onMessage); init_websocket(statusbar, onOpen, onMessage);
} else { } 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>!'; 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) { function onOpen(evt) {
@ -90,10 +97,20 @@
function onMessage(evt) { function onMessage(evt) {
var ret = JSON.parse(evt.data); var ret = JSON.parse(evt.data);
var people = ret.people;
var balls = ret.balls; var balls = ret.balls;
var lines = ret.lines; var lines = ret.lines;
updateBalls(balls);
updateLines(lines);
setTimeout(function(){
doSend();
}, 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){ for(i in balls_online){
balls_online[i].should_remove = true; balls_online[i].should_remove = true;
} }
@ -122,7 +139,10 @@
balls_online.splice(i, 1); balls_online.splice(i, 1);
} }
}; };
}
function updateLines(lines){
// Simply delete and redraw them :)
for (var i = svglines_online.length - 1; i >= 0; i--) { for (var i = svglines_online.length - 1; i >= 0; i--) {
svgscreen.removeChild(svglines_online[i]); svgscreen.removeChild(svglines_online[i]);
}; };
@ -136,11 +156,6 @@
} }
svglines_online.push(current); svglines_online.push(current);
}; };
setTimeout(function(){
doSend();
}, speed);
} }
function drawStart(line){ function drawStart(line){
@ -193,8 +208,6 @@
document.getElementById("line_kind").innerHTML = kind_str; document.getElementById("line_kind").innerHTML = kind_str;
} }
window.addEventListener("load", init, false);
setTimeout(function (){ setTimeout(function (){
window.scrollTo(0, 1); window.scrollTo(0, 1);
}, 0); }, 0);
@ -202,6 +215,13 @@
</head> </head>
<body ontouchmove="prevent_scrolling(event);"> <body ontouchmove="prevent_scrolling(event);">
<div id="login">
<form onSubmit="return init()">
Name: <input type="text" id="loginname"><br/>
<input type="submit" value="login">
</form>
</div>
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/> <rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
</svg> </svg>
@ -209,7 +229,7 @@
<div id="ballscreen"></div> <div id="ballscreen"></div>
<div id="text"> <div id="text">
(<span id="status">connecting...</span>) (<span id="status">provide your name</span>)
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a> <a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
</div> </div>