background spastics and bpm control plus styled dropdowns

app.js

@@ -7,6 +7,12 @@ var port = (process.env.PORT || 5000);
 var bpm = 120;
 var stepPos = 0;
 
+var metronome = null;
+metronome = setInterval(function(){ 
+                io.sockets.emit('metronome', getStepPos());
+              }, (60000 / bpm)/4);
+
+
 http.listen(port, function() {
     console.log('Listening on port: '+port);
 });
@@ -19,9 +25,12 @@ app.get('/', function(req, res){
 
 io.on('connection', function(socket){
   	console.log('a user connected');
-  	//socket.on('move', function(keycode){
-		//socket.broadcast.emit('updatePlayer', keycode);
-	//});
+  	socket.on('bpm', function(newBpm){
+      bpm = newBpm;
+      clearInterval(metronome);
+      metronome = generateMetronome(newBpm, metronome);
+      io.sockets.emit('setBpmSlider', newBpm);
+	});
 	/*
   socket.on('lose', function(){
 		
@@ -40,9 +49,18 @@ setInterval(function(){
   	
   }, speed);
 */
-setInterval(function(){ 
-    io.sockets.emit('metronome', getStepPos());
-}, (60000 / bpm)/4);
+
+function generateMetronome(newBpm, oldMetronome){
+  clearInterval(oldMetronome);
+  oldMetronome = null;
+  
+  return setInterval(function(){ 
+                io.sockets.emit('metronome', getStepPos());
+                console.log(newBpm);
+              }, (60000 / newBpm)/4);
+
+
+}
 
 function getStepPos(){
     if(stepPos >= 16){

index.html

@@ -77,6 +77,23 @@
             vertical-align: middle!important;
         }
 
+        .styled-select select {
+           background: #303030;
+           color:#d3d3d3;
+           padding: 5px;
+           font-size: 16px;
+           line-height: 1;
+           border: 0;
+           border-radius: 5px;
+           height: 25px;
+           -webkit-appearance: none;
+
+        }
+
+        #bpm{
+            width:100%;
+        }
+
     </style>
 
     <script>
@@ -86,7 +103,6 @@
        
 
         $(function(){
-
             // generate graphics
             generateSteps();
 
@@ -98,12 +114,19 @@
             // metronome
             iosocket.on('metronome', function(serverStepPos){
                 stepPos = serverStepPos;
-                advanceStep(serverStepPos);
+                advanceStep(stepPos);
                 playSound();
             });
 
-
-//                iosocket.emit('move', e.keyCode);
+            // if bpm changes from other client, update slider pos here
+            iosocket.on('setBpmSlider', function(newSliderVal){
+                $('#bpm').val(newSliderVal);
+            });
+            
+            // send bpm change to server
+            $( "#bpm" ).change(function() {
+                iosocket.emit('bpm', $(this).val());
+            });
         });
 
 
@@ -142,24 +165,26 @@
                         
                     }
                     $('#row'+i).append(
-                        '<select>'+
-                            '<option value="bd">Kick</option>'+
-                            '<option value="cowbell">Cowbell</option>'+
-                            '<option value="cymbal">Cymbal</option>'+
-                            '<option value="glitch">Glitch</option>'+
-                            '<option value="hhc">HiHat Closed</option>'+
-                            '<option value="hho">HiHat Open</option>'+
-                            '<option value="ht">Tom High</option>'+
-                            '<option value="mt">Tom Medium</option>'+
-                            '<option value="lt">Tom Low</option>'+
-                            '<option value="perch">Percussion High</option>'+
-                            '<option value="percl">Percussion Low</option>'+
-                            '<option value="rim">Rimshot</option>'+
-                            '<option value="shaker">Shaker</option>'+
-                            '<option value="snare">Snare</option>'+
-                        '</select>'
+                        '<div class="styled-select">'+
+                            '<select>'+
+                                '<option value="bd">Kick</option>'+
+                                '<option value="cowbell">Cowbell</option>'+
+                                '<option value="cymbal">Cymbal</option>'+
+                                '<option value="glitch">Glitch</option>'+
+                                '<option value="hhc">HiHat Closed</option>'+
+                                '<option value="hho">HiHat Open</option>'+
+                                '<option value="ht">Tom High</option>'+
+                                '<option value="mt">Tom Medium</option>'+
+                                '<option value="lt">Tom Low</option>'+
+                                '<option value="perch">Percussion High</option>'+
+                                '<option value="percl">Percussion Low</option>'+
+                                '<option value="rim">Rimshot</option>'+
+                                '<option value="shaker">Shaker</option>'+
+                                '<option value="snare">Snare</option>'+
+                            '</select>'+
+                        '</div>'
                      );
-                    $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" 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="sounds">');
 
                     $('#steps').append('</div>');
                 }else{
@@ -175,7 +200,10 @@
         function playSound(){
             for (var i = 0; i < 4; i++){
                 if($('.step'+stepPos)[i].checked){
-                    var sound = $('#row'+i+'>select').val();
+                    //if(i == 0){
+                        $('body').css('background-color', randomColor());
+                    //}
+                    var sound = $('#row'+i+' select').val();
                     console.log(sound);
                     this[sound].pause();
                     this[sound].currentTime = 0;
@@ -186,6 +214,11 @@
             }
         }
 
+        function randomColor(){
+            return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
+            s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)
+        }
+
 
 
 
@@ -196,6 +229,7 @@
     <div id="container">
         <table id="steps">
         </table>
+        <input type="range" id="bpm" min="10" max="240" value="120" step="1" name="bpm" list="bpm">
     </div>
 <br />
 <audio id="bd" preload="auto">