joshua
/
beats-website
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

Made a login-thingy

master
Joshua Moerman 11 years ago
parent
233623b872
commit
59b33559e6
1 changed files with 31 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      index.html

42
index.html
View File

@ -61,8 +61,7 @@
<script type="text/javascript" src="drawing.js"></script>
<script type="text/javascript" src="rendering.js"></script>
<script language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7);
var websocket;
var myName;
var ballscreen;
var svgscreen;
var current_svgline;
@ -72,16 +71,24 @@
var line_kind = 0;
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);
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) {
@ -90,10 +97,20 @@
function onMessage(evt) {
var ret = JSON.parse(evt.data);
var people = ret.people;
var balls = ret.balls;
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){
balls_online[i].should_remove = true;
}
@ -122,7 +139,10 @@
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]);
};
@ -136,11 +156,6 @@
}
svglines_online.push(current);
};
setTimeout(function(){
doSend();
}, speed);
}
function drawStart(line){
@ -193,8 +208,6 @@
document.getElementById("line_kind").innerHTML = kind_str;
}
window.addEventListener("load", init, false);
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);
@ -202,6 +215,13 @@
</head>
<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">
<rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
@ -209,7 +229,7 @@
<div id="ballscreen"></div>
<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>
</div>