From e5faab223a50e4e5e58db867358385220c349d54 Mon Sep 17 00:00:00 2001 From: Jonas Blumer <jonas.blumer@entwicklungspark.com> Date: Fri, 27 Nov 2015 11:53:18 +0100 Subject: [PATCH] moved client js and css to separate files --- public/client.js | 123 +++++++++++++++++++++++++++++++++++++++++++++++ public/style.css | 89 ++++++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 public/client.js create mode 100644 public/style.css diff --git a/public/client.js b/public/client.js new file mode 100644 index 0000000..39fb694 --- /dev/null +++ b/public/client.js @@ -0,0 +1,123 @@ +var stepPos = 0; + + + $(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 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>'); + } + */ + + } + $('#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/>'); + } + } + } + + 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(); + } + } + } + + 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 new file mode 100644 index 0000000..7697c97 --- /dev/null +++ b/public/style.css @@ -0,0 +1,89 @@ + + body{ + margin-top:120px; + background-color:#1c1a1a; + font-family: 'Codystar', cursive; + color:#9d0000; + } + + #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.inactive{ + background-color:#303030; + } + + .beatIndicator.active{ + background-color:#9d0000; + } + + + .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 + 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; + } + + .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%; + } -- GitLab