diff --git a/app.js b/app.js
index b0e9fab513583fd79818a4d2af5ebfca61ce5ffa..4fac3e93edbd26acdd9c2dc1f0a81ff306e05f68 100644
--- a/app.js
+++ b/app.js
@@ -41,7 +41,7 @@ setInterval(function(){
}, speed);
*/
setInterval(function(){
- io.sockets.emit('click', getStepPos());
+ io.sockets.emit('metronome', getStepPos());
}, (60000 / bpm)/4);
function getStepPos(){
diff --git a/index.html b/index.html
index 193e7e97f2f1aa1dcccced65ac1893409c4db50a..c6dc5b6d1250ed9418248280ab6336da4b26b147 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,19 @@
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
-
+ <link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
<style type="text/css">
+
+ body{
+ margin-top:120px;
+ background-color:#1c1a1a;
+ font-family: 'Codystar', cursive;
+ color:#9d0000;
+ }
+
#container{
width:500px;
+ margin:auto;
}
.beatIndicator{
@@ -19,11 +28,11 @@
}
.beatIndicator.inactive{
- background-color:white;
+ background-color:#303030;
}
.beatIndicator.active{
- background-color:red;
+ background-color:#9d0000;
}
@@ -31,7 +40,41 @@
width:20px!important;
}
.four{
- background-color:grey!important;
+ background-color:#3f0e0e!important;
+ }
+
+ input[type=checkbox].css-checkbox {
+ position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
+ }
+
+ input[type=checkbox].css-checkbox + label.css-label {
+ padding-left:20px;
+ height:20px;
+ display:inline-block;
+ line-height:20px;
+ background-repeat:no-repeat;
+ background-position: 0 0;
+ font-size:20px;
+ vertical-align:middle;
+ cursor:pointer;
+
+ }
+
+ input[type=checkbox].css-checkbox:checked + label.css-label {
+ background-position: 0 -20px;
+ }
+ label.css-label {
+ background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png);
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ td{
+ vertical-align: middle!important;
}
</style>
@@ -43,11 +86,8 @@
$(function(){
- /*
- ** SOUNDS
- */
- //var bd = $("#bd")[0];
+ // generate graphics
generateSteps();
var iosocket = io.connect();
@@ -55,7 +95,8 @@
});
- iosocket.on('click', function(serverStepPos){
+ // metronome
+ iosocket.on('metronome', function(serverStepPos){
stepPos = serverStepPos;
advanceStep(serverStepPos);
playSound();
@@ -88,11 +129,16 @@
if(i<4){
$('#steps').append('<tr class="row" id="row'+i+'">');
for(var j = 0; j < 16; j++){
- if(j%4==0){
- $('#row'+i).append('<td class="four"><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');
+ //if(j%4==0){
+ $('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+ if(j%4==0){
+ $('#td'+j+i).addClass('four');
+ }
+ /*
}else{
- $('#row'+i).append('<td><input class="checkbox step'+j+' row'+i+'" type="checkbox"/></td>');
- }
+ $('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+ }
+ */
}
$('#row'+i).append(
@@ -113,7 +159,7 @@
'<option value="snare">Snare</option>'+
'</select>'
);
- $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="2" step=".1" name="power" list="powers">');
+ $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="powers">');
$('#steps').append('</div>');
}else{
@@ -146,6 +192,7 @@
</script>
</head>
<body>
+ <center><h1>JDRUMMER XPRIENCE</h1></center>
<div id="container">
<table id="steps">
</table>