Town Tune Editor Changes

Stuff in ignore file:
Now ignores .mp3

Stuff in css file:
Modified width of pitch boxes so the text was more centered
Added CSS for range sliders (to color the actual slider thumb later)

Stuff in editor js file:
Now makes the pitch box be the note color
Modified default tune to match new notes
Changed flash color to white
Added function to get hex color from pitch

Stuff in player js file:
Changed available pitches
Fixed typo

.gitignore

@@ -43,3 +43,4 @@ Temporary Items
 .apdisk
 Animal-Crossing-Music-Extension.zip
 *.ogg
+*.mp3

tune_editor.css

@@ -10,6 +10,7 @@
 
 .pitch-name {
   text-align: center;
+  width: 40px;
 }
 
 .pitch-slider {
@@ -18,5 +19,24 @@
   height: 75px;
 }
 
+input[type="range"].pitch-slider{
+    -webkit-appearance: none;
+    transform:rotate(-90deg);
+	margin: 40px -20px;
+	width: 75px;
+	height: 3px;
+    background-color: #e3ddd8; 
+}
+
+input[type="range"]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	background-color: #F0F0E1;
+	border: 1px solid #BFBFBF;
+	width: 10px;
+	height: 20px;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
 .staff {
 }

tune_editor.js

@@ -1,10 +1,12 @@
 (function(){
 var pitchTemplate, playButton, saveButton, tune;
-var defaultTune = ["G2", "E3", "=", "G2", "F2", "D3", "=", "B2", "C3", "-", "C2", "-", "C2", "=", "=", "-"];
+var defaultTune = ["G2", "E3", "-", "G2", "F2", "D3", "zZz", "B2", "C3", "zZz", "C2", "zZz", "C2", "-", "zZz", "zZz"];
 var tuneLength = 16;
+var availableColors = ["#a4a2d0", "#e4b3d3", "#5eccf5", "#12fee0", "#53fd8a", "#79fc4e", "#a8fd35", "#d0fe47", 
+									"#e4fd39", "#f9fe2e", "#fefa43", "#fef03f", "#fcd03a", "#fcb141", "#fe912e"];
 var editorControls = [];
 var pitchNames = [];
-var flashColor = '#FFBC70';
+var flashColor = '#FFFFFF';
 var audioContext = new AudioContext;
 var booper = createBooper(audioContext);
 var sampler = createSampler(audioContext);
@@ -20,7 +22,7 @@ var createPitchControl = function(index) {
   pitch.className = 'pitch';
   pitch.id = 'pitch' + index;
 
-  name.value = tune[index];
+  name.value = tune[index];  
 
   name.onchange = function() {
     var val = name.value.toUpperCase();
@@ -65,6 +67,8 @@ var initControls = function() {
     newPitchControl = createPitchControl(index);
     staff = (index < tuneLength/2) ? staff1 : staff2;
     staff.appendChild(newPitchControl);
+
+	updateColor(index, tune[index]);
   }
 
   playButton.onclick = playTune;
@@ -92,7 +96,7 @@ var flashName = function(index, duration) {
   pitchName.style.background = flashColor;
 
   setTimeout(function() {
-    pitchName.style.background = '#fff';
+	updateColor(index, tune[index]);
   }, duration * 1000);
 };
 
@@ -123,9 +127,15 @@ var setup = function() {
   retrieveTune(initControls);
 };
 
+var updateColor = function(index, pitch){
+  var pitchName = pitchNames[index];
+  pitchName.style.background = availableColors[availablePitches.indexOf(pitch)];
+}
+
 var updateTune = function(index, pitch) {
   tune[index] = pitch;
   booper.playNote(pitch);
+  updateColor(index, pitch);
 };
 
 window.addEventListener('load', setup);

tune_player.js

@@ -1,6 +1,5 @@
 (function() {
-  var availablePitches = ['-', '=', 'G1', 'A1', 'B1', 'C2', 'D2', 'E2', 'F2', 'G2', 'A2', 'B2', 'C3', 'D3', 'E3'];
-
+  var availablePitches = ['zZz', '-', 'G1', 'A1', 'B1', 'C2', 'D2', 'E2', 'F2', 'G2', 'A2', 'B2', 'C3', 'D3', 'E3'];
 
 var createBooper = function(audioContext) {
   //values in HZ
@@ -178,7 +177,7 @@ var createTunePlayer = function(audioContext, bpm) {
       instrument.playNote(pitch, audioContext.currentTime + time, sustainDuration);
     }
 
-    //jQuery stlye chain callbacks
+    //jQuery style chain callbacks
     callbacks = {
       eachNote: function(callback) {
         eachNote = callback;