From ed18c043a48f3f97196c2ad11ac8c3c4282d80ac Mon Sep 17 00:00:00 2001 From: Joshua Moerman Date: Tue, 9 Apr 2013 11:40:44 +0200 Subject: [PATCH] Split index.html in index.{html,css,js} --- index.css | 49 ++++++++++++ index.html | 221 +---------------------------------------------------- index.js | 164 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 217 insertions(+), 217 deletions(-) create mode 100644 index.css create mode 100644 index.js 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