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