joshua/beats-website
Archived
1
Fork 0
Code Activity

Info, line click

Browse source
This commit is contained in:
Joshua Moerman 2013-04-22 18:39:43 +02:00
parent 2ee98c9690
commit fd692375cf
3 changed files with 29 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.css
View file

@ -18,7 +18,12 @@ a {
} }
/* Login */ /* Login */
h1 {
text-shadow: 0px 1px 1px #f80;
}
.modalDialog { .modalDialog {
color: #000;
font-size: 12pt;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -38,8 +43,14 @@ a {
background: #fff; background: #fff;
} }
.modalDialog a {
color: #03f;
text-shadow: 0px 1px 1px #05f;
}
/* App */ /* App */
#app { #app {
background: #000;
position: absolute; position: absolute;
width: 1000px; width: 1000px;
height: 600px; height: 600px;
@ -82,9 +93,9 @@ a {
} }
#svgscreen line.guitar { #svgscreen line.guitar {
stroke: rgb(255,127,0); stroke: rgb(255,127,0);
stroke-width: 2; stroke-width: 3;
} }
#svgscreen line.solid { #svgscreen line.solid {
stroke: rgb(0,127,255); stroke: rgb(0,127,255);
stroke-width: 2; stroke-width: 3;
} }

13
index.html
View file

@ -19,21 +19,24 @@
<div id="login" class="modalDialog"> <div id="login" class="modalDialog">
<div> <div>
<h1>Gravity Beats</h1>
<form onSubmit="return init()"> <form onSubmit="return init()">
Name:<br/> Naam:<br/>
<input type="text" id="loginname"><br/> <input type="text" id="loginname"><br/>
<input type="submit" value="Play!"> <input type="submit" value="Play!">
</form> </form>
<p>Je kan een lijn tekenen door te slepen. Een lijn weghalen kan door er een keer op te klikken/tappen. Je kiest waarmee je tekent door te klikken/tappen op "Change line kind".
<p>Orginele app: <a href="https://vimeo.com/60401549">vimeo</a>
<p>Source: <a href="https://github.com/Jaxan/beats-sim">github/Jaxan/beats-sim</a>
<p>Copyright 2013, Joshua Moerman (<a href="http://vadovas-studios.com">Vadovas</a>)
</div> </div>
</div> </div>
<div id="app"> <div id="app">
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="100%" height="100%" style="fill:rgb(0, 0, 0);"/>
</svg>
<div id="ballscreen"></div> <div id="ballscreen"></div>
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<div id="text"> <div id="text">
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a><br/> <a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a><br/>
<span id="status"></span> <span id="status"></span>

9
index.js
View file

@ -24,7 +24,7 @@ function init() {
statusbar.innerHTML = "connecting..." statusbar.innerHTML = "connecting..."
if ("WebSocket" in window){ if ("WebSocket" in window){
init_drawing(ballscreen, drawStart, drawMove, drawEnd, drawRemove); init_drawing(svgscreen, drawStart, drawMove, drawEnd, drawRemove);
websocket = init_websocket(statusbar, onOpen, onMessage); websocket = 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>!';
@ -101,6 +101,9 @@ function updateLines(lines){
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--) {
var current = addLine(lines[i], svgscreen); var current = addLine(lines[i], svgscreen);
current.addEventListener('click', function () {
console.log('CLICKED');
});
if(lines[i].line_kind == 0){ if(lines[i].line_kind == 0){
current.setAttribute('class', "guitar"); current.setAttribute('class', "guitar");
} else { } else {
@ -125,6 +128,10 @@ function drawMove(line){
function drawEnd(line){ function drawEnd(line){
drawRemove(line); drawRemove(line);
var dx = line.end_point.x - line.starting_point.x;
var dy = line.end_point.y - line.starting_point.y;
if(dx*dx + dy*dy < 100) return;
line.line_kind = line_kind; line.line_kind = line_kind;
var packet = { var packet = {
command: 'add line', command: 'add line',