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>