diff --git a/index.css b/index.css
new file mode 100644
index 0000000..daaf016
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8108fd6..2683e8b 100644
--- a/index.html
+++ b/index.html
@@ -4,228 +4,15 @@
-
WebSocket Test
-
+
+
-
- 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);
-
+WebSocket Test
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..bc71dbb
--- /dev/null
+++ b/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 Internet Explorer or Android. In both cases, I suggest that you use Chrome or Firefox!';
+ }
+ 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 = '';
+ 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);
\ No newline at end of file