From 22faac2277ae366d3c7296a9b69e24d3c73ae84e Mon Sep 17 00:00:00 2001
From: Jonas Blumer <jonas.blumer@entwicklungspark.com>
Date: Fri, 27 Nov 2015 12:53:08 +0100
Subject: [PATCH] added hear the world

---
 app.js           |  13 ++-
 index.html       |   1 +
 public/client.js | 242 +++++++++++++++++++++++++----------------------
 public/style.css | 148 ++++++++++++++---------------
 4 files changed, 218 insertions(+), 186 deletions(-)

diff --git a/app.js b/app.js
index e594b21..aae168a 100644
--- a/app.js
+++ b/app.js
@@ -24,19 +24,29 @@ app.get('/', function(req, res){
 });
 
 io.on('connection', function(socket){
+
+    io.sockets.emit('updateUserCount', Object.keys(io.engine.clients).length);
+    socket.on('disconnect', function(){
+      io.sockets.emit('updateUserCount', Object.keys(io.engine.clients).length);
+    });
   	console.log('a user connected');
   	socket.on('bpm', function(newBpm){
       bpm = newBpm;
       clearInterval(metronome);
       metronome = generateMetronome(bpm, metronome);
       io.sockets.emit('setBpmSlider', bpm);
-	});
+	  });
     io.sockets.emit('setBpmSlider', bpm);
 
+    socket.on('playSound', function(data){
+      socket.broadcast.emit('playExternalSound', data);
+    });
 });
 
 
 
+
+
 /*
 setInterval(function(){
   	io.sockets.emit('rand', Math.floor(Math.random() * 3));
@@ -66,3 +76,4 @@ function getStepPos(){
 }
 
 
+
diff --git a/index.html b/index.html
index 1f6629e..5ed045b 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
         <table id="steps">
         </table>
         <input type="range" id="bpm" min="100" max="180" value="120" step="1" name="bpm" list="bpm">
+        <input type="checkbox" class="css-checkbox checkbox" id="hearTheWorld" style="color:#3d3d3d"/> <label for="hearTheWorld" class="css-label" style="padding-left:30px;">hear the world! <span id="userCount"></span></label>
     </div>
 <br />
 <audio id="bd" preload="auto">
diff --git a/public/client.js b/public/client.js
index 39fb694..71e2a3d 100644
--- a/public/client.js
+++ b/public/client.js
@@ -1,123 +1,143 @@
 var stepPos = 0;
        
+var iosocket = io.connect();
 
-        $(function(){
-            // generate graphics
-            generateSteps();
-
-            var iosocket = io.connect();
-            iosocket.on('connect', function () {
-
-            }); 
-
-            // metronome
-            iosocket.on('metronome', function(serverStepPos){
-                stepPos = serverStepPos;
-                advanceStep(stepPos);
-                playSound();
-            });
-
-            // if bpm changes from other client, update slider pos here
-            iosocket.on('setBpmSlider', function(newSliderVal){
-                $('#bpm').val(newSliderVal);
-                console.log(newSliderVal);
-            });
-            
-            // send bpm change to server
-            $( "#bpm" ).change(function() {
-                iosocket.emit('bpm', $(this).val());
-            });
-        });
-
-
-        function advanceStep(serverStepPos){
-        /*           
-            if(stepPos >= 16){
-               stepPos = 0;
-            }
-        */  
-            $('.step'+serverStepPos).removeClass('inactive').addClass('active');
-               
-            for(var i = 0; i < 16; i++){
-                if(i != serverStepPos){
-                    $('.step'+i).removeClass('active').addClass('inactive');
-                }
-            }
-        //   stepPos++;
-        }
+
+$(function(){
+    // generate graphics
+    generateSteps();
+
+    
+    iosocket.on('connect', function () {
+
+    }); 
+
+    // metronome
+    iosocket.on('metronome', function(serverStepPos){
+        stepPos = serverStepPos;
+        advanceStep(stepPos);
+        playSound();
+    });
+
+    // if bpm changes from other client, update slider pos here
+    iosocket.on('setBpmSlider', function(newSliderVal){
+        $('#bpm').val(newSliderVal);
+        console.log(newSliderVal);
+    });
+
+    iosocket.on('playExternalSound', function(data){
+        console.log((data.pitch));
+        playExternalSound(data.sound, parseInt(data.pitch));
         
+    });
+
+    iosocket.on('updateUserCount', function(userCount){
+        $('#userCount').text('(' + userCount + ')');
+    });
+    
+    // send bpm change to server
+    $( "#bpm" ).change(function() {
+        iosocket.emit('bpm', $(this).val());
+    });
+});
+
 
-        function generateSteps(){
-            for (var i = 0; i < 5; i++){
-                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 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 css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
-                        } 
-                        */  
-                        
+function advanceStep(serverStepPos){
+/*           
+    if(stepPos >= 16){
+       stepPos = 0;
+    }
+*/  
+    $('.step'+serverStepPos).removeClass('inactive').addClass('active');
+       
+    for(var i = 0; i < 16; i++){
+        if(i != serverStepPos){
+            $('.step'+i).removeClass('active').addClass('inactive');
+        }
+    }
+//   stepPos++;
+}
+
+
+function generateSteps(){
+    for (var i = 0; i < 5; i++){
+        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 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');
                     }
-                    $('#row'+i).append(
-                        '<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="sounds">');
-
-                    $('#steps').append('</div>');
+                /*
                 }else{
-                    $('#steps').append('<tr>');
-                    for(var j = 0; j < 16; j++){
-                        $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>');
-                    }
-                    $('#steps').append('<tr/>');
-                }
+                    $('#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(
+                '<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="sounds">');
 
-        function playSound(){
-            for (var i = 0; i < 4; i++){
-                if($('.step'+stepPos)[i].checked){
-                    //if(i == 0){
-                        $('body').css('background-color', randomColor());
-                    //}
-                    var sound = $('#row'+i+' select').val();
-                    this[sound].pause();
-                    this[sound].currentTime = 0;
-                    this[sound].playbackRate = $('#pitchRow'+i).val();
-                    //this[sound].doperShift = 100;
-                    this[sound].play();
-                }
+            $('#steps').append('</div>');
+        }else{
+            $('#steps').append('<tr>');
+            for(var j = 0; j < 16; j++){
+                $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>');
             }
+            $('#steps').append('<tr/>');
+        }
+    }
+}
+
+function playSound(){
+    for (var i = 0; i < 4; i++){
+        if($('.step'+stepPos)[i].checked){
+            $('body').css('background-color', randomColor());
+            var sound = $('#row'+i+' select').val();
+            this[sound].pause();
+            this[sound].currentTime = 0;
+            this[sound].playbackRate = $('#pitchRow'+i).val();
+            this[sound].play();
+            iosocket.emit('playSound', {pitch: $('#pitchRow'+i).val(), sound: sound});
         }
+    }
+}
+
+function playExternalSound(sound, pitch){
+
+    if($('#hearTheWorld').is(":checked") ? true : false){
+        this[sound].pause();
+        this[sound].currentTime = 0;
+        this[sound].playbackRate = pitch;
+        this[sound].play();
+    }
+}
 
-        function randomColor(){
-            var value = Math.random() * 0xFF | 0;
-            var grayscale = (value << 16) | (value << 8) | value;
-            var color = '#' + grayscale.toString(16);
-            return color;
-            //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
-            //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)
-        }
\ No newline at end of file
+function randomColor(){
+    var value = Math.random() * 0xFF | 0;
+    var grayscale = (value << 16) | (value << 8) | value;
+    var color = '#' + grayscale.toString(16);
+    return color;
+    //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
+    //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 7697c97..27f678d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,89 +1,89 @@
 
-        body{
-            margin-top:120px;
-            background-color:#1c1a1a;
-            font-family: 'Codystar', cursive;
-            color:#9d0000;
-        }
+body{
+    margin-top:120px;
+    background-color:#1c1a1a;
+    font-family: 'Codystar', cursive;
+    color:#9d0000;
+}
 
-        #container{
-            width:500px;
-            margin:auto;
-        }
+#container{
+    width:500px;
+    margin:auto;
+}
 
-        .beatIndicator{
-            border: 1px solid black;
-            width: 8px;
-            height: 8px;
-            margin-right:8px;
-            margin-left:8px;
-            border-radius: 5px;
-            float: left;
-        }
+.beatIndicator{
+    border: 1px solid black;
+    width: 8px;
+    height: 8px;
+    margin-right:8px;
+    margin-left:8px;
+    border-radius: 5px;
+    float: left;
+}
 
-        .beatIndicator.inactive{
-            background-color:#303030;
-        }
+.beatIndicator.inactive{
+    background-color:#303030;
+}
 
-        .beatIndicator.active{
-            background-color:#9d0000;
-        }
+.beatIndicator.active{
+    background-color:#9d0000;
+}
 
 
-        .checkbox{
-            width:20px!important;
-        }
-        .four{
-            background-color:#3f0e0e!important;
-        }
+.checkbox{
+    width:20px!important;
+}
+.four{
+    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 {
+    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 + 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;
-        }
+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;
-        }
+td{
+    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;
+.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%;
-        }
+#bpm{
+    width:100%;
+}
-- 
GitLab