joshua/beats-website
Archived
1
Fork 0
Code Activity

Added line kinds

Browse source
This commit is contained in:
Joshua Moerman 2013-04-02 19:55:06 +02:00
parent 62a37a55f2
commit 233623b872
2 changed files with 50 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
index.html
View file

@ -7,18 +7,26 @@
<title>WebSocket Test</title> <title>WebSocket Test</title>
<style type="text/css"> <style type="text/css">
body { body {
color: #fff; color: #888;
background: #000; background: #000;
font-size: 16pt; font-size: 16pt;
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
#ballscreen { a {
color: #fff;
text-shadow: 0px 1px 1px #f80;
}
#text {
position: relative; position: relative;
text-align: center;
}
#ballscreen {
position: absolute;
background-color: rgba(0.0, 0.0, 0.0, 0.0); background-color: rgba(0.0, 0.0, 0.0, 0.0);
width: 320px; width: 1000px;
height: 480px; height: 600px;
border: 1px solid black; border: 1px solid black;
} }
.ball { .ball {
@ -36,11 +44,15 @@
} }
#svgscreen { #svgscreen {
position: absolute; position: absolute;
width: 320px; width: 1000px;
height: 480px; height: 600px;
} }
#svgscreen line { #svgscreen line.guitar {
stroke: rgb(255,0,0); stroke: rgb(255,127,0);
stroke-width: 2;
}
#svgscreen line.solid {
stroke: rgb(0,127,255);
stroke-width: 2; stroke-width: 2;
} }
</style> </style>
@ -57,11 +69,11 @@
var balls_online = new Array(); var balls_online = new Array();
var svglines_online = new Array(); var svglines_online = new Array();
var speed = 100; var speed = 100;
var line_kind = 0;
function init() { function init() {
var statusbar = document.getElementById('status'); var statusbar = document.getElementById('status');
ballscreen = document.getElementById("ballscreen"); ballscreen = document.getElementById("ballscreen");
document.getElementById("myName").innerHTML = myName;
svgscreen = document.getElementById("svgscreen"); svgscreen = document.getElementById("svgscreen");
if ("WebSocket" in window){ if ("WebSocket" in window){
@ -116,7 +128,13 @@
}; };
svglines_online = new Array(); svglines_online = new Array();
for (var i = lines.length - 1; i >= 0; i--) { for (var i = lines.length - 1; i >= 0; i--) {
svglines_online.push(addLine(lines[i], svgscreen)); 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);
}; };
@ -127,6 +145,11 @@
function drawStart(line){ function drawStart(line){
current_svgline = addLine(line, svgscreen); current_svgline = addLine(line, svgscreen);
if(line_kind == 0){
current_svgline.setAttribute('class', "guitar");
} else {
current_svgline.setAttribute('class', "solid");
}
} }
function drawMove(line){ function drawMove(line){
@ -135,7 +158,7 @@
function drawEnd(line){ function drawEnd(line){
drawRemove(line); drawRemove(line);
line.line_kind = 1; line.line_kind = line_kind;
var packet = { var packet = {
command: 'add line', command: 'add line',
data: line data: line
@ -162,6 +185,14 @@
websocket.send(JSON.stringify(packet)); websocket.send(JSON.stringify(packet));
} }
function changeKind() {
line_kind = line_kind + 1;
line_kind = line_kind % 2;
var kind_str = "guitar";
if(line_kind == 1) kind_str = "solid"
document.getElementById("line_kind").innerHTML = kind_str;
}
window.addEventListener("load", init, false); window.addEventListener("load", init, false);
setTimeout(function (){ setTimeout(function (){
@ -174,10 +205,13 @@
<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>
<div id="ballscreen"></div> <div id="ballscreen"></div>
My name is: <span id="myName"></span><br/> <div id="text">
Status: <span id="status">CONNECTING...</span> (<span id="status">connecting...</span>)
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
</div>
</body> </body>
</html> </html>

6
websocket.js
View file

@ -2,11 +2,11 @@
function init_websocket(statusbar, open, message){ function init_websocket(statusbar, open, message){
websocket = new WebSocket(wsURI); websocket = new WebSocket(wsURI);
websocket.onclose = function (evt) { statusbar.innerHTML = 'DISCONNECTED'; }; websocket.onclose = function (evt) { statusbar.innerHTML = 'disconnected'; };
websocket.onerror = function (evt) { statusbar.innerHTML = 'ERROR: ' + evt.data; }; websocket.onerror = function (evt) { statusbar.innerHTML = 'error: ' + evt.data; };
websocket.onopen = function (evt) { websocket.onopen = function (evt) {
statusbar.innerHTML = 'CONNECTED'; statusbar.innerHTML = 'connected';
open(evt); open(evt);
}; };
websocket.onmessage = function (evt) { websocket.onmessage = function (evt) {