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
Unified 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="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>