Skip to content
Snippets Groups Projects
Commit 7ba96c6b authored by Jonas Blumer's avatar Jonas Blumer
Browse files

moved client js and css to separate files

parent 727c16fb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 2 additions and 223 deletions
index.html
+ 2
− 223
View file @ 7ba96c6b
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment