diff --git a/index.html b/index.html
index a35414f1c3147c3adb0ce741d84fe7c47ffc2d4d..1f6629ebc5d1961a8b82f4bb66275d7de4a8da37 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>