From 7ba96c6b7df51f0adc630f404db4d23226424793 Mon Sep 17 00:00:00 2001 From: Jonas Blumer <jonas.blumer@entwicklungspark.com> Date: Fri, 27 Nov 2015 11:52:17 +0100 Subject: [PATCH] moved client js and css to separate files --- index.html | 225 +---------------------------------------------------- 1 file changed, 2 insertions(+), 223 deletions(-) diff --git a/index.html b/index.html index a35414f..1f6629e 100644 --- a/index.html +++ b/index.html @@ -2,231 +2,10 @@ <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> + <script src="client.js"></script> <link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'> - <style type="text/css"> + <link rel="stylesheet" type="text/css" href="style.css"> - 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%; - } - - </style> - - <script> - - - 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) - } - - - - - </script> </head> <body> <center><h1>JDRUMMER XPRIENCE</h1></center> -- GitLab